Merge pull request #166 from dderbentsov/UC-90

Добавил приоритет клиента, обработку ввода паспортных данных, фикс чекбокса выбора клиента, Изменил инпуты для даты и ограничил вводимые значения; при наведении на аватар клиента, появляется иконка загрузки

src/components/LoggedInLayout.vue

@@ -4,7 +4,6 @@
       :is-open-form="isOpenForm",
       :close-form="closeForm",
       :open-form="openForm",
-      :current-year="currentYear",
       @update-client="setUpdatedClients"
     )
     .flex.flex-auto
@@ -12,7 +11,6 @@
       router-view(
         :open-form="openForm",
         :is-open-form="isOpenForm",
-        :current-year="currentYear",
         :updated-clients="updatedClients",
         @reset-updated-clients="resetUpdatedClients"
       )
@@ -30,7 +28,6 @@ export default {
   data() {
     return {
       isOpenForm: false,
-      currentYear: null,
       updatedClients: false,
     };
   },
@@ -41,9 +38,6 @@ export default {
     closeForm() {
       this.isOpenForm = false;
     },
-    printCurrentYear() {
-      return new Date().getFullYear();
-    },
     setUpdatedClients() {
       this.updatedClients = true;
     },
@@ -51,8 +45,5 @@ export default {
       this.updatedClients = false;
     },
   },
-  mounted: function () {
-    this.currentYear = this.printCurrentYear();
-  },
 };
 </script>

src/components/TheHeader.vue

@@ -3,7 +3,6 @@
     base-client-form-create(
       v-if="isOpenForm",
       :close-form="closeForm",
-      :current-year="currentYear",
       @update-client="transmitUpdateClient"
     )
     .flex.items-center.box-border.cursor-pointer.mr-auto
