WIP Прикрутила поиск по совпадению от 3 символов

src/pages/clients/components/ClientsTable.vue

@@ -1,6 +1,11 @@
 <template lang="pug">
   .wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
-    clients-table-hat(:is-open-actions="marked.length" :open-form="openForm")
+    clients-table-hat(
+      :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
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
       .flex.flex-col
@@ -40,7 +45,6 @@ export default {
 
   data() {
     return {
-      isOpenFormCreate: false,
       selectAll: false,
       marked: [],
       dataClients: [],
@@ -50,6 +54,11 @@ export default {
     saveDataClients(data) {
       this.dataClients = data.results;
     },
+    filterDataClients(text) {
+      fetchWrapper
+        .get(`general/person/?last_name=${text}`)
+        .then((data) => this.saveDataClients(data));
+    },
     fetchDataClients() {
       fetchWrapper
         .get("general/person/")

src/pages/clients/components/ClientsTableHat.vue

@@ -2,10 +2,14 @@
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
       .input
-        base-input(:with-icon="true" icon-position="left")
+        base-input(:with-icon="true", icon-position="left", v-model:value="searchClient")
           .icon-search
-      button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
+      button.filter-button.flex.items-center.justify-center.box-border(
+        class="px-2.5"
+        @click="searchLastName"
+      )
         .icon-filter.text-xl.leading-4
+      button.filter-button.flex.items-center.justify-center.px-10px(@click="resetLastName") Очистить  
     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")
@@ -28,6 +32,21 @@ export default {
     openForm: Function,
     isOpenActions: Number,
   },
+  data() {
+    return {
+      searchClient: "",
+    };
+  },
+  methods: {
+    searchLastName() {
+      if (this.searchClient.length >= 3)
+        this.$emit("search", this.searchClient);
+    },
+    resetLastName() {
+      this.$emit("reset-search", this.searchClient);
+      this.searchClient = "";
+    },
+  },
 };
 </script>
 

src/pages/clients/components/ClientsTableRow.vue

@@ -149,7 +149,6 @@ export default {
     check: Function,
     isCheck: Boolean,
     client: Object,
-    fetchDataClients: Function,
     currentYear: Number,
   },
   created() {