WIP Подключила пагинацию на клиентов

src/pages/clients/TheClients.vue

@@ -2,7 +2,9 @@
   clients-wrapper(
     :open-form="openForm",
     :is-open-form="isOpenForm",
-    :current-year="currentYear"
+    :current-year="currentYear",
+    :updated-clients="updatedClients",
+    @reset-updated-clients="transmitReset"
   )
 </template>
 
@@ -15,6 +17,12 @@ export default {
     openForm: Function,
     currentYear: Number,
     isOpenForm: Boolean,
+    updatedClients: Boolean,
+  },
+  methods: {
+    transmitReset() {
+      this.$emit("reset-updated-clients");
+    },
   },
 };
 </script>

src/pages/clients/components/ClientsTable.vue

@@ -20,7 +20,8 @@
           :current-year="currentYear"
         )
     client-table-pagination(
-      :length=6,
+      v-if="pageCount > 1"
+      :length="pageCount",
       :current-page="currentTablePage",
       @previous-page="switchPreviousPage",
       @next-page="switchNextPage",
@@ -50,6 +51,7 @@ export default {
     openForm: Function,
     currentYear: Number,
     isOpenForm: Boolean,
+    updatedClients: Boolean,
   },
 
   data() {
@@ -58,21 +60,36 @@ export default {
       marked: [],
       dataClients: [],
       currentTablePage: 1,
+      limit: 4,
+      count: 0,
     };
   },
+  computed: {
+    pageCount() {
+      return Math.ceil(this.count / this.limit);
+    },
+  },
   methods: {
     saveDataClients(data) {
       this.dataClients = data.results;
+      this.count = data.count;
     },
     filterDataClients(text) {
       fetchWrapper
-        .get(`general/person/?last_name=${text}`)
+        .get(
+          `general/person/?last_name=${text}&?limit=${this.limit}&offset=${
+            (this.currentPage - 1) * this.limit
+          }`
+        )
         .then((data) => this.saveDataClients(data));
     },
-    fetchDataClients() {
-      fetchWrapper
-        .get("general/person/")
-        .then((data) => this.saveDataClients(data));
+    async fetchDataClients(currentPage) {
+      let response = await fetchWrapper.get(
+        `general/person/?limit=${this.limit}&offset=${
+          (currentPage - 1) * this.limit
+        }`
+      );
+      this.saveDataClients(response);
     },
     selectedCheck(e) {
       if (e.target.id === "checkbox") {
@@ -104,17 +121,20 @@ export default {
     },
   },
   watch: {
-    isOpenForm: {
-      immediate: true,
-      handler(newValue) {
-        if (newValue === false) {
-          this.fetchDataClients();
-        }
-      },
+    updatedClients() {
+      if (this.updatedClients === true) {
+        this.fetchDataClients(this.currentTablePage).then(
+          () => (this.currentTablePage = this.pageCount)
+        );
+        this.$emit("reset-updated-clients");
+      }
+    },
+    currentTablePage() {
+      this.fetchDataClients(this.currentTablePage);
     },
   },
   mounted() {
-    this.fetchDataClients();
+    this.fetchDataClients(this.currentTablePage);
   },
 };
 </script>

src/pages/clients/components/ClientsTableHat.vue

@@ -53,7 +53,7 @@ export default {
         this.$emit("search", this.searchClient);
     },
     resetLastName() {
-      this.$emit("reset-search", this.searchClient);
+      this.$emit("reset-search");
       this.searchClient = "";
     },
   },

src/pages/clients/components/ClientsWrapper.vue

@@ -2,8 +2,10 @@
   .wrapper.flex.w-full.relative.mx-2
     clients-table(
       :open-form="openForm",
-      :is-open-form="isOpenForm"
-      :current-year="currentYear"
+      :is-open-form="isOpenForm",
+      :current-year="currentYear",
+      :updated-clients="updatedClients",
+      @reset-updated-clients="transmitReset"
     )
 </template>
 
@@ -16,6 +18,12 @@ export default {
     openForm: Function,
     currentYear: Number,
     isOpenForm: Boolean,
+    updatedClients: Boolean,
+  },
+  methods: {
+    transmitReset() {
+      this.$emit("reset-updated-clients");
+    },
   },
 };
 </script>