@@ -43,7 +42,6 @@ export default {
     openForm: Function,
     closeForm: Function,
     isOpenForm: Boolean,
-    currentYear: Number,
   },
   data() {
     return {

src/components/base/BaseClientFormCreate.vue

@@ -12,7 +12,7 @@
           v-for="img in image"
         )
           .icon-download.text-xl(v-if="img === defaultIcon")
-          .flex.w-10.h-10(v-else)
+          .wrapper-img.flex.w-10.h-10(v-else)
             img.current-avatar(:src="img")
           base-popup.right-5.top-7(v-if="showPopup", :width="230")
             .flex.items-center.gap-x-2
@@ -56,13 +56,11 @@
           :choose-option="chooseOptionNetworks"
           :choose-priority="choosePriority"
           :priority-list="priorityList"
-          :current-year="currentYear"
+        )
-          )
       .flex(:style="{display :'none'}" ref="doc")
         form-create-identity-documents(
           :identity-document="infoClient.identity_document",
-          :save-client="saveClient",
+          :save-client="saveClient"
-          :current-year="currentYear"
         )
       .flex(:style="{display :'none'}" ref="address")
         form-create-addresses(
@@ -109,7 +107,6 @@ export default {
   },
   props: {
     closeForm: Function,
-    currentYear: Number,
   },
   data() {
     return {
@@ -263,15 +260,14 @@ export default {
     },
     postNewClient() {
       const formData = new FormData();
+      formData.append("full_name", this.infoClient.basic.full_name);
       this.imageData.forEach((e) => {
         formData.append("photo", e);
-        formData.append("full_name", this.infoClient.basic.full_name);
       });
       if (this.infoClient.basic.birth_date)
         formData.append("birth_date", this.infoClient.basic.birth_date);
-
       let foundElement = this.prioritySettings.settings.find(
-        (el) => el.text === this.infoClient.basic.priority
+        (el) => el.priority === this.infoClient.basic.priority.id
       );
       if (foundElement) formData.append("priority", foundElement.priority);
       fetchWrapper
@@ -452,4 +448,12 @@ export default {
   background-size: cover
   background-repeat: no-repeat
   background-position: center
+  &:hover
+    display: none
+
+.wrapper-img
+  background-size: 20px
+  background-repeat: no-repeat
+  background-position: center
+  background-image: url(@/assets/icons/download.svg)
 </style>

src/components/base/BaseInputDate.vue

@@ -1,14 +1,16 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(
-    class="py-2.5"
+    class="py-2.5",
     :style="{ minWidth: widthInput + 'px' }"
   )
     input.input.w-full.outline-0.not-italic.date(
-      :value="value"
+      :value="value",
-      type="date"
+      type="date",
-      @input="$emit('update:value', $event.target.value)"
+      @input="$emit('update:value', $event.target.value)",
-      :placeholder="placeholder"
+      :placeholder="placeholder",
-      :maxlength="maxLength"
+      :maxlength="maxLength",
+      max="9999-12-31",
+      min="0000-01-01"
     )
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer

src/pages/clients/TheClients.vue

@@ -2,7 +2,6 @@
   clients-wrapper(
     :open-form="openForm",
     :is-open-form="isOpenForm",
-    :current-year="currentYear",
     :updated-clients="updatedClients",
     @reset-updated-clients="transmitReset"
   )
@@ -15,7 +14,6 @@ export default {
   components: { ClientsWrapper },
   props: {
     openForm: Function,
-    currentYear: Number,
     isOpenForm: Boolean,
     updatedClients: Boolean,
   },

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -68,15 +68,13 @@
             v-model:value="sectionInfo[key]",
             :width="settings[section].width",
             :placeholder="settings[section].placeholder[key]"
+            :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
           )
-          base-input.max-h-10.py-2.pl-3(
+          base-input-date.input(
             v-else-if="isChange && section !== 'docs'",
-            type="date",
             v-model:value="sectionInfo.issued_by_date"
-            :max-date="`${currentYear}-12-31`",
-            dateInput
           )
-            .copy.icon-copy.cursor-pointer(
+             .copy.icon-copy.cursor-pointer(
               v-if="item.copy",
               @click="() => copyValue(item)"
             )
@@ -123,9 +121,9 @@ import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewA
 import TableCreatePackageDoc from "@/pages/clients/components/TableCreatePackageDoc";
 import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
 import TableChoiceAddingDoc from "@/pages/clients/components/TableChoiceAddingDoc";
-import BaseInput from "@/components/base/BaseInput";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
+import BaseInputDate from "@/components/base/BaseInputDate";
 import { detail } from "@/pages/clients/utils/tableConfig";
 import pdfIcon from "@/assets/icons/pdf.svg";
 import wordIcon from "@/assets/icons/word.svg";
@@ -134,7 +132,7 @@ export default {
   name: "ClientDetailInfoSection",
   components: {
     BaseButton,
-    BaseInput,
+    BaseInputDate,
     BasePopup,
     BaseModal,
     ClientDetailInput,
@@ -159,7 +157,6 @@ export default {
     createDocument: Function,
     addressId: String,
     docId: String,
-    currentYear: Number,
   },
   data() {
     return {
@@ -367,4 +364,7 @@ export default {
   width: 38px
   z-index: 1
   background: var(--light-grey-bg-color)
+
+.input
+  border: 1.5px solid var(--border-light-grey-color)
 </style>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -7,7 +7,6 @@
       :lack-data="lackData",
       :create-document="createDocument",
       :doc-id="docId",
-      :current-year="currentYear"
     )
     .flex.flex-col
       client-detail-info-section(
@@ -51,7 +50,6 @@ export default {
     createDocument: Function,
     addressId: String,
     docId: String,
-    currentYear: Number,
   },
 };
 </script>

src/pages/clients/components/ClientDetailInput.vue

@@ -1,15 +1,25 @@
 <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.font-medium(
+      v-if="!sharp"
       :rows="Math.ceil(value.length/heightInput)",
       :value="value",
       @input="$emit('update:value', $event.target.value)",
       :placeholder="placeholder",
     )
+    input.place-input.w-full.outline-0.text-sm.not-italic.resize-none.font-medium(
+      v-else,
+      :rows="Math.ceil(value.length/heightInput)",
+      :value="value",
+      @input="$emit('update:value', $event.target.value)",
+      :placeholder="placeholder",
+      v-mask="sharp"
+    ) 
     slot
 </template>
 
 <script>
+import { mask } from "vue-the-mask";
 export default {
   name: "ClientDetailInput",
   props: {
@@ -20,7 +30,7 @@ export default {
       default: "Поиск",
     },
   },
-
+  directives: { mask },
   computed: {
     heightInput() {
       return ((this.width / 100) * 70) / 11;

src/pages/clients/components/ClientsTable.vue

@@ -16,7 +16,6 @@
           :check="selectedCheck",
           :client="client",
           :fetch-data-clients="fetchDataClients",
-          :current-year="currentYear",
           @update-clients="updateDataClient"
         )
     client-table-pagination(
@@ -48,7 +47,6 @@ export default {
   },
   props: {
     openForm: Function,
-    currentYear: Number,
     isOpenForm: Boolean,
     updatedClients: Boolean,
   },

src/pages/clients/components/ClientsTableCheckbox.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  input.checkbox.cursor-pointer(type="checkbox" :id="id" :checked="isCheck" @change="(e) => check(e)")
+  input.checkbox.cursor-pointer(type="checkbox" :id="id" :checked="isCheck" @click.stop @change="(e) => check(e)")
 </template>
 
 <script>

src/pages/clients/components/ClientsTableRow.vue

@@ -85,7 +85,6 @@
       :create-document="postCreateIdentityDocument"
       :address-id="addressId"
       :doc-id="docId"
-      :current-year="currentYear"
     )
 </template>
 
@@ -153,7 +152,6 @@ export default {
     check: Function,
     isCheck: Boolean,
     client: Object,
-    currentYear: Number,
   },
   created() {
     this.dataClient = {

src/pages/clients/components/ClientsWrapper.vue

@@ -3,7 +3,6 @@
     clients-table(
       :open-form="openForm",
       :is-open-form="isOpenForm",
-      :current-year="currentYear",
       :updated-clients="updatedClients",
       @reset-updated-clients="transmitReset"
     )
@@ -16,7 +15,6 @@ export default {
   components: { ClientsTable },
   props: {
     openForm: Function,
-    currentYear: Number,
     isOpenForm: Boolean,
     updatedClients: Boolean,
   },

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -10,18 +10,16 @@
         )
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Дата рождения
-        base-input.input-info(
+        base-input-date.input-date(
           v-model:value="basicInfo.birth_date",
-          type="date",
+          :width-input="277"
-          placeholder="00.00.0000",
-          :width-input="277",
-          :max-date="`${ currentYear }-12-31`"
         )
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Номер телефона
         base-input.input-info(
           v-model:value="phone.username",
           placeholder="+7 (915) 644–92–23",
+          v-mask="'+7 (###) ###-##-##'",
           :width-input="277"
         )
       .flex.flex-col(class="gap-y-1.5")
@@ -53,13 +51,16 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import { column } from "@/pages/clients/utils/tableConfig";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
+import { mask } from "vue-the-mask";
 export default {
   name: "FormCreateBasicInfo",
   components: {
     BaseInput,
+    BaseInputDate,
     BaseAddingNetwork,
     BaseButton,
     BaseCustomSelect,
@@ -74,8 +75,8 @@ export default {
     basicInfo: Object,
     saveClient: Function,
     addNetwork: Function,
-    currentYear: Number,
   },
+  directives: { mask },
   data() {
     return {
       networks: column.find((el) => el.name === "networks"),
@@ -110,4 +111,6 @@ export default {
   height: 100%
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
 </style>

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -28,12 +28,10 @@
           )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Дата выдачи
-          base-input.input-info(
+          base-input-date.input-date(
-            type="date",
             v-model:value="identityDocument.pass.issued_by_date",
             placeholder="Дата",
-            :width-input="277",
+            :width-input="277"
-            :max-date="`${currentYear}-12-31`"
           )
     .flex.flex-col.gap-y-6.px-4
       span.title-info.text-base.font-bold СНИЛС и ИНН
@@ -62,14 +60,14 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+import BaseInputDate from "@/components/base/BaseInputDate";
 import { mask } from "vue-the-mask";
 export default {
   name: "FormCreateIdentityDocuments",
-  components: { BaseInput, BaseButton },
+  components: { BaseInput, BaseInputDate, BaseButton },
   props: {
     identityDocument: Object,
     saveClient: Function,
-    currentYear: Number,
   },
   directives: { mask },
 };
@@ -93,4 +91,6 @@ export default {
   color: var(--font-dark-blue-color)
 .title-info
   color: var(--font-dark-blue-color)
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
 </style>

src/pages/clients/utils/tableConfig.js

@@ -115,7 +115,7 @@ export const detail = {
     },
     sharps: {
       numba: "#### ######",
-      issued_by_org: "XXXXXX",
+      issued_by_org: "",
       issued_by_org_code: "###-###",
       issued_by_date: "##.##.####",
     },
@@ -157,6 +157,7 @@ export const detail = {
     options: {
       join_adress: "Полный адрес",
     },
+    sharps: { join_adress: "" },
     placeholder: {
       join_adress: "Введите адрес целиком",
     },