จัดการผู้ใช้งาน

src/modules/02_users/views/listsUser.vue

@@ -97,6 +97,15 @@ const columns = ref<QTableProps["columns"]>([
       return names.join(", ");
     },
   },
+  {
+    name: "enabled",
+    align: "left",
+    label: "สถานะการใช้งาน",
+    sortable: true,
+    field: "enabled",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
@@ -105,6 +114,7 @@ const visibleColumns = ref<string[]>([
   "firstname",
   "lastname",
   "role",
+  "enabled",
 ]);
 const keyword = ref<string>("");
 
@@ -241,15 +251,12 @@ function onLockUser(id: string, type: boolean) {
       showLoader();
       http
         .put(config.API.managementUser + `/${id}/enableStatus/${type}`)
-        .then((res) => {
-          console.log(res.data);
-          success($q, type ? "เปิดใช้งานสำเร็จ" : "ระงับการใช้งานสำเร็จ");
-          fetchListUsers();
+        .then(async () => {
+          await fetchListUsers();
+          await success($q, type ? "เปิดใช้งานสำเร็จ" : "ระงับการใช้งานสำเร็จ");
         })
         .catch((err) => {
           messageError($q, err);
-        })
-        .finally(() => {
           hideLoader();
         });
     },
@@ -347,7 +354,14 @@ onMounted(() => {
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
+              <div v-if="col.name === 'enabled'">
+                <q-icon
+                  :name="col.value ? 'check' : 'close'"
+                  :color="col.value ? 'primary' : 'red'"
+                  size="24px"
+                />
+              </div>
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>