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,91 +1,108 @@
 <template lang="pug">
-  .row-wrapper.flex.flex-col.w-full
+  .wrapper.flex
-    .row-body.flex.w-full.cursor-pointer(
+    .row-overlay.flex.justify-center.items-center.gap-x-2.text-base(
-      :id="id",
+      v-if="rowOverlay",
-      @click="(e) => openDetailInfo(e)"
+      :style="rowSize"
     )
-      .check-box.flex.justify-center.items-center
+      button.recover-btn Восстановить
-        clients-table-checkbox(
+      div 0:30
-          :id="id",
+    .row-wrapper.flex.flex-col.w-full(ref="rowWrapper")
-          :check="check",
+      .row-body.flex.w-full.cursor-pointer(
-          :is-check="isCheck"
+        :id="id",
+        @click="(e) => openDetailInfo(e)",
+        :class="{'row-overlay-color': rowOverlay}"
+      )
+        .check-box.flex.justify-center.items-center(
+          :style="{'opacity': rowOverlay && '0.5'}"
         )
-      table-cell-body-name(
+          clients-table-checkbox(
-        :value="dataClient",
+            :id="id",
-        :avatar="dataClient.avatar",
+            :check="check",
-        :avatar-color="dataClient.color",
+            :is-check="isCheck"
-        :photo="dataClient.photo"
-        :is-open-change="isOpenChange",
-        :width="columnBody.find(el => el.name === 'fullName').width"
-      )
-      table-cell-body-age(
-        :value="dataClient",
-        :is-open-change="isOpenChange",
-        :width="columnBody.find(el => el.name === 'age').width"
-      )
-      table-cell-body-priority(
-        :value="dataClient.priority",
-        :choose-priority="choosePriority",
-        :is-open-change="isOpenChange",
-        :width="columnBody.find(el => el.name === 'priority').width"
-      )
-      table-cell-body-phone(
-        :value="dataClient",
-        :is-open-change="isOpenChange",
-        :width="columnBody.find(el => el.name === 'phone').width"
-      )
-      table-cell-body-email(
-        :value="dataClient",
-        :is-open-change="isOpenChange",
-        :width="columnBody.find(el => el.name === 'email').width"
-      )
-      table-cell-body-networks(
-        :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
-        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"
-            :delete-client="deleteClient"
           )
-    client-detail-info-wrapper(
+        table-cell-body-name(
-      v-if="isOpenDetailInfo"
+          :style="{'opacity': rowOverlay && '0.5'}"
-      :data-address="dataAddress"
+          :value="dataClient",
-      :data-detail="dataDetail"
+          :avatar="dataClient.avatar",
-      :data-attachments="dataAttachments"
+          :avatar-color="dataClient.color",
-      :data-document="dataIdentityDocument"
+          :photo="dataClient.photo"
-      :save-new-doc="saveNewDoc"
+          :is-open-change="isOpenChange",
-      :delete-doc="deleteDoc"
+          :width="columnBody.find(el => el.name === 'fullName').width"
-      :update-document="postUpdateIdentityDocument"
+        )
-      :update-address="postUpdateAddress"
+        table-cell-body-age(
-      :lack-data="lackData"
+          v-if="!rowOverlay",
-      :lack-address="lackAddress"
+          :value="dataClient",
-      :dope-address="dopeAddress"
+          :is-open-change="isOpenChange",
-      :lack-attachments="lackAttachments"
+          :width="columnBody.find(el => el.name === 'age').width"
-      :create-address="postCreateAddress"
+        )
-      :create-document="postCreateIdentityDocument"
+        table-cell-body-priority(
-      :address-id="addressId"
+          v-if="!rowOverlay",
-      :doc-id="docId"
+          :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(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"
+              @delete-client="transmitDeleteClient"
+            )
+      client-detail-info-wrapper(
+        v-if="isOpenDetailInfo && !rowOverlay",
+        :data-address="dataAddress"
+        :data-detail="dataDetail"
+        :data-attachments="dataAttachments"
+        :data-document="dataIdentityDocument"
+        :save-new-doc="saveNewDoc"
+        :delete-doc="deleteDoc"
+        :update-document="postUpdateIdentityDocument"
+        :update-address="postUpdateAddress"
+        :lack-data="lackData"
+        :lack-address="lackAddress"
+        :dope-address="dopeAddress"
+        :lack-attachments="lackAttachments"
+        :create-address="postCreateAddress"
+        :create-document="postCreateIdentityDocument"
+        :address-id="addressId"
+        :doc-id="docId"
+        :current-year="currentYear"
+      )
 </template>
 
 <script>
@@ -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>