[WIP] Добавил возможность сохранения аватара клиента

src/components/base/BaseClientFormCreate.vue

@@ -4,8 +4,16 @@
     span.title.text-xl.font-bold.px-4 Создание клиента
     .flex.gap-x-4.h-fit.px-4
       .flex.gap-x-3.w-full
-        base-button.relative(:rounded="true", :secondary="true", :size="40", @click="changeOpenPopup")
-          .icon-download.text-xl
+        base-button.relative(
+          :rounded="true",
+          :secondary="true",
+          :size="40",
+          @click="changeOpenPopup",
+          v-for="img in image"
+        )
+          .icon-download.text-xl(v-if="img === defaultIcon")
+          .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
               img(src="@/assets/icons/computer.svg")
@@ -13,18 +21,20 @@
             .flex.items-center.gap-x-2
               img(src="@/assets/icons/camera.svg")
               span.text-smm Сделать фото
-          base-modal(v-model="showModal", title="Загрузить изображение мидла")
-            .form-avatar.flex.flex-col.items-center.justify-center
-              .avatar-block.flex.relative.flex-row
+          base-modal(v-model="showModal", title="Загрузить изображение")
+            .flex.flex-col.items-center.justify-center(
+              :style="{padding: '153px 370px'}"
+              )
+              .avatar-wrapper.flex.relative
                 input.input(
                   type="file",
                   id="image-upload",
                   accept="image/*",
                   @change="(e) => previewImages(e)"
                 )
-                .avatar.absolute(v-for="img in image")
+                .avatar.flex.absolute.items-center.gap-x-6(v-for="img in image")
                   img.avatar(for="image-upload", :src="img", v-if="img")
-                  base-button(:rounded="true", :secondary="true", :size="48", @click="closeModal")
+                  base-button(:rounded="true", :size="48", @click="closeModal")
                     .icon-ok
         base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
@@ -197,9 +207,11 @@ export default {
           label: "-",
         },
       ],
+      defaultIcon: addImageIcon,
       showModal: false,
       showPopup: false,
       image: [addImageIcon],
