ประเมิน => permission รายการการประชุม

src/modules/12_evaluatePersonal/components/Meeting/MainPage.vue

@@ -1,68 +1,30 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, watch } from "vue";
-import type { QTableProps } from "quasar";
-import router from "@/router";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
-import { useEvaluateMeetingDataStore } from "@/modules/12_evaluatePersonal/store/MeetingStore";
+import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateMeetingDataStore } from "@/modules/12_evaluatePersonal/store/MeetingStore";
+
 const $q = useQuasar();
 const dataStore = useEvaluateMeetingDataStore();
 const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-  success,
-} = mixin;
-
-// const currentPage = ref<number>(1);
-// const maxPage = ref<number>(1);
-// const page = ref<number>(1);
-// const rowsPerPage = ref<number>(10);
+const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
 /**
- *pagination ของตาราง
+ * function fetch ข้อมูลรายการการประชุม
  */
-const pagination = ref({
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getList();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getList();
-//   }
-// );
-async function getList() {
+function getList() {
   showLoader();
-  await http
-    .get(
-      config.API
-        .meeting
-        // currentPage.value,
-        // rowsPerPage.value,
-        // filterKeyword.value
-        ()
-    )
+  http
+    .get(config.API.meeting())
     .then((res) => {
-      // maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = res.data.result;
       dataStore.fetchData(data);
     })
@@ -75,31 +37,23 @@ async function getList() {
 }
 
 /**
- * ลบข้อมูล
- * @param id ไอดีของข้อมูล
+ * ลบรายการการประชุม
+ * @param id รายการการประชุม
  */
 function clickDelete(id: string) {
-  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
-}
-
-/**
- * ลบข้อมูล
- * @param id type
- */
-async function deleteData(id: string) {
-  console.log(id);
-  showLoader();
-  await http
-    .delete(config.API.meetingById(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getList();
-    });
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.meetingById(id))
+      .then(async () => {
+        await getList();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+        showLoader();
+      });
+  });
 }
 
 /**เมื่อเริ่มโหลดหน้า
@@ -107,7 +61,6 @@ async function deleteData(id: string) {
  */
 onMounted(() => {
   getList();
-  // get ข้อมูลแล้วโยนใส่ store
 });
 
 /**
@@ -122,19 +75,22 @@ function resetFilter() {
   }
 }
 
-function filterFn() {
-  getList();
-  console.log("enter", filterKeyword.value);
-}
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการการประชุม</div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div>
+      <div v-if="checkPermission($route)?.attrIsCreate">
         <q-btn
           @click="router.push(`/evaluate/meeting/add`)"
-          size="12px"
           flat
           round
           color="add"
@@ -154,7 +110,6 @@ function filterFn() {
         outlined
         debounce="300"
         placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -197,17 +152,6 @@ function filterFn() {
         v-model:pagination="pagination"
         :visible-columns="dataStore.visibleColumns"
       >
-        <!-- <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="currentPage"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template> -->
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width />
@@ -217,26 +161,50 @@ function filterFn() {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.pervent="
+                  router.push(`/evaluate/meeting-detail/${props.row.id}`)
+                "
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsGet &&
+                  checkPermission($route)?.attrIsUpdate
+                "
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click.pervent="
+                  router.push(`/evaluate/meeting/${props.row.id}`)
+                "
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
-                size="12px"
                 flat
                 round
                 color="red"
-                @click="clickDelete(props.row.id)"
+                @click.pervent="clickDelete(props.row.id)"
                 icon="mdi-delete"
               >
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="router.push(`/evaluate/meeting/${props.row.id}`)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -244,7 +212,6 @@ function filterFn() {
                 {{ col.value }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>