From ffa0992e2d0cef55ba7da03a22fd1ab23810be05 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 14 Mar 2024 15:07:28 +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=20ta?=
 =?UTF-8?q?ble&card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Achievement/03_Insignia.vue        | 268 ++++++++----------
 .../02_NameChangeHistory.vue                  | 180 ++++++------
 2 files changed, 208 insertions(+), 240 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 83bd28c02..5377169e8 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -554,6 +554,10 @@ function onSubmit() {
   });
 }
 
+function selectData(props: any) {
+  modal.value = true;
+}
+
 function filterSelector(val: any, update: Function, refData: string) {
   switch (refData) {
     case "insigniaOptions":
@@ -685,6 +689,7 @@ onMounted(async () => {
     />
 
     <q-btn-toggle
+      dense
       v-model="modelView"
       toggle-color="grey-4"
       class="no-shadow toggle-borderd"
@@ -696,7 +701,7 @@ onMounted(async () => {
       <template v-slot:table>
         <q-icon
           name="format_list_bulleted"
-          size="sm"
+          size="24px"
           :style="{
             color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
@@ -705,7 +710,7 @@ onMounted(async () => {
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
-          size="sm"
+          size="24px"
           :style="{
             color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
@@ -714,159 +719,134 @@ onMounted(async () => {
     </q-btn-toggle>
   </q-toolbar>
 
-  <div>
-    <q-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      ref="table"
-      v-bind="attrs"
-      class="custom-header-table"
-      :rows="rows"
-      :columns="columns"
-      :filter="filterSearch"
-      :grid="modelView === 'card'"
-      :rows-per-page-options="[0]"
-      :pagination="initialPagination"
-      :visible-columns="visibleColumns"
-      :pagination-label="paginationLabel"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <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-th auto-width />
-        </q-tr>
-      </template>
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :grid="modelView === 'card'"
+    :pagination="initialPagination"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    :rows-per-page-options="[20, 50, 100]"
+  >
+    <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-th auto-width />
+      </q-tr>
+    </template>
 
-      <template v-slot:body="props" v-if="modelView === 'table'">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td
-            v-for="col in props.cols"
-            class="cursor-pointer"
-            :key="col.name"
-            :props="props"
+    <template v-slot:body="props" v-if="modelView === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          class="cursor-pointer"
+          :key="col.name"
+          :props="props"
+          @click="selectData(props)"
+        >
+          <div
+            v-if="
+              col.name == 'receiveDate' ||
+              col.name == 'dateAnnounce' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
           >
-            <div
-              v-if="
-                col.name == 'receiveDate' ||
-                col.name == 'dateAnnounce' ||
-                col.name == 'refCommandDate'
-              "
-              class="table_ellipsis"
-            >
-              {{ col.value == null ? "-" : date2Thai(col.value) }}
-            </div>
-            <div v-else-if="col.name == 'year'" class="table_ellipsis">
-              {{ col.value + 543 }}
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
+            {{ col.value == null ? "-" : date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'year'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="info"
+            icon="mdi-history"
+            @click="clickHistory(props.row)"
+          >
+            <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil-outline"
+              @click.stop.prevent="onClickOpenDialog()"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
             <q-btn
               flat
-              dense
               round
-              size="14px"
               color="info"
               icon="mdi-history"
-              @click="clickHistory(props.row)"
+              @click.stop.prevent="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
+          </q-card-actions>
+          <q-separator />
+          <div>
+            <q-item
+              v-for="(col, index) in props.cols.filter(
+                (col) => col.name !== 'desc'
+              )"
+              :key="col.name"
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+            >
+              <q-item-section class="text-grey-6">
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
 
-      <template v-slot:item="props" v-else>
-        <div
-          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-        >
-          <q-card bordered>
-            <q-card-actions class="bg-grey-3" align="right">
-              <q-btn
-                flat
-                round
-                color="primary"
-                icon="mdi-pencil-outline"
-                @click.stop.prevent="onClickOpenDialog()"
-              >
-                <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-              </q-btn>
-              <q-btn
-                flat
-                round
-                color="info"
-                icon="mdi-history"
-                @click.stop.prevent="clickHistory(props.row)"
-              >
-                <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
-              </q-btn>
-            </q-card-actions>
-            <q-separator />
-            <div>
-              <q-item
-                v-for="(col, index) in props.cols.filter(
-                  (col) => col.name !== 'desc'
-                )"
-                :key="col.name"
-                :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
-              >
-                <q-item-section class="text-grey-6" v-if="index <= 7">
-                  <q-item-label>{{ col.label }}</q-item-label>
-                </q-item-section>
-
-                <q-item-section class="text-dark" v-if="index <= 7">
-                  <q-item-label
-                    v-if="
-                      col.name == 'receiveDate' ||
-                      col.name == 'dateAnnounce' ||
-                      col.name == 'refCommandDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </q-item-label>
-                  <q-item-label v-else-if="col.name == 'year'">
-                    {{ col.value + 543 }}
-                  </q-item-label>
-                  <q-item-label v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </q-item-label>
-                </q-item-section>
-
-                <q-item-section class="text-grey-6" v-if="index > 7">
-                  <q-item-label>{{ col.label }}</q-item-label>
-                </q-item-section>
-
-                <q-item-section class="text-dark" v-if="index > 7">
-                  <q-item-label
-                    v-if="
-                      col.name == 'receiveDate' ||
-                      col.name == 'dateAnnounce' ||
-                      col.name == 'refCommandDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </q-item-label>
-                  <q-item-label v-else-if="col.name == 'year'">
-                    {{ col.value + 543 }}
-                  </q-item-label>
-                  <q-item-label v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
-            </div>
-          </q-card>
-        </div>
-      </template>
-    </q-table>
-  </div>
+              <q-item-section class="text-dark">
+                <q-item-label
+                  v-if="
+                    col.name == 'receiveDate' ||
+                    col.name == 'dateAnnounce' ||
+                    col.name == 'refCommandDate'
+                  "
+                >
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+                <q-item-label v-else-if="col.name == 'year'">
+                  {{ col.value + 543 }}
+                </q-item-label>
+                <q-item-label v-else>
+                  {{ col.value ? col.value : "-" }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 283c78086..98e075ef0 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -275,106 +275,94 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row justify-end items-center">
-    <div class="toptitle row">
-      <q-input
-        dense
-        outlined
-        debounce="300"
-        ref="filterRef"
-        v-model="filterSearch"
-        placeholder="ค้นหา"
-        style="max-width: 200px"
-      >
-        <template v-slot:append>
-          <q-icon name="search" v-if="filterSearch == ''" />
-          <q-icon
-            name="clear"
-            v-if="filterSearch !== ''"
-            @click="filterSearch = ''"
-            class="cursor-pointer"
-          />
-        </template>
-      </q-input>
-      <q-select
-        dense
-        multiple
-        outlined
-        emit-value
-        map-options
-        options-dense
-        option-value="name"
-        v-model="visibleColumns"
-        :options="columns"
-        class="q-ml-sm"
-        style="min-width: 150px"
-        :display-value="$q.lang.table.columns"
-      />
-    </div>
-  </div>
-
-  <div>
-    <q-table
-      flat
+  <q-toolbar style="padding: 0px" class="text-primary row justify-end">
+    <q-input
       dense
-      bordered
-      virtual-scroll
-      ref="table"
-      v-bind="attrs"
-      class="custom-header-table"
-      :rows="rows"
-      :columns="columns"
-      :filter="filterSearch"
-      :rows-per-page-options="[0]"
-      :pagination="initialPagination"
-      :visible-columns="visibleColumns"
-      :pagination-label="paginationLabel"
-      :virtual-scroll-sticky-size-start="48"
+      outlined
+      label="ค้นหา"
+      class="q-mr-sm"
+      v-model="filterSearch"
     >
-      <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-th auto-width />
-        </q-tr>
+      <template v-slot:append>
+        <q-icon name="search" />
       </template>
+    </q-input>
 
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'status'" class="table_ellipsis">
-              {{ typeChangeName(col.value) }}
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              v-if="props.row.file != null"
-              color="green"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-file-document-outline"
-              @click="openFile(props.row.file)"
-            />
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="clickHistory(props.row)"
-            />
-          </q-td>
-        </q-tr>
-      </template>
-    </q-table>
-  </div>
+    <q-select
+      dense
+      multiple
+      outlined
+      emit-value
+      map-options
+      options-cover
+      options-dense
+      option-value="name"
+      style="min-width: 150px"
+      v-model="visibleColumns"
+      :options="columns"
+      :display-value="$q.lang.table.columns"
+    />
+  </q-toolbar>
+
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :rows-per-page-options="[0]"
+    :pagination="initialPagination"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    :virtual-scroll-sticky-size-start="48"
+  >
+    <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-th auto-width />
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <div v-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="clickHistory(props.row)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
 
   <history-table
     :rows="rowsHistory"