Merge pull request #158 from dderbentsov/UC-64

WIP Настроила пагинацию с фильтрацией

src/pages/clients/components/ClientsTable.vue

@@ -4,7 +4,6 @@
       :is-open-actions="marked.length",
       :open-form="openForm",
       @search="filterDataClients",
-      @reset-search="fetchDataClients"
     )
     .flex.flex-col.h-full.gap-y-2.table-container.w-full.mt-8.mb-3
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
@@ -62,6 +61,7 @@ export default {
       currentTablePage: 1,
       limit: 4,
       count: 0,
+      textSearch: "",
     };
   },
   computed: {
@@ -75,20 +75,29 @@ export default {
       this.count = data.count;
     },
     filterDataClients(text) {
-      fetchWrapper
-        .get(
-          `general/person/?last_name=${text}&?limit=${this.limit}&offset=${
-            (this.currentPage - 1) * this.limit
-          }`
-        )
-        .then((data) => this.saveDataClients(data));
+      if (text) this.textSearch = text;
+      else this.textSearch = "";
+      if (this.currentTablePage !== 1) this.currentTablePage = 1;
+      else {
+        this.currentTablePage = 1;
+        this.fetchDataClients();
+      }
     },
-    async fetchDataClients(currentPage) {
-      let response = await fetchWrapper.get(
+    async fetchDataClients() {
+      let response = {};
+      if (this.textSearch) {
+        response = await fetchWrapper.get(
+          `general/person/?last_name=${this.textSearch}&limit=${
+            this.limit
+          }&offset=${(this.currentTablePage - 1) * this.limit}`
+        );
+      } else {
+        response = await fetchWrapper.get(
           `general/person/?limit=${this.limit}&offset=${
-          (currentPage - 1) * this.limit
+            (this.currentTablePage - 1) * this.limit
           }`
         );
+      }
       this.saveDataClients(response);
     },
     selectedCheck(e) {
@@ -123,18 +132,19 @@ export default {
   watch: {
     updatedClients() {
       if (this.updatedClients === true) {
-        this.fetchDataClients(this.currentTablePage).then(
+        this.textSearch = "";
+        this.fetchDataClients().then(
           () => (this.currentTablePage = this.pageCount)
         );
         this.$emit("reset-updated-clients");
       }
     },
     currentTablePage() {
-      this.fetchDataClients(this.currentTablePage);
+      this.fetchDataClients();
     },
   },
   mounted() {
-    this.fetchDataClients(this.currentTablePage);
+    this.fetchDataClients();
   },
 };
 </script>

src/pages/clients/components/ClientsTableHat.vue

@@ -19,7 +19,7 @@
         secondary,
         @click="resetLastName",
         :size=40
-      ) Очистить
+      ) Сбросить
     clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-fit.gap-x-2
       base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
@@ -53,10 +53,16 @@ export default {
         this.$emit("search", this.searchClient);
     },
     resetLastName() {
-      this.$emit("reset-search");
       this.searchClient = "";
     },
   },
+  watch: {
+    searchClient() {
+      if (!this.searchClient) {
+        this.$emit("search");
+      }
+    },
+  },
 };
 </script>