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

resources/js/Composables/useMedicalHistory.js

@@ -0,0 +1,28 @@
+import {router, usePage} from "@inertiajs/vue3";
+import {ref} from "vue";
+import {encodeQueryValue, stringifyQuery} from "ufo";
+
+export const useMedicalHistory = (url) => {
+    const meta = ref(usePage().props.cards.meta)
+
+    const navigate = (search, page, page_size) => {
+        const params = {
+            search,
+            page,
+            page_size
+        }
+        if (typeof params.page_size === 'undefined') {
+            params.page_size = meta.value.per_page
+        }
+        const query = stringifyQuery(params)
+
+        router.visit(`${url}?${query}`, {
+            preserveState: true
+        })
+    }
+
+    return {
+        meta,
+        navigate
+    }
+}

resources/js/Pages/Home/ArchiveHistoryModal/Index.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { NModal } from 'naive-ui'
+const open = defineModel('open')
+</script>
+
+<template>
+    <NModal v-model:show="open">
+        <template #header>
+
+        </template>
+    </NModal>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Pages/Home/DataTable/Index.vue

@@ -1,12 +1,18 @@
 <script setup>
 import {NDataTable, NEllipsis} from "naive-ui"
-import {h, ref} from "vue"
+import {h, reactive, ref} from "vue"
+import {useMedicalHistory} from "../../../Composables/useMedicalHistory.js";
 
+const { navigate } = useMedicalHistory('/')
 const props = defineProps({
     data: {
         type: Array,
         default: []
     },
+    meta: {
+        type: Object,
+        default: {}
+    },
     maxHeight: {
         type: String,
         default: null
@@ -67,10 +73,28 @@ const columns = ref([
         render: (row) => h(NEllipsis, null, { default: () => row.status || '-' })
     }
 ])
+
+const paginationReactive = reactive({
+    page: props.meta.current_page,
+    pageCount: props.meta.last_page,
+    pageSize: props.meta.per_page,
+    itemCount: props.meta.total,
+    pageSizes: [15, 50, 100],
+    showSizePicker: true,
+    prefix({ itemCount }) {
+        return `Всего карт ${itemCount}.`
+    },
+    onUpdatePage(page) {
+        navigate(undefined, page)
+    },
+    onUpdatePageSize(pageSize) {
+        navigate(undefined, 1, pageSize)
+    }
+})
 </script>
 
 <template>
-    <NDataTable remote striped :columns="columns" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
+    <NDataTable remote striped :columns="columns" :pagination="paginationReactive" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
 </template>
 
 <style scoped>

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>