refactor code

.github/workflows/release.yaml

@@ -66,21 +66,21 @@ jobs:
             docker-compose pull
             docker-compose up -d
             echo "${{ steps.gen_ver.outputs.image_ver }}"> success
-      - uses: snow-actions/line-notify@v1.1.0
+      # - uses: snow-actions/line-notify@v1.1.0
-        if: success()
+      #   if: success()
-        with:
+      #   with:
-          access_token: ${{ env.TOKEN_LINE }}
+      #     access_token: ${{ env.TOKEN_LINE }}
-          message: |
+      #     message: |
-            -Success✅✅✅
+      #       -Success✅✅✅
-            Image: ${{env.IMAGE_NAME}}
+      #       Image: ${{env.IMAGE_NAME}}
-            Version: ${{ github.event.inputs.IMAGE_VER }}
+      #       Version: ${{ github.event.inputs.IMAGE_VER }}
-            By: ${{secrets.DOCKER_USER}}
+      #       By: ${{secrets.DOCKER_USER}}
-      - uses: snow-actions/line-notify@v1.1.0
+      # - uses: snow-actions/line-notify@v1.1.0
-        if: failure()
+      #   if: failure()
-        with:
+      #   with:
-          access_token: ${{ env.TOKEN_LINE }}
+      #     access_token: ${{ env.TOKEN_LINE }}
-          message: |
+      #     message: |
-            -Failure❌❌❌
+      #       -Failure❌❌❌
-            Image: ${{env.IMAGE_NAME}}
+      #       Image: ${{env.IMAGE_NAME}}
-            Version: ${{ github.event.inputs.IMAGE_VER }}
+      #       Version: ${{ github.event.inputs.IMAGE_VER }}
-            By: ${{secrets.DOCKER_USER}}
+      #       By: ${{secrets.DOCKER_USER}}

src/api/exam/api.metadata.ts

@@ -1,18 +1,10 @@
 import env from '../index'
-const prefix = `${env.API_URI}/metadata/prefix/`
+const person = `${env.API_URI}/metadata/main/`
-const religion = `${env.API_URI}/metadata/religion/`
-const relationship = `${env.API_URI}/metadata/relationship/`
-const educationLevel = `${env.API_URI}/metadata/education-level/`
-const province = `${env.API_URI}/metadata/province/`
 const district = `${env.API_URI}/metadata/district/`
 const subDistrict = `${env.API_URI}/metadata/sub-district/`
 
 export default {
-  prefix,
+  person: `${person}person`,
-  religion,
-  relationship,
-  educationLevel,
-  province,
   listDistrict: (id: string) => `${district}${id}`,
   listSubDistrict: (id: string) => `${subDistrict}${id}`
 }

src/api/index.ts

@@ -3,16 +3,11 @@ import { ref } from 'vue'
 
 const env = ref<string>(process.env.NODE_ENV || 'development')
 export const apiUrlConfig = import.meta.env.VITE_API_URI_CONFIG
