Merge pull request #167 from dderbentsov/UC-98

WIP Сделала частично удаление клиента

src/assets/sass/variables.sass

@@ -18,6 +18,7 @@
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
   --border-light-grey-color: #d3d4dc
+  --row-overlay-color: #f5f6ff
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -376,7 +376,7 @@ export default {
     },
     fetchMembersData() {
       fetchWrapper
-        .get("general/person/")
+        .get("general/person/?limit=100")
         .then((res) => this.saveMembersData(res));
     },
     saveMembersData(res) {

src/pages/clients/components/ClientTableDeleteModal.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+  .flex.flex-col.mb-1.mt-4
+    span.font-medium.text-base.modal-text Вы действительно хотите удалить клиента?
+    .flex.gap-x-3.mt-6.font-semibold
+      base-button(
+        outlined,
+        :size=40,
+        @click="closeModal"
+      ) Отменить
+      base-button(
+        outlined-red,
+        :size=40,
+        @click="transmitDeleteClient"
+      ) Удалить
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton.vue";
+export default {
+  name: "ClientTableDeleteModal",
+  components: {
+    BaseButton,
+  },
+  props: {
+    closeModal: Function,
+    deletedClientId: String,
+  },
+  methods: {
+    transmitDeleteClient() {
+      this.$emit("delete-client", this.deletedClientId);
+      this.closeModal();
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.modal-text
+  color: var(--font-grey-color)
+
+.card-container
+  width: 420px
+  height: 194px
+  border-radius: 4px
+  border: 1px solid var(--border-light-grey-color-1)
+</style>

src/pages/clients/components/ClientsActionPopup.vue

@@ -8,7 +8,7 @@
       .button.keep-redaction.flex.gap-x-3
         .icon-star-off.icon
         span На ведение
-      .button.delete.flex.gap-x-3(@click="deleteClient")
+      .button.delete.flex.gap-x-3(@click="transmitDeleteClient")
         .icon-basket.icon-delete
         span Удалить
 </template>
@@ -18,7 +18,11 @@ export default {
   name: "ClientsActionPopup",
   props: {
     openChangeData: Function,
-    deleteClient: Function,
+  },
+  methods: {
+    transmitDeleteClient() {
+      this.$emit("delete-client");
+    },
   },
 };
 </script>

src/pages/clients/components/ClientsTable.vue

@@ -15,7 +15,9 @@
           :is-check="marked.includes(client.id)",
           :check="selectedCheck",
           :client="client",
-          :fetch-data-clients="fetchDataClients",
+          :row-overlay="deletedRowId === client.id",
+          @delete-client="deleteClientHandler",
+          @recover-client="clearDeletedRowId",
           @update-clients="updateDataClient"
         )
     client-table-pagination(
@@ -25,6 +27,15 @@
       @next-page="switchNextPage",
       @set-current-page="changeCurrentTablePage"
     )
+    base-modal(
+      v-model="showModal",
+      title="Удалить клиента"
+    )
+      client-table-delete-modal(
+        :close-modal="closeModal",
+        :deleted-client-id="deletedClientId",
+        @delete-client="writeDeletedRowId"
+      )
 </template>
 
 <script>
@@ -35,6 +46,8 @@ import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import ClientTablePagination from "./ClientTablePagination.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
 export default {
   name: "ClientsTable",
   components: {
@@ -44,6 +57,8 @@ export default {
     ClientsTableHeader,
     BaseClientFormCreate,
     ClientTablePagination,
+    BaseModal,
+    ClientTableDeleteModal,
   },
   props: {
     openForm: Function,
@@ -57,13 +72,16 @@ export default {
       marked: [],
       dataClients: [],
       currentTablePage: 1,
-      limit: 4,
+      limit: 14,
       count: 0,
       textSearch: "",
       paginationInfo: {
         currentPage: 0,
         length: 0,
       },
+      showModal: false,
+      deletedClientId: "",
+      deletedRowId: "",
     };
   },
   computed: {
@@ -137,6 +155,25 @@ export default {
     changeCurrentTablePage(value) {
       this.currentTablePage = value;
     },
+    closeModal() {
+      this.showModal = false;
+    },
+    openModal() {
+      this.showModal = true;
+    },
+    deleteClientHandler(id) {
+      this.deletedClientId = id;
+      this.openModal();
+    },
+    writeDeletedRowId(id) {
+      this.deletedRowId = id;
+    },
+    clearDeletedRowId() {
+      this.deletedRowId = "";
+    },
+    clearDeletedClientId() {
+      this.deletedClientId = "";
+    },
   },
   watch: {
     updatedClients() {
@@ -146,13 +183,16 @@ export default {
           this.fetchDataClients().then(
             () => (this.currentTablePage = this.pageCount)
           );
-        }, 60);
+        }, 100);
         this.$emit("reset-updated-clients");
       }
     },
     currentTablePage() {
       this.fetchDataClients();
     },
+    showModal() {
+      if (!this.showModal) this.clearDeletedClientId();
+    },
   },
   mounted() {
     this.fetchDataClients();

src/pages/clients/components/ClientsTableHat.vue

@@ -9,12 +9,11 @@
           placeholder="Введите фамилию"
         )
           .icon-search
-      base-button(
+      base-button.font-semibold(
-        outlined,
         @click="searchLastName",
         :size=40
       ) Поиск
-      base-button(
+      base-button.font-semibold(
         v-if="searchClient.length > 0",
         secondary,
         @click="resetLastName",

src/pages/clients/components/ClientsTableRow.vue

@@ -1,16 +1,28 @@
 <template lang="pug">
+  .wrapper.flex
+    .row-overlay.flex.justify-center.items-center.gap-x-2.text-base(
+      v-if="rowOverlay",
+      :style="rowSize"
+    )
+      button.recover-btn(@click="stopTimer") Восстановить
+      .countdown 0:{{ countdown }}
     .row-wrapper.flex.flex-col.w-full
       .row-body.flex.w-full.cursor-pointer(
         :id="id",
-      @click="(e) => openDetailInfo(e)"
+        @click="(e) => openDetailInfo(e)",
+        :class="{'row-overlay-color': rowOverlay}"
+        ref="rowBody"
+      )
+        .check-box.flex.justify-center.items-center(
+          :style="{'opacity': rowOverlay && '0.5'}"
         )
-      .check-box.flex.justify-center.items-center
           clients-table-checkbox(
             :id="id",
             :check="check",
             :is-check="isCheck"
           )
         table-cell-body-name(
+          :style="{'opacity': rowOverlay && '0.5'}"
           :value="dataClient",
           :avatar="dataClient.avatar",
           :avatar-color="dataClient.color",
@@ -19,34 +31,39 @@
           :width="columnBody.find(el => el.name === 'fullName').width"
         )
         table-cell-body-age(
+          v-if="!rowOverlay",
           :value="dataClient",
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'age').width"
         )
         table-cell-body-priority(
+          v-if="!rowOverlay",
           :value="dataClient.priority",
           :choose-priority="choosePriority",
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'priority').width"
         )
         table-cell-body-phone(
+          v-if="!rowOverlay",
           :value="dataClient",
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'phone').width"
         )
         table-cell-body-email(
+          v-if="!rowOverlay",
           :value="dataClient",
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'email').width"
         )
         table-cell-body-networks(
+          v-if="!rowOverlay",
           :delete-network="deleteNetwork",
           :add-network="addNetwork",
           :networks="dataClient.contacts",
           :is-open-change="isOpenChange",
           :width="columnBody.find(el => el.name === 'networks').width"
         )
-      .dots.flex.justify-center.items-center
+        .dots.flex.justify-center.items-center(v-if="!rowOverlay")
           base-button(
             v-if="isOpenChange",
             @click="closeChangeData",
@@ -65,10 +82,10 @@
             clients-action-popup(
               v-if="isOpenPopup",
               :open-change-data="openChangeData"
-            :delete-client="deleteClient"
+              @delete-client="transmitDeleteClient"
             )
       client-detail-info-wrapper(
-      v-if="isOpenDetailInfo"
+        v-if="isOpenDetailInfo",
         :data-address="dataAddress"
         :data-detail="dataDetail"
         :data-attachments="dataAttachments"
@@ -145,6 +162,8 @@ export default {
         flat: "",
         index: "",
       },
+      timer: null,
+      countdown: 0,
     };
   },
   props: {
@@ -152,38 +171,37 @@ export default {
     check: Function,
     isCheck: Boolean,
     client: Object,
+    rowOverlay: Boolean,
   },
-  created() {
+  computed: {
-    this.dataClient = {
+    rowSize() {
-      id: this.client.id,
+      let size = this.$refs["rowBody"].getBoundingClientRect();
-      fullName: `${this.client.last_name || ""} ${
+      return {
-        this.client.first_name || ""
+        height: `${size.height}px`,
-      } ${this.client.patronymic || ""}`,
+        width: `${size.width}px`,
-      age: this.client.birth_date || "",
-      priority: this.prioritySettings.settings.find(
-        (el) => el.priority === this.client.priority
-      ).text,
-      phone: {
-        id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
-        kind: "PHONE",
-        username:
-          this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
-          "",
-      },
-      email: {
-        id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
-        kind: "EMAIL",
-        username:
-          this.client.contacts.find((el) => el.kind === "EMAIL")?.username ||
-          "",
-      },
-      contacts: [...this.client.contacts],
-      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
-      color: this.client.color,
-      photo: this.client.photo,
       };
     },
+  },
   methods: {
+    stopTimer() {
+      if (this.countdown !== 0) this.countdown = 0;
+      clearInterval(this.timer);
+      this.timer = null;
+      this.$emit("recover-client");
+    },
+    startTimer() {
+      this.countdown = 30;
+      this.timer = setInterval(() => {
+        this.changeCountdown();
+      }, 1000);
+    },
+    changeCountdown() {
+      if (this.countdown === 0) {
+        this.deleteClient().then(() => this.stopTimer());
+      } else {
+        this.countdown -= 1;
+      }
+    },
     postUpdateClient() {
       fetchWrapper.post(`general/person/${this.client.id}/update/`, {
         full_name: this.dataClient.fullName,
@@ -271,6 +289,10 @@ export default {
     openChangeData() {
       this.isOpenChange = true;
     },
+    transmitDeleteClient() {
+      this.isOpenDetailInfo = false;
+      this.$emit("delete-client", this.dataClient.id);
+    },
     async deleteClient() {
       await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
       this.handleUnFocusPopup();
@@ -432,6 +454,44 @@ export default {
         .then(() => this.fetchClientDetail(this.id));
     },
   },
+  watch: {
+    rowOverlay() {
+      if (this.rowOverlay) this.startTimer();
+    },
+  },
+  created() {
+    this.dataClient = {
+      id: this.client.id,
+      fullName: `${this.client.last_name || ""} ${
+        this.client.first_name || ""
+      } ${this.client.patronymic || ""}`,
+      age: this.client.birth_date || "",
+      priority: this.prioritySettings.settings.find(
+        (el) => el.priority === this.client.priority
+      ).text,
+      phone: {
+        id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
+        kind: "PHONE",
+        username:
+          this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
+          "",
+      },
+      email: {
+        id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
+        kind: "EMAIL",
+        username:
+          this.client.contacts.find((el) => el.kind === "EMAIL")?.username ||
+          "",
+      },
+      contacts: [...this.client.contacts],
+      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
+      color: this.client.color,
+      photo: this.client.photo,
+    };
+  },
+  beforeUnmount() {
+    this.stopTimer();
+  },
 };
 </script>
 
@@ -456,4 +516,14 @@ export default {
   &:hover
     background-color: var(--btn-blue-color)
     color: var(--default-white)
+.row-overlay
+  background: transparent
+  position: absolute
+  z-index: 100
+.row-overlay-color
+  background: var(--row-overlay-color)
+.recover-btn
+  color: var(--btn-blue-color)
+.countdown
+  color: var(--font-grey-color )
 </style>