WIP Сделано модальное окно, начат overlay

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/clients/components/ClientTableDeleteModal.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col.mb-1.mt-4
-    span.font-medium.text-base.modal-text.mb-3 Вы действительно хотите удалить клиента?
+    span.font-medium.text-base.modal-text Вы действительно хотите удалить клиента?
     .flex.gap-x-3.mt-6.font-semibold
       base-button(
         outlined,
@@ -10,7 +10,7 @@
       base-button(
         outlined-red,
         :size=40,
-        @click="deleteEvent"
+        @click=""
       ) Удалить
 </template>
 
@@ -32,8 +32,8 @@ export default {
   color: var(--font-grey-color)
 
 .card-container
-  width: 374px
+  width: 420px
-  height: 82px
+  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,8 +15,9 @@
           :is-check="marked.includes(client.id)",
           :check="selectedCheck",
           :client="client",
-          :fetch-data-clients="fetchDataClients",
+          :current-year="currentYear",
-          @update-clients="updateDataClient"
+          :row-overlay="deletedClientId === client.id",
+          @delete-client="deleteClientHandler",
         )
     client-table-pagination(
       v-if="paginationInfo.length > 1"
@@ -29,6 +30,9 @@
       v-model="showModal",
       title="Удалить клиента"
     )
+      client-table-delete-modal(
+        :close-modal="changeShowModal"
+      )
 </template>
 
 <script>
@@ -40,6 +44,7 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
 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: {
@@ -50,6 +55,7 @@ export default {
     BaseClientFormCreate,
     ClientTablePagination,
     BaseModal,
+    ClientTableDeleteModal,
   },
   props: {
     openForm: Function,
@@ -63,14 +69,15 @@ export default {
       marked: [],
       dataClients: [],
       currentTablePage: 1,
-      limit: 4,
+      limit: 14,
       count: 0,
       textSearch: "",
       paginationInfo: {
         currentPage: 0,
         length: 0,
       },
-      showModal: true,
+      showModal: false,
+      deletedClientId: "",
     };
   },
   computed: {
@@ -144,6 +151,17 @@ export default {
     changeCurrentTablePage(value) {
       this.currentTablePage = value;
     },
+    changeShowModal() {
+      this.showModal = false;
+    },
+    openModal() {
+      this.showModal = true;
+    },
+    deleteClientHandler(id) {
+      this.deletedClientId = id;
+      console.log(this.deletedClientId);
+      this.openModal();
+    },
   },
   watch: {
     updatedClients() {
@@ -160,6 +178,9 @@ export default {
     currentTablePage() {
       this.fetchDataClients();
     },
+    /*showModal() {
+      if (!this.showModal) this.deletedClientId = "";
+    },*/
   },
   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,27 @@
 <template lang="pug">
-  .row-wrapper.flex.flex-col.w-full
+  .wrapper.flex
+    .row-overlay.flex.justify-center.items-center.gap-x-2.text-base(
+      v-if="rowOverlay",
+      :style="rowSize"
+    )
+      button.recover-btn Восстановить
+      div 0:30
+    .row-wrapper.flex.flex-col.w-full(ref="rowWrapper")
       .row-body.flex.w-full.cursor-pointer(
         :id="id",
-      @click="(e) => openDetailInfo(e)"
+        @click="(e) => openDetailInfo(e)",
+        :class="{'row-overlay-color': rowOverlay}"
+      )
+        .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 +30,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 +81,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 && !rowOverlay",
         :data-address="dataAddress"
         :data-detail="dataDetail"
         :data-attachments="dataAttachments"
@@ -85,6 +101,7 @@
         :create-document="postCreateIdentityDocument"
         :address-id="addressId"
         :doc-id="docId"
+        :current-year="currentYear"
       )
 </template>
 
@@ -152,6 +169,8 @@ export default {
     check: Function,
     isCheck: Boolean,
     client: Object,
+    currentYear: Number,
+    rowOverlay: Boolean,
   },
   created() {
     this.dataClient = {
@@ -183,6 +202,15 @@ export default {
       photo: this.client.photo,
     };
   },
+  computed: {
+    rowSize() {
+      let size = this.$refs["rowWrapper"].getBoundingClientRect();
+      return {
+        height: `${size.height}px`,
+        width: `${size.width}px`,
+      };
+    },
+  },
   methods: {
     postUpdateClient() {
       fetchWrapper.post(`general/person/${this.client.id}/update/`, {
@@ -271,10 +299,11 @@ export default {
     openChangeData() {
       this.isOpenChange = true;
     },
-    async deleteClient() {
+    transmitDeleteClient() {
-      await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
+      /*  await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
       this.handleUnFocusPopup();
-      this.$emit("update-clients");
+      this.$emit("update-clients");*/
+      this.$emit("delete-client", this.dataClient.id);
     },
     fetchClientDetail(id) {
       fetchWrapper
@@ -456,4 +485,12 @@ 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)
 </style>