Merge pull request #147 from dderbentsov/UC-41

[WIP] Изменил стили документов

src/assets/icons/exel.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9268 2.52721C14.5893 2.18964 14.1314 2 13.654 2V8.14561C13.654 8.69789 14.1017 9.14561 14.654 9.14561H20.3996C20.3996 8.66822 20.21 8.21038 19.8724 7.87282L14.9268 2.52721Z" fill="#B7F1B6"/>
+<path d="M13.654 2H5.39961H4.59961C4.04732 2 3.59961 2.44772 3.59961 3V20.2V21C3.59961 21.5523 4.04732 22 4.59961 22H5.39961H18.5996H19.3996C19.9519 22 20.3996 21.5523 20.3996 21V20.2V9.14561H14.654C14.1017 9.14561 13.654 8.69789 13.654 8.14561V2Z" fill="#61C57D"/>
+</svg>

src/assets/icons/pdf.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9268 2.52721C14.5893 2.18964 14.1314 2 13.654 2V8.14561C13.654 8.69789 14.1017 9.14561 14.654 9.14561H20.3996C20.3996 8.66822 20.21 8.21038 19.8724 7.87282L14.9268 2.52721Z" fill="#FFA0A0"/>
+<path d="M13.654 2H5.39961H4.59961C4.04732 2 3.59961 2.44772 3.59961 3V20.2V21C3.59961 21.5523 4.04732 22 4.59961 22H5.39961H18.5996H19.3996C19.9519 22 20.3996 21.5523 20.3996 21V20.2V9.14561H14.654C14.1017 9.14561 13.654 8.69789 13.654 8.14561V2Z" fill="#FF6969"/>
+</svg>

src/assets/icons/word.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9268 2.52721C14.5893 2.18964 14.1314 2 13.654 2V8.14561C13.654 8.69789 14.1017 9.14561 14.654 9.14561H20.3996C20.3996 8.66822 20.21 8.21038 19.8724 7.87282L14.9268 2.52721Z" fill="#A0C6FF"/>
+<path d="M13.654 2H5.39961H4.59961C4.04732 2 3.59961 2.44772 3.59961 3V20.2V21C3.59961 21.5523 4.04732 22 4.59961 22H5.39961H18.5996H19.3996C19.9519 22 20.3996 21.5523 20.3996 21V20.2V9.14561H14.654C14.1017 9.14561 13.654 8.69789 13.654 8.14561V2Z" fill="#6993FF"/>
+</svg>

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -40,7 +40,9 @@
             :add-new-additional="addDocAdditional",
             :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")
+    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(
+      v-if="this.isData || this.isAddress || this.isAttachments"
+    )
       .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(
@@ -54,7 +56,7 @@
             :placeholder="settings[section].placeholder[key]"
           )
           base-input.max-h-10.py-2.pl-3(
-            v-if="settings[section].options[key] === 'Дата выдачи' && isChange",
+            v-else-if="isChange && section !== 'docs'",
             type="date",
             v-model:value="sectionInfo.issued_by_date"
             :max-date="`${currentYear}-12-31`",
@@ -83,13 +85,15 @@
             )
           .flex(v-if="item.name && !isChange")
             span.text-sm.w-fit {{item.title}}
-          .flex.items-center(v-if="item.title")
+          .flex.items-center
             .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
               v-if="isChange",
               :id="item.id",
-              @click="(e) => deleteDoc(e)"
+              @click="deleteDoc(item.id)"
             )
+            img(:src="iconDictionary[item?.document?.split('.')[1]]")
             span.text-sm {{item.title}}
+            span.text-sm(v-if="item.document") {{`. ${item?.document?.split(".")[1]}`}}
     .section-add-doc.flex.justify-center.items-center.cursor-pointer(
       v-else,
       @click="openAddDoc"
@@ -105,6 +109,9 @@ import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewA
 import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
 import BaseInput from "@/components/base/BaseInput";
 import { detail } from "@/pages/clients/utils/tableConfig";
+import pdfIcon from "@/assets/icons/pdf.svg";
+import wordIcon from "@/assets/icons/word.svg";
+import exelIcon from "@/assets/icons/exel.svg";
 export default {
   name: "ClientDetailInfoSection",
   components: {
@@ -124,16 +131,17 @@ export default {
     updateAddress: Function,
     lackData: Boolean,
     lackAddress: Boolean,
+    lackAttachments: Boolean,
     dopeAddress: Object,
     createAddress: Function,
     createDocument: Function,
     addressId: String,
+    attachmentId: String,
     docId: String,
     currentYear: Number,
   },
   data() {
     return {
-      tip: "text",
       additionalData: {
         header: "",
         value: "",
@@ -151,6 +159,8 @@ export default {
       ],
       isData: true,
       isAddress: true,
+      isAttachments: true,
+      iconDictionary: { doc: wordIcon, pdf: pdfIcon, xls: exelIcon },
     };
   },
   computed: {
@@ -167,6 +177,8 @@ export default {
         this.isData = true;
       } else if (this.section === "addresses") {
         this.isAddress = true;
+      } else if (this.section === "docs") {
+        this.isAttachments = true;
       }
     },
     changeDoc() {
@@ -235,6 +247,12 @@ export default {
         this.isAddress = newValue;
       },
     },
+    lackAttachments: {
+      immediate: true,
+      handler(newValue) {
+        this.isAttachments = newValue;
+      },
+    },
   },
 };
 </script>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -25,6 +25,8 @@
         section="docs",
         :save-new-doc="saveNewDoc",
         :delete-doc="deleteDoc"
+        :lack-attachments="lackAttachments"
+        :attachment-id="attachmentId"
       )
 </template>
 
@@ -44,10 +46,12 @@ export default {
     updateAddress: Function,
     lackData: Boolean,
     lackAddress: Boolean,
+    lackAttachments: Boolean,
     dopeAddress: Object,
     createAddress: Function,
     createDocument: Function,
     addressId: String,
+    attachmentId: String,
     docId: String,
     currentYear: Number,
   },

src/pages/clients/components/ClientsTableRow.vue

@@ -78,9 +78,11 @@
       :lack-data="lackData"
       :lack-address="lackAddress"
       :dope-address="dopeAddress"
+      :lack-attachments="lackAttachments"
       :create-address="postCreateAddress"
       :create-document="postCreateIdentityDocument"
       :address-id="addressId"
+      :attachment-id="attachmentId"
       :doc-id="docId"
       :current-year="currentYear"
     )
@@ -132,8 +134,10 @@ export default {
       dataClient: {},
       docId: "",
       addressId: "",
+      attachmentId: "",
       lackData: true,
       lackAddress: true,
+      lackAttachments: true,
       dopeAddress: {
         city: "",
         region: "",
@@ -363,7 +367,14 @@ export default {
       this.clearAddress();
     },
     saveAttachments(data) {
-      this.dataAttachments = [...data];
+      this.dataAttachments = [""];
+      if (data.find((e) => e.id)) {
+        this.dataAttachments = [...data];
+        this.lackAttachments = true;
+        this.attachmentId = this.dataAttachments[0].id;
+      } else {
+        this.lackAttachments = false;
+      }
     },
     openPopup(e) {
       e.target.focus();
@@ -380,11 +391,10 @@ export default {
     saveNewDoc(data) {
       this.dataAttachments = [...this.dataDetail, ...data];
     },
-    deleteDoc(e) {
+    deleteDoc(id) {
-      e.stopPropagation();
+      fetchWrapper
-      this.dataAttachments = this.dataAttachments.filter(
+        .del(`general/attachment/${id}/delete/`)
-        (el) => el.id !== e.target.id
+        .then(() => this.fetchClientDetail(this.id));
-      );
     },
     postCreateAddress() {
       fetchWrapper
@@ -415,7 +425,7 @@ export default {
 
 <style lang="sass" scoped>
 .row-wrapper
-  border-bottom: 1px solid #D3D4DC
+  border-bottom: 1px solid var(--border-light-grey-color)
   min-width: 1556px
 .row-body
   color: var(--font-dark-blue-color)