ปรับ style ให้เข้ากับหน้าอื่น

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,41 +69,59 @@ 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"
+    > -->
+    <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
-              class="q-ma-sm"
+                color="grey"
                 flat
                 dense
-              id="listViewFolderEdit"
+                round
-              icon="o_edit"
+                size="14px"
-              color="positive"
+                icon="more_vert"
-              @click="
+                @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;
-
-                  console.log(currentName);
                         }
                       "
-            />
+                    >
-
+                      <q-item-section>
-            <q-btn
+                        <div class="row items-center white">
-              class="q-ma-sm"
+                          <q-icon name="o_edit" color="positive" />
-              flat
+                          <span class="q-ml-sm">แก้ไข</span>
-              dense
+                        </div>
-              id="listViewFolderDelete"
+                      </q-item-section>
-              color="negative"
+                    </q-item>
-              icon="mdi-trash-can-outline"
+                    <q-item clickable>
-              :data-testid="data.row.name"
+                      <q-item-section
                         @click="
                           () => {
                             open = true;
@@ -111,12 +129,26 @@ onMounted(async () => {
                             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;