+      imageData: [],
     };
   },
   computed: {
@@ -213,7 +225,6 @@ export default {
     closeModal() {
       this.showModal = false;
       this.showPopup = false;
-      this.image = [addImageIcon];
     },
     previewImages(event) {
       this.image = [];
@@ -225,6 +236,7 @@ export default {
         };
         reader.readAsDataURL(pictures[i]);
       }
+      this.imageData = [...this.imageData, ...event.target.files];
     },
     createIdentityDocument(id) {
       Object.keys(
@@ -247,19 +259,24 @@ export default {
         });
     },
     postNewClient() {
-      let sentData = {
-        full_name: this.infoClient.basic.full_name,
-      };
+      const formData = new FormData();
+      this.imageData.forEach((e) => {
+        formData.append("photo", e);
+        formData.append("full_name", this.infoClient.basic.full_name);
+      });
       if (this.infoClient.basic.birth_date)
-        sentData.birth_date = 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
       );
-      if (foundElement) sentData.priority = foundElement.priority;
-      fetchWrapper.post("general/person/create/", sentData).then((result) => {
-        this.createIdentityDocument(result.id);
-        this.createAddress(result.id);
-      });
+      if (foundElement) formData.append("priority", foundElement.priority);
+      fetchWrapper
+        .post("general/person/create/", formData, "formData")
+        .then((result) => {
+          this.createIdentityDocument(result.id);
+          this.createAddress(result.id);
+        });
       this.$emit("update-client");
     },
     filterDataEmptyProperty(data) {
@@ -297,6 +314,7 @@ export default {
     changeOpenModal() {
       this.showModal = true;
       this.showPopup = false;
+      this.image = [addImageIcon];
     },
     changeOpenPopup() {
       this.showPopup = true;
@@ -345,14 +363,13 @@ export default {
       }
       return true;
     },
-    check() {
-      this.showPopup = false;
-    },
   },
-  showModal: function () {
-    if (this.showModal === false) {
-      this.check();
-    }
+  watch: {
+    showModal: function () {
+      if (this.showModal === false) {
+        this.closeModal();
+      }
+    },
   },
 };
 </script>
@@ -365,8 +382,10 @@ export default {
   width: 634px
   min-height: 700px
   box-shadow: var(--default-shadow)
+
 .title
   color: var(--font-dark-blue-color)
+
 .export-avatar
   min-width: 40px
   height: 40px
@@ -376,6 +395,7 @@ export default {
   &:hover
     color: var(--default-white)
     background-color: var(--btn-blue-color)
+
 .title-info
   color: var(--font-grey-color)
   border-bottom: 1.5px solid var(--font-grey-color)
@@ -385,27 +405,28 @@ export default {
   &.active
     color: var(--btn-blue-color)
     border-bottom: 1.5px solid var(--btn-blue-color)
-.form-avatar
-  width: 1221px
-  height: 793px
-.avatar-block
+
+.avatar-wrapper
   width: 400px
   height: 400px
   border-radius: 50%
+
 .input
   width: 100%
   height: 100%
   border-radius: 50%
-  overflow: hidden
   z-index: 5
   opacity: 0
   cursor: pointer
+
 .avatar
-  cursor: pointer
-  width: 100%
   height: 100%
   border-radius: 50%
-  // background-image: url("../../assets/icons/photo.svg")
+
+.current-avatar
+  cursor: pointer
+  height: 100%
+  border-radius: 50%
   background-size: cover
   background-repeat: no-repeat
   background-position: center

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -1,7 +1,5 @@
 <template lang="pug">
   .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
-    @click="changeOpenCard",
-    v-click-outside="clickOutside"
     :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}")
@@ -17,12 +15,12 @@
         )
           .icon-ok.text-xsm(class="pt-[3px]")
         .edit.icon-edit.cursor-pointer.text-sm(
-          v-if="openCard && !isChange",
+          v-if="!isChange",
           @click="changeClientData"
         )
         .flex.relative
           base-button(
-            v-if="settings[section].addFile && openCard",
+            v-if="settings[section].addFile",
             @click="openAddingWrap",
             :rounded="true",
             :outlined="true",
@@ -193,12 +191,11 @@ export default {
       isOpenPackage: false,
       isOpenAddDoc: false,
       showModal: false,
-      openCard: false,
     };
   },
   computed: {
     changeBackground() {
-      return this.openCard || this.isChange
+      return this.isChange
         ? "var(--light-grey-bg-color)"
         : "var(--default-white)";
     },
@@ -234,15 +231,8 @@ export default {
       this.showModal = false;
       this.saveDocs();
     },
-    changeOpenCard() {
-      this.openCard = true;
-    },
-    clickOutside() {
-      this.openCard = false;
-    },
     changeDoc() {
       this.isChange = false;
-      this.openCard = false;
       if (this.section === "pass") {
         this.docId ? this.updateDocument() : this.createDocument();
       }

src/pages/clients/components/ClientsTableRow.vue

@@ -14,6 +14,7 @@
         :value="dataClient",
         :avatar="dataClient.avatar",
         :avatar-color="dataClient.color",
+        :photo="dataClient.photo"
         :is-open-change="isOpenChange",
         :width="columnBody.find(el => el.name === 'fullName').width"
       )
@@ -180,6 +181,7 @@ export default {
       contacts: [...this.client.contacts],
       avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
       color: this.client.color,
+      photo: this.client.photo,
     };
   },
   methods: {

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(:style="{ minWidth : width + 'px' }")
-    BaseAvatar(:size="36", :color="avatarColor") {{avatar}}
+    base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
+    base-avatar(:size="36", v-else)
+      img.h-full(:src="url + photo")
     span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
     base-input(v-if="isOpenChange" type="text" v-model:value="value.fullName" :width-input="300")
 </template>
@@ -14,11 +16,17 @@ export default {
   props: {
     value: Object,
     avatar: String,
+    photo: String,
     width: Number,
     imgUrl: String,
     isOpenChange: Boolean,
     avatarColor: String,
   },
+  data() {
+    return {
+      url: "http://45.84.227.122:8080",
+    };
+  },
 };
 </script>