From 7d74a4e792badf288bc8e630d51e184bf6fef512 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 2 Apr 2024 15:08:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=81=E0=B8=97=E0=B9=87=E0=B8=9A=E0=B8=AD=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=99=E0=B9=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Other/01_OtherInformation.vue      | 174 ++++++++--------
 .../Other/01_OtherInformationHistory.vue      | 188 +++++++++---------
 2 files changed, 185 insertions(+), 177 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
index e7bc8b1b3..d136bb166 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
+++ b/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,98 +389,101 @@ 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">
-          <DialogHeader tittle="อื่นๆ" :close="closeDialog" />
-        </q-card-section>
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="edit ? 'แก้ไขข้อมูลอื่นๆ' : 'เพิ่มข้อมูลอื่นๆ'"
+              :close="closeDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <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
-                menu-class-name="modalfix"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    ref="dateRef"
-                    class="full-width inputgreen cursor-pointer"
-                    outlined
-                    dense
-                    :model-value="date2Thai(date)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="'color: var(--q-primary)'"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+        <q-page-container>
+          <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
+                  menu-class-name="modalfix"
+                  v-model="date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      ref="dateRef"
+                      class="full-width inputgreen cursor-pointer"
+                      outlined
+                      dense
+                      :model-value="date2Thai(date)"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                      hide-bottom-space
+                      :label="`${'วันที่'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="'color: var(--q-primary)'"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="detailRef"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="detail"
+                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียด'}`"
+                />
+              </div>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                ref="detailRef"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                dense
-                lazy-rules
-                v-model="detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-              />
-            </div>
-          </div>
-        </q-card-section>
-
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+        <q-footer>
+          <q-separator color="grey-4" />
+          <q-toolbar class="fit row wrap justify-end items-start content-start">
+            <q-btn
+              dense
+              unelevated
+              label="บันทึก"
+              id="onSubmit"
+              type="submit"
+              color="public"
+              class="q-px-md"
+            >
+              <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            </q-btn>
+          </q-toolbar>
+        </q-footer>
       </q-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
index 1d620f529..9cb947397 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
+++ b/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,100 +129,97 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขอื่นๆ"
-          :close="() => (modal = false)"
-        />
-      </q-card-section>
-
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            debounce="300"
-          >
-            <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขอื่นๆ"
+            :close="() => (modal = false)"
           />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-          :filter="filterKeyword"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-          <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-card>
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row q-gutter-sm q-mb-sm">
+            <q-space />
+            <q-input
+              standout
+              dense
+              v-model="filterKeyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              debounce="300"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterKeyword == ''"
+                  name="search"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+                <q-icon
+                  v-if="filterKeyword"
+                  name="cancel"
+                  @click.stop.prevent="filterKeyword = ''"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+          <d-table
+            ref="table"
+            flat
+            bordered
+            dense
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :filter="filterKeyword"
+          >
+            >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>