From bcf7414298f3eb4b08984d378113693801c7afe7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 20 Aug 2024 16:48:21 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AF=20=3D>?=
 =?UTF-8?q?=20permission?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/3_result/fileUpload.vue        |  11 +-
 .../components/4_Allocate/Main.vue            | 137 +++++++-----------
 .../components/4_Allocate/OrgList.vue         |  67 ++++-----
 .../07_insignia/components/5_Borrow/Main.vue  |  66 +++------
 src/modules/07_insignia/views/ResultPage.vue  |  82 ++++-------
 5 files changed, 137 insertions(+), 226 deletions(-)

diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index cd96f4a96..dbb9465b5 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -151,7 +152,11 @@ onMounted(async () => {
   <Transition>
     <div class="rounded-borders q-pa-md q-mb-md">
       <div class="row col-12">
-        <q-card bordered class="col-12 q-pa-sm q-mb-sm">
+        <q-card
+          v-if="checkPermission($route)?.attrIsCreate"
+          bordered
+          class="col-12 q-pa-sm q-mb-sm"
+        >
           <q-form ref="myForm">
             <div class="row col-12 q-col-gutter-x-sm">
               <div class="col-3">
@@ -262,7 +267,7 @@ onMounted(async () => {
             </template>
 
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
+              <q-tr :props="props">
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
@@ -276,11 +281,11 @@ onMounted(async () => {
                 </q-td>
                 <q-td auto-width>
                   <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
                     type="a"
                     :href="props.row.file"
                     target="_blank"
                     dense
-                    size="14px"
                     flat
                     round
                     color="deep-orange-6"
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index e706d45c9..d0d92fb79 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -4,6 +4,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import router from "@/router";
 import { useQuasar } from "quasar";
+import { checkPermission } from "@/utils/permissions";
 
 /** impotrType */
 import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
@@ -124,11 +125,14 @@ async function fecthRound() {
         if (roundYear.value) {
           await fecthInsignia();
           await fecthInsigniaType();
+        } else {
+          hideLoader();
         }
       }
     })
     .catch((err) => {
       messageError($q, err);
+      hideLoader();
     });
 }
 
@@ -136,17 +140,15 @@ async function fecthRound() {
 async function fecthInsignia() {
   await http
     .get(config.API.insigniaOrg)
-    .then((res) => {
+    .then(async (res) => {
       let data = res.data.result;
-      DataStore.fetchDatainsignia(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(async () => {
+      await DataStore.fetchDatainsignia(data);
       insigniaOp.value = await DataStore.insigniaOp.filter(
         (x: any) => x.type == tab.value || x.type === ""
       );
+    })
+    .catch((err) => {
+      messageError($q, err);
     });
 }
 
@@ -272,15 +274,15 @@ async function saveEdit(
   await http
     .put(config.API.insigniaManageById(id), body)
     .then(async () => {
-      success($q, "แก้ไขข้อมูลสำเร็จ");
       await fecthlistInsignia();
+      await success($q, "แก้ไขข้อมูลสำเร็จ");
+      close();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
-      close();
     });
 }
 
@@ -294,8 +296,8 @@ async function clickDelete(insigniaId: string) {
     await http
       .delete(config.API.insigniaManageById(insigniaId))
       .then(async () => {
-        success($q, "ลบข้อมูลสำเร็จ");
         await fecthlistInsignia();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
@@ -473,8 +475,8 @@ onMounted(async () => {
 
             <div>
               <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
                 @click="addData()"
-                size="12px"
                 flat
                 round
                 color="add"
@@ -545,103 +547,68 @@ onMounted(async () => {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-
               </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
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    v-if="checkPermission($route)?.attrIsGet"
                     flat
                     round
                     dense
-                    @click.stop
+                    icon="mdi-eye"
+                    color="info"
+                    @click.stop="
+                      redirectToPage(props.row.id, props.row.insignia)
+                    "
                   >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: auto">
-                        <q-item clickable @click.stop="clickEditrow(props.row)">
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>แก้ไข</q-tooltip>
-                            <q-icon
-                              color="primary"
-                              size="xs"
-                              name="mdi-pencil"
-                            />
-                          </q-item-section>
-                          <q-item-section>แก้ไข</q-item-section>
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click.stop="clickDelete(props.row.id)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบ</q-tooltip>
-                            <q-icon color="red" size="xs" name="mdi-delete" />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
+                    <q-tooltip> รายละเอียด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    flat
+                    round
+                    dense
+                    icon="edit"
+                    color="edit"
+                    @click.stop="clickEditrow(props.row)"
+                  >
+                    <q-tooltip> แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsDelete"
+                    flat
+                    round
+                    dense
+                    icon="delete"
+                    color="red"
+                    @click.stop="clickDelete(props.row.id)"
+                  >
+                    <q-tooltip> ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
-                <q-td
-                  key="no"
-                  :props="props"
-                  @click="redirectToPage(props.row.id, props.row.insignia)"
-                >
+                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
-                  key="year"
-                  :props="props"
-                  @click="redirectToPage(props.row.id, props.row.insignia)"
-                >
+                <q-td key="year" :props="props">
                   {{ props.row.year }}
                 </q-td>
-                <q-td
-                  key="insignia"
-                  :props="props"
-                  @click="redirectToPage(props.row.id, props.row.insignia)"
-                >
+                <q-td key="insignia" :props="props">
                   {{ props.row.insignia }}
                 </q-td>
-                <q-td
-                  key="total"
-                  :props="props"
-                  @click="redirectToPage(props.row.id, props.row.insignia)"
-                >
+                <q-td key="total" :props="props">
                   {{ props.row.total }}
                 </q-td>
-                <q-td
-                  key="allocate"
-                  :props="props"
-                  @click="redirectToPage(props.row.id, props.row.insignia)"
-                >
+                <q-td key="allocate" :props="props">
                   {{ props.row.allocate }}
                 </q-td>
-                <q-td
-                  key="remain"
-                  :props="props"
-                  @click="redirectToPage(props.row.id, props.row.insignia)"
-                >
+                <q-td key="remain" :props="props">
                   {{ props.row.remain }}
                 </q-td>
-
               </q-tr>
             </template>
           </d-table>
diff --git a/src/modules/07_insignia/components/4_Allocate/OrgList.vue b/src/modules/07_insignia/components/4_Allocate/OrgList.vue
index a442ce07b..d633d177e 100644
--- a/src/modules/07_insignia/components/4_Allocate/OrgList.vue
+++ b/src/modules/07_insignia/components/4_Allocate/OrgList.vue
@@ -5,6 +5,7 @@ import { useRoute } from "vue-router";
 import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
 
 /** impotrType */
 import type { QTableProps } from "quasar";
@@ -203,11 +204,13 @@ async function save(organizationId: string, total: string) {
     .then(async () => {
       await fecthListData();
       await fecthDashboard();
-      await close();
       await success($q, "บันทึกมูลสำเร็จ");
+      await close();
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -333,11 +336,11 @@ onMounted(async () => {
         <div>
           <q-btn
             @click="clickAdd()"
-            size="12px"
             flat
             round
             color="add"
             icon="mdi-plus"
+            v-if="checkPermission($route)?.attrIsCreate"
           >
             <q-tooltip>จัดสรรเครื่องราชอิสริยาภรณ์ให้หน่วยงาน</q-tooltip>
           </q-btn>
@@ -406,51 +409,33 @@ onMounted(async () => {
             </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
-                  icon="mdi-dots-vertical"
-                  size="12px"
-                  color="grey-7"
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
                   flat
                   round
                   dense
-                  @click.stop
+                  icon="edit"
+                  color="edit"
+                  @click.stop="clickEditrow(props.row)"
                 >
-                  <q-menu transition-show="jump-down" transition-hide="jump-up">
-                    <q-list dense style="min-width: auto">
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click.stop="clickEditrow(props.row)"
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
-                          <q-tooltip>แก้ไข</q-tooltip>
-                          <q-icon color="primary" size="xs" name="mdi-pencil" />
-                        </q-item-section>
-                        <q-item-section>แก้ไข</q-item-section>
-                      </q-item>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click.stop="clickDelete(props.row.id)"
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
-                          <q-tooltip>ลบ</q-tooltip>
-                          <q-icon color="red" size="xs" name="mdi-delete" />
-                        </q-item-section>
-                        <q-item-section>ลบ</q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-menu>
+                  <q-tooltip> แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  flat
+                  round
+                  dense
+                  icon="delete"
+                  color="red"
+                  @click.stop="clickDelete(props.row.id)"
+                >
+                  <q-tooltip> ลบข้อมูล</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td key="no" :props="props">
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index f84506e52..19ab9c591 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
 
 /** impotrType */
 import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
@@ -45,7 +46,6 @@ const visibleColumns = ref<String[]>([
   "returnOrganization",
   "returnDate",
   "returnReason",
-
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -235,7 +235,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
 ]);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
@@ -263,7 +262,7 @@ const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 
 /** function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ*/
 async function fecthRound() {
-  // showLoader();
+  showLoader();
   await http
     .get(config.API.noteround())
     .then(async (res) => {
@@ -295,15 +294,15 @@ async function fecthRound() {
         roundYear.value = data[0].year;
         if (roundYear.value) {
           await fecthInsigniaType();
+        } else {
+          hideLoader();
         }
       }
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    // .finally(() => {
-    //   hideLoader();
-    // });
+      hideLoader();
+    });
 }
 
 /** function เรียกประเภทเครื่องราชฯ*/
@@ -430,16 +429,6 @@ function filterSelector(val: any, update: Function, name: any) {
   });
 }
 
-// const clearInsigniaFilters = (name: string) => {
-//   if (name === "employeeClassOps") {
-//     DataStore.employeeClass = "all";
-//     employeeClassOps.value = DataStore.employeeClassOps;
-//   } else if (name === "fileterInsigniaList") {
-//     DataStore.insignia = "";
-//     fileterInsigniaList.value = insigniaList.value;
-//   }
-// };
-
 /** Hook*/
 onMounted(async () => {
   await fecthRound();
@@ -585,13 +574,6 @@ watch(tab, async () => {
     )"
               >
                 <template v-if="DataStore.insignia !== ''" v-slot:append>
-                  <!-- <q-icon name="cancel" @click.stop.prevent="
-                    clearInsigniaFilters('fileterInsigniaList'),
-                    DataStore.searchDatatable(
-                      DataStore.insignia,
-                      DataStore.employeeClass
-                    )
-                    " class="cursor-pointer" /> -->
                 </template>
                 <template v-slot:no-option>
                   <q-item>
@@ -633,13 +615,6 @@ watch(tab, async () => {
                   v-if="DataStore.employeeClass !== 'all'"
                   v-slot:append
                 >
-                  <!-- <q-icon name="cancel" @click.stop.prevent="
-                    clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDatatable(
-                      DataStore.insignia,
-                      DataStore.employeeClass
-                    )
-                    " class="cursor-pointer" /> -->
                 </template>
                 <template v-slot:no-option>
                   <q-item>
@@ -652,8 +627,8 @@ watch(tab, async () => {
 
               <div>
                 <q-btn
+                  v-if="checkPermission($route)?.attrIsCreate"
                   @click="addData()"
-                  size="12px"
                   flat
                   round
                   color="add"
@@ -689,6 +664,7 @@ watch(tab, async () => {
                 >
                   <q-td>
                     <q-btn
+                      v-if="checkPermission($route)?.attrIsUpdate"
                       label="คืนเครื่องราชฯ"
                       @click="editData(props.row.id)"
                       color="blue"
@@ -711,19 +687,6 @@ watch(tab, async () => {
         </div>
       </q-tab-panel>
     </q-tab-panels>
-
-    <DialogForm
-      :modal="modal"
-      :close="close"
-      :close-and-fecth="closeAndFecth"
-      :type="type"
-      :round-id="selectRound == '0' ? 'all' : selectRound"
-      :action="action"
-      :profile-id="profileId"
-      v-model:selectRoundOption="selectRoundOption"
-      v-model:filterSelectRoundOption="filterSelectRoundOption"
-      :type-id="tab"
-    />
   </q-card>
   <q-card v-else>
     <div class="q-pa-md q-gutter-sm">
@@ -732,6 +695,19 @@ watch(tab, async () => {
       </q-banner>
     </div>
   </q-card>
+
+  <DialogForm
+    :modal="modal"
+    :close="close"
+    :close-and-fecth="closeAndFecth"
+    :type="type"
+    :round-id="selectRound == '0' ? 'all' : selectRound"
+    :action="action"
+    :profile-id="profileId"
+    v-model:selectRoundOption="selectRoundOption"
+    v-model:filterSelectRoundOption="filterSelectRoundOption"
+    :type-id="tab"
+  />
 </template>
 <style lang="scss" scoped>
 .arrow {
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 64f3ffe18..e8a6622cf 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
@@ -216,7 +217,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
 ]);
 const visibleColumns = ref<String[]>([
   "action",
@@ -236,7 +236,6 @@ const visibleColumns = ref<String[]>([
   "datepay",
   "typepay",
   "address",
-
 ]);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
@@ -618,7 +617,11 @@ onMounted(() => {
         class="q-pa-none"
       >
         <div class="q-pa-md">
-          <q-card bordered class="col-12 q-mb-sm q-pa-sm">
+          <q-card
+            bordered
+            class="col-12 q-mb-sm q-pa-sm"
+            v-if="checkPermission($route)?.attrIsCreate"
+          >
             <div class="row col-12 q-col-gutter-x-xs">
               <div class="col-xs-12 col-sm-6 row no-wrap q-col-gutter-x-xs">
                 <q-file
@@ -860,8 +863,8 @@ onMounted(() => {
             </q-select>
             <div>
               <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
                 @click="addData()"
-                size="12px"
                 flat
                 round
                 color="add"
@@ -888,58 +891,33 @@ onMounted(() => {
 
                 <div v-else-if="props.col.name == 'action'">
                   <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
                     flat
                     round
                     dense
+                    icon="edit"
+                    color="edit"
+                    @click.stop="editData(props.row)"
                   >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click.stop="editData(props.row)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              size="xs"
-                              name="mdi-pencil-outline"
-                              color="primary"
-                            />
-                          </q-item-section>
-                          <q-item-section>เเก้ไขข้อมูล</q-item-section>
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="OpenModal(props.row)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              size="xs"
-                              name="mdi-information-outline"
-                              color="blue"
-                            />
-                          </q-item-section>
-                          <q-item-section no-wrap
-                            >รับ-คืนเครื่องราชฯ</q-item-section
-                          >
-                        </q-item>
-                      </q-list>
-                    </q-menu>
+                    <q-tooltip> แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    flat
+                    round
+                    dense
+                    icon="mdi-information-outline"
+                    color="blue"
+                    @click.stop="OpenModal(props.row)"
+                  >
+                    <q-tooltip> รับ-คืนเครื่องราชฯ</q-tooltip>
                   </q-btn>
                 </div>
                 <div v-else>