WIP Наладила get после post client

src/components/LoggedInLayout.vue

@@ -4,7 +4,7 @@
       :is-open-form="isOpenForm",
       :close-form="closeForm",
       :open-form="openForm",
-      @update-client="setUpdatedClients"
+      :set-updated-clients="setUpdatedClients",
     )
     .flex.flex-auto
       the-sidebar

src/components/TheHeader.vue

@@ -3,7 +3,7 @@
     base-client-form-create(
       v-if="isOpenForm",
       :close-form="closeForm",
-      @update-client="transmitUpdateClient"
+      :set-updated-clients="setUpdatedClients",
     )
     .flex.items-center.box-border.cursor-pointer.mr-auto
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
@@ -42,6 +42,7 @@ export default {
     openForm: Function,
     closeForm: Function,
     isOpenForm: Boolean,
+    setUpdatedClients: Function,
   },
   data() {
     return {
@@ -57,9 +58,6 @@ export default {
       localStorage.clear();
       this.$router.push("/login");
     },
-    transmitUpdateClient() {
-      this.$emit("update-client");
-    },
   },
 };
 </script>

src/components/base/BaseClientFormCreate.vue

@@ -107,6 +107,7 @@ export default {
   },
   props: {
     closeForm: Function,
+    setUpdatedClients: Function,
   },
   data() {
     return {
@@ -300,9 +301,9 @@ export default {
           this.createIdentityDocument(result.id);
           this.createAddress(result.id);
           this.createContacts(result.id);
+          this.setUpdatedClients();
           this.addSuccessNotification();
         });
-      this.$emit("update-client");
     },
     filterDataEmptyProperty(data) {
       let postData = data;

src/pages/clients/components/ClientsTable.vue

@@ -17,9 +17,9 @@
           :check="selectedCheck",
           :client="client",
           :row-overlay="deletedRowId === client.id",
+          :update-data-client="updateDataClient",
           @delete-client="deleteClientHandler",
           @recover-client="clearDeletedRowId",
-          @update-clients="updateDataClient"
         )
     client-table-pagination(
       v-if="paginationInfo.length > 1"
@@ -181,11 +181,9 @@ export default {
     updatedClients() {
       if (this.updatedClients === true) {
         this.textSearch = "";
-        setTimeout(() => {
         this.fetchDataClients().then(
           () => (this.currentTablePage = this.pageCount)
         );
-        }, 100);
         this.$emit("reset-updated-clients");
       }
     },

src/pages/clients/components/ClientsTableRow.vue

@@ -1,8 +1,7 @@
 <template lang="pug">
-  .wrapper.flex
+  .wrapper.flex.relative
     .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 }}
@@ -10,11 +9,10 @@
       .row-body.flex.w-full.cursor-pointer(
         :id="id",
         @click="(e) => openDetailInfo(e)",
-        :class="{'row-overlay-color': rowOverlay}",
+        :class="{'row-overlay-color': rowOverlay}"
-        ref="rowBody"
       )
         .check-box.flex.justify-center.items-center(
-          :style="{'opacity': rowOverlay && '0.5'}"
+          :class="{'row-opacity': rowOverlay}"
         )
           clients-table-checkbox(
             :id="id",
@@ -22,7 +20,7 @@
             :is-check="isCheck"
           )
         table-cell-body-name(
-          :style="{'opacity': rowOverlay && '0.5'}"
+          :class="{'row-opacity': rowOverlay}"
           :value="dataClient",
           :avatar="dataClient.avatar",
           :avatar-color="dataClient.color",
@@ -173,23 +171,15 @@ export default {
     isCheck: Boolean,
     client: Object,
     rowOverlay: Boolean,
+    updateDataClient: Function,
     url: String,
   },
-  computed: {
-    rowSize() {
-      let size = this.$refs["rowBody"].getBoundingClientRect();
-      return {
-        height: `${size.height}px`,
-        width: `${size.width}px`,
-      };
-    },
-  },
   methods: {
     stopTimer() {
       if (this.countdown !== 0) this.countdown = 0;
+      this.$emit("recover-client");
       clearInterval(this.timer);
       this.timer = null;
-      this.$emit("recover-client");
     },
     startTimer() {
       this.countdown = 30;
@@ -199,7 +189,8 @@ export default {
     },
     changeCountdown() {
       if (this.countdown === 0) {
-        this.deleteClient().then(() => this.stopTimer());
+        this.stopTimer();
+        this.deleteClient().then(() => this.updateDataClient());
       } else {
         this.countdown -= 1;
       }
@@ -491,9 +482,9 @@ export default {
       photo: this.client.photo,
     };
   },
-  beforeUnmount() {
+  /*beforeUnmount() {
     this.stopTimer();
-  },
+  },*/
 };
 </script>
 
@@ -518,10 +509,14 @@ export default {
   &:hover
     background-color: var(--btn-blue-color)
     color: var(--default-white)
+.row-opacity
+  opacity: 0.5
 .row-overlay
   background: transparent
   position: absolute
   z-index: 100
+  width: 100%
+  height: 100%
 .row-overlay-color
   background: var(--row-overlay-color)
 .recover-btn