Merge pull request #191 from dderbentsov/UC-162

[WIP] Фикс апдейта данных клиента, убрал чекбоксы и на их место поставил кнопку редактирования

src/components/base/BaseSelectNetworks.vue

@@ -1,17 +1,19 @@
 <template lang="pug">
   .flex.box-border.container.items-center.cursor-pointer.justify-center.relative(
-    @click="changeSelect"
+    @click="changeSelect",
+    v-click-outside="closeSelect",
     :class="{border: styleBorder}"
   )
     .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="optionData, 'px-2.5'")
       .absolute.options.top-11.left-0(
-        v-show="isSelectOpen"
+        v-show="isSelectOpen",
-        :id="id")
+        :id="id"
+      )
         .flex.option.justify-center.py-1.text-xl(
-          v-for="data in listData"
+          v-for="data in listData",
-          @click="(e) => chooseOption(e)"
+          @click="(e) => chooseOption(e)",
-          :key="data.network"
+          :key="data.network",
-          :id="data.network"
+          :id="data.network",
           :class="data.icon"
         )
     .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
@@ -45,6 +47,9 @@ export default {
     changeSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
+    closeSelect() {
+      this.isSelectOpen = false;
+    },
   },
 };
 </script>

src/pages/clients/components/ClientsActionPopup.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.items-end.absolute.right-2.top-5
+  .flex.flex-col.absolute.left-2.top-6
     .corner
     .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
       .button.keep-redaction.flex.gap-x-3(@click="openChangeData")
@@ -64,7 +64,7 @@ export default {
 .corner
   width: 8px
   height: 8px
-  border-top-left-radius: 100%
+  border-top-right-radius: 100%
   background-color: var(--default-white)
   z-index: 12
   overflow: hidden

src/pages/clients/components/ClientsTableRow.vue

@@ -11,14 +11,37 @@
         @click="(e) => openDetailInfo(e)",
         :class="{'row-overlay-color': rowOverlay}"
       )
-        .check-box.flex.justify-center.items-center(
+        .flex.items-center.px-2(
-          :class="{'row-opacity': rowOverlay}"
+          v-show="!isOpenChange",
+          :tabindex="1",
+          @click="(e) => openPopup(e)",
+          @blur="handleUnFocusPopup"
         )
-          clients-table-checkbox(
+          .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center
-            :id="id",
+            clients-action-popup(
-            :check="check",
+              v-if="isOpenPopup",
-            :is-check="isCheck"
+              :open-change-data="openChangeData",
+              :disabled-delete="!!deletedClientId && !rowOverlay",
+              @delete-client="transmitDeleteClient"
             )
+        .dots.flex.justify-center.items-center(v-if="!rowOverlay")
+          .flex.pl-5.z-10(v-if="isOpenChange")
+            base-button(
+              @click="closeChangeData",
+              confirm,
+              rounded,
+              outlined,
+              :size="20"
+            )
+              .icon-ok.text-xsm(class="pt-[3px]")
+        //- .check-box.flex.justify-center.items-center(
+        //-   :class="{'row-opacity': rowOverlay}"
+        //- )
+        //-   clients-table-checkbox(
+        //-     :id="id",
+        //-     :check="check",
+        //-     :is-check="isCheck"
+        //-   )
         table-cell-body-name(
           :class="{'row-opacity': rowOverlay}"
           :value="dataClient",
@@ -62,28 +85,6 @@
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'networks').width"
         )
-        .dots.flex.justify-center.items-center(v-if="!rowOverlay")
-          base-button(
-            v-if="isOpenChange",
-            @click="closeChangeData",
-            confirm,
-            rounded,
-            outlined,
-            :size="20"
-          )
-            .icon-ok.text-xsm(class="pt-[3px]")
-          .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(
-            v-show="!isOpenChange",
-            :tabindex="1",
-            @click="(e) => openPopup(e)",
-            @blur="handleUnFocusPopup"
-          )
-            clients-action-popup(
-              v-if="isOpenPopup",
-              :open-change-data="openChangeData",
-              :disabled-delete="!!deletedClientId && !rowOverlay",
-              @delete-client="transmitDeleteClient"
-            )
       client-detail-info-wrapper.detail.px-52px(
         :class="{'pb-[30px] pt-4': isOpenDetailInfo}"
         :data-address="dataAddress",
@@ -286,7 +287,9 @@ export default {
         )
           updateContacts.push(this.dataClient.email);
       });
-      createContacts.forEach((el) => this.postCreateContact(el));
+      createContacts.forEach((el) => {
+        if (!el.id) this.postCreateContact(el);
+      });
       deleteContacts.forEach((el) => this.postDeleteContact(el));
       updateContacts.forEach((el) => this.postUpdateContact(el));
     },
@@ -300,11 +303,13 @@ export default {
         .then(() => this.fetchDataClients());
     },
     postUpdateContact(contact) {
-      fetchWrapper.post(`general/contact/${contact.id}/update/`, {
+      fetchWrapper
+        .post(`general/contact/${contact.id}/update/`, {
           kind: contact.kind,
           username: contact.username,
           person_id: this.client.id,
-      });
+        })
+        .then(() => this.fetchDataClients());
     },
     postDeleteContact(contact) {
       fetchWrapper.del(`general/contact/${contact.id}/delete/`);
@@ -555,7 +560,15 @@ export default {
         });
     },
   },
-  created() {
+  watch: {
+    rowOverlay() {
+      if (this.rowOverlay) this.startTimer();
+    },
+    client: {
+      deep: true,
+      immediate: true,
+      handler(newValue) {
+        if (newValue) {
           this.dataClient = {
             id: this.client.id,
             fullName: `${this.client.last_name || ""} ${
@@ -564,21 +577,26 @@ export default {
             age: this.client.birth_date || "",
             priority: this.prioritySettings.settings.find(
               (el) =>
-          el.priority === this.client.priority || this.client.priority === el.id
+                el.priority === this.client.priority ||
+                this.client.priority === el.id
             ).text,
             phone: {
-        id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
+              id:
+                this.client.contacts.find((el) => el.kind === "PHONE")?.id ||
+                "",
               kind: "PHONE",
               username:
-          this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
+                this.client.contacts.find((el) => el.kind === "PHONE")
-          "",
+                  ?.username || "",
             },
             email: {
-        id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
+              id:
+                this.client.contacts.find((el) => el.kind === "EMAIL")?.id ||
+                "",
               kind: "EMAIL",
               username:
-          this.client.contacts.find((el) => el.kind === "EMAIL")?.username ||
+                this.client.contacts.find((el) => el.kind === "EMAIL")
-          "",
+                  ?.username || "",
             },
             contacts: [...this.client.contacts],
             avatar: this.client.first_name
@@ -587,13 +605,10 @@ export default {
             color: this.client.color,
             photo: this.client.photo,
           };
-  },
+        }
-  watch: {
+      },
-    rowOverlay() {
-      if (this.rowOverlay) this.startTimer();
     },
   },
-
   beforeUnmount() {
     if (this.timer) {
       this.deleteClient();
@@ -615,7 +630,7 @@ export default {
 .check-box
   min-width: 36px
 .dots
-  min-width: 53px
+  min-width: 14px
 .dots-button
   width: 20px
   height: 20px

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

@@ -1,5 +1,8 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
+    :style="{ minWidth : width + 'px' }",
+    :class="{'open-change': isOpenChange}"
+  )
     base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
     base-avatar(:size="36", v-else)
       img.h-full.object-cover(:src="url + photo")
@@ -39,4 +42,6 @@ export default {
   border-radius: 50%
   background-color: var(--font-grey-color)
   color: var(--font-dark-blue-color)
+.open-change
+  padding-left: 52px
 </style>

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

@@ -23,7 +23,7 @@
       base-popup.right-3.top-6(
         v-if="isOpenPopupAdding",
         @click.stop,
-        v-click-outside="closePopup",
+        v-click-outside.stop="closePopup",
         :width="485"
       )
         base-adding-network(

src/pages/clients/utils/tableConfig.js

@@ -1,8 +1,9 @@
 export const column = [
   {
-    name: "checkbox",
+    name: "dots",
+    title: "Do",
     iconHead: false,
-    width: 36,
+    width: 53,
   },
   {
     name: "fullName",
@@ -73,7 +74,7 @@ export const column = [
         icon: "icon-tg",
       },
       {
-        network: "GOOGLE",
+        network: "GMAIL",
         icon: "icon-google",
       },
       {
@@ -96,12 +97,11 @@ export const column = [
     iconHead: false,
     width: 152,
   },
-  {
+  // {
-    name: "dots",
+  //   name: "checkbox",
-    title: "Do",
+  //   iconHead: false,
-    iconHead: false,
+  //   width: 36,
-    width: 53,
+  // },
-  },
 ];
 
 export const detail = {