ทะเบียนประวัติ: ปรับแท็บอื่นๆ

src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue

@@ -28,6 +28,10 @@ const {
 
 const id = ref<string>("");
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -287,6 +291,7 @@ onMounted(() => {
     :columns="columns"
     dense
     bordered
+    v-model:pagination="pagination"
     flat
     :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :grid="mode === 'card'"
@@ -384,29 +389,29 @@ onMounted(() => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
   </d-table>
 
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form greedy @submit.prevent @validation-success="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
+        <q-header>
-          <DialogHeader tittle="อื่นๆ" :close="closeDialog" />
+          <q-toolbar>
-        </q-card-section>
+            <DialogHeader
+              :tittle="edit ? 'แก้ไขข้อมูลอื่นๆ' : 'เพิ่มข้อมูลอื่นๆ'"
+              :close="closeDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <q-separator />
+        <q-page-container>
-        <q-card-section class="q-p-sm">
+          <q-page class="q-pa-md">
             <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
               <div class="col-xs-6 col-sm-6 col-md-6">
                 <datepicker
@@ -458,24 +463,27 @@ onMounted(() => {
                 />
               </div>
             </div>
-        </q-card-section>
+          </q-page>
-
+        </q-page-container>
         <q-separator />
-        <q-card-actions align="right">
+        <q-footer>
+          <q-separator color="grey-4" />
+          <q-toolbar class="fit row wrap justify-end items-start content-start">
             <q-btn
-            id="onSubmit"
-            type="submit"
               dense
               unelevated
               label="บันทึก"
+              id="onSubmit"
+              type="submit"
               color="public"
               class="q-px-md"
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
-        </q-card-actions>
+          </q-toolbar>
+        </q-footer>
       </q-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />

src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue

@@ -19,7 +19,10 @@ const id = defineModel<string>("id", { required: true });
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const filterKeyword = ref<string>("");
@@ -126,16 +129,24 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
+    <q-layout
-      <q-card-section class="flex justify-between" style="padding: 0">
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
           <DialogHeader
             tittle="ประวัติแก้ไขอื่นๆ"
             :close="() => (modal = false)"
           />
-      </q-card-section>
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-      <q-separator />
+      <q-page-container>
-      <q-card-section class="q-p-sm">
+        <q-page class="q-pa-md">
           <div class="row q-gutter-sm q-mb-sm">
             <q-space />
             <q-input
@@ -206,20 +217,9 @@ watch(modal, (status) => {
                 </q-td>
               </q-tr>
             </template>
-
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="currentPage"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPage)"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
           </d-table>
-      </q-card-section>
+        </q-page>
-    </q-card>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>