Merge pull request #125 from dderbentsov/UC-56

Добавил состояние отсутствующих данных, дополнительную форму адресов, исправил стили

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -4,7 +4,7 @@
   )
     .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}}
-      .flex.items-center.gap-x-8
+      .flex.items-center.gap-x-8(v-if="lackPass || lackAddress")
         base-button(
           v-if="isChange",
           @click="saveChange",
@@ -40,49 +40,83 @@
             :add-new-additional="addDocAdditional",
             :save-additional="saveDocs"
           )
-    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
+    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(v-if="lackPass || lackAddress")
-      .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
+      .flex.flex-col(class="gap-y-1.5")
-        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
+        .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")
-        span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
+          span.title-section.font-semibold.text-xs(
-        client-detail-input.text-sm.text-sm.w-max-fit(
+            v-if="settings[section].options") {{settings[section].options[key]}}
-          v-if="section!=='docs' && isChange",
+          span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
-          :style="{fontWeight:key === 'numba'&&600}",
+          client-detail-input.text-sm.text-sm.w-max-fit(
-          v-model:value="sectionInfo[key]",
+            v-if="section!=='docs' && isChange",
-          :width="settings[section].width"
+            :style="{fontWeight:key === 'numba'&&600}",
-          :sharp="settings[section].sharps[key]"
+            v-model:value="sectionInfo[key]",
-        )
+            :width="settings[section].width"
-          .copy.icon-copy.cursor-pointer(
-            v-if="item.copy",
-            @click="() => copyValue(item)"
           )
-        .flex(v-if="settings[section].options && !isChange")
+            .copy.icon-copy.cursor-pointer(
-          span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
+              v-if="item.copy",
-          .copy.icon-copy.cursor-pointer.pl-4(
+              @click="() => copyValue(item)"
-            v-if="key === 'numba'",
+            )
-            @click="() => copyValue(item)"
+          .flex(v-if="settings[section].options && !isChange")
+            span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
+            .copy.icon-copy.cursor-pointer.pl-4(
+              v-if="key === 'numba'",
+              @click="() => copyValue(item)"
+            )
+          .separation.flex.items-center.justify-center.relative.mt-10px.mb(
+            v-if="section === 'addresses' && isChange",
+            class="gap-y-1.5"
           )
-        .flex(v-if="item.name && !isChange")
+            .line.absolute
-          span.text-sm.w-fit {{item.title}}
+            .text-separation.span.text-sm.separator.px-2 или
-        .flex.items-center(v-if="item.title")
+          .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
-          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
+            .flex.flex-col(class="gap-y-1.5")
-            v-if="isChange",
+              .text-info.text-xxs.font-semibold Город
-            :id="item.id",
+              base-select(placeholder="Выберите город")
-            @click="(e) => deleteDoc(e)"
+            .flex.flex-col(class="gap-y-1.5")
-          )
+              .text-info.text-xxs.font-semibold Область
-          span.text-sm {{item.title}}
+              base-input.input-info(placeholder="Введите область")
+            .flex.flex-col(class="gap-y-1.5")
+              .text-info.text-xxs.font-semibold Улица
+              base-input.input-info(placeholder="Введите улицу")
+            .flex.gap-x-4
+              .flex.flex-col(class="gap-y-1.5")
+                .text-info.text-xxs.font-semibold Дом
+                base-input.input-info(placeholder="Дом")
+              .flex.flex-col(class="gap-y-1.5")
+                .text-info.text-xxs.font-semibold Квартира
+                base-input.input-info(placeholder="Квартира")
+            .flex.flex-col(class="gap-y-1.5")
+              .text-info.text-xxs.font-semibold Индекс
+              base-input.input-info(v-mask="'######'", placeholder="000000")
+          .flex(v-if="item.name && !isChange")
+            span.text-sm.w-fit {{item.title}}
+          .flex.items-center(v-if="item.title")
+            .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
+              v-if="isChange",
+              :id="item.id",
+              @click="(e) => deleteDoc(e)"
+            )
+            span.text-sm {{item.title}}
+    .section-add-doc.flex.justify-center.items-center.cursor-pointer(v-else)
+      span Добавить данные
 </template>
 
 <script>
 import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
 import BaseButton from "@/components/base/BaseButton";
+import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";
 import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
 import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
 import { detail } from "@/pages/clients/utils/tableConfig";
