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

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>