Функция поиска

resources/js/Pages/Index.vue

@@ -6,9 +6,9 @@ import List from "../Components/List/List.vue";
 import ListItem from "../Components/List/ListItem.vue";
 import PageBody from "../Components/Page/PageBody.vue";
 import Badge from "../Components/Badge/Badge.vue";
-import {Link} from "@inertiajs/vue3"
+import {Link, router} from "@inertiajs/vue3"
 import AnimateSearch from "../Components/Input/Search/AnimateSearch.vue";
-import {ref} from "vue";
+import {ref, watch} from "vue";
 import Button from "../Components/Button/Button.vue";
 import ImportDocumentModal from "./Parts/ImportDocumentModal.vue";
 import EditDocumentModal from "./Parts/EditDocumentModal.vue";
@@ -20,12 +20,21 @@ const props = defineProps({
     }
 })
 
+const workTemplates = ref([...props.templates])
 const searchValue = ref()
 const showModalImport = ref(false)
 const showModalEdit = ref(false)
 const editTemplateId = ref(null)
 const vertical = ref(true)
 
+watch(() => searchValue.value, (search) => {
+    axios.post('/api/templates/search', {
+        search
+    }).then(res => {
+        workTemplates.value = res.data.templates
+    })
+})
+
 const onChangeLayoutList = () => {
     vertical.value = !vertical.value
 }
@@ -96,7 +105,7 @@ const onCloseModalEdit = () => {
                         </Button>
                     </div>
                     <List :vertical="vertical" class="h-[calc(100vh-224px)] overflow-y-auto pr-1">
-                        <div v-for="template in templates"
+                        <div v-for="template in workTemplates"
                              :key="template.id"
                              class="relative"
                         >