+import { mask } from "vue-the-mask";
 export default {
   name: "ClientDetailInfoSection",
   components: {
     TableAddingNewAdditional,
     BaseButton,
+    BaseInput,
+    BaseSelect,
     ClientDetailInput,
     TableAddingNewDoc,
   },
@@ -93,7 +127,10 @@ export default {
     deleteDoc: Function,
     updateDocument: Function,
     updateAddress: Function,
+    lackPass: Boolean,
+    lackAddress: Boolean,
   },
+  directives: { mask },
 
   data() {
     return {
@@ -108,6 +145,9 @@ export default {
       isOpenChange: false,
       isChange: false,
       settings: detail,
+      customTokens: {
+        Y: { pattern: /[0-9a-zA-Zа-яёА-ЯЁ ]/u },
+      },
     };
   },
   methods: {
@@ -197,4 +237,23 @@ export default {
   color: var(--font-grey-color)
   &:hover
     opacity: 0.6
+.section-add-doc
+  height: 100%
+  min-height: 64px
+  color: var(--btn-blue-color)
+.line
+  width: 100%
+  height: 1px
+  background-color: var(--border-light-grey-color)
+  z-index: 0
+.separation
+  width: 100%
+.text-separation
+  width: 38px
+  z-index: 1
+  background: white
+.input-info
+  color: var(--font-dark-blue-color)
+.text-info
+  color: var(--font-grey-color)
 </style>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -4,12 +4,14 @@
       v-model:section-info="dataDocument"
       section="pass"
       :update-document="updateDocument"
+      :lack-pass="lackPass"
     )
     .flex.flex-col
       client-detail-info-section(
         :section-info="dataAddress"
         section="addresses"
         :update-address="updateAddress"
+        :lack-address="lackAddress"
       )
     .flex.flex-col
       client-detail-info-section(
@@ -34,6 +36,8 @@ export default {
     dataDocument: Object,
     updateDocument: Function,
     updateAddress: Function,
+    lackPass: Boolean,
+    lackAddress: Boolean,
   },
 };
 </script>

src/pages/clients/components/ClientDetailInput.vue

@@ -1,16 +1,14 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
-    input.place-input.w-full.outline-0.text-sm.not-italic.resize-none(
+    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)"
-      v-mask="sharp"
     )
     slot
 </template>
 
 <script>
-import { mask } from "vue-the-mask";
 export default {
   name: "ClientDetailInput",
   props: {
@@ -18,7 +16,6 @@ export default {
     width: Number,
     sharp: String,
   },
-  directives: { mask },
 
   computed: {
     heightInput() {

src/pages/clients/components/ClientsTableRow.vue

@@ -24,6 +24,8 @@
       :delete-doc="deleteDoc"
       :update-document="postUpdateIdentityDocument"
       :update-address="postUpdateAddress"
+      :lack-pass="lackPass"
+      :lack-address="lackAddress"
     )
 </template>
 
@@ -73,6 +75,8 @@ export default {
       dataClient: {},
       docId: "",
       addressId: "",
+      lackPass: true,
+      lackAddress: true,
     };
   },
   props: {
@@ -215,17 +219,32 @@ export default {
       this.saveAddress(data.address[0]);
       this.saveAttachments([...data.attachments]);
     },
+    addDoc() {
+      this.lackPass = false;
+    },
+
     saveIdentityDocument(data) {
-      this.dataIdentityDocument = {
+      if (
-        numba:
+        data?.series ||
-          data?.series && data?.numba
+        data?.numba ||
-            ? data?.series + " " + data?.numba || ""
+        data?.issued_by_org ||
+        data?.issued_by_org_code ||
+        data?.issued_by_date
+      ) {
+        this.dataIdentityDocument = {
+          numba:
+            data.series && data.numba ? data?.series + " " + data?.numba : "",
+          issued_by_org: data.issued_by_org ? data?.issued_by_org : "",
+          issued_by_org_code: data.issued_by_org_code
+            ? data?.issued_by_org_code
             : "",
-        issued_by_org: data?.issued_by_org || "",
+          issued_by_date: data.issued_by_date
-        issued_by_org_code: data?.issued_by_org_code || "",
+            ? data?.issued_by_date.split("-").reverse().join(".")
-        issued_by_date:
+            : "",
-          data?.issued_by_date.split("-").reverse().join(".") || "",
+        };
-      };
+      } else {
+        this.lackPass = false;
+      }
       this.docId = data?.id;
     },
     postUpdateIdentityDocument() {
@@ -243,9 +262,14 @@ export default {
         .then(() => this.fetchClientDetail(this.id));
     },
     saveAddress(data) {
-      this.dataAddress = {
+      if (data?.join_adress) {
-        join_adress: data?.join_adress || "",
+        this.dataAddress = {
-      };
+          join_adress: data?.join_adress,
+        };
+      } else {
+        this.lackAddress = false;
+      }
+
       this.addressId = data?.id;
     },
     postUpdateAddress() {

src/pages/clients/components/FormCreateAddresses.vue

@@ -3,29 +3,32 @@
     .flex.flex-col.gap-y-6.px-4
       .flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
         span.text-sm.font-semibold Полный адрес
-        base-input.input-info(v-model:value="addresses.full_address" placeholder="Введите адрес целиком")
+        base-input.input-info(
+          v-model:value="addresses.full_address",
+          placeholder="Введите адрес целиком"
+        )
       .flex.items-center.justify-center.relative
         .line.absolute
         span.text-sm.separator.px-2 или
       .grid.grid-cols-2.gap-y-6.gap-x-4
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Город
-          base-input.input-info(v-model:value="addresses.city" placeholder="Ввыберите город")
+          base-input.input-info(placeholder="Выберите город")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Область
-          base-input.input-info(v-model:value="addresses.region" placeholder="Введите область")
+          base-input.input-info(placeholder="Введите область")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Улица
-          base-input.input-info(v-model:value="addresses.street" placeholder="Введите улицу")
+          base-input.input-info(placeholder="Введите улицу")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Дом
-          base-input.input-info(v-model:value="addresses.house_number" placeholder="Номер дома")
+          base-input.input-info(placeholder="Номер дома")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Квартира
-          base-input.input-info(v-model:value="addresses.apartment_number" placeholder="Номер квартиры")
+          base-input.input-info(placeholder="Номер квартиры")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Индекс
-          base-input.input-info(v-model:value="addresses.zip_code" placeholder="000000")
+          base-input.input-info(placeholder="000000", v-mask="'######'")
     .px-4
       base-button(@click="saveClient" :size="40")
         span.font-semibold Создать клиента
@@ -34,6 +37,7 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+import { mask } from "vue-the-mask";
 export default {
   name: "FormCreateAddresses",
   components: { BaseInput, BaseButton },
@@ -42,6 +46,7 @@ export default {
     saveClient: Function,
     saveFile: Function,
   },
+  directives: { mask },
 };
 </script>
 

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -3,21 +3,47 @@
     .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Приоритет
-        base-select(:items="priorityList", placeholder="Приоритет клиента", v-model="basicInfo.priority")
+        base-select(
+          :items="priorityList",
+          placeholder="Приоритет клиента",
+          v-model="basicInfo.priority"
+        )
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Дата рождения
-        base-input.input-info(v-model:value="basicInfo.birth_date" type="date" placeholder="00.00.0000" :width-input="277")
+        base-input.input-info(
+          v-model:value="basicInfo.birth_date",
+          type="date",
+          placeholder="00.00.0000",
+          :width-input="277"
+        )
       .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" :width-input="277")
+        base-input.input-info(
+          v-model:value="phone.username",
+          placeholder="+7 (915) 644–92–23",
+          :width-input="277"
+        )
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Email
-        base-input.input-info(v-model:value="email.username" placeholder="user@yandex.ru" :width-input="277")
+        base-input.input-info(
+          v-model:value="email.username",
+          placeholder="user@yandex.ru",
+          :width-input="277"
+        )
       .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
         span.text-sm Ссылки на соцсети
         .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
-          base-adding-network(:list-adding-networks="networks.settings" :selected-option="network.icon" :value="network" :choose-network="chooseOption" :save-network-id="saveNetworkId")
+          base-adding-network(
-        span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
+            :list-adding-networks="networks.settings",
+            :selected-option="network.icon",
+            :value="network",
+            :choose-network="chooseOption",
+            :save-network-id="saveNetworkId"
+          )
+        span.add-network.cursor-pointer(
+          v-show="networks.settings.length !== basicInfo.contacts.length",
+          @click="addNetwork"
+        ) Добавить соцсеть
     .px-4
       base-button(@click="saveClient" :size="40")
         span.font-semibold Создать клиента