Поиск, работа над query в js

resources/js/Pages/Home/Index.vue

@@ -2,6 +2,8 @@
 import AppLayout from "../../Layouts/AppLayout.vue"
 import TableCards from './DataTable/Index.vue'
 import { NInput, NFlex, NDivider, NDatePicker } from 'naive-ui'
+import {useMedicalHistory} from "../../Composables/useMedicalHistory.js";
+import {useDebounceFn} from "@vueuse/core";
 
 const props = defineProps({
     cards: {
@@ -9,18 +11,28 @@ const props = defineProps({
         default: []
     }
 })
+
+const { navigate } = useMedicalHistory('/')
+
+const search = (value) => {
+    navigate(value)
+}
+
+const debounceSearch = useDebounceFn((searchValue) => {
+    search(searchValue)
+}, 500)
 </script>
 
 <template>
     <AppLayout>
         <template #header>
             <NFlex class="py-4" align="center" :wrap="false">
-                <NInput placeholder="Поиск по ФИО, № карты" />
+                <NInput placeholder="Поиск по ФИО, № карты" @update:value="val => debounceSearch(val)"/>
                 <NDivider vertical />
-                <NDatePicker type="daterange" clearable start-placeholder="Дата выписки с" end-placeholder="по" />
+                <NDatePicker type="daterange" clearable format="dd.MM.yyyy" start-placeholder="Дата выписки с" end-placeholder="по" />
             </NFlex>
         </template>
-        <TableCards :data="cards.data" min-height="calc(100vh - 136px)" max-height="calc(100vh - 136px)" />
+        <TableCards :data="cards.data" :meta="cards.meta" min-height="calc(100vh - 179px)" max-height="calc(100vh - 196px)" />
     </AppLayout>
 </template>