From d191a706bae9436373c88a2d436902419dc73d83 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 7 Jul 2023 09:45:54 +0700
Subject: [PATCH] update check role & display

---
 .../05_placement/components/pass/Table.vue    | 776 ++++++------------
 .../components/pass/TableView.vue             | 206 +----
 2 files changed, 275 insertions(+), 707 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index cc7a50eb6..e4cbf2fdd 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,7 +9,7 @@ import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
-import type  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
+// import type  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
 import type {
   treeTab,
   DataOption,
@@ -17,6 +17,10 @@ import type {
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+import router from "@/router";
+
+let roleAdmin = ref<boolean>(false);
 
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal add detail
@@ -78,6 +82,7 @@ const $q = useQuasar(); // show dialog
 const positionLevelOptions = ref<any[]>([]);
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
+
 const fetchPosition = async () => {
   showLoader();
   await http
@@ -159,7 +164,7 @@ const fetchPosition = async () => {
       });
       // positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       hideLoader();
     });
@@ -292,7 +297,11 @@ const getClass = (val: boolean) => {
 };
 const selectData = (props: TableName) => {
   itemtest.value = props;
-  modal.value = true;
+  if (roleAdmin.value === true) {
+    modal.value = true;
+  } else {
+    router.push("/placement/detail/08db7322-5712-4626-8a76-e2d28cd1a13b");
+  }
 };
 const onSelected = async (id: string) => {
   await fetchPositionNumber(id);
@@ -347,15 +356,15 @@ const editDetail = (
 };
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
-      "position",
-      "Name",
-      "ExamOrder",
-      "Unit",
-      "ReportingDate",
-      "BMAOfficer",
-      "Status",
-      "checkList",
-    ])
+    "position",
+    "Name",
+    "ExamOrder",
+    "Unit",
+    "ReportingDate",
+    "BMAOfficer",
+    "Status",
+    "checkList",
+  ])
   : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -672,40 +681,40 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {
-    profileID: "401650002245",
-    position: 7,
-    fullName: "นายอภินัน บอบู่",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "ชาย",
-    ExamOrder: 7,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.4)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ลูกจ้างชั่วคราว",
-    Status: "ขอผ่อนผัน",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
+  // {
+  //   profileID: "401650002245",
+  //   position: 7,
+  //   fullName: "นายอภินัน บอบู่",
+  //   dateOfBirth: "17 ก.พ. 2535",
+  //   gender: "ชาย",
+  //   ExamOrder: 7,
+  //   unitId: "",
+  //   UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+  //   Unit: "นักทรัพยากรบุคคล (กบห.4)",
+  //   ReportingDate: "2023-05-30", //วันที่รายงานตัว
+  //   BMAOfficer: "ลูกจ้างชั่วคราว",
+  //   Status: "ขอผ่อนผัน",
+  //   checkList: null,
+  //   address:
+  //     "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+  //   university: "มหาวิทยาลัยบูรพา",
+  //   degree: "การศึกษาบัณฑิต",
+  //   major: "เทคโนโลยีการศึกษา",
+  //   remark: "-",
+  //   number: 3,
+  //   examCount: 5,
+  //   scoreResult: {
+  //     scoreAFull: 200,
+  //     scoreA: 133,
+  //     scoreBFull: 200,
+  //     scoreB: 149,
+  //     scoreCFull: 100,
+  //     scoreC: 0,
+  //     scoreSumFull: 500,
+  //     scoreSum: 282,
+  //     examResult: "ผ่าน",
+  //   },
+  // },
 ]);
 
 const refOptions = ref<DataOption[]>([
@@ -1012,6 +1021,13 @@ const save = () => {
   console.log("rows===>", rows.value);
 };
 onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin)
+
+
+  }
+
   await fetchPosition();
   await nodeTree();
   // await fetchData();
@@ -1058,186 +1074,104 @@ const listKeyId = (data: any) => {
     optionsLevel: positionLevelOptions.value,
   };
 };
+
+const expiredAccount = ref<boolean>(false);
+
+
+watch(expiredAccount, () => {
+  console.log("expiredAccount===>", expiredAccount.value);
+});
 </script>
 <template>
-  <q-form ref="myForm">
-    <Table
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="editvisible"
-      :history="true"
-      :boss="true"
-      :saveNoDraft="true"
-      :add="save"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-icon
-            class="q-mr-sm"
-            size="15px"
-            color="primary"
-            name="mdi-bookmark"
-            v-if="props.row.isDirector"
-          ></q-icon>
+  <!-- <q-form ref="myForm"> -->
+  <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
+    :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+    v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
+    :saveNoDraft="true" :add="save" :role-admin="roleAdmin">
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
 
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props.row)"
-            class="cursor-pointer"
-          >
-            <div v-if="col.name == 'Name'" class="table_ellipsis">
-              {{ col.value }}
-              <div class="row col-12 text-no-wrap items-center">
-                <img
-                  v-if="props.row.avatar == null"
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                />
-                <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                <div class="col-4">
-                  <div class="text-weight-medium">
-                    {{ props.row.fullName }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{ props.row.profileID }}
-                  </div>
+        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
+          class="cursor-pointer">
+          <div v-if="col.name == 'Name'" class="table_ellipsis">
+            {{ col.value }}
+            <div class="row col-12 text-no-wrap items-center">
+              <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+              <img v-else :src="props.row.avatar" class="col-4 img-info" />
+              <div class="col-4">
+                <div class="text-weight-medium">
+                  {{ props.row.fullName }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.profileID }}
                 </div>
               </div>
             </div>
-            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-              <div
-                v-if="
-                  props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'สละสิทธิ์'
-                "
-              >
-                -
-              </div>
-              <div v-else>
-                {{ props.row.UnitGroup }}
-                <p>{{ col.value }}</p>
-              </div>
+          </div>
+          <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+            <div v-if="props.row.Status == 'ยังไม่บรรจุ' ||
+              props.row.Status == 'สละสิทธิ์'
+              ">
+              -
             </div>
-            <div
-              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
-              class="table_ellipsis"
-            >
-              {{ mixin.date2Thai(col.value) }}
+            <div v-else>
+              {{ props.row.UnitGroup }}
+              <p>{{ col.value }}</p>
             </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              v-if="
-                props.row.Status !== 'สละสิทธิ์' &&
-                props.row.Status !== 'บรรจุเเล้ว'
-              "
-              icon="mdi-dots-vertical"
-              size="12px"
-              color="grey-7"
-              flat
-              round
-              dense
-            >
-              <q-menu transition-show="jump-down" transition-hide="jump-up">
-                <q-list dense style="min-width: 100px">
-                  <q-item
-                    v-if="props.row.Status === 'ยังไม่บรรจุ'"
-                    clickable
-                    v-close-popup
-                    @click="openAppointModal"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="primary"
-                        size="xs"
-                        name="mdi-bookmark-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
-                  </q-item>
-                  <q-separator />
-                  <q-item
-                    v-if="props.row.Status === 'ยังไม่บรรจุ'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'wait')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-alert-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ขอผ่อนผัน</q-item-section>
-                  </q-item>
-                  <q-item
-                    v-else-if="props.row.Status === 'ขอผ่อนผัน'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'waitInfo')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-details-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
-                  </q-item>
-                  <q-separator />
-                  <q-item
-                    v-if="
-                      props.row.Status === 'ยังไม่บรรจุ' ||
-                      props.row.Status === 'เตรียมบรรจุ'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'cancel')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>สละสิทธิ์</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </Table>
-  </q-form>
+          </div>
+          <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
+            {{ mixin.date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn v-if="props.row.Status !== 'สละสิทธิ์' &&
+            props.row.Status !== 'บรรจุเเล้ว'
+            " icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+            <q-menu transition-show="jump-down" transition-hide="jump-up">
+              <q-list dense style="min-width: 100px">
+                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
+                  @click="openAppointModal">
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                    <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                  </q-item-section>
+                  <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
+                  @click="editDetail(props.row, 'wait')">
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                    <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                  </q-item-section>
+                  <q-item-section>ขอผ่อนผัน</q-item-section>
+                </q-item>
+                <q-item v-else-if="props.row.Status === 'ขอผ่อนผัน'" clickable v-close-popup
+                  @click="editDetail(props.row, 'waitInfo')">
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                    <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                  </q-item-section>
+                  <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item v-if="props.row.Status === 'ยังไม่บรรจุ' ||
+                  props.row.Status === 'เตรียมบรรจุ'
+                  " clickable v-close-popup @click="editDetail(props.row, 'cancel')">
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                    <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                  </q-item-section>
+                  <q-item-section>สละสิทธิ์</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </Table>
+  <!-- </q-form> -->
 
   <q-dialog v-model="appointModal" persistent full-width>
     <q-card>
@@ -1249,50 +1183,25 @@ const listKeyId = (data: any) => {
             <div class="col-xs-12 col-sm-6 row">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
+                  <q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
                     <template v-slot:append>
                       <q-icon name="mdi-magnify" />
                     </template>
                   </q-input>
-                  <q-tree
-                    no-transition
-                    ref="qtreeEdit"
-                    :nodes="nodesTree"
-                    node-key="keyId"
-                    @lazy-load="onLazyLoad"
-                    dense
-                  >
+                  <q-tree no-transition ref="qtreeEdit" :nodes="nodesTree" node-key="keyId" @lazy-load="onLazyLoad" dense>
                     <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
                     <template v-slot:header-organization="prop">
                       <div class="col">
-                        <div
-                          class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                        >
+                        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
                           <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                           <div class="text-weight-medium">
                             {{ prop.node.organizationName }}
                           </div>
 
                           <!--แสดง Total Count PositionNum-->
-                          <q-badge
-                            rounded
-                            color="grey-2"
-                            text-color="dark"
-                            :label="prop.node.totalPositionCount"
-                          />
-                          <q-badge
-                            v-if="prop.node.totalPositionVacant > 0"
-                            rounded
-                            color="red"
-                            outline
-                            :label="prop.node.totalPositionVacant"
-                          />
+                          <q-badge rounded color="grey-2" text-color="dark" :label="prop.node.totalPositionCount" />
+                          <q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
+                            :label="prop.node.totalPositionVacant" />
 
                           <q-space />
                         </div>
@@ -1305,51 +1214,31 @@ const listKeyId = (data: any) => {
                       </div>
                     </template>
                     <template v-slot:header-person="prop">
-                      <q-item
-                        clickable
-                        :active="clickAction === prop.node.keyId"
-                        @click="
-                          clickAction =
-                            prop.node.name == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            prop.node.name == null
-                              ? listKeyId(prop)
-                              : ''
-                        "
-                        active-class="my-list-link text-primary text-weight-medium"
-                        :class="
-                          prop.node.name == `ว่าง` ||
+                      <q-item clickable :active="clickAction === prop.node.keyId" @click="
+                        clickAction =
+                        prop.node.name == `ว่าง` ||
                           prop.node.name == `N/A` ||
                           prop.node.name == null
-                            ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
-                            : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
-                        "
-                      >
-                        <img
-                          v-if="
-                            prop.node.avatar == '' ||
-                            prop.node.avatar ==
-                              'https://cdn.quasar.dev/img/boy-avatar.png'
-                          "
-                          src="@/assets/avatar_user.jpg"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
-                        <img
-                          v-else
-                          :src="prop.node.avatar"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
+                          ? listKeyId(prop)
+                          : ''
+                        " active-class="my-list-link text-primary text-weight-medium" :class="prop.node.name == `ว่าง` ||
+      prop.node.name == `N/A` ||
+      prop.node.name == null
+      ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
+      : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
+    ">
+                        <img v-if="prop.node.avatar == '' ||
+                          prop.node.avatar ==
+                          'https://cdn.quasar.dev/img/boy-avatar.png'
+                          " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
+                          style="width: 28px; height: 28px; border-radius: 50%" />
+                        <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
+                          style="width: 28px; height: 28px; border-radius: 50%" />
                         <!--=====ตำแหน่งว่าง สีแดง=====-->
-                        <div
-                          v-if="
-                            prop.node.name == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            prop.node.name == null
-                          "
-                          class="q-px-sm text-weight-medium text-red"
-                        >
+                        <div v-if="prop.node.name == `ว่าง` ||
+                          prop.node.name == `N/A` ||
+                          prop.node.name == null
+                          " class="q-px-sm text-weight-medium text-red">
                           ว่าง
                         </div>
                         <!--=====หัวหน้า สีเขียว=====-->
@@ -1374,13 +1263,8 @@ const listKeyId = (data: any) => {
                         <div class="q-pr-sm">
                           {{ prop.node.positionLevel }}
                         </div>
-                        <q-icon
-                          v-if="prop.node.positionLeaderFlag"
-                          class="q-mr-sm"
-                          size="15px"
-                          color="primary"
-                          name="mdi-bookmark"
-                        ></q-icon>
+                        <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
+                          name="mdi-bookmark"></q-icon>
 
                         <q-space />
                       </q-item>
@@ -1395,46 +1279,24 @@ const listKeyId = (data: any) => {
                   <div class="row col-12 q-col-gutter-xs">
                     <div class="col-xs-12 col-sm-12 col-md-12"></div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        week-start="0"
-                      >
+                      <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
+                        :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
                         <template #year="{ year }">{{ year + 543 }}</template>
                         <template #year-overlay-value="{ value }">{{
                           parseInt(value + 543)
                         }}</template>
                         <template #trigger>
-                          <q-input
-                            :class="getClass(edit)"
-                            :outlined="edit"
-                            dense
-                            lazy-rules
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                                (val: string) =>
-                                  !!val ||
-                                  `${'วันที่รายงานตัว'}`,
-                              ]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
+                          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
+                            :model-value="date2Thai(date)" :rules="[
+                              (val: string) =>
+                                !!val ||
+                                `${'วันที่รายงานตัว'}`,
+                            ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
                             <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                :style="
-                                  edit
-                                    ? 'color: var(--q-primary)'
-                                    : 'color: var(--q-grey)'
-                                "
-                              >
+                              <q-icon name="event" class="cursor-pointer" :style="edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                                ">
                               </q-icon>
                             </template>
                           </q-input>
@@ -1443,145 +1305,58 @@ const listKeyId = (data: any) => {
                     </div>
                     <q-space />
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        standout
-                        readonly
-                        class="custom-input"
-                        dense
-                        lazy-rules
-                        v-model="posNoId"
-                        :label="`${'เลขที่ตำแหน่ง'}`"
-                      />
+                      <q-input disable standout readonly class="custom-input" dense lazy-rules v-model="posNoId"
+                        :label="`${'เลขที่ตำแหน่ง'}`" />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                      />
+                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionId"
+                        :label="`${'ตำแหน่ง'}`" />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        :readonly="!edit"
-                        class="custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        v-model="positionPathSideId"
-                        :rules="[(val:string) => !!val || `${'ด้าน/สาขา'}`]"
-                        :label="`${'ด้าน/สาขา'}`"
-                      />
+                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
+                        dense hide-bottom-space lazy-rules v-model="positionPathSideId"
+                        :rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]" :label="`${'ด้าน/สาขา'}`" />
                     </div>
                     <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                      />
+                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`" />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLineId"
-                        :label="`${'สายงาน'}`"
-                      />
+                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionLineId"
+                        :label="`${'สายงาน'}`" />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        :readonly="!edit"
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="positionLevelId"
-                        :label="`${'ระดับ'}`"
-                        hide-bottom-space
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        emit-value
-                        map-options
-                      />
+                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
+                        dense lazy-rules :options="positionLevelOptions" v-model="positionLevelId" :label="`${'ระดับ'}`"
+                        hide-bottom-space :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
+                        map-options />
                     </div>
                     <div class="col-sx-12 col-sm-12 col-md-12">
                       <q-separator inset size="2px" class="q-my-md" />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+                        :borderless="!edit" v-model="amount" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
                     </div>
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :rules="[
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+                        :borderless="!edit" v-model="positionSalaryAmount" :rules="[
                           (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
+                        ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow" type="number"
+                        hide-bottom-space />
                     </div>
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :rules="[
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+                        :borderless="!edit" v-model="mouthSalaryAmount" :rules="[
                           (val) =>
                             !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
+                        ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow" type="number"
+                        hide-bottom-space />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -1591,87 +1366,47 @@ const listKeyId = (data: any) => {
         </q-card-section>
 
         <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          :validate="validateData"
-          v-model:modalEdit="modalEdit"
-          :save="saveAppoint"
-        />
+        <DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
+          :save="saveAppoint" />
       </q-form>
     </q-card>
   </q-dialog>
   <q-form ref="myForm">
-    <DialogCard
-      v-model:Modal="modal"
-      :getdetail="itemtest"
-      :close="clickClose"
-      :validate="validateData"
-    />
+    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" :validate="validateData" />
   </q-form>
   <q-dialog v-model="modal_right" persistent>
-  <q-card style="width: 800px">
+    <q-card style="width: 800px">
 
-    <q-form ref="myForm">
-      <DialogHeader
-        :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-        :close="clickClose"
-      />
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <div class="col-xs-12 col-sm-12 col-md-12">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="positionMasterUserNote"
-            :label="`${'กรอกเหตุผล'}`"
-            @update:model-value="clickEditRow"
-            
-            type="textarea"
-          />
-          <q-file
-            v-if="getNumFile === 1"
-            v-model="files"
-            dense
-            :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
-            outlined
-            use-chips
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-            multiple
-            @update:model-value="clickEditRow"
-            class="q-py-sm"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <DialogFooter
-        v-model:editvisible="edit"
-        v-model:modalEdit="modalEdit"
-        :validate="validateData"
-        :save="modalEdit ? savePostpone : saveDisclaim"
-      />
-    </q-form>
-  </q-card>
+      <q-form ref="myForm">
+        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit"
+              v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow"
+              type="textarea" />
+            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
+              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
+              @update:model-value="clickEditRow" class="q-py-sm">
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
+          :save="modalEdit ? savePostpone : saveDisclaim" />
+      </q-form>
+    </q-card>
   </q-dialog>
 
   <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
-      <q-form ref="myForm"
-        >สละสิทธิ์
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
+      <q-form ref="myForm">
+        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row">
@@ -1681,14 +1416,7 @@ const listKeyId = (data: any) => {
           <div class="row q-pt-md">
             <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
             <div class="col-2 q-mt-sm">กรอกเหตุผล</div>
-            <q-btn
-              color="primary"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-download"
-            />
+            <q-btn color="primary" flat dense round size="14px" icon="mdi-download" />
           </div>
         </q-card-section>
         <q-separator />
@@ -1701,6 +1429,7 @@ const listKeyId = (data: any) => {
 .custom-input {
   font-size: 16px;
 }
+
 .my-list-link {
   border-radius: 5px;
 
@@ -1712,6 +1441,7 @@ const listKeyId = (data: any) => {
   margin-bottom: 0;
   color: #818181;
 }
+
 .img-info {
   width: 30px !important;
   height: 30px !important;
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index 1fc1b8ac8..b62fb0b25 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,132 +1,30 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+    <div class="col-12 row q-py-sm">
+      <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+        :model-value="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ" @update:model-value="updateExpiredAccount" />
+
       <q-space />
       <div class="items-center" style="display: flex">
-        <div
-          class="row items-center"
-          style="display: flex"
-          v-if="publicData == false && publicNoBtn == false"
-        ></div>
-
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
+        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
+          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
+        <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
+          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+          style="min-width: 150px" class="gt-xs q-ml-sm" />
       </div>
     </div>
 
-    <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
-      <span class="text-subtitle1">{{ titleText }}</span>
-      <q-btn
-        flat
-        round
-        color="primary"
-        @click="refresh"
-        icon="mdi-refresh"
-        v-if="props.refreshBtn"
-      >
-        <q-tooltip>อัปเดตข้อมูล</q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="items-center" style="display: flex">
-        <!-- ค้นหาข้อความใน table -->
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
-          <template v-slot:append>
-            <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-        <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
-      </div>
-    </div>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      v-model:pagination="pagination"
-    >
+    <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
+      :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
       <template v-slot:pagination="scope">
-        <q-pagination
-          v-model="pagination.page"
-          color="primary"
-          :max="scope.pagesNumber"
-          :max-pages="5"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
+        <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+          boundary-links direction-links></q-pagination>
       </template>
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -142,6 +40,7 @@
     </q-table>
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -240,6 +139,8 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  expiredAccount: Boolean,
+  roleAdmin: Boolean
 });
 const pagination = ref({
   sortBy: "desc",
@@ -263,11 +164,9 @@ const emit = defineEmits([
   "update:editvisible",
   "update:titleText",
   "update:inputvisibleFilter",
+  "update:expiredaccountfilter"
 ]);
 
-const updateEdit = (value: any) => {
-  emit("update:editvisible", value);
-};
 const updateInput = (value: any) => {
   emit("update:inputfilter", value);
 };
@@ -278,6 +177,10 @@ const updateVisibleFilter = (value: any) => {
   emit("update:inputvisibleFilter", value);
 };
 
+const updateExpiredAccount = (value: any) => {
+  emit("update:expiredaccountfilter", value);
+};
+
 const checkSave = () => {
   props.validate();
   props.save();
@@ -288,71 +191,6 @@ const checkSave = () => {
   //     });
   //   }
 };
-const clickEdit = () => {
-  updateEdit(!props.editvisible);
-  editvisible.value = !editvisible.value;
-  props.edit();
-};
-const clickCancel = () => {
-  updateEdit(!props.editvisible);
-  editvisible.value = !editvisible.value;
-  props.cancel();
-};
-const publishModal = () => {
-  props.validate();
-  const filter = attrs.value.rows.filter((r: any) => r.name == "");
-
-  if (filter.length == 0 || attrs.value.rows.length == 0) {
-    // modalPublish.value = true;
-    dialogMessage(
-      $q,
-      "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
-      "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
-      "public",
-      "เผยแพร่",
-      "public",
-      props.publish,
-      undefined
-    );
-  }
-};
-
-const DeleteModal = () => {
-  //   modalDelete.value = true;
-  dialogMessage(
-    $q,
-    "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
-    "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
-    "mdi-file-remove-outline",
-    "ลบบันทึก",
-    "red",
-    props.deleted,
-    undefined
-  );
-};
-
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-
-const add = async () => {
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate();
-  //   }
-  props.validate();
-  props.add();
-  await table.value.lastPage();
-  await table.value.scrollTo(attrs.value.rows.length - 1);
-};
-
-const deleted = async () => {
-  // const deletedF = () => {
-  if (props.publicNoBtn === false) {
-    updateEdit(false);
-  }
-  props.deleted();
-};
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา