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

src/components/LoggedInLayout.vue

@@ -4,14 +4,17 @@
       :is-open-form="isOpenForm",
       :close-form="closeForm",
       :open-form="openForm",
-      :current-year="currentYear"
+      :current-year="currentYear",
+      @update-client="setUpdatedClients"
     )
     .flex.flex-auto
       the-sidebar
       router-view(
         :open-form="openForm",
         :is-open-form="isOpenForm",
-        :current-year="currentYear"
+        :current-year="currentYear",
+        :updated-clients="updatedClients",
+        @reset-updated-clients="resetUpdatedClients"
       )
 </template>
 
@@ -26,6 +29,7 @@ export default {
     return {
       isOpenForm: false,
       currentYear: null,
+      updatedClients: false,
     };
   },
   methods: {
@@ -38,6 +42,12 @@ export default {
     printCurrentYear() {
       return new Date().getFullYear();
     },
+    setUpdatedClients() {
+      this.updatedClients = true;
+    },
+    resetUpdatedClients() {
+      this.updatedClients = false;
+    },
   },
   mounted: function () {
     this.currentYear = this.printCurrentYear();

src/components/TheHeader.vue

@@ -3,7 +3,8 @@
     base-client-form-create(
       v-if="isOpenForm",
       :close-form="closeForm",
-      :current-year="currentYear"
+      :current-year="currentYear",
+      @update-client="transmitUpdateClient"
     )
     .flex.items-center.box-border.cursor-pointer.mr-auto
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
@@ -58,6 +59,9 @@ export default {
       localStorage.clear();
       this.$router.push("/login");
     },
+    transmitUpdateClient() {
+      this.$emit("update-client");
+    },
   },
 };
 </script>

src/components/base/BaseClientFormCreate.vue

@@ -210,6 +210,7 @@ export default {
         this.createIdentityDocument(result.id);
         this.createAddress(result.id);
       });
+      this.$emit("update-client");
     },
     filterDataEmptyProperty(data) {
       let postData = data;

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>