From c29f8defb8c18734555aac0c50bf518245b7cefe Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 22 Aug 2023 17:06:53 +0700
Subject: [PATCH] no message

---
 .../components/AppointMent/Main.vue           |  11 +-
 .../05_placement/components/Other/Main.vue    |   7 +
 .../components/Relocation/RelocationMain.vue  |   7 +
 .../probation/FormEvaluation/FormReport.vue   | 321 ++++++++++++++----
 .../FormEvaluation/FormSaveResult.vue         |   3 +-
 .../components/Discharged/dischargedMain.vue  |   7 +
 .../components/DismissOrder/DismissOrder.vue  |   7 +
 .../components/Expulsion/expulsionMain.vue    |   7 +
 .../components/resign/Deceased.vue            |  35 +-
 9 files changed, 318 insertions(+), 87 deletions(-)

diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index 9165fa683..3a4c8fca7 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -192,8 +192,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a, b) => (b.createdAt) - (a.createdAt)
-    
   },
   {
     name: "status",
@@ -337,6 +335,13 @@ const status = (val: string) => {
       return "-";
   }
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -408,6 +413,8 @@ const status = (val: string) => {
             :filter="filterKeyword"
             row-key="citizenId"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 669a72823..5e1cd20eb 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -369,6 +369,12 @@ const status = (val: string) => {
       return "-";
   }
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการอื่นๆ</div>
@@ -438,6 +444,7 @@ const status = (val: string) => {
             :filter="filterKeyword"
             row-key="fullname"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
index de39c3233..54b05d98c 100644
--- a/src/modules/05_placement/components/Relocation/RelocationMain.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -325,6 +325,12 @@ const closeModalTree = async () => {
 onMounted(async () => {
   await getData();
 });
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการย้าย</div>
@@ -390,6 +396,7 @@ onMounted(async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index d42e1c3a0..451cf6f71 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -8,7 +8,6 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
-const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -21,13 +20,22 @@ const {
 } = mixin;
 const route = useRoute();
 const assignId = ref<string>(route.params.form.toString());
-
+const saveData = ref<boolean>(true)
 const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
 const status = ref<boolean>(true);
 // const evaluate = ref<any>([]);
-
+const saveEdit = (id: string) => {
+  dialogConfirm($q, () => console.log("save"));
+};
+const edit = () => {
+  status.value = true;
+  console.log(status.value);
+};
+const cancel = () => {
+  status.value = false;
+};
 onMounted(() => {
   fecthAssign(assignId.value);
   fecthResult(assignId.value);
@@ -81,6 +89,7 @@ const fecthResult = async (id: string) => {
       director1_dated.value = data.director1_dated;
       director2_dated.value = data.director2_dated;
       status.value = false;
+      saveData.value = false;
     })
     .catch((e) => {
       console.log(e);
@@ -138,16 +147,49 @@ const postData = async () => {
 </script>
 
 <template>
-  <div class="row col-12 q-mr-md">
-    <q-form ref="myForm">
+  <div class="row col-12 q-ma-xs">
       <div class="toptitle text-dark col-12 row items-center">
         <div>แบบรายงานการประเมินฯ</div>
+        <q-space />
+        <div v-if="status == false">
+          <q-btn
+            flat
+            round
+            color="primary"
+            @click="edit()"
+            icon="mdi-pencil-outline"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+        <div v-else>
+          <q-btn flat round color="red" @click="cancel()" icon="mdi-undo">
+            <q-tooltip>ยกเลิก</q-tooltip>
+          </q-btn>
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="saveEdit(assignId)"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
       </div>
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :readonly ="!status"
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -155,10 +197,23 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -166,8 +221,16 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              :readonly="!status"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -175,10 +238,23 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -189,30 +265,70 @@ const postData = async () => {
       </div>
 
       <div class="col-12 row q-mt-xs">
+        <div class="col-12 row q-col-gutter-md">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[
-            (val) =>
-              !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
-          ]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless emit-value map-options
-            option-label="label" option-value="value" outlined v-model="develop"
-            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="options"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            :disable="!status"
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
+    </div>
       <div class="col-12 row q-mt-lg">
+        <div class="col-12 row q-col-gutter-md">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[
-            (val) =>
-              !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
-          ]" hide-bottom-space :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless emit-value
-            map-options option-label="label" option-value="value" outlined v-model="result"
-            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="optionsResult"
+            class="col-xs-12 col-sm-6"
+            :disable="!status"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="result"
+            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
-
+    </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']" />
+          <q-input
+            hide-bottom-space
+            dense
+            borderless
+            outlined
+            :disable="!status"
+            class="bg-white"
+            type="textarea"
+            
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -226,11 +342,27 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander" label=""
-              option-label="name" disable />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label=""
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                :readonly="!status"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -238,10 +370,23 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -257,11 +402,27 @@ const postData = async () => {
             <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector" label=""
-              option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              :disable="!status"
+              :options="optionDirector"
+              label=""
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -269,12 +430,25 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director1_dated != null
-                      ? date2Thai(director1_dated)
-                      : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -290,11 +464,27 @@ const postData = async () => {
             <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector" label=""
-              option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              :options="optionDirector"
+              :disable="!status"
+              label=""
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -302,12 +492,25 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director2_dated != null
-                      ? date2Thai(director2_dated)
-                      : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -320,9 +523,13 @@ const postData = async () => {
 
       <q-toolbar class="text-primary">
         <q-space />
-        <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          @click="savaForm"
+          v-if="!saveData"
+        />
       </q-toolbar>
-    </q-form>
   </div>
 </template>
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 9ecf53361..5da0549cb 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -407,8 +407,7 @@ const saveformdata = async (data: any) => {
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
     <div class="toptitle text-dark col-12 row items-center">
-      <div>แบบบันทึกผล</div>
-      <q-space/>        
+      <div>แบบบันทึกผล</div>      
           <q-space />
           <div v-if="status == false">
             <q-btn
diff --git a/src/modules/06_retirement/components/Discharged/dischargedMain.vue b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
index a007e5d67..79bd53767 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedMain.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
@@ -302,6 +302,12 @@ const saveOrder = async () => {
       hideLoader();
     });
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการปลดออก</div>
@@ -367,6 +373,7 @@ const saveOrder = async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index 34e77698d..2914a3a20 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -302,6 +302,12 @@ const saveOrder = async () => {
       hideLoader();
     });
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการให้ออก</div>
@@ -367,6 +373,7 @@ const saveOrder = async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
index 714187f17..9bd73b41b 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
@@ -303,6 +303,12 @@ const saveOrder = async () => {
       hideLoader();
     });
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการไล่ออก</div>
@@ -368,6 +374,7 @@ const saveOrder = async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index a548cad24..f0cae6c40 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -125,17 +125,7 @@ const fectListDecased = async () => {
     });
 };
 
-const paging = ref<boolean>(true);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
@@ -147,6 +137,12 @@ const resetFilter = () => {
 const nextPage = (id: string) => {
   router.push("/deceased/" + id);
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -196,7 +192,7 @@ const nextPage = (id: string) => {
           />
         </div>
         <div class="col-12 q-pt-sm">
-          <q-table
+          <d-table
             ref="table"
             :columns="columns"
             :rows="rows"
@@ -208,7 +204,6 @@ const nextPage = (id: string) => {
             dense
             class="custom-header-table"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
             v-model:pagination="pagination"
           >
             <template v-slot:header="props">
@@ -257,19 +252,7 @@ const nextPage = (id: string) => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </d-table>
         </div>
       </div>
     </div>