From 9a5813d9cfb63860f3d972db1fb52cdccb3dcb77 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 16 Feb 2024 16:21:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20style=20?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B9=80=E0=B8=82=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B7=E0=B9=88=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/category/TableCategory.vue     | 134 +++++++++++-------
 1 file changed, 85 insertions(+), 49 deletions(-)

diff --git a/src/modules/00_support/components/category/TableCategory.vue b/src/modules/00_support/components/category/TableCategory.vue
index 4e1d5b8b5..9dd4717a3 100644
--- a/src/modules/00_support/components/category/TableCategory.vue
+++ b/src/modules/00_support/components/category/TableCategory.vue
@@ -37,22 +37,22 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex q-my-md">
+  <div class="flex">
     <q-btn
       flat
       round
-      class="bg-teal-1 full-height"
+      class="bg-teal-1 full-height q-mr-sm"
       color="primary"
       icon="mdi-chevron-left"
       dense
       @click="router.go(-1)"
     >
     </q-btn>
-    <p class="text-h6 text-weight-medium align-center">จัดการประเภทของปัญหา</p>
+    <p class="toptitle text-dark items-center">จัดการประเภทของปัญหา</p>
     <q-space />
   </div>
 
-  <div class="bg-white q-pa-md">
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
     <q-btn
       class="q-mb-sm"
       flat
@@ -69,54 +69,86 @@ onMounted(async () => {
     >
       <q-tooltip>เพิ่มข้อมูล</q-tooltip>
     </q-btn>
-    <d-table
+    <!-- <d-table
+      round
+      class="border_black"
       :rows="store.rowsCategory?.result"
       :columns="columnsCategory"
       row-key="name"
-    >
-      <template v-slot:body-cell-actions="data">
-        <q-td>
-          <div class="align-right">
-            <q-btn
-              class="q-ma-sm"
-              flat
-              dense
-              id="listViewFolderEdit"
-              icon="o_edit"
-              color="positive"
-              @click="
-                () => {
-                  open = true;
-                  status = 'edit';
-                  categoryId = data.row.id;
-                  currentName = data.row.name;
-
-                  console.log(currentName);
-                }
-              "
-            />
-
-            <q-btn
-              class="q-ma-sm"
-              flat
-              dense
-              id="listViewFolderDelete"
-              color="negative"
-              icon="mdi-trash-can-outline"
-              :data-testid="data.row.name"
-              @click="
-                () => {
-                  open = true;
-                  status = 'delete';
-                  categoryId = data.row.id;
-                }
-              "
-            />
-          </div>
-        </q-td>
-      </template>
-    </d-table>
-  </div>
+    > -->
+    <div>
+      <d-table
+        ref="table"
+        :columns="columnsCategory"
+        :rows="store.rowsCategory?.result"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="border_custom"
+      >
+        <template v-slot:body-cell-actions="data">
+          <q-td>
+            <div class="align-right">
+              <q-btn
+                color="grey"
+                flat
+                dense
+                round
+                size="14px"
+                icon="more_vert"
+                @click.stop
+              >
+                <q-menu>
+                  <q-list dense>
+                    <q-item
+                      v-close-popup
+                      clickable
+                      @click.stop="
+                        () => {
+                          open = true;
+                          status = 'edit';
+                          categoryId = data.row.id;
+                          currentName = data.row.name;
+                        }
+                      "
+                    >
+                      <q-item-section>
+                        <div class="row items-center white">
+                          <q-icon name="o_edit" color="positive" />
+                          <span class="q-ml-sm">แก้ไข</span>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section
+                        @click="
+                          () => {
+                            open = true;
+                            status = 'delete';
+                            categoryId = data.row.id;
+                          }
+                        "
+                        v-close-popup
+                      >
+                        <div class="row items-center white">
+                          <q-icon
+                            name="mdi-trash-can-outline"
+                            color="negative"
+                          />
+                          <span class="q-ml-sm">ลบ</span>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </q-td>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
 
   <dialog-category
     v-model.open="open"
@@ -128,6 +160,10 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
 .align-right {
   display: flex;
   align-items: right;