เพิ่มการแสดง วันที่สร้าง

src/modules/00_support/components/category/TableCategory.vue

@@ -4,13 +4,17 @@ import DialogCategory from "@/modules/00_support/components/category/DialogCateg
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 const router = useRouter();
 const store = useSupportStore();
 const open = ref<boolean>(false);
 const currentName = ref<string>("");
 const status = ref<"add" | "edit" | "delete">("add");
 const categoryId = ref<string>("");
+import { useCounterMixin } from "@/stores/mixin";
+const { dialogRemove, convertDateDisplay, date2Thai } = useCounterMixin();
 
+const $q = useQuasar();
 const columnsCategory = [
   {
     name: "name",
@@ -21,6 +25,16 @@ const columnsCategory = [
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    field: "createdAt",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "actions",
     align: "right",
@@ -43,7 +57,7 @@ onMounted(async () => {
       round
       class="bg-teal-1 full-height q-mr-sm"
       color="primary"
-      icon="mdi-chevron-left"
+      icon="mdi-arrow-left"
       dense
       @click="router.go(-1)"
     >
@@ -60,9 +74,9 @@ onMounted(async () => {
       color="primary"
       @click="
         () => {
-          currentName = '';
           open = true;
           status = 'add';
+          currentName = '';
         }
       "
       icon="mdi-plus"
@@ -80,58 +94,50 @@ onMounted(async () => {
         dense
         class="border_custom"
       >
+        <template v-slot:body-cell-createdAt="data">
+          <q-td>
+            {{ date2Thai(data.row.createdAt) }}
+          </q-td>
+        </template>
+
         <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
+                id="listViewFolderEdit"
+                icon="edit"
+                color="edit"
+                @click="
+                  () => {
+                    open = true;
+                    status = 'edit';
+                    categoryId = data.row.id;
+                    currentName = data.row.name;
+                  }
+                "
               >
-                <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="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-delete" color="red" />
-                          <span class="q-ml-sm">ลบ</span>
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+
+              <q-btn
+                class="q-ma-sm"
+                flat
+                dense
+                id="listViewFolderDelete"
+                color="red"
+                icon="mdi-delete"
+                :data-testid="data.row.name"
+                @click="
+                  () => {
+                    dialogRemove($q, () => {
+                      store.deleteCategory(data.row.id);
+                    });
+                  }
+                "
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </div>
           </q-td>