Merge pull request #191 from dderbentsov/UC-162

[WIP] Фикс апдейта данных клиента, убрал чекбоксы и на их место поставил кнопку редактирования
2022-12-09 17:36:06 +03:00
parent 9cc2abb420 1cec90a76b
commit 1d78f05934
6 changed files with 117 additions and 92 deletions
--- a/src/components/base/BaseSelectNetworks.vue
+++ b/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"
-        :id="id")
+        v-show="isSelectOpen",
+        :id="id"
+      )
        .flex.option.justify-center.py-1.text-xl(
-          v-for="data in listData"
-          @click="(e) => chooseOption(e)"
-          :key="data.network"
-          :id="data.network"
+          v-for="data in listData",
+          @click="(e) => chooseOption(e)",
+          :key="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>
--- a/src/pages/clients/components/ClientsActionPopup.vue
+++ b/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
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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(
-          :class="{'row-opacity': rowOverlay}"
+        .flex.items-center.px-2(
+          v-show="!isOpenChange",
+          :tabindex="1",
+          @click="(e) => openPopup(e)",
+          @blur="handleUnFocusPopup"
        )
-          clients-table-checkbox(
-            :id="id",
-            :check="check",
-            :is-check="isCheck"
+          .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center
+            clients-action-popup(
+              v-if="isOpenPopup",
+              :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
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/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>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/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(
--- a/src/pages/clients/utils/tableConfig.js
+++ b/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",
-    title: "Do",
-    iconHead: false,
-    width: 53,
-  },
+  // {
+  //   name: "checkbox",
+  //   iconHead: false,
+  //   width: 36,
+  // },
 ];

 export const detail = {