Исправил позиционирование всплывающих окон, ограничение года календаря, бордеры сайдбара, фикс карточек ивентов, изменил стили карточки клиента

2022-11-17 16:58:17 +03:00
parent 8f63ef9bea
commit 26dc8b37fa
17 changed files with 153 additions and 62 deletions
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -1,9 +1,14 @@
 <template lang="pug">
 .flex.flex-col.w-full.h-full.gap-y-2
-    the-header(:is-open-form="isOpenForm", :close-form="closeForm", :open-form="openForm")
+    the-header(
+      :is-open-form="isOpenForm",
+      :close-form="closeForm",
+      :open-form="openForm",
+      :current-year="currentYear"
+    )
    .flex.flex-auto
      the-sidebar
-      router-view(:open-form="openForm")
+      router-view(:open-form="openForm", :current-year="currentYear")
 </template>

 <script>
@@ -16,6 +21,7 @@ export default {
  data() {
    return {
      isOpenForm: false,
+      currentYear: null,
    };
  },
  methods: {
@@ -25,6 +31,12 @@ export default {
    closeForm() {
      this.isOpenForm = false;
    },
+    printCurrentYear() {
+      return new Date().getFullYear();
+    },
+  },
+  mounted: function () {
+    this.currentYear = this.printCurrentYear();
  },
 };
 </script>
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,6 +1,10 @@
 <template lang="pug">
  .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
-    base-client-form-create(v-if="isOpenForm", :close-form="closeForm")
+    base-client-form-create(
+      v-if="isOpenForm",
+      :close-form="closeForm",
+      :current-year="currentYear"
+    )
    .flex.items-center.box-border.cursor-pointer.mr-auto
      img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
      header-inputs
@@ -38,6 +42,7 @@ export default {
    openForm: Function,
    closeForm: Function,
    isOpenForm: Boolean,
+    currentYear: Number,
  },
  data() {
    return {
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,10 +1,23 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(
+    :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
+  )
    .flex.flex-col.gap-y-6
-      the-button-sidebar( v-for="button in pageSettings.filter((el) => el.id !== 'settings')" :path="button.path" :id="button.id" :active="button.active" :change-style-page="changeStylePage")
+      the-button-sidebar(
+        v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
+        :path="button.path",
+        :id="button.id",
+        :active="button.active",
+        :change-style-page="changeStylePage"
+      )
        .icon(:class="button.icon")
    .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(:path="getSettings.path" :id="getSettings.id" :active="getSettings.active" :change-style-page="changeStylePage")
+      the-button-sidebar(
+        :path="getSettings.path",
+        :id="getSettings.id",
+        :active="getSettings.active",
+        :change-style-page="changeStylePage"
+      )
        .icon(:class="getSettings.icon")
 </template>

@@ -36,6 +49,7 @@ export default {
          active: false,
        },
      ],
+      currenPageBorder: true,
    };
  },
  methods: {
@@ -46,6 +60,9 @@ export default {
          : (this.pageSettings[index].active = false);
      });
    },
+    changePage() {
+      console.log(this.$router.currentRoute._value.fullPath);
+    },
  },
  computed: {
    getSettings() {
@@ -60,6 +77,13 @@ export default {
        : (this.pageSettings[index].active = false);
    });
  },
+  watch: {
+    "$route.path"() {
+      if (this.$router.currentRoute._value.fullPath === "/calendar") {
+        this.currenPageBorder = true;
+      } else this.currenPageBorder = false;
+    },
+  },
 };
 </script>

@@ -68,7 +92,6 @@ export default {
  max-width: 80px
  min-width: 80px
  background-color: var(--default-white)
-  border-top-right-radius: 4px
 .icon
  min-width: 44px
 </style>
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-0.bottom-4.px-4.py-7.gap-y-8
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.py-7.gap-y-8
    .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
    span.title.text-xl.font-bold.px-4 Создание клиента
    .flex.gap-x-4.h-fit.px-4
@@ -65,6 +65,7 @@ export default {
  },
  props: {
    closeForm: Function,
+    currentYear: Number,
  },
  data() {
    return {
@@ -165,7 +166,6 @@ export default {
          label: "-",
        },
      ],
-      currentYear: 2022,
    };
  },
  computed: {
@@ -287,19 +287,13 @@ export default {
      }
      return true;
    },
-    printCurrentYear() {
-      return new Date().getFullYear();
-    },
-  },
-  mounted: function () {
-    this.currentYear = this.printCurrentYear();
  },
 };
 </script>

 <style lang="sass" scoped>
 .wrapper-create
-  z-index: 1
+  z-index: 5
  background-color: var(--default-white)
  border-radius: 4px
  width: 634px
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-    :class="{'border-none': borderNone}",
+    :class="{'border-none': borderNone, 'date-input': dateInput}",
    :style="{ minWidth: widthInput + 'px' }"
  )
    input.input.w-full.outline-0.not-italic(
@@ -39,6 +39,7 @@ export default {
    borderNone: Boolean,
    disabled: Boolean,
    maxDate: String,
+    dateInput: Boolean,
  },
 };
 </script>
@@ -61,4 +62,7 @@ export default {
  border: none
 .input
  background-color: inherit
+.date-input
+  // padding: 8px 12px
+  // max-height: 40px
 </style>
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -247,6 +247,7 @@ export default {
  height: 23px

 .default-theme
+  z-index: 0
  .card
    background-color: var(--bg-color)
    border: 2px solid var(--border-color)
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-0.bottom-4(v-click-outside="clearForm")
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6(
+    v-click-outside="clearForm"
+  )
    .flex.justify-between
      span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}}
      .flex.pt-2
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -367,8 +367,8 @@ export default {
 <style lang="sass" scoped>
 .schedule
  border-top-left-radius: 4px
+  border-top-right-radius: 4px
  position: relative
-  border-top-left-radius: 4px
  background-color: var(--default-white)
  width: calc(100% - (var(--sidebar-width) + 8px))
  height: calc(100vh - 56px - 8px)
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -21,15 +21,15 @@
        ) Создать событие
        calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
        calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
-      .button-wrapper.flex.justify-center.mb-23px
-        base-button(
-          left-icon="icon-long-arrow",
-          rounded, :size="40",
-          :icon-left-size="18",
-          secondary,
-          :style="{ transform: `rotate(${turnButton})`}",
-          @click="changeSize"
-        )
+      //- .button-wrapper.flex.justify-center.mb-23px
+      //-   base-button(
+      //-     left-icon="icon-long-arrow",
+      //-     rounded, :size="40",
+      //-     :icon-left-size="18",
+      //-     secondary,
+      //-     :style="{ transform: `rotate(${turnButton})`}",
+      //-     @click="changeSize"
+      //-   )
 </template>

 <script>
@@ -88,6 +88,9 @@ export default {
 </script>

 <style lang="sass" scoped>
+.sidebar
+  border-top-right-radius: 4px
+
 .sidebar-wrapper
  border-left: 2px solid var(--btn-blue-color-3)

--- a/src/pages/clients/TheClients.vue
+++ b/src/pages/clients/TheClients.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  clients-wrapper(:open-form="openForm")
+  clients-wrapper(:open-form="openForm", :current-year="currentYear")
 </template>

 <script>
@@ -9,6 +9,7 @@ export default {
  components: { ClientsWrapper },
  props: {
    openForm: Function,
+    currentYear: Number,
  },
 };
 </script>
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
-    :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}"
+    :style="{flexDirection:settings[section].rowFlex && 'row', width : settings[section].width + 'px', height : settings[section].height + 'px', background: changeBackground}"
  )
    .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
      span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
@@ -41,16 +41,24 @@
            :save-additional="saveDocs"
          )
    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(v-if="this.isData || this.isAddress")
-      .flex.flex-col(class="gap-y-1.5")
+      .flex.flex-col.gap-y-4
        .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")
          span.title-section.font-semibold.text-xs(
            v-if="settings[section].options") {{settings[section].options[key]}}
          span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
          client-detail-input.text-sm.text-sm.w-max-fit(
-            v-if="section!=='docs' && isChange",
-            :style="{fontWeight:key === 'numba'&&600}",
+            v-if="section!=='docs' && isChange && settings[section].options[key] !== 'Дата выдачи'",
+            :style="{fontWeight:key === 'numba'&&600, maxHeight: settings[section].options[key] !== 'Выдан' ? '40px' : ''}",
            v-model:value="sectionInfo[key]",
-            :width="settings[section].width"
+            :width="settings[section].width",
+            :placeholder="settings[section].placeholder[key]"
+          )
+          base-input.max-h-10.py-2.pl-3(
+            v-if="settings[section].options[key] === 'Дата выдачи' && isChange",
+            type="date",
+            v-model:value="sectionInfo.issued_by_date"
+            :max-date="`${currentYear}-12-31`",
+            dateInput
          )
            .copy.icon-copy.cursor-pointer(
              v-if="item.copy",
@@ -95,12 +103,14 @@ import BaseButton from "@/components/base/BaseButton";
 import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
 import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
 import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
+import BaseInput from "@/components/base/BaseInput";
 import { detail } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "ClientDetailInfoSection",
  components: {
    TableAddingNewAdditional,
    BaseButton,
+    BaseInput,
    ClientDetailInput,
    TableAddingNewDoc,
    ClientDetailSectionAddress,
@@ -119,9 +129,11 @@ export default {
    createDocument: Function,
    addressId: String,
    docId: String,
+    currentYear: Number,
  },
  data() {
    return {
+      tip: "text",
      additionalData: {
        header: "",
        value: "",
@@ -141,6 +153,13 @@ export default {
      isAddress: true,
    };
  },
+  computed: {
+    changeBackground() {
+      return this.isChange
+        ? "var(--light-grey-bg-color)"
+        : "var(--default-white)";
+    },
+  },
  methods: {
    openAddDoc() {
      this.isChange = true;
@@ -271,5 +290,5 @@ export default {
 .text-separation
  width: 38px
  z-index: 1
-  background: white
+  background: var(--light-grey-bg-color)
 </style>
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue
@@ -1,28 +1,29 @@
 <template lang="pug">
  .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
    client-detail-info-section(
-      v-model:section-info="dataDocument"
-      section="pass"
-      :update-document="updateDocument"
-      :lack-data="lackData"
-      :create-document="createDocument"
-      :doc-id="docId"
+      v-model:section-info="dataDocument",
+      section="pass",
+      :update-document="updateDocument",
+      :lack-data="lackData",
+      :create-document="createDocument",
+      :doc-id="docId",
+      :current-year="currentYear"
    )
    .flex.flex-col
      client-detail-info-section(
-        :section-info="dataAddress"
-        section="addresses"
-        :update-address="updateAddress"
-        :lack-address="lackAddress"
-        :dope-address="dopeAddress"
-        :create-address="createAddress"
+        :section-info="dataAddress",
+        section="addresses",
+        :update-address="updateAddress",
+        :lack-address="lackAddress",
+        :dope-address="dopeAddress",
+        :create-address="createAddress",
        :address-id="addressId"
      )
    .flex.flex-col
      client-detail-info-section(
-        :section-info="dataAttachments"
-        section="docs"
-        :save-new-doc="saveNewDoc"
+        :section-info="dataAttachments",
+        section="docs",
+        :save-new-doc="saveNewDoc",
        :delete-doc="deleteDoc"
      )
 </template>
@@ -48,6 +49,7 @@ export default {
    createDocument: Function,
    addressId: String,
    docId: String,
+    currentYear: Number,
  },
 };
 </script>
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -1,9 +1,10 @@
 <template lang="pug">
  .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
-    textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none(
-      :rows="Math.ceil(value.length/heightInput)"
-      :value="value"
-      @input="$emit('update:value', $event.target.value)"
+    textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none.font-medium(
+      :rows="Math.ceil(value.length/heightInput)",
+      :value="value",
+      @input="$emit('update:value', $event.target.value)",
+      :placeholder="placeholder",
    )
    slot
 </template>
@@ -15,6 +16,9 @@ export default {
    value: String,
    width: Number,
    sharp: String,
+    placeholder: {
+      default: "Поиск",
+    },
  },

  computed: {
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -5,13 +5,14 @@
      clients-table-header(:check="selectedCheck" :is-check="selectAll")
      .flex.flex-col
        clients-table-row(
-          v-for="client in dataClients"
-          :key="client.id"
-          :id="client.id"
-          :is-check="marked.includes(client.id)"
-          :check="selectedCheck"
-          :client="client"
-          :fetch-data-clients="fetchDataClients"
+          v-for="client in dataClients",
+          :key="client.id",
+          :id="client.id",
+          :is-check="marked.includes(client.id)",
+          :check="selectedCheck",
+          :client="client",
+          :fetch-data-clients="fetchDataClients",
+          :current-year="currentYear"
          )
 </template>

@@ -33,6 +34,7 @@ export default {
  },
  props: {
    openForm: Function,
+    currentYear: Number,
  },

  data() {
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -82,6 +82,7 @@
      :create-document="postCreateIdentityDocument"
      :address-id="addressId"
      :doc-id="docId"
+      :current-year="currentYear"
    )
 </template>

@@ -149,6 +150,7 @@ export default {
    isCheck: Boolean,
    client: Object,
    fetchDataClients: Function,
+    currentYear: Number,
  },
  created() {
    this.dataClient = {
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .wrapper.flex.w-full.relative.mx-6
-    clients-table(:open-form="openForm")
+    clients-table(:open-form="openForm", :current-year="currentYear")
 </template>

 <script>
@@ -10,6 +10,7 @@ export default {
  components: { ClientsTable },
  props: {
    openForm: Function,
+    currentYear: Number,
  },
 };
 </script>
@@ -17,4 +18,5 @@ export default {
 <style lang="sass" scoped>
 .wrapper
  overflow: auto
+  border-top-left-radius: 4px
 </style>
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -119,6 +119,12 @@ export const detail = {
      issued_by_org_code: "###-###",
      issued_by_date: "##.##.####",
    },
+    placeholder: {
+      numba: "0000 000000",
+      issued_by_org: "Точно как в паспорте",
+      issued_by_org_code: "000-000",
+      issued_by_date: "Дата",
+    },
    width: 280,
  },
  snils: {
@@ -126,6 +132,9 @@ export const detail = {
    options: {
      numba: "Номер",
    },
+    placeholder: {
+      numba: "000-000-000 00",
+    },
    width: 180,
  },
  inn: {
@@ -133,6 +142,9 @@ export const detail = {
    options: {
      numba: "Номер",
    },
+    placeholder: {
+      numba: "000000000000",
+    },
    width: 180,
  },
  birthday: {
@@ -145,6 +157,9 @@ export const detail = {
    options: {
      join_adress: "Полный адрес",
    },
+    placeholder: {
+      join_adress: "Введите адрес целиком",
+    },
    width: 292,
  },
  docs: {