-console.log(apiUrlConfig)
-// if (process.env.VUE_APP_TEST) {
-//   env = "test";
-// }
 
 const config = ref<any>({
   development: {
     // API_URI: 'https://localhost:7007/api/v1',
     API_URI: apiUrlConfig,
-    // API_METADATA_URI: 'https://bma-ehr.frappet.synology.me/api/v1/metadata',
     MEET_URI: 'meet.frappet.com'
   },
   test: {
@@ -22,19 +17,16 @@ const config = ref<any>({
   production: {
     // API_URI: "https://localhost:5010",
     API_URI: apiUrlConfig,
-    // API_METADATA_URI: 'https://bma-ehr.frappet.synology.me/api/v1/metadata',
     MEET_URI: 'meet.frappet.com'
   }
 })
 
 const API_URI = ref<string>(config.value[env.value].API_URI)
-// const API_METADATA_URI = ref<string>(config.value[env.value].API_METADATA_URI)
 const MEET_URI = ref<string>(config.value[env.value].MEET_URI)
 
 export default {
   env: env.value,
   config: config.value,
   API_URI: API_URI.value,
-  //   API_METADATA_URI: API_METADATA_URI.value,
   MEET_URI: MEET_URI.value
 }

src/components/CustomDialog.vue

@@ -0,0 +1,62 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
+    <q-card class="q-pa-sm">
+      <q-card-section class="row">
+        <div class="q-pr-md">
+          <q-avatar :icon="icon" size="lg" font-size="25px" color="blue-1" :text-color="color" />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">{{ title }}</span>
+          <br />
+          <span>{{ message }}</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal" v-if="onlycancel">
+        <q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
+      </q-card-actions>
+      <q-card-actions align="right" class="bg-white text-teal" v-else>
+        <q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
+        <q-btn :label="textOk" :color="color" @click="onOKClick" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from 'quasar'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  textOk: {
+    type: String,
+    default: 'ตกลง'
+  },
+  title: {
+    type: String,
+    default: 'หัวข้อ?'
+  },
+  message: {
+    type: String,
+    default: 'ข้อความ'
+  },
+  icon: {
+    type: String,
+    default: 'question_mark'
+  },
+  onlycancel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits([...useDialogPluginComponent.emits])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+function onOKClick() {
+  onDialogOK()
+}
+</script>

src/components/DialogFooter.vue

@@ -32,18 +32,6 @@
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <div v-else>
-        <!-- <q-btn
-          flat
-          round
-          :disabled="!editvisible"
-          :outline="!editvisible"
-          :color="!editvisible ? 'grey-7' : 'red'"
-          @click="cancel()"
-          icon="mdi-undo"
-          v-if="modalEdit == true"
-        >
-          <q-tooltip>ยกเลิก</q-tooltip>
-        </q-btn> -->
         <q-btn
           flat
           round
@@ -59,8 +47,6 @@
   </q-card-actions>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue'
-
 const props = defineProps({
   editvisible: Boolean,
   next: Boolean,
@@ -78,10 +64,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  cancel: {
-    type: Function,
-    default: () => console.log('not function')
-  },
   edit: {
     type: Function,
     default: () => console.log('not function')
@@ -100,9 +82,6 @@ const emit = defineEmits(['update:editvisible', 'update:next', 'update:previous'
 const updateEdit = (value: Boolean) => {
   emit('update:editvisible', value)
 }
-const cancel = async () => {
-  props.cancel()
-}
 const edit = async () => {
   updateEdit(!props.editvisible)
   props.edit()
@@ -110,12 +89,6 @@ const edit = async () => {
 const checkSave = () => {
   props.validate()
   props.save()
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate().then((success) => {
-  //       if (success) {
-  //       }
-  //     });
-  //   }
 }
 
 const clickNext = async () => {

src/components/DialogHeader.vue

@@ -4,7 +4,6 @@
       <div class="text-bold">{{ tittle }}</div>
     </div>
     <q-space />
-    <!-- <div class="row col-1"> -->
     <q-btn
       icon="close"
       unelevated
@@ -13,20 +12,17 @@
       @click="close"
       style="color: #ff8080; background-color: #ffdede"
     />
-    <!-- </div> -->
   </q-card-section>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
-
 const props = defineProps({
   tittle: String,
   close: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
-  },
+  }
-});
+})
 const close = async () => {
-  props.close();
+  props.close()
-};
+}
 </script>

src/components/NotifyConfirm.vue

@@ -1,86 +0,0 @@
-<template>
-  <q-dialog :model-value="modal" persistent>
-    <q-card class="q-pa-sm">
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-alert-circle-outline"
-            font-size="25px"
-            size="lg"
-            color="primary-1"
-            text-color="primary"
-          />
-        </div>
-        <div class="col text-dark">
-          <span class="text-bold">{{ tittle }}</span>
-          <br />
-          <span>{{ detail }}</span>
-        </div>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ยกเลิก" color="primary" @click="cancel" />
-        <q-btn label="ตกลง" color="primary" @click="ok" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { ref, useAttrs } from 'vue'
-
-const props = defineProps({
-  modal: Boolean,
-  tittle: String,
-  detail: String,
-  ok: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log('not function')
-  }
-})
-
-const emit = defineEmits(['update:modal'])
-
-const cancel = () => {
-  emit('update:modal', false)
-  props.cancel()
-}
-const ok = () => {
-  emit('update:modal', false)
-  props.ok()
-}
-</script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  max-height: 64vh;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f6f6f6ae;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/components/NotifyDelete.vue

@@ -1,86 +0,0 @@
-<template>
-  <q-dialog :model-value="modal" persistent>
-    <q-card class="q-pa-sm">
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-alert-circle-outline"
-            font-size="25px"
-            size="lg"
-            color="primary-1"
-            text-color="primary"
-          />
-        </div>
-        <div class="col text-dark">
-          <span class="text-bold">{{ tittle }}</span>
-          <br />
-          <span>{{ detail }}</span>
-        </div>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ยกเลิก" color="primary" @click="cancel" />
-        <q-btn label="ตกลง" color="primary" @click="ok" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { ref, useAttrs } from 'vue'
-
-const props = defineProps({
-  modal: Boolean,
-  tittle: String,
-  detail: String,
-  ok: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log('not function')
-  }
-})
-
-const emit = defineEmits(['update:modal'])
-
-const cancel = () => {
-  emit('update:modal', false)
-  props.cancel()
-}
-const ok = () => {
-  emit('update:modal', false)
-  props.ok()
-}
-</script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  max-height: 64vh;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f6f6f6ae;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/components/NotifyError.vue

@@ -1,79 +0,0 @@
-<template>
-  <q-dialog :model-value="modal" persistent @update:model-value="updateClose">
-    <q-card class="q-pa-sm">
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-alert-circle-outline"
-            font-size="25px"
-            size="lg"
-            color="red-1"
-            text-color="red"
-          />
-        </div>
-        <div class="col text-dark">
-          <span class="text-bold text-red">{{ tittle }}</span>
-          <br />
-          <span>{{ detail }}</span>
-        </div>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ตกลง" color="primary" @click="updateClose" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { ref, useAttrs } from 'vue'
-
-const props = defineProps({
-  modal: Boolean,
-  tittle: String,
-  detail: String,
-  close: {
-    type: Function,
-    default: () => console.log('not function')
-  }
-})
-
-const emit = defineEmits(['update:modal', 'update:tittle', 'update:detail'])
-
-const updateClose = () => {
-  emit('update:modal', false)
-  emit('update:tittle', '')
-  emit('update:detail', '')
-  props.close()
-}
-</script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  max-height: 64vh;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f6f6f6ae;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/components/Table.vue

@@ -12,12 +12,6 @@
       :editOnly="false"
       :editData="editData"
     />
-    <!-- v-if="nameHeader" -->
-    <!-- <div class="q-pl-sm">
-      <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus" v-if="addData">
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-    </div> -->
     <q-space />
     <div class="items-center q-col-gutter-x-sm" style="display: flex">
       <!-- ค้นหาข้อความใน table -->
@@ -90,15 +84,6 @@ import { ref, useAttrs, watch } from 'vue'
 import HeaderTop from '@/components/top.vue'
 import type { Pagination } from '@/modules/01_exam/interface/index/Main'
 
-const attrs = ref<any>(useAttrs())
-const table = ref<any>(null)
-const filterRef = ref<any>(null)
-const editBtn = ref<boolean>(true)
-const initialPagination = ref<Pagination>({
-  //   descending: false,
-  rowsPerPage: 0
-})
-
 const props = defineProps({
   inputfilter: String,
   name: String,
@@ -135,13 +120,18 @@ const props = defineProps({
 
 const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
 
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
+const editBtn = ref<boolean>(true)
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0
+})
+
 watch(props, (count: any, prevCount: any) => {
   editBtn.value = props.editvisible
 })
 
-const updateEdit = (value: Boolean) => {
-  emit('update:editvisible', value)
-}
 const updateInput = (value: string | number | null) => {
   emit('update:inputfilter', value)
 }
@@ -154,27 +144,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
 }
 
 const clickAdd = () => {
-  //   props.validate();
   props.add()
 }
 
 const clickEdit = () => {
-  //   props.validate();
   props.edit()
 }
 
 const clickCancel = () => {
-  //   props.validate();
-  props.cancel()
-}
-
-const edit = async () => {
-  updateEdit(!props.editvisible)
-  props.edit()
-}
-
-const cancel = async () => {
-  updateEdit(!props.editvisible)
   props.cancel()
 }
 
@@ -183,10 +160,6 @@ const resetFilter = () => {
   emit('update:inputfilter', '')
   filterRef.value.focus()
 }
-
-const add = () => {
-  props.add()
-}
 </script>
 <style lang="scss">
 .icon-color {

src/components/TableView.vue

@@ -1,457 +0,0 @@
-<template>
-  <div class="q-px-md q-pb-md">
-    <!-- header บน table มี ค้นหา แสดงคอลัมน์ ปุ่มแก้ไข เพิ่ม เผยแพร่ข้อมูล ยกเลิก (status nornmalData false) -->
-    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-      <q-btn
-        v-if="!editvisible == true && publicNoBtn == false"
-        flat
-        round
-        :disabled="editvisible == true"
-        :color="editvisible == true ? 'grey-7' : 'primary'"
-        @click="edit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <!-- ยกเลิก แสดงเมื่อ กดปุ่มแก้ไข -->
-      <q-btn
-        v-else
-        flat
-        round
-        :disabled="editvisible == false"
-        :outline="editvisible == false"
-        :color="editvisible == false ? 'grey-7' : 'red'"
-        @click="cancel()"
-        icon="mdi-undo"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-      <!-- <q-separator vertical /> -->
-      <div class="q-px-sm">
-        <q-btn
-          flat
-          round
-          :disabled="editvisible == false"
-          :color="editvisible == false ? 'grey-7' : 'add'"
-          @click="add"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-
-        <!-- บันทึกร่าง แสดงเมื่อ กดปุ่มแก้ไข ข้อมูลมีการเป็นแปลงหรือ ยังไม่เผยแพร่ข้อมูล -->
-        <q-btn
-          flat
-          round
-          :disabled="!(editvisible == true && updateData == true)"
-          :color="!(editvisible == true && updateData == true) ? 'grey-7' : 'public'"
-          @click="checkSave"
-          v-if="saveNoDraft == false"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึกร่าง</q-tooltip>
-        </q-btn>
-        <!-- ลบบันทึกร่าง แสดงเมื่อ บันทึกร่างแล้ว -->
-        <q-btn
-          flat
-          round
-          :disabled="publicData == true"
-          :color="publicData == true ? 'grey-7' : 'deep-orange'"
-          @click="DeleteModal"
-          icon="mdi-file-remove-outline"
-          v-if="publicNoBtn == false"
-        >
-          <q-tooltip>ลบบันทึกร่าง</q-tooltip>
-        </q-btn>
-      </div>
-
-      <!-- เผยแพร่ -->
-      <q-btn
-        flat
-        round
-        :disabled="!(publicData == false || updateData == true)"
-        :color="!(publicData == false || updateData == true) ? 'grey-7' : 'public'"
-        @click="publishModal"
-        icon="mdi-cloud-upload-outline"
-        v-if="publicNoBtn == false"
-      >
-        <q-tooltip>เผยแพร่</q-tooltip>
-      </q-btn>
-      <div class="items-center" style="display: flex">
-        <div
-          class="row items-center"
-          style="display: flex"
-          v-if="publicData == false && publicNoBtn == false"
-        >
-          <div class="text-public text-body2 text-weight-medium q-px-sm">ข้อมูลยังไม่เผยแพร่</div>
-        </div>
-      </div>
-
-      <q-space />
-      <div class="items-center" style="display: flex">
-        <!-- ข้อความสถานะเผยแพร่ โดยใช้ parameter publicData เป็นตัวกำหนดข้อความ -->
-        <!-- <div class="row items-center" style="display: flex" v-if="publicData == true">
-						<q-icon cener size="20px" name="label_important" class="icon-color" />
-						<div class="text-size">ข้อมูลเผยแพร่แล้ว</div>
-						</div> -->
-        <div
-          class="row items-center"
-          style="display: flex"
-          v-if="publicData == false && publicNoBtn == false"
-        >
-          <!-- <q-icon cener size="20px" name="label_important" color="amber" />
-          <div class="text-grey-7 text-body2 text-weight-medium q-px-sm">
-            ข้อมูลยังไม่เผยแพร่
-          </div> -->
-        </div>
-        <!-- ค้นหาข้อความใน 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>
-    <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
-    <div class="col-12 row q-py-sm" v-if="nornmalData == true">
-      <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"
-      :pagination="initialPagination"
-      :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
-    >
-      <!-- :pagination="initialPagination" -->
-      <!-- :rows-per-page-options="[0]" -->
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th auto-width v-if="boss == true" />
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th
-            auto-width
-            v-if="editvisible == true || nextPageVisible == true || history == true"
-          />
-        </q-tr>
-      </template>
-      <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
-      <template #body="props">
-        <slot v-bind="props" name="columns"></slot>
-      </template>
-    </q-table>
-  </div>
-  <!-- ข้อมูลการเผยแพร่ข้อมูล -->
-  <q-dialog v-model="modalPublish" persistent>
-    <q-card class="q-pa-sm">
-      <q-card-section class="row">
-        <div class="q-pr-md">
-          <q-avatar icon="public" size="lg" font-size="25px" color="blue-1" text-color="public" />
-        </div>
-        <div class="col text-dark">
-          <span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
-          <br />
-          <span>ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที</span>
-        </div>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
-        <q-btn label="เผยแพร่" color="public" @click="publish()" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
-  <!-- ข้อมูลการลบเผยแพร่ข้อมูล -->
-  <q-dialog v-model="modalDelete" persistent>
-    <q-card class="q-pa-sm">
-      <q-card-section class="row">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-file-remove-outline"
-            size="lg"
-            font-size="25px"
-            color="red-1"
-            text-color="deep-orange"
-          />
-        </div>
-        <div class="col text-dark">
-          <span class="text-bold">ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?</span>
-          <br />
-          <span>ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
-        </div>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
-        <q-btn label="ลบบันทึก" color="red" @click="deleted()" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { ref, useAttrs } from 'vue'
-
-const attrs = ref<any>(useAttrs())
-const table = ref<any>(null)
-const filterRef = ref<any>(null)
-const modalPublish = ref<boolean>(false)
-const modalDelete = ref<boolean>(false)
-const props = defineProps({
-  inputfilter: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  boss: {
-    type: Boolean,
-    defualt: false
-  },
-  saveNoDraft: {
-    type: Boolean,
-    defualt: false
-  },
-  history: {
-    type: Boolean,
-    defualt: false
-  },
-  paging: {
-    type: Boolean,
-    defualt: false
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: false
-  },
-  nextPageVisible: {
-    type: Boolean,
-    defualt: false
-  },
-  publicData: {
-    type: Boolean,
-    defualt: true,
-    required: false
-  },
-  updateData: {
-    type: Boolean,
-    defualt: true,
-    required: false
-  },
-  publicNoBtn: {
-    type: Boolean,
-    defualt: false
-  },
-  add: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  edit: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  save: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  deleted: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  publish: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  validate: {
-    type: Function,
-    default: () => console.log('not function')
-  }
-})
-const initialPagination = ref<any>({
-  //   descending: false,
-  rowsPerPage: props.paging == true ? 25 : 0
-})
-
-const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
-
-const updateEdit = (value: any) => {
-  emit('update:editvisible', value)
-}
-const updateInput = (value: any) => {
-  emit('update:inputfilter', value)
-}
-const updateVisible = (value: any) => {
-  emit('update:inputvisible', value)
-}
-
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (props.paging == true) return ' ' + start + ' ใน ' + end + ' จากจำนวน ' + total + ' รายการ'
-  else return start + '-' + end + ' ใน ' + total
-}
-
-const checkSave = () => {
-  props.validate()
-  props.save()
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate().then((success) => {
-  //       if (success) {
-  //       }
-  //     });
-  //   }
-}
-
-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
-  }
-}
-
-const DeleteModal = () => {
-  modalDelete.value = true
-}
-
-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 () => {
-  if (props.publicNoBtn === false) {
-    updateEdit(false)
-  }
-  props.deleted()
-}
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit('update:inputfilter', '')
-  filterRef.value.focus()
-}
-</script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  max-height: 64vh;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f6f6f6ae;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/components/TheWelcome.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

src/components/WelcomeItem.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/components/top.vue

@@ -8,18 +8,6 @@
     </div>
     <div v-if="editData == true">
       <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
-        <!-- <q-btn
-          size="12px"
-          v-if="!edit"
-          flat
-          round
-          :disabled="disable"
-          :color="edit ? 'grey-7' : 'primary'"
-          @click="ClickEdit"
-          icon="mdi-pencil-outline"
-        >
-          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-        </q-btn> -->
         <q-btn
           size="15px"
           flat
@@ -31,31 +19,8 @@
         >
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
-        <!-- <q-btn
-          size="12px"
-          flat
-          round
-          v-if="edit"
-          :color="!edit ? 'grey-7' : 'red'"
-          @click="ClickCancel"
-          icon="mdi-undo"
-        >
-          <q-tooltip>ยกเลิก</q-tooltip>
-        </q-btn> -->
       </div>
       <div class="q-pl-sm" v-else>
-        <!-- <q-btn
-          size="12px"
-          v-if="!edit"
-          flat
-          round
-          :disabled="disable"
-          :color="edit ? 'grey-7' : 'primary'"
-          @click="ClickEdit"
-          icon="mdi-pencil-outline"
-        >
-          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-        </q-btn> -->
         <q-btn
           size="12px"
           flat
@@ -67,17 +32,6 @@
         >
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
         </q-btn>
-        <!-- <q-btn
-          size="12px"
-          flat
-          round
-          v-if="edit"
-          :color="!edit ? 'grey-7' : 'red'"
-          @click="ClickCancel"
-          icon="mdi-undo"
-        >
-          <q-tooltip>ยกเลิก</q-tooltip>
-        </q-btn> -->
       </div>
     </div>
     <q-space />
@@ -122,43 +76,11 @@ const props = defineProps({
   save: {
     type: Function,
     default: () => console.log('not function')
-  },
-  deleted: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  editBtn: {
-    type: Function,
-    default: () => console.log('not function')
-  },
-  changeBtn: {
-    type: Function,
-    default: () => console.log('not function')
   }
 })
 
 const emit = defineEmits(['update:edit'])
 
-const updateEdit = (value: any) => {
-  emit('update:edit', value)
-}
-
-const ClickEdit = () => {
-  updateEdit(!props.edit)
-  props.editBtn()
-  props.changeBtn()
-}
-
-const ClickCancel = () => {
-  updateEdit(!props.edit)
-  props.cancel()
-  props.changeBtn()
-}
-
 const save = () => {
   props.save()
 }

src/interface/main/index.ts

@@ -21,52 +21,4 @@ interface optionType {
   color: string
 }
 
-const menuList = readonly<menuType[]>([
-  {
-    key: 1,
-    icon: 'mdi-home-variant-outline',
-    activeIcon: 'mdi-home-variant',
-    label: 'หน้าแรก',
-    path: 'dashboard'
-  },
-  {
-    key: 2,
-    icon: 'o_person',
-    activeIcon: 'person',
-    label: 'รายการสอบทั้งหมด',
-    path: 'exam'
-  }
-])
-
-const options = readonly<optionType[]>([
-  {
-    icon: 'mdi-account-cog',
-    label: 'ผู้ดูแลระบบ',
-    value: 'op1',
-    color: 'primary'
-  },
-  {
-    icon: 'mdi-account-group',
-    label: 'เจ้าหน้าที่',
-    value: 'op2',
-    color: 'blue'
-  },
-  {
-    icon: 'mdi-account-circle',
-    label: 'บุคคล',
-    value: 'op3',
-    color: 'indigo'
-  }
-])
-
-const notiList = readonly<notiType[]>([
-  {
-    id: 1,
-    sender: 'ท',
-    body: 'ขอแก้ไขข้อมูลรายการสอบทั้งหมด',
-    timereceive: '13/12/2565'
-  }
-])
-
-export { menuList, options, notiList }
 export type { menuType, notiType, optionType }

src/main.ts

@@ -36,14 +36,6 @@ app.use(
   //   quasarUserOptions
 )
 
-app.component(
-  'data-table',
-  defineAsyncComponent(() => import('./components/TableView.vue'))
-)
-app.component(
-  'notifyError',
-  defineAsyncComponent(() => import('./components/NotifyError.vue'))
-)
 app.component(
   'datepicker',
   defineAsyncComponent(() => import('@vuepic/vue-datepicker'))

src/modules/01_exam/components/Consendform.vue

@@ -48,12 +48,12 @@
               จะใช้วิธีการที่ชอบด้วยกฏหมายและเป็นธรรมในการเก็บรวบรวมข้อมูลส่วนบุคคลอย่างจำกัดเพียงเท่าที่จำเป็นภายใต้วัตถุประสงค์การทำงานของกรุงเทพมหานครฯ
               เพื่อใช้เป็นข้อมูลประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลประสงค์จะสมัครรับการคัดเลือกโดยกรุงเทพมหานครฯ
               จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่าน ดังนี้
-              <ul style="list-style-type: circle;">
+              <ul style="list-style-type: circle">
-                  <li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li>
+                <li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li>
-                  <li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li>
+                <li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li>
-                  <li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
+                <li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
-                  <li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
+                <li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
-                  <li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li>
+                <li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li>
               </ul>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ท้้งนี้ข้อมูลส่วนบุคคลดังกล่าวเป็นข้อมูลที่จำเป็นสำหรับการทำงานของกรุงเทพมหานครฯ
               หากไม่มีข้อมูลดังกล่าว อาจส่งผลต่อกระบวนการพิจารณาคุณสมบัติของผู้สมัคร
@@ -80,7 +80,13 @@
   </q-card-section>
   <q-separator />
   <q-card-actions align="right" class="bg-white text-teal justify-center">
-    <q-btn label="ยอมรับ" style="width: 150px;" :color="!acceptTermOfUse ? 'grey':'primary'" @click="ok" :disable="!acceptTermOfUse" />
+    <q-btn
+      label="ยอมรับ"
+      style="width: 150px"
+      :color="!acceptTermOfUse ? 'grey' : 'primary'"
+      @click="ok"
+      :disable="!acceptTermOfUse"
+    />
   </q-card-actions>
 </template>
 
@@ -88,10 +94,6 @@
 import { ref } from 'vue'
 import keycloak from '@/plugins/keycloak'
 const props = defineProps({
-  close: {
-    type: Function,
-    default: () => console.log('not function')
-  },
   ok: {
     type: Function,
     default: () => console.log('not function')

src/modules/01_exam/components/ExamCard.vue

@@ -20,17 +20,11 @@
         <div class="">เลขประจำตัวสอบ :</div>
         <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
       </div>
-      <!-- <div class="q-pt-xs row">
-            <div class="">เวลาสอบ :</div>
-            <div class="text-black q-pl-sm">{{ examTime }}</div>
-          </div> -->
       <div class="q-pt-xs row">
         <div class="">เลขที่นั่งสอบ :</div>
         <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
       </div>
       <div class="q-pt-xs row">
-        <!-- <div class="">คะแนน</div>
-            <div class="text-black text-bold q-pl-sm">{{ point }}</div> -->
         <div class="col-12 text-weight-bold">ผลการสอบ</div>
         <div class="row items-center q-gutter-y-sm col-12">
           <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
@@ -81,14 +75,6 @@
           </div>
         </div>
       </div>
-      <!-- <div class="q-pt-xs row">
-            <div class="">ห้องสอบ :</div>
-            <div class="text-black q-pl-sm">{{ examRoom }}</div>
-          </div>
-          <div class="q-pt-xs row">
-            <div class="">เลขที่นั่ง :</div>
-            <div class="text-black q-pl-sm">{{ seatNumber }}</div>
-          </div> -->
     </div>
 
     <q-card-section class="col-4 flex flex-center">
@@ -114,15 +100,19 @@
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useQuasar } from 'quasar'
 
+const $q = useQuasar()
 const route = useRoute()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, date2Thai } = mixin
+const { date2Thai, messageError } = mixin
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
-const loader = ref<boolean>(false)
 const fullName = ref<string>('')
 const examNumber = ref<string>('')
 const citizenId = ref<string>('')
@@ -143,7 +133,7 @@ onMounted(async () => {
 })
 
 const fetchStatus = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateCard(examId.value, positionId.value))
     .then((res) => {
@@ -180,25 +170,16 @@ const fetchStatus = async () => {
       score_expired.value = new Date(data.announcementDate)
       number.value = data.number
     })
-    .catch(() => {
+    .catch((e) => {
-      //   acceptTermOfUse.value = false
+      messageError($q, e)
     })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const download = () => {
   window.print()
-  //   var printContent = document.getElementById('print')
-  //   var WinPrint = window.open()
-  //   if (WinPrint != null && printContent != null) {
-  //     WinPrint.document.write(printContent.innerHTML)
-  //     // WinPrint.document.close()
-  //     // WinPrint.focus()
-  //     // WinPrint.print()
-  //     // WinPrint.close()
-  //   }
 }
 </script>
 

src/modules/01_exam/components/ExamCrad.vue

@@ -20,8 +20,8 @@
 </template>
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { ExamCard } from '../interface/index/Main'
 import { useCounterMixin } from '@/stores/mixin'
+import type { ExamCard } from '../interface/index/Main'
 
 const mixin = useCounterMixin()
 const { date2Thai } = mixin

src/modules/01_exam/components/ExamDetail.vue

@@ -9,7 +9,6 @@
           เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
         </div>
         <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
-        <!-- <div v-html="exam.htmlBody.html"></div> -->
       </q-card-section>
 
       <div class="text-subtitle1 text-center text-primary">เอกสารเกี่ยวกับการสอบนี้</div>
@@ -28,13 +27,6 @@
           </p>
         </div>
       </div>
-      <!-- <template v-slot:body-cell-name="props">
-          <q-td :props="props">
-            <div>
-              <a href="https://quasar.dev/vue-components/table#QTable-API" />
-            </div>
-          </q-td>
-        </template> -->
     </q-card>
     <div class="col-12">
       <div class="text-h6 q-py-sm">ข้อควรระวัง</div>
@@ -67,15 +59,12 @@ const props = defineProps({
   fetchStep: {
     type: Function,
     default: () => console.log('not function')
-  },
-  step: {
-    type: Number,
-    required: true
   }
 })
 
-const mixin = useCounterMixin()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { date2Thai } = mixin
+
 const exam = ref<any>({
   contentItemId: null,
   displayText: 'การสอบภาค ข.พิเศษ สำหรับผู้สอบผ่านของ่วนราชการแล้ว',
@@ -94,8 +83,8 @@ const exam = ref<any>({
   ]
 })
 
-const applyCandidate = () => {
+const applyCandidate = async () => {
-  props.fetchStep()
+  await props.fetchStep()
 }
 </script>
 

src/modules/01_exam/components/ExamFinished.vue

@@ -88,6 +88,9 @@ import { onMounted, ref } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useRoute } from 'vue-router'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
+import { useQuasar } from 'quasar'
 import ExamCard from '@/modules/01_exam/components/ExamCard.vue'
 
 const props = defineProps({
@@ -101,10 +104,14 @@ const props = defineProps({
   }
 })
 
+const $q = useQuasar()
 const route = useRoute()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
-const loader = ref<boolean>(false)
 const fullName = ref<string>('')
 const examNumber = ref<string>('')
 const citizenId = ref<string>('')
@@ -117,7 +124,6 @@ const scoreSumFull = ref<number | null>(null)
 const scoreSum = ref<number | null>(null)
 const examResultinscore = ref<string>('')
 const avatar = ref<string>('')
-
 const dialog = ref<boolean>(false)
 const rating = ref<number>(5)
 const text = ref<string>('')
@@ -127,7 +133,7 @@ onMounted(async () => {
 })
 
 const fetchStatus = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateCard(examId.value, positionId.value))
     .then((res) => {
@@ -153,27 +159,27 @@ const fetchStatus = async () => {
       avatar.value = data.avatar
       if (data.reviewPoint == null) dialog.value = true
     })
-    .catch(() => {
+    .catch((e) => {
-      //   acceptTermOfUse.value = false
+      messageError($q, e)
     })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const sendRating = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .put(config.API.candidateReview(examId.value, positionId.value), {
       reviewPoint: rating.value, //คะแนน
       review: text.value //ข้อความ
     })
     .then((res) => {})
-    .catch(() => {
+    .catch((e) => {
-      //   acceptTermOfUse.value = false
+      messageError($q, e)
     })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
       dialog.value = false
     })
 }
@@ -188,10 +194,6 @@ const getClass = (val: string) => {
   size: A4;
   margin: 0;
 }
-/* #print {
-  display: none;
-  visibility: none;
-} */
 
 @media print {
   @page {

src/modules/01_exam/components/ExamForm.vue

@@ -44,9 +44,9 @@
 import { onMounted, ref } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
-import Profile from '@/modules/01_exam/components/Form/Profile.vue'
 import { useRoute } from 'vue-router'
 import {
   defaultInformation,
@@ -54,6 +54,7 @@ import {
   defaultAddress,
   defaultFamily
 } from '@/modules/01_exam/interface/index/Main'
+import Profile from '@/modules/01_exam/components/Form/Profile.vue'
 
 const props = defineProps({
   fetchStep: {
@@ -68,8 +69,9 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { modalConfirm, modalError, success, dateToISO } = mixin
+const { modalConfirm, modalError, success, dateToISO, messageError } = mixin
-const loader = ref<boolean>(false)
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
 const route = useRoute()
@@ -82,9 +84,6 @@ const formOccupation = ref<any>({})
 const saveAuto = ref<boolean>(false)
 
 onMounted(async () => {
-  //   if (props.status !== 'register') {
-  //     acceptTermOfUse.value = true
-  //   }
   await fetchStatus()
 })
 
@@ -103,31 +102,30 @@ const okModalConfirm = () => {
 }
 
 const fetchStatus = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateCard(examId.value, positionId.value))
     .then((res) => {
       acceptTermOfUse.value = true
     })
-    .catch(() => {
+    .catch((e) => {
       acceptTermOfUse.value = false
     })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const saveForm = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateRegister(examId.value, positionId.value))
-    .then(() => {
+    .then(() => {})
-      //   success($q, 'สมัครสอบสำเร็จสำเร็จ')
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch(() => {})
     .finally(async () => {
       await props.fetchStep()
-      loader.value = false
     })
 }
 
@@ -156,7 +154,7 @@ const saveData = async () => {
                     type.value = defaultOccupation.value.employee
                   if (defaultOccupation.value.status == 'other')
                     type.value = defaultOccupation.value.other
-                  loader.value = true
+                  loaderPage(true)
                   await http
                     .post(config.API.candidateId(examId.value, positionId.value), {
                       prefixId: defaultInformation.value.prefixId,
@@ -227,14 +225,10 @@ const saveData = async () => {
                       success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
                       if (saveAuto.value) await saveForm()
                     })
-                    .catch(() => {
+                    .catch((e) => {
-                      //   modalError.value = true
+                      messageError($q, e)
-                      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-                      //   modalErrorDetail.value = e.response.data.message
-                      // statusCode.value = e.response.data.status
                     })
                     .finally(async () => {
-                      loader.value = false
                       await props.fetchStep()
                     })
                 }

src/modules/01_exam/components/ExamPayment.vue

@@ -83,21 +83,6 @@
                     accept="image/*"
                     @change="uploadImage"
                   />
-                  <!-- <q-file
-                    id="file-upload"
-                    v-model="filePayment"
-                    dense
-                    label="อัพโหลดหลักฐานชำระเงิน"
-                    outlined
-                    use-chips
-                    multiple
-                    class="q-pl-sm"
-                    v-if="status == 'payment' || status == 'rejectPayment'"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file> -->
                 </div>
               </div>
             </div>
@@ -169,7 +154,6 @@
                 </div>
                 <div class="col-xs-12 col-sm-5">
                   <label for="file-upload" class="col-12 row">
-                    <!-- :src="img" -->
                     <q-img
                       src="@/assets/ex_slip.jpeg"
                       fit="contain"
@@ -196,21 +180,6 @@
                     accept="image/*"
                     @change="uploadImage"
                   />
-                  <!-- <q-file
-                    id="file-upload"
-                    v-model="filePayment"
-                    dense
-                    label="อัพโหลดหลักฐานชำระเงิน"
-                    outlined
-                    use-chips
-                    multiple
-                    class="q-pl-sm"
-                    v-if="status == 'payment' || status == 'rejectPayment'"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file> -->
                 </div>
               </div>
             </div>
@@ -230,11 +199,11 @@
     />
   </div>
 </template>
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useRoute } from 'vue-router'
@@ -252,10 +221,11 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { success, modalError } = mixin
+const { success, modalError, messageError } = mixin
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const rejectMessage = ref<string>('')
 const img = ref<string>('')
-const loader = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
@@ -269,7 +239,7 @@ onMounted(async () => {
 })
 
 const fetchPaymentExam = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.periodExamPayment(examId.value))
     .then((res) => {
@@ -277,14 +247,16 @@ const fetchPaymentExam = async () => {
       bank.value = data.bankExam
       fee.value = data.fee
     })
-    .catch(() => {})
+    .catch((e) => {
-    .finally(async () => {
+      messageError($q, e)
-      loader.value = false
+    })
+    .finally(() => {
+      loaderPage(false)
     })
 }
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidatePayment(examId.value, positionId.value))
     .then((res) => {
@@ -292,9 +264,11 @@ const fetchData = async () => {
       img.value = data.paymentImg
       rejectMessage.value = data.rejectDetail
     })
-    .catch(() => {})
+    .catch((e) => {
-    .finally(async () => {
+      messageError($q, e)
-      loader.value = false
+    })
+    .finally(() => {
+      loaderPage(false)
     })
 }
 
@@ -302,17 +276,18 @@ const clickPayment = async () => {
   if (img.value != null || img.value != '') {
     const formData = new FormData()
     formData.append('', filePayment.value[0])
-    loader.value = true
+    loaderPage(true)
     await http
       .post(config.API.candidatePayment(examId.value, positionId.value))
       .then(() => {
         success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
       })
-      .catch(() => {})
+      .catch((e) => {
+        messageError($q, e)
+      })
       .finally(async () => {
-        loader.value = false
-        props.fetchStep()
         filePayment.value = []
+        await props.fetchStep()
       })
   } else {
     modalError($q, 'ไม่สามารถยืนยันการชำระเงินได้', 'กรุณาอัปโหลดเอกสารหลักฐานชำระเงิน')
@@ -324,16 +299,17 @@ const uploadImage = async (file: any) => {
   if (input.length > 0) {
     const formData = new FormData()
     formData.append('', input[0])
-    loader.value = true
+    loaderPage(true)
     await http
       .put(config.API.candidatePayment(examId.value, positionId.value), formData)
       .then(() => {
         success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
       })
-      .catch(() => {})
+      .catch((e) => {
+        messageError($q, e)
+      })
       .finally(async () => {
-        loader.value = false
+        await props.fetchStep()
-        props.fetchStep()
         await fetchData()
         file = []
       })
@@ -343,15 +319,19 @@ const uploadImage = async (file: any) => {
 }
 
 const downloadBillPayment = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateBill(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       window.open(data)
     })
-    .catch(() => {})
+    .catch((e) => {
-    .finally(async () => {})
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 </script>
 

src/modules/01_exam/components/Form/Address.vue

@@ -8,7 +8,6 @@
     :editOnly="false"
     :editData="false"
   />
-  <!-- :changeBtn="changeBtn" -->
   <q-form ref="myform">
     <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
       <div class="col-xs-12">
@@ -25,7 +24,6 @@
           :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
           :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
         />
-        <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
         <q-select
@@ -215,10 +213,13 @@ import { ref, onMounted, watch } from 'vue'
 import type { PropType } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
+import { useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
 import type { Address, DataOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultAddress, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
   provinceOptions: {
@@ -234,20 +235,23 @@ const props = defineProps({
     required: true
   }
 })
+const emit = defineEmits(['update:form'])
 
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
-const loader = ref<boolean>(false)
 const districtOptions = ref<DataOption[]>([])
 const districtCOptions = ref<DataOption[]>([])
 const subdistrictOptions = ref<DataOption[]>([])
 const subdistrictCOptions = ref<DataOption[]>([])
 
-const emit = defineEmits(['update:form'])
-
 watch(myform, async (count: any, prevCount: any) => {
   emit('update:form', count)
 })
@@ -269,31 +273,35 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  //   loader.value = true;
+  loaderPage(true)
   await http
     .get(config.API.candidateAddress(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
-      defaultAddress.value.address = data.registAddress
+      if (data != null) {
-      defaultAddress.value.addressC = data.currentAddress
+        defaultAddress.value.address = data.registAddress
-      defaultAddress.value.provinceId = data.registProvinceId
+        defaultAddress.value.addressC = data.currentAddress
-      defaultAddress.value.provinceIdC = data.currentProvinceId
+        defaultAddress.value.provinceId = data.registProvinceId
-      defaultAddress.value.districtId = data.registDistrictId
+        defaultAddress.value.provinceIdC = data.currentProvinceId
-      defaultAddress.value.districtIdC = data.currentDistrictId
+        defaultAddress.value.districtId = data.registDistrictId
-      defaultAddress.value.subdistrictId = data.registSubDistrictId
+        defaultAddress.value.districtIdC = data.currentDistrictId
-      defaultAddress.value.subdistrictIdC = data.currentSubDistrictId
+        defaultAddress.value.subdistrictId = data.registSubDistrictId
-      defaultAddress.value.code = data.registZipCode
+        defaultAddress.value.subdistrictIdC = data.currentSubDistrictId
-      defaultAddress.value.codeC = data.currentZipCode
+        defaultAddress.value.code = data.registZipCode
-      defaultAddress.value.same =
+        defaultAddress.value.codeC = data.currentZipCode
-        data.registSame == true ? '1' : data.registSame == false ? '0' : null
+        defaultAddress.value.same =
+          data.registSame == true ? '1' : data.registSame == false ? '0' : null
+      }
+    })
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch(() => {})
     .finally(() => {
-      //   loader.value = false;
+      loaderPage(false)
     })
 }
 
-const selectProvince = (e: string, name: string) => {
+const selectProvince = async (e: string, name: string) => {
   if (name == '1') {
     defaultAddress.value.districtId = ''
     defaultAddress.value.subdistrictId = ''
@@ -304,10 +312,10 @@ const selectProvince = (e: string, name: string) => {
     defaultAddress.value.codeC = null
   }
   myform.value.resetValidation()
-  fetchDistrict(e, name)
+  await fetchDistrict(e, name)
 }
 
-const selectDistrict = (e: string, name: string) => {
+const selectDistrict = async (e: string, name: string) => {
   if (name == '1') {
     defaultAddress.value.subdistrictId = ''
     defaultAddress.value.code = null
@@ -316,7 +324,7 @@ const selectDistrict = (e: string, name: string) => {
     defaultAddress.value.codeC = null
   }
   myform.value.resetValidation()
-  fetchSubDistrict(e, name)
+  await fetchSubDistrict(e, name)
 }
 
 const selectSubDistrict = (e: string, name: string) => {
@@ -332,7 +340,7 @@ const selectSubDistrict = (e: string, name: string) => {
 }
 
 const fetchDistrict = async (id: string, position: string) => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -347,14 +355,16 @@ const fetchDistrict = async (id: string, position: string) => {
         districtCOptions.value = option
       }
     })
-    .catch(() => {})
+    .catch((e) => {
+      messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const fetchSubDistrict = async (id: string, position: string) => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.listSubDistrict(id))
     .then((res) => {
@@ -373,9 +383,11 @@ const fetchSubDistrict = async (id: string, position: string) => {
         subdistrictCOptions.value = option
       }
     })
-    .catch(() => {})
+    .catch((e) => {
+      messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 

src/modules/01_exam/components/Form/Career.vue

@@ -11,7 +11,6 @@
       v-model:editvisible="edit"
       :add="clickAdd"
       :edit="clickEdit"
-      :cancel="clickCancel"
       :addData="false"
       :editData="status == 'register' || status == 'rejectRegister'"
       name="ประวัติการทำงาน/ฝึกงาน"
@@ -51,7 +50,6 @@
       </template>
     </Table>
   </q-form>
-  <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">
@@ -165,7 +163,6 @@
         </q-card-section>
         <q-separator />
         <DialogFooter
-          :cancel="clickCancel"
           :edit="clickEdit"
           :save="clickSave"
           :validate="validateData"
@@ -185,9 +182,11 @@
 import { onMounted, ref, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
+import { useRoute } from 'vue-router'
 import type {
   RequestItemsObject,
   Columns,
@@ -197,7 +196,6 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Career
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
   status: {
@@ -208,10 +206,11 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
-const loader = ref<boolean>(false)
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const id = ref<string>('')
 const location = ref<string>()
 const position = ref<string>()
@@ -297,7 +296,7 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateCareer(examId.value, positionId.value))
     .then((res) => {
@@ -311,16 +310,18 @@ const fetchData = async () => {
         })
       })
     })
-    .catch(() => {})
+    .catch((e) => {
+      //   messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
-const clickPrevious = () => {
+const clickPrevious = async () => {
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -329,13 +330,13 @@ const clickPrevious = () => {
   duration.value = row.duration
   reason.value = row.reason
   id.value = row.id
-  checkRowPage()
+  await checkRowPage()
 }
 
 /**
  * กดดูข้อมูลต่อไป
  */
-const clickNext = () => {
+const clickNext = async () => {
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -344,7 +345,7 @@ const clickNext = () => {
   duration.value = row.duration
   reason.value = row.reason
   id.value = row.id
-  checkRowPage()
+  await checkRowPage()
 }
 
 /**
@@ -366,7 +367,6 @@ const checkRowPage = () => {
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-  //   edit.value = true
   next.value = false
   previous.value = false
 }
@@ -374,8 +374,8 @@ const clickEdit = () => {
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
-const clickAdd = () => {
+const clickAdd = async () => {
-  addRow()
+  await addRow()
 }
 
 const checkDelete = (row: RequestItemsObject) => {
@@ -388,26 +388,20 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    loader.value = true
+    loaderPage(true)
     await http
       .delete(config.API.candidateCareer(rawItem.value.id, ''))
       .then(() => {
         success($q, 'ลบข้อมูลสำเร็จ')
       })
-      .catch(() => {
+      .catch((e) => {
-        //   modalError.value = true
+        messageError($q, e)
-        //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-        //   modalErrorDetail.value = e.response.data.message
-        // statusCode.value = e.response.data.status
       })
       .finally(async () => {
-        loader.value = false
         await fetchData()
-        // edit.value = false
       })
   } else {
     await fetchData()
-    // edit.value = false
   }
 }
 
@@ -417,15 +411,11 @@ const clickDeleteRow = async () => {
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      //   if (store.consend == true) {
       if (modalEdit.value) {
         await editData()
       } else {
         await saveData()
       }
-      //   } else {
-      //     modalConsend.value = true
-      //   }
     }
   })
 }
@@ -434,7 +424,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .post(config.API.candidateCareer(examId.value, positionId.value), {
       name: location.value,
@@ -447,15 +437,10 @@ const saveData = async () => {
     .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch(() => {
+    .catch((e) => {
-      //   modalError.value = true
+      messageError($q, e)
-      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-      //   modalErrorDetail.value = e.response.data.message
-      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
-      loader.value = false
-      //   edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -465,7 +450,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .put(config.API.candidateCareer(id.value, ''), {
       name: location.value,
@@ -478,15 +463,10 @@ const editData = async () => {
     .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch(() => {
+    .catch((e) => {
-      //   modalError.value = true
+      messageError($q, e)
-      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-      //   modalErrorDetail.value = e.response.data.message
-      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
-      loader.value = false
-      //   edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -527,12 +507,8 @@ const selectData = (props: DataProps) => {
   duration.value = props.row.duration
   reason.value = props.row.reason
   id.value = props.row.id
-  //   if (edit.value == true) {
   next.value = false
   previous.value = false
-  //   } else {
-  //     checkRowPage()
-  //   }
 }
 
 /**
@@ -548,13 +524,6 @@ const addRow = () => {
   reason.value = ''
 }
 
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  //   edit.value = false
-}
-
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */

src/modules/01_exam/components/Form/Document.vue

@@ -81,18 +81,6 @@
             <q-uploader-add-trigger />
             <q-tooltip>เลือกไฟล์</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            v-if="scope.canUpload"
-            icon="cloud_upload"
-            label="อัพโหลดไฟล์"
-            @click="scope.upload"
-            round
-            dense
-            flat
-          >
-            <q-tooltip>อัพโหลดไฟล์</q-tooltip>
-          </q-btn> -->
-
           <q-btn v-if="scope.isUploading" icon="clear" @click="scope.abort" round dense flat>
             <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
           </q-btn>
@@ -142,12 +130,15 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
-import HeaderTop from '@/components/top.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import { useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
 import type { UploadType } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
   status: {
@@ -155,16 +146,21 @@ const props = defineProps({
     required: true
   }
 })
+const emit = defineEmits(['update:loader'])
+
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 const uploader = ref<any>()
-const loader = ref<boolean>(false)
 const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
 const name = ref<string>('')
 const files = ref<UploadType[]>([])
 const file = ref<File[]>([])
-const emit = defineEmits(['update:loader'])
 
 onMounted(async () => {
   await getData()
@@ -176,21 +172,25 @@ const fileAdd = async (val: any) => {
 }
 
 const getData = async () => {
-  loader.value = true
+  name.value = ''
+  uploader.value.reset()
+  loaderPage(true)
   await http
     .get(config.API.candidateUpload(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       files.value = data
     })
-    .catch(() => {})
+    .catch((e) => {
+      //   messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const deleteData = async (id: string) => {
-  loader.value = true
+  loaderPage(true)
   const params = {
     documentId: id
   }
@@ -198,35 +198,30 @@ const deleteData = async (id: string) => {
     .delete(config.API.candidateUpload(examId.value, positionId.value), {
       params
     })
-    .then((res) => {
+    .then((res) => {})
-      const data = res.data.result
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch(() => {})
     .finally(async () => {
-      loader.value = false
       await getData()
     })
 }
 
 const uploadData = async () => {
-  console.log('asdasd')
   const blob = file.value.slice(0, file.value[0].size)
   const newFile = new File(blob, name.value, {
     type: file.value[0].type
   })
   const formData = new FormData()
   formData.append('', newFile)
-  loader.value = true
+  loaderPage(true)
   await http
     .put(config.API.candidateUpload(examId.value, positionId.value), formData)
-    .then((res) => {
+    .then((res) => {})
-      const data = res.data.result
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch(() => {})
     .finally(async () => {
-      loader.value = false
-      name.value = ''
-      uploader.value.reset()
       await getData()
     })
 }

src/modules/01_exam/components/Form/Education.vue

@@ -11,7 +11,6 @@
       v-model:editvisible="edit"
       :add="clickAdd"
       :edit="clickEdit"
-      :cancel="clickCancel"
       :addData="false"
       :editData="status == 'register' || status == 'rejectRegister'"
       name="ประวัติการศีกษา"
@@ -48,7 +47,6 @@
       </template>
     </Table>
   </q-form>
-  <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">
@@ -166,7 +164,6 @@
         </q-card-section>
         <q-separator />
         <DialogFooter
-          :cancel="clickCancel"
           :edit="clickEdit"
           :save="clickSave"
           :validate="validateData"
@@ -184,11 +181,14 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
+import type { PropType } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
+import { useRoute } from 'vue-router'
 import type {
   RequestItemsObject,
   Columns,
@@ -199,9 +199,12 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Educat
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
+  educationLevelOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
   status: {
     type: String,
     required: true
@@ -210,14 +213,14 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
-const loader = ref<boolean>(false)
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const id = ref<string>('')
 const educationLevel = ref<string>()
 const educationLevelId = ref<string>()
-const educationLevelOptions = ref<DataOption[]>([])
 const major = ref<string>()
 const scores = ref<number | null>()
 const name = ref<string>()
@@ -298,11 +301,10 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 
 onMounted(async () => {
   await fetchData()
-  await fetcheducationLevel()
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateEducation(examId.value, positionId.value))
     .then((res) => {
@@ -317,34 +319,18 @@ const fetchData = async () => {
         })
       })
     })
-    .catch(() => {})
+    .catch((e) => {
-    .finally(() => {
+      //   messageError($q, e)
-      loader.value = false
     })
-}
-
-const fetcheducationLevel = async () => {
-  loader.value = true
-  await http
-    .get(config.API.educationLevel)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      educationLevelOptions.value = option
-    })
-    .catch(() => {})
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
-const clickPrevious = () => {
+const clickPrevious = async () => {
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   educationLevel.value = row.educationLevel
@@ -354,13 +340,13 @@ const clickPrevious = () => {
   name.value = row.name
   duration.value = row.duration
   id.value = row.id
-  checkRowPage()
+  await checkRowPage()
 }
 
 /**
  * กดดูข้อมูลต่อไป
  */
-const clickNext = () => {
+const clickNext = async () => {
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   educationLevel.value = row.educationLevel
@@ -370,7 +356,7 @@ const clickNext = () => {
   name.value = row.name
   duration.value = row.duration
   id.value = row.id
-  checkRowPage()
+  await checkRowPage()
 }
 
 /**
@@ -392,7 +378,6 @@ const checkRowPage = () => {
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-  //   edit.value = true
   next.value = false
   previous.value = false
 }
@@ -400,8 +385,8 @@ const clickEdit = () => {
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
-const clickAdd = () => {
+const clickAdd = async () => {
-  addRow()
+  await addRow()
 }
 
 const checkDelete = (row: RequestItemsObject) => {
@@ -414,26 +399,20 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    loader.value = true
+    loaderPage(true)
     await http
       .delete(config.API.candidateEducation(rawItem.value.id, ''))
       .then(() => {
         success($q, 'ลบข้อมูลสำเร็จ')
       })
-      .catch(() => {
+      .catch((e) => {
-        //   modalError.value = true
+        messageError($q, e)
-        //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-        //   modalErrorDetail.value = e.response.data.message
-        // statusCode.value = e.response.data.status
       })
       .finally(async () => {
-        loader.value = false
         await fetchData()
-        // edit.value = false
       })
   } else {
     await fetchData()
-    // edit.value = false
   }
 }
 
@@ -443,15 +422,11 @@ const clickDeleteRow = async () => {
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      //   if (store.consend == true) {
       if (modalEdit.value) {
         await editData()
       } else {
         await saveData()
       }
-      //   } else {
-      //     modalConsend.value = true
-      //   }
     }
   })
 }
@@ -460,7 +435,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .post(config.API.candidateEducation(examId.value, positionId.value), {
       educationLevelId: educationLevelId.value,
@@ -473,15 +448,10 @@ const saveData = async () => {
     .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch(() => {
+    .catch((e) => {
-      //   modalError.value = true
+      messageError($q, e)
-      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-      //   modalErrorDetail.value = e.response.data.message
-      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
-      loader.value = false
-      //   edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -491,7 +461,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .put(config.API.candidateEducation(id.value, ''), {
       educationLevelId: educationLevelId.value,
@@ -504,15 +474,10 @@ const editData = async () => {
     .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch(() => {
+    .catch((e) => {
-      //   modalError.value = true
+      messageError($q, e)
-      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-      //   modalErrorDetail.value = e.response.data.message
-      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
-      loader.value = false
-      //   edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -554,12 +519,8 @@ const selectData = (props: DataProps) => {
   name.value = props.row.name
   duration.value = props.row.duration
   id.value = props.row.id
-  //   if (edit.value == true) {
   next.value = false
   previous.value = false
-  //   } else {
-  //     checkRowPage()
-  //   }
 }
 
 /**
@@ -576,13 +537,6 @@ const addRow = () => {
   duration.value = [new Date(), new Date()]
 }
 
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  //   edit.value = false
-}
-
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */

src/modules/01_exam/components/Form/Family.vue

@@ -8,7 +8,6 @@
     :editOnly="false"
     :editData="false"
   />
-  <!-- :changeBtn="changeBtn" -->
   <q-form ref="myform" class="col-12">
     <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
       <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
@@ -35,11 +34,11 @@
       <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
         <q-select
           hide-bottom-space
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           v-model="defaultFamily.prefixIdC"
@@ -54,9 +53,9 @@
 
       <div class="col-xs-6 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -68,9 +67,9 @@
       </div>
       <div class="col-xs-6 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -82,29 +81,27 @@
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultFamily.occupationC"
-          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
           :label="`${'อาชีพ'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultFamily.nationalityC"
-          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
       </div>
@@ -113,11 +110,11 @@
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-select
           hide-bottom-space
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           v-model="defaultFamily.prefixIdM"
@@ -132,9 +129,9 @@
 
       <div class="col-xs-6 col-sm-3 col-md-3">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -146,9 +143,9 @@
       </div>
       <div class="col-xs-6 col-sm-3 col-md-3">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -160,29 +157,27 @@
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultFamily.occupationM"
-          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
           :label="`${'อาชีพ'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultFamily.nationalityM"
-          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
       </div>
@@ -191,11 +186,11 @@
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-select
           hide-bottom-space
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           v-model="defaultFamily.prefixIdF"
@@ -209,9 +204,9 @@
       </div>
       <div class="col-xs-6 col-sm-3 col-md-3">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -223,9 +218,9 @@
       </div>
       <div class="col-xs-6 col-sm-3 col-md-3">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -237,29 +232,27 @@
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultFamily.occupationF"
-          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
           :label="`${'อาชีพ'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2">
         <q-input
-          :class="getClass((status == 'register' || status == 'rejectRegister'))"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
           hide-bottom-space
-          :outlined="(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
           dense
           lazy-rules
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultFamily.nationalityF"
-          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         />
       </div>
@@ -271,10 +264,13 @@ import { onMounted, ref, watch } from 'vue'
 import type { PropType } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
+import { useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultFamily, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
   prefixOptions: {
@@ -290,15 +286,18 @@ const props = defineProps({
     required: true
   }
 })
+const emit = defineEmits(['update:form'])
 
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
-const loader = ref<boolean>(false)
-
-const emit = defineEmits(['update:form'])
 
 watch(myform, async (count: any, prevCount: any) => {
   emit('update:form', count)
@@ -313,43 +312,38 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateFamily(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
-      defaultFamily.value.prefixIdC = data.marryPrefixId
+      if (data != null) {
-      defaultFamily.value.firstnameC = data.marryFirstName
+        defaultFamily.value.prefixIdC = data.marryPrefixId
-      defaultFamily.value.lastnameC = data.marryLastName
+        defaultFamily.value.firstnameC = data.marryFirstName
-      defaultFamily.value.occupationC = data.marryOccupation
+        defaultFamily.value.lastnameC = data.marryLastName
-      defaultFamily.value.nationalityC = data.marryNationality
+        defaultFamily.value.occupationC = data.marryOccupation
-      defaultFamily.value.prefixIdM = data.fatherPrefixId
+        defaultFamily.value.nationalityC = data.marryNationality
-      defaultFamily.value.firstnameM = data.fatherFirstName
+        defaultFamily.value.prefixIdM = data.fatherPrefixId
-      defaultFamily.value.lastnameM = data.fatherLastName
+        defaultFamily.value.firstnameM = data.fatherFirstName
-      defaultFamily.value.occupationM = data.fatherOccupation
+        defaultFamily.value.lastnameM = data.fatherLastName
-      defaultFamily.value.nationalityM = data.fatherNationality
+        defaultFamily.value.occupationM = data.fatherOccupation
-      defaultFamily.value.prefixIdF = data.motherPrefixId
+        defaultFamily.value.nationalityM = data.fatherNationality
-      defaultFamily.value.firstnameF = data.motherFirstName
+        defaultFamily.value.prefixIdF = data.motherPrefixId
-      defaultFamily.value.lastnameF = data.motherLastName
+        defaultFamily.value.firstnameF = data.motherFirstName
-      defaultFamily.value.occupationF = data.motherOccupation
+        defaultFamily.value.lastnameF = data.motherLastName
-      defaultFamily.value.nationalityF = data.motherNationality
+        defaultFamily.value.occupationF = data.motherOccupation
-      defaultFamily.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
+        defaultFamily.value.nationalityF = data.motherNationality
+        defaultFamily.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
+      }
+    })
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch(() => {})
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
-const selectRadio = (e: boolean) => {
-  if (!e) {
-    defaultFamily.value.prefixIdC = ''
-    defaultFamily.value.firstnameC = ''
-    defaultFamily.value.lastnameC = ''
-    defaultFamily.value.occupationC = ''
-  }
-}
-
 const getClass = (val: boolean) => {
   return {
     'full-width inputgreen cursor-pointer': val,

src/modules/01_exam/components/Form/Information.vue

@@ -8,7 +8,6 @@
     :editOnly="false"
     :editData="false"
   />
-  <!-- :changeBtn="changeBtn" -->
   <q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
     <div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
       <div class="col-xs-12 col-sm-2 col-md-2">
@@ -347,15 +346,16 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import type { PropType } from 'vue'
-import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
-import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
-import HeaderTop from '@/components/top.vue'
 import { useRoute } from 'vue-router'
 import keycloak from '@/plugins/keycloak'
 import { useQuasar } from 'quasar'
+import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
+import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
   prefixOptions: {
@@ -379,24 +379,21 @@ const props = defineProps({
     required: true
   }
 })
+const emit = defineEmits(['update:form'])
 
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, calAge, modalError, success } = mixin
+const { date2Thai, calAge, success, messageError } = mixin
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const districtOptions = ref<DataOption[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
-const disabledPic = ref<boolean>(false)
-const fileData = ref<File | null>()
-const loader = ref<boolean>(false)
 const img = ref<string>('')
 const fileProfile = ref<File[]>([])
-const fileDataUpload = ref<File>()
-
-const emit = defineEmits(['update:form'])
 
 watch(myform, async (count: any, prevCount: any) => {
   emit('update:form', count)
@@ -414,7 +411,7 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateInformation(examId.value, positionId.value))
     .then((res) => {
@@ -445,21 +442,23 @@ const fetchData = async () => {
         keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
     })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const fetchImgData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateProfile(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       img.value = data
     })
-    .catch(() => {})
+    .catch((e) => {
-    .finally(async () => {
+      //   messageError($q, e)
-      loader.value = false
+    })
+    .finally(() => {
+      loaderPage(false)
     })
 }
 
@@ -468,16 +467,16 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData()
     formData.append('', input[0])
-    // loaderPage(true);
+    loaderPage(true)
     await http
       .put(config.API.candidateProfile(examId.value, positionId.value), formData)
       .then((res) => {
         success($q, 'อัพโหลดรูปสำเร็จ')
       })
-      .catch((e) => {})
+      .catch((e) => {
+        messageError($q, e)
+      })
       .finally(async () => {
-        loader.value = false
-        // await fetchData()
         await fetchImgData()
         fileProfile.value = []
       })
@@ -485,14 +484,14 @@ const uploadImage = async (e: any) => {
   }
 }
 
-const selectProvince = (val: string) => {
+const selectProvince = async (val: string) => {
   defaultInformation.value.districtId = ''
   myform.value.resetValidation()
-  fetchDistrict(val)
+  await fetchDistrict(val)
 }
 
 const fetchDistrict = async (id: string) => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -503,14 +502,12 @@ const fetchDistrict = async (id: string) => {
       })
       districtOptions.value = option
     })
-    .catch(() => {})
+    .catch((e) => {
-    .finally(() => {
+      messageError($q, e)
-      loader.value = false
+    })
+    .finally(() => {
+      loaderPage(false)
     })
-}
-
-const savePic = () => {
-  disabledPic.value = false
 }
 
 const getClass = (val: boolean) => {

src/modules/01_exam/components/Form/Occupation.vue

@@ -8,7 +8,6 @@
     :editOnly="false"
     :editData="false"
   />
-  <!-- :changeBtn="changeBtn" -->
   <q-form ref="myform">
     <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
       <div class="col-12 row q-pb-lg">
@@ -22,7 +21,7 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.official"
-          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
           :disable="
             defaultOccupation.status !== 'official' ||
             !(status == 'register' || status == 'rejectRegister')
@@ -52,7 +51,7 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.personnel"
-          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
           :disable="
             defaultOccupation.status !== 'personnel' ||
             !(status == 'register' || status == 'rejectRegister')
@@ -82,7 +81,7 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.officialsOther"
-          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
           :disable="
             defaultOccupation.status !== 'officialsOther' ||
             !(status == 'register' || status == 'rejectRegister')
@@ -112,7 +111,7 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.employee"
-          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
           :disable="
             defaultOccupation.status !== 'employee' ||
             !(status == 'register' || status == 'rejectRegister')
@@ -153,7 +152,7 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.other"
-          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
           :disable="
             defaultOccupation.status !== 'other' ||
             !(status == 'register' || status == 'rejectRegister')
@@ -185,8 +184,8 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.company"
-          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
           :label="`${'สำนัก/บริษัท'}`"
+          hide-bottom-space
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -200,8 +199,8 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.department"
-          :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
           :label="`${'กอง/ฝ่าย'}`"
+          hide-bottom-space
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -216,12 +215,12 @@
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.email"
           :rules="[
-            (val) => !!val || 'กรุณากรอก E-mail address',
             (val) =>
               /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(val) ||
               'E-mail address ไม่ถูกต้อง'
           ]"
           :label="`${'E-mail address'}`"
+          hide-bottom-space
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -238,11 +237,9 @@
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultOccupation.tel"
-          :rules="[
+          :rules="[(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง']"
-            (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
-          ]"
           :label="`${'โทรศัพท์'}`"
+          hide-bottom-space
         />
       </div>
     </div>
@@ -252,10 +249,13 @@
 import { ref, onMounted, watch } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
+import { useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
 import type { Occupation } from '@/modules/01_exam/interface/index/Main'
 import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
   status: {
@@ -267,16 +267,19 @@ const props = defineProps({
     required: true
   }
 })
+const emit = defineEmits(['update:form'])
 
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
-const loader = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 
-const emit = defineEmits(['update:form'])
-
 watch(myform, async (count: any, prevCount: any) => {
   emit('update:form', count)
 })
@@ -290,30 +293,34 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateOccupation(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
-      defaultOccupation.value.status = data.occupationType
+      if (data != null) {
-      defaultOccupation.value.company = data.occupationCompany
+        defaultOccupation.value.status = data.occupationType
-      defaultOccupation.value.department = data.occupationDepartment
+        defaultOccupation.value.company = data.occupationCompany
-      defaultOccupation.value.email = data.occupationEmail
+        defaultOccupation.value.department = data.occupationDepartment
-      defaultOccupation.value.tel = data.occupationTelephone
+        defaultOccupation.value.email = data.occupationEmail
-      defaultOccupation.value.official =
+        defaultOccupation.value.tel = data.occupationTelephone
-        data.occupationType == 'official' ? data.occupationPosition : null
+        defaultOccupation.value.official =
-      defaultOccupation.value.personnel =
+          data.occupationType == 'official' ? data.occupationPosition : null
-        data.occupationType == 'personnel' ? data.occupationPosition : null
+        defaultOccupation.value.personnel =
-      defaultOccupation.value.officialsOther =
+          data.occupationType == 'personnel' ? data.occupationPosition : null
-        data.occupationType == 'officialsOther' ? data.occupationPosition : null
+        defaultOccupation.value.officialsOther =
-      defaultOccupation.value.employee =
+          data.occupationType == 'officialsOther' ? data.occupationPosition : null
-        data.occupationType == 'employee' ? data.occupationPosition : null
+        defaultOccupation.value.employee =
-      defaultOccupation.value.other =
+          data.occupationType == 'employee' ? data.occupationPosition : null
-        data.occupationType == 'other' ? data.occupationPosition : null
+        defaultOccupation.value.other =
+          data.occupationType == 'other' ? data.occupationPosition : null
+      }
+    })
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch(() => {})
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 

src/modules/01_exam/components/Form/Profile.vue

@@ -27,7 +27,7 @@
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-    <Education :status="status" />
+    <Education :educationLevelOptions="educationLevelOptions" :status="status" />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
@@ -44,6 +44,9 @@
 import { ref, onMounted, watch } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
+import { useQuasar } from 'quasar'
 import type { DataOption } from '@/modules/01_exam/interface/index/Main'
 import Information from '@/modules/01_exam/components/Form/Information.vue'
 import Address from '@/modules/01_exam/components/Form/Address.vue'
@@ -75,16 +78,6 @@ const props = defineProps({
     required: true
   }
 })
-
-const loader = ref<boolean>(true)
-const prefixOptions = ref<DataOption[]>([])
-const relationshipOptions = ref<DataOption[]>([])
-const provinceOptions = ref<DataOption[]>([])
-const formInformation = ref<any>({})
-const formAddress = ref<any>({})
-const formFamily = ref<any>({})
-const formOccupation = ref<any>({})
-
 const emit = defineEmits([
   'update:formInformation',
   'update:formAddress',
@@ -92,6 +85,20 @@ const emit = defineEmits([
   'update:formOccupation'
 ])
 
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
+const prefixOptions = ref<DataOption[]>([])
+const relationshipOptions = ref<DataOption[]>([])
+const provinceOptions = ref<DataOption[]>([])
+const educationLevelOptions = ref<DataOption[]>([])
+const formInformation = ref<any>({})
+const formAddress = ref<any>({})
+const formFamily = ref<any>({})
+const formOccupation = ref<any>({})
+
 watch(formInformation, async (count: Object, prevCount: Object) => {
   emit('update:formInformation', count)
 })
@@ -108,63 +115,45 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
   emit('update:formOccupation', count)
 })
 
-onMounted(() => {
+onMounted(async () => {
-  fetchPrefix()
+  await fetchPerson()
-  fetchRelationship()
-  fetchProvince()
 })
 
-const fetchPrefix = async () => {
+const fetchPerson = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
-    .get(config.API.prefix)
+    .get(config.API.person)
     .then((res) => {
       const data = res.data.result
-      let option: DataOption[] = []
+      let optionPrefix: DataOption[] = []
-      data.map((r: any) => {
+      data.prefixs.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
+        optionPrefix.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      prefixOptions.value = option
+      prefixOptions.value = optionPrefix
-    })
-    .catch((e) => {})
-    .finally(() => {
-      loader.value = false
-    })
-}
 
-const fetchRelationship = async () => {
+      let optionRelationship: DataOption[] = []
-  loader.value = true
+      data.relationships.map((r: any) => {
-  await http
+        optionRelationship.push({ id: r.id.toString(), name: r.name.toString() })
-    .get(config.API.relationship)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      relationshipOptions.value = option
+      relationshipOptions.value = optionRelationship
-    })
-    .catch((e) => {})
-    .finally(() => {
-      loader.value = false
-    })
-}
 
-const fetchProvince = async () => {
+      let optionProvince: DataOption[] = []
-  loader.value = true
+      data.provinces.map((r: any) => {
-  await http
+        optionProvince.push({ id: r.id.toString(), name: r.name.toString() })
-    .get(config.API.province)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      provinceOptions.value = option
+      provinceOptions.value = optionProvince
+
+      let optionEducationLevel: DataOption[] = []
+      data.educationLevels.map((r: any) => {
+        optionEducationLevel.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      educationLevelOptions.value = optionEducationLevel
+    })
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch((e) => {})
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 </script>

src/modules/01_exam/router.ts

@@ -1,16 +1,6 @@
-const Main = () => import('@/modules/01_exam/views/ExamMain.vue')
 const Detail = () => import('@/modules/01_exam/views/ExamDetail.vue')
 
 export default [
-  //   {
-  //     path: '/exam',
-  //     name: 'exam',
-  //     component: Main,
-  //     meta: {
-  //       Auth: true
-  //       //   Key: [7]
-  //     }
-  //   },
   {
     path: '/exam/:id/:positionId',
     name: 'examDetail',

src/modules/01_exam/views/ExamDetail.vue

@@ -61,7 +61,7 @@
   </q-stepper>
   <q-dialog :model-value="modalConsend" persistent>
     <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
-      <Conference :ok="consendOk" :close="consenClose" />
+      <Consendform :ok="consendOk" />
     </q-card>
   </q-dialog>
 </template>
@@ -70,6 +70,7 @@
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import { useQuasar } from 'quasar'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import http from '@/plugins/http'
@@ -77,12 +78,14 @@ import config from '@/app.config'
 import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
 import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
 import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
-import Conference from '@/modules/01_exam/components/Conference.vue'
+import Consendform from '@/modules/01_exam/components/Consendform.vue'
 
 const $q = useQuasar()
-const store = useExamDataStore()
+const storeExam = useExamDataStore()
 const mixin = useCounterMixin()
-const { modalError } = mixin
+const { modalError, messageError } = mixin
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const step = ref<number>(1)
 const stepRaw = ref<number>(1)
 const tittle = ref<string>('')
@@ -90,7 +93,6 @@ const position = ref<string>('')
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
-const loader = ref<boolean>(false)
 const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 const stepPayment = ref<boolean>(true)
@@ -99,19 +101,17 @@ const round = ref<number | null>(null)
 const yearly = ref<number | null>(null)
 
 onMounted(async () => {
-  //   stepRaw.value = 3
-  //   step.value = 3
   await fetchPeriodExam()
   await candidateCheck()
 })
 
 const candidateCheck = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateCheckCreate(examId.value, positionId.value))
     .then(async (res) => {
       const data = res.data.result
-      store.consend = data.consend
+      storeExam.consend = data.consend
       const positionExam = data.positionExam
       stepPayment.value = data.payment
       if (
@@ -128,7 +128,7 @@ const candidateCheck = async () => {
           closeWindow
         )
       } else {
-        if (store.consend == true) {
+        if (storeExam.consend == true) {
           await fetchStep()
         } else {
           modalConsend.value = true
@@ -137,20 +137,20 @@ const candidateCheck = async () => {
         }
       }
     })
-    .catch(() => {})
+    .catch((e) => {
+      messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const closeWindow = async () => {
   //   window.close()
-  //   window.closed = true
-  //   console.log(window)
 }
 
 const fetchStep = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateStatus(examId.value, positionId.value))
     .then((res) => {
@@ -194,15 +194,17 @@ const fetchStep = async () => {
         step.value = 4
       }
     })
-    .catch(() => {})
+    .catch((e) => {
+      messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
-      store.changeStatus(status.value)
+      storeExam.changeStatus(status.value)
     })
 }
 
 const fetchPeriodExam = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.periodExamPosition(examId.value, positionId.value))
     .then((res) => {
@@ -212,9 +214,11 @@ const fetchPeriodExam = async () => {
       yearly.value = data.year
       position.value = data.posiiton == null ? '' : 'ตำแหน่ง: ' + data.posiiton.positionName
     })
-    .catch(() => {})
+    .catch((e) => {
+      messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
@@ -224,8 +228,6 @@ const consenClose = () => {
 
 const consendOk = () => {
   modalConsend.value = false
-  //   store.consend = true
-  //   saveData()
 }
 </script>
 <style>

src/modules/01_exam/views/ExamMain.vue

@@ -1,235 +0,0 @@
-<!-- page:main page รายการสอบทั้งหมด -->
-<template>
-  <q-toolbar class="q-py-sm q-px-md bg-grey-2">
-    <q-toolbar-title class="toptitle text-dark col-12 row items-center"
-      >รายการสอบทั้งหมด</q-toolbar-title
-    >
-  </q-toolbar>
-
-  <div class="q-pa-md q-gutter-md">
-    <CardExam v-for="row in ExamData" :key="row.id" :items="row" @click="next(row.id)" />
-    <!-- <data-table
-      style="height: 80vh"
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      :pagination="initialPagination"
-      :nornmalData="true"
-      :paging="true"
-    >
-      <template #columns="props">
-        <q-tr :props="props" @click="next(props.row.id)" class="cursor-pointer">
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div v-if="col.name == 'no'" class="table_ellipsis">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'fullname'">
-              <div class="row col-12 items-center">
-                <img
-                  :src="props.row.avatar"
-                  class="q-mr-sm col-4"
-                  style="width: 28px; height: 28px; border-radius: 50%"
-                />
-                <div class="col-4">
-                  <div class="text-weight-medium">
-                    {{ props.row.fullname }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{ props.row.citizenId }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </data-table> -->
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useExamDataStore } from '@/modules/01_exam/store'
-import type { RequestItemsObject, Columns } from '@/modules/01_exam/interface/request/Main'
-import type { ResponseObject } from '@/modules/01_exam/interface/response/Main'
-import type { Pagination, ExamCard } from '@/modules/01_exam/interface/index/Main'
-import { defaultCard } from '@/modules/01_exam/interface/index/Main'
-import CardExam from '../components/ExamCrad.vue'
-
-const router = useRouter()
-const store = useExamDataStore()
-const { examData, changeExamColumns } = store
-const filter = ref<string>('') //search data table
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0
-})
-
-const ExamData = ref<ExamCard[]>(defaultCard)
-const visibleColumns = ref<String[]>([])
-examData.main.columns.length == 0
-  ? (visibleColumns.value = [
-      'no',
-      'fullname',
-      'position',
-      'line',
-      'linePosition',
-      'level',
-      'positionFormalManage',
-      'positionManage',
-      'numberPosition',
-      'government'
-    ])
-  : (visibleColumns.value = examData.main.columns)
-const columns = ref<Columns>([
-  {
-    name: 'no',
-    align: 'left',
-    label: 'ลำดับ',
-    sortable: true,
-    field: 'no',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'fullname',
-    align: 'left',
-    label: 'ชื่อ-สกุล',
-    sortable: true,
-    field: 'fullname',
-    headerStyle: 'font-size: 14px; min-width: 200px',
-    style: 'font-size: 14px; '
-  },
-  {
-    name: 'position',
-    align: 'left',
-    label: 'ตำแหน่ง',
-    sortable: true,
-    field: 'position',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'line',
-    align: 'left',
-    label: 'สายงาน',
-    sortable: true,
-    field: 'line',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'linePosition',
-    align: 'left',
-    label: 'ตำแหน่งในสายงาน',
-    sortable: true,
-    field: 'linePosition',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'level',
-    align: 'left',
-    label: 'ระดับ',
-    sortable: true,
-    field: 'level',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'positionFormalManage',
-    align: 'left',
-    label: 'ตำแหน่งทางการบริหาร',
-    sortable: true,
-    field: 'positionFormalManage',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'positionManage',
-    align: 'left',
-    label: 'ตำแหน่งการบริหาร',
-    sortable: true,
-    field: 'positionManage',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'numberPosition',
-    align: 'left',
-    label: 'เลขที่ตำแหน่ง',
-    sortable: true,
-    field: 'numberPosition',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'government',
-    align: 'left',
-    label: 'หน่วยงาน/ส่วนราชการ',
-    sortable: true,
-    field: 'government',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  }
-])
-const rows = ref<RequestItemsObject[]>([
-  {
-    id: 1,
-    fullname: 'นางสาวณัฐกา ชมสิน',
-    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
-    citizenId: '4016500103241',
-    position: 'นักจัดการงานทั่วไป',
-    line: 'จัดการทั่วไป',
-    linePosition: 'ทั่วไป ',
-    level: 'ต้น',
-    positionFormalManage: 'นักจัดการทั่วไป',
-    positionManage: 'นักจัดการทั่วไป',
-    numberPosition: 'กทข.1',
-    government: 'กองบริหารทั่วไป'
-  },
-  {
-    id: 2,
-    fullname: 'นางสาวรัชภรณ์ ภักดี',
-    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
-    citizenId: '4016500092355',
-    position: 'นักจัดการงานทั่วไป',
-    line: 'จัดการทั่วไป',
-    linePosition: 'ทั่วไป ',
-    level: 'ต้น',
-    positionFormalManage: 'นักจัดการทั่วไป',
-    positionManage: 'นักจัดการทั่วไป',
-    numberPosition: 'กทข.1',
-    government: 'กองบริหารทั่วไป'
-  },
-  {
-    id: 3,
-    fullname: 'นางสาวภาพรรณ ลออ',
-    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
-    citizenId: '4016500086436',
-    position: 'นักจัดการงานทั่วไป',
-    line: 'จัดการทั่วไป',
-    linePosition: 'ทั่วไป ',
-    level: 'ต้น',
-    positionFormalManage: 'นักจัดการทั่วไป',
-    positionManage: 'นักจัดการทั่วไป',
-    numberPosition: 'กทข.1',
-    government: 'กองบริหารทั่วไป'
-  }
-])
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeExamColumns('main', count)
-})
-
-const next = (id: string) => {
-  router.push(`/exam/${id}`)
-}
-</script>
-
-<style></style>

src/modules/02_meta/interface/index/main.ts

@@ -1,10 +0,0 @@
-interface Pagination {
-  rowsPerPage: number
-}
-
-interface DataOption {
-  id: string
-  name: string
-}
-
-export type { Pagination, DataOption }

src/modules/02_meta/interface/request/Main.ts

@@ -1,28 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject
-  rowIndex: number
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string
-  name: string
-  certiNumber: string
-  start: Date
-  end: Date
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String
-    align: String
-    label: String
-    sortable: Boolean
-    field: String
-    headerStyle: String
-    style: String
-  }
-}
-
-export type { RequestItemsObject, Columns, DataProps }

src/modules/02_meta/interface/response/Main.ts

@@ -1,11 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string
-  date: Date
-  status: string
-  level: string
-  refNo: string
-  refDate: Date
-}
-
-export type { ResponseObject }

src/modules/02_meta/router.ts

@@ -1,13 +0,0 @@
-const Meta = () => import('@/modules/02_meta/views/Meta02View.vue')
-
-export default [
-  {
-    path: '/meta02',
-    name: 'meta02',
-    component: Meta,
-    meta: {
-      Auth: true
-      //   Key: [7]
-    }
-  }
-]

src/modules/02_meta/store.ts

@@ -1,10 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useMetaStore = defineStore('meta', () => {
-  const meta = ref<string>('')
-
-  return {
-    meta
-  }
-})

src/modules/02_meta/views/Meta02View.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about META02</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/plugins/axios.ts

@@ -1,25 +1,21 @@
-import axios from "axios"
+import axios from 'axios'
-import config from "process"
+import keycloak from '../plugins/keycloak'
-// import { dotnetPath } from "../path/axiosPath";
-// import { getToken } from "@baloise/vue-keycloak";
-import keycloak from "../plugins/keycloak"
 
 const axiosInstance = axios.create({
-    withCredentials: false,
+  withCredentials: false
 })
 
-// axiosInstance.defaults.baseURL = dotnetPath;
 axiosInstance.interceptors.request.use(
-    async (config) => {
+  async (config) => {
-        const token = await keycloak.token
+    const token = await keycloak.token
-        config.headers = {
+    config.headers = {
-            Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${token}`
-        }
-        return config
-    },
-    (error) => {
-        Promise.reject(error)
     }
+    return config
+  },
+  (error) => {
+    Promise.reject(error)
+  }
 )
 
 export default axiosInstance

src/plugins/http.ts

@@ -1,45 +1,42 @@
-import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
+import Axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios'
-import keycloak from "./keycloak";
+import keycloak from './keycloak'
 
 const http = Axios.create({
   timeout: 1000000000, // เพิ่มค่า timeout
   headers: {
-    "X-Requested-With": "XMLHttpRequest",
+    'X-Requested-With': 'XMLHttpRequest'
-  },
+  }
-});
+})
 
 http.interceptors.request.use(
   async function (config: AxiosRequestConfig<any>) {
-    await keycloak.updateToken(1);
+    await keycloak.updateToken(1)
-    config.headers = config.headers ?? {};
+    config.headers = config.headers ?? {}
-    const token = keycloak.token;
+    const token = keycloak.token
-    // const token = localStorage.getItem("access_token")
+    if (token) config.headers.Authorization = `Bearer ${token}`
-    // const token =
+    return config
-    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
-    if (token) config.headers.Authorization = `Bearer ${token}`;
-    return config;
   },
   function (error: any) {
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 http.interceptors.response.use(
   function (response: AxiosResponse<any, any>) {
-    return response;
+    return response
   },
   function (error: any) {
     if (typeof error !== undefined) {
       // eslint-disable-next-line no-prototype-builtins
-      if (error.hasOwnProperty("response")) {
+      if (error.hasOwnProperty('response')) {
         if (error.response.status === 401 || error.response.status === 403) {
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
         }
       }
     }
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
-export default http;
+export default http

src/plugins/keycloak.ts

@@ -2,18 +2,13 @@
  * front connect to keycloak
  */
 import Keycloak from 'keycloak-js'
-// import config from "../app.config";
-// import http from "../shared/http";
-// import router from "../router";
 
+//option keycloak ที่จะ connect
 const initOptions = {
-  //   url: "https://keycloak.frappet.synology.me/auth/",
   realm: 'bma-ehr',
   clientId: 'bma-ehr-vue3',
   url: 'https://identity.frappet.com/'
-  //   realm: 'bma-ehr-exam',
+}
-  //   clientId: 'bma-ehr-exam-vue3'
-} //option keycloak ที่จะ connect
 
 const keycloak = Keycloak(initOptions)
 

src/router/index.ts

@@ -1,7 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 import Exam from '@/modules/01_exam/router'
-import Meta02 from '@/modules/02_meta/router'
 
 import keycloak from '@/plugins/keycloak'
 
@@ -13,57 +11,16 @@ const router = createRouter({
   routes: [
     {
       path: '/exam/:id',
-      //   name: 'home',
       component: MainLayout,
-      children: [
+      children: [...Exam]
-        // {
-        //   path: '/',
-        //   name: 'dashboard',
-        //   component: HomeView,
-        //   meta: {
-        //     Auth: true,
-        //     Key: [7]
-        //   }
-        // },
-        ...Exam
-        // ...Meta02
-      ]
     },
-    /**
-     * 404 Not Found
-     * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
-     */
-    //   {
-    //     // path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
-    //     path: "/:pathMatch(.*)*",
-    //     component: Error404NotFound,
-    //   },
     {
-      // path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
       path: '/:pathMatch(.*)*',
       component: Error404NotFound
     }
   ]
 })
 
-// const router = createRouter({
-//   history: createWebHistory(import.meta.env.BASE_URL),
-//   routes: [
-//     {
-//       path: '/',
-//       name: 'home',
-//       component: HomeView
-//     },
-//     {
-//       path: '/about',
-//       name: 'about',
-//       // route level code-splitting
-//       // this generates a separate chunk (About.[hash].js) for this route
-//       // which is lazy-loaded when the route is visited.
-//       component: () => import('../views/AboutView.vue')
-//     }
-//   ]
-// })
 router.beforeEach((to, from, next) => {
   if (to.meta.Auth) {
     if (!keycloak.authenticated) {
@@ -72,13 +29,11 @@ router.beforeEach((to, from, next) => {
         locale: 'th'
       })
     } else {
-      //   keycloak.updateToken(60);
       next()
     }
   } else {
     next()
   }
-  //   next()
 })
 
 export default router

src/stores/data.ts

@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useDataStore = defineStore('data', () => {
+  // ref() คือการประกาศ state เหมือน vuex
+  const loader = ref<boolean>(false)
+
+  /**
+   * active tab หน้า รายละเอียดทะเบียนประวัติ
+   * @param val boolean false = close , true = open
+   */
+  const loaderPage = (val: boolean) => {
+    loader.value = val
+  }
+  return {
+    loader,
+    loaderPage
+  }
+})

src/stores/mixin.ts

@@ -2,6 +2,7 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import moment from 'moment'
 import type { DataDateMonthObject } from '@/modules/01_exam/interface/index/Main'
+import CustomComponent from '@/components/CustomDialog.vue'
 
 export const useCounterMixin = defineStore('mixin', () => {
   /**
@@ -230,6 +231,74 @@ export const useCounterMixin = defineStore('mixin', () => {
     }
   }
 
+  const messageError = (q: any, e: any = '') => {
+    if (e.response !== undefined) {
+      if (e.response.data.status !== undefined) {
+        q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: `พบข้อผิดพลาด`,
+            message: `${e.response.data.message}`,
+            icon: 'warning',
+            color: 'red',
+            onlycancel: true
+          }
+        })
+      } else {
+        q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: `พบข้อผิดพลาด`,
+            message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+            icon: 'warning',
+            color: 'red',
+            onlycancel: true
+          }
+        })
+      }
+    } else {
+      q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `พบข้อผิดพลาด`,
+          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+          icon: 'warning',
+          color: 'red',
+          onlycancel: true
+        }
+      })
+    }
+  }
+
+  const dialogMessage = (
+    // ไม่เอาใส่ undefined
+    q: any,
+    title: string,
+    message: string,
+    icon: string,
+    textOk: string,
+    color: string,
+    ok?: Function,
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title,
+        message: message,
+        icon: icon,
+        color: color,
+        textOk: textOk
+      }
+    })
+      .onOk(() => {
+        if (ok != undefined) ok()
+      })
+      .onCancel(() => {
+        if (cancel != undefined) cancel()
+      })
+  }
+
   function modalDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
     q.dialog({
       title: `<span class="text-red">${title}</span>`,
@@ -442,6 +511,7 @@ export const useCounterMixin = defineStore('mixin', () => {
     modalDelete,
     modalConfirm,
     modalError,
-    statusCandidate
+    statusCandidate,
+    messageError
   }
 })

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/Error404NotFound.vue

@@ -11,7 +11,6 @@ export default defineComponent({
     <div>
       <div class="text-h1">ไม่พบหน้าที่ต้องการ</div>
       <div class="text-h2">(404 Not Found)</div>
-      <!-- <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="กลับไปหน้าหลัก" no-caps /> -->
     </div>
   </div>
 </template>

src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>

src/views/MainLayout.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useQuasar } from 'quasar'
 import { onMounted, ref } from 'vue'
-// import keycloak from '@/plugins/keycloak'
 import { useRoute } from 'vue-router'
-import { menuList, options, notiList } from '../interface/main/index'
 import { useExamDataStore } from '@/modules/01_exam/store'
+import { useDataStore } from '@/stores/data'
 import { useCounterMixin } from '@/stores/mixin'
+import { storeToRefs } from 'pinia'
 import keycloak from '@/plugins/keycloak'
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -13,14 +13,12 @@ import config from '@/app.config'
 const route = useRoute()
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { statusCandidate } = mixin
+const { statusCandidate, messageError } = mixin
-const store = useExamDataStore()
+const storeExam = useExamDataStore()
-const miniState = ref<boolean>(false)
+const store = useDataStore()
-const active = ref<number>(0)
+const { loader } = storeToRefs(store)
-const drawerL = ref<boolean>(false)
+const dataStore = useDataStore()
-const fullname = ref<string>('')
+const { loaderPage } = dataStore
-const notiTrigger = ref<boolean>(false)
-const loader = ref<boolean>(false)
 const status = ref<string>('register')
 const examId = ref<string>('')
 const positionId = ref<string>('')
@@ -31,26 +29,6 @@ onMounted(async () => {
   await fetchStatus()
 })
 
-const toggleBtnLeft = () => {
-  if (window.innerWidth < 1024) {
-    drawerL.value = !drawerL.value
-  } else {
-    miniState.value = !miniState.value
-  }
-}
-
-/**
- * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
- * ปกติ path จะ active เมื่อ path นั้นมีค่า ตรงตัวมันเช่น /main
- * แต่จะไม่ active เมื่อ path นั้น มี child path  /main/อื่นๆ
- * @param path string
- */
-const activeMenu = (path: string) => {
-  if (path == 'dashboard' && route.fullPath == '/') return true
-  const bool = route.fullPath.includes(path)
-  return bool
-}
-
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
@@ -68,16 +46,18 @@ const doLogout = () => {
 }
 
 const fetchStatus = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateStatus(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       status.value = data
     })
-    .catch(() => {})
+    .catch((e) => {
+      //   messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
@@ -107,19 +87,10 @@ const getFontColor = (val: string) => {
       return '-'
   }
 }
-
-/**
- * ดิงชื่อผู้ใช้งานจาก keycloak
- */
-// if (keycloak.tokenParsed != null) {
-//   fullname.value = keycloak.tokenParsed.name
-// }
 </script>
 
 <!-- โครงเว็บ -->
 <template>
-  <!-- แบบเก่า design แรก -->
-  <!-- <q-layout view="lHh Lpr lff"> -->
   <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
   <q-layout view="lHh LpR lff" class="bgColor text-dark">
     <!-- header -->
@@ -137,11 +108,8 @@ const getFontColor = (val: string) => {
           </div>
         </q-toolbar-title>
         <q-space />
-        <!-- <q-badge flat color="blue" class="q-mr-md text-bold">
+        <div class="q-mr-md text-bold" :class="getFontColor(storeExam.status)">
-          {{ statusCandidate(status) }}
+          {{ statusCandidate(storeExam.status) }}&nbsp;&nbsp;
-        </q-badge> -->
-        <div class="q-mr-md text-bold" :class="getFontColor(store.status)">
-          {{ statusCandidate(store.status) }}&nbsp;&nbsp;
         </div>
         <q-btn
           v-if="$q.screen.gt.xs"
@@ -169,14 +137,12 @@ const getFontColor = (val: string) => {
         <router-view :key="$route.fullPath" />
       </q-page>
     </q-page-container>
+    <full-loader :visibility="loader" />
   </q-layout>
 </template>
 
 <style>
 .bgColor {
-  /* background-image: url("../assets/bg.png");
-	background-size: cover;
-	background-size: 100%; */
   background: #f6f9fa;
 }