tab ที่ผ่านมาแล้วเปลี่ยนเป็นสีเขียว

src/components/NotifyConfirm.vue

@@ -0,0 +1,86 @@
+<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">{{ modalTittle }}</span>
+          <br />
+          <span>{{ modalDetail }}</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,
+  modalTittle: String,
+  modalDetail: 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/modules/01_exam/components/Address.vue

@@ -14,6 +14,7 @@
       :save="saveData"
       :history="true"
       :addData="addData"
+      :cancel="cancelData"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -224,7 +225,7 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 
 import http from '@/plugins/http'
@@ -237,7 +238,7 @@ const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const addressData = ref<Address>(defaultAddress)
 const myform = ref<any>()
 const codep = ref<string>('')
@@ -249,17 +250,26 @@ const districtCOptions = ref<DataOption[]>([])
 const subdistrictOptions = ref<zipCodeOption[]>([])
 const subdistrictCOptions = ref<zipCodeOption[]>([])
 
-const getClass = (val: boolean) => {
+const props = defineProps({
-  return {
+  statusEdit: {
-    'full-width inputgreen cursor-pointer': val,
+    type: Boolean,
-    'full-width cursor-pointer': !val
+    required: true
   }
-}
+})
+
+const emit = defineEmits(['update:statusEdit'])
+
+watch(edit, (count: boolean, prevCount: boolean) => {
+  if (props.statusEdit == true) {
+    edit.value = false
+    emit('update:statusEdit', count)
+  }
+})
 
 onMounted(() => {
-  fetchProvince()
+  //   fetchProvince()
-  fetchDistrict(addressData.value.provinceId, '1')
+  //   fetchDistrict(addressData.value.provinceId, '1')
-  fetchDistrict(addressData.value.provinceIdC, '2')
+  //   fetchDistrict(addressData.value.provinceIdC, '2')
 })
 
 const saveData = async () => {
@@ -381,4 +391,13 @@ const fetchSubDistrict = async (id: string, position: string) => {
       //   loader.value = false;
     })
 }
+
+const cancelData = () => {}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
 </script>

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

@@ -1,10 +1,10 @@
 <!-- tab เอกสาร -->
 <template>
-  <Image />
+  <!-- <Image /> -->
   <OtherFile />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import Image from './Image.vue'
+// import Image from './Image.vue'
 import OtherFile from './OtherFile.vue'
 </script>

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

@@ -4,7 +4,7 @@
       <q-card class="my-card" style="max-width: 600px; width: 100%" bordered>
         <q-card-actions class="q-pa-md" :class="getClass(status)">
           <div v-if="status == false" class="text-black text-bold">
-            เจ้าหน้าที่กำลังตรวจเอกสารชำระเงิน
+            เจ้าหน้าที่กำลังตรวจสถานที่สอบ
           </div>
           <div v-else class="text-black text-bold">สมัครสอบสำเร็จ</div>
           <q-space />

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

@@ -7,6 +7,7 @@
       icon="mdi-account-group"
       :save="saveData"
       :addData="addData"
+      :cancel="cancelData"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -269,7 +270,7 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { PropType } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
@@ -280,7 +281,7 @@ const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const myform = ref<any>()
 const familyData = ref<Family>(defaultFamily)
 const statusOptions = ref<DataOption[]>([])
@@ -295,15 +296,21 @@ const props = defineProps({
   prefixOptions: {
     type: Array as PropType<DataOption[]>,
     required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
   }
 })
 
-const getClass = (val: boolean) => {
+const emit = defineEmits(['update:statusEdit'])
-  return {
+
-    'full-width inputgreen cursor-pointer': val,
+watch(edit, (count: boolean, prevCount: boolean) => {
-    'full-width cursor-pointer': !val
+  if (props.statusEdit == true) {
+    edit.value = false
+    emit('update:statusEdit', count)
   }
-}
+})
 
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
@@ -321,4 +328,13 @@ const selectRadio = (e: boolean, i: any) => {
     familyData.value.occupationC = ''
   }
 }
+
+const cancelData = () => {}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
 </script>

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

@@ -1,45 +0,0 @@
-<!-- card รูปถ่าย -->
-<template>
-  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="รูปถ่าย"
-      icon="mdi-image-area"
-      :history="false"
-      :addData="addData"
-    />
-    <div class="row col-12 q-gutter-sm q-pt-sm">
-      <q-img
-        class="items-center"
-        src="https://picsum.photos/500/300"
-        style="max-width: 150px; height: 150px"
-        fit="contain"
-      >
-      </q-img>
-      <q-uploader
-        v-show="edit"
-        color="blue"
-        type="file"
-        flat
-        auto-upload
-        :factory="fileUpload"
-        class="full-width"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-        bordered
-      />
-    </div>
-  </q-card>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import HeaderTop from '@/components/top.vue'
-
-const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
-const fileUpload = async (file: any) => {
-  return {
-    url: 'http://localhost:4444/upload',
-    method: 'POST'
-  }
-}
-</script>

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

@@ -7,9 +7,10 @@
       icon="mdi-account"
       :save="saveData"
       :addData="addData"
+      :cancel="cancelData"
     />
-    <q-form ref="myform" class="col-12">
+    <q-form ref="myform" class="col-12 row">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+      <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-select
             hide-bottom-space
@@ -295,11 +296,34 @@
           />
         </div>
       </div>
+      <div class="row col-2 justify-center q-pt-md">
+        <div class="containerimage row justify-center">
+          <q-file
+            borderless
+            v-model="fileData"
+            stack-label
+            :readonly="!edit"
+            @update:model-value="pickFile"
+          >
+            <q-img src="@/assets/avatar_user.jpg" class="col-12">
+              <div class="overlay" v-if="edit">
+                <q-icon name="mdi-camera" />
+                <br />อัปเดต
+              </div>
+            </q-img>
+          </q-file>
+        </div>
+        <div class="col-12 text-center" v-show="disabledPic">
+          <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
+            <q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
+          </q-btn>
+        </div>
+      </div>
     </q-form>
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 import type { PropType } from 'vue'
 import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
@@ -307,16 +331,19 @@ import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import type { file } from '@babel/types'
 
 const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const informaData = ref<Information>(defaultInformation)
 const provinceOptions = ref<DataOption[]>([])
 const myform = ref<any>()
-
+const imageUrl = ref<string | null>(null)
+const disabledPic = ref<boolean>(false)
+const fileData = ref<File | null>()
 const props = defineProps({
   prefixOptions: {
     type: Array as PropType<DataOption[]>,
@@ -341,12 +368,25 @@ const props = defineProps({
   provinceOptions: {
     type: Array as PropType<DataOption[]>,
     required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:statusEdit'])
+
+watch(edit, (count: boolean, prevCount: boolean) => {
+  if (props.statusEdit == true) {
+    edit.value = false
+    emit('update:statusEdit', count)
   }
 })
 
 onMounted(() => {
   //   console.log(props);
-  fetchProvince()
+  //   fetchProvince()
 })
 
 const saveData = async () => {
@@ -376,6 +416,21 @@ const fetchProvince = async () => {
     })
 }
 
+const savePic = () => {
+  disabledPic.value = false
+}
+
+const onFilePicked = () => {}
+
+const pickFile = () => {
+  disabledPic.value = true
+}
+
+const cancelData = () => {
+  fileData.value = null
+  disabledPic.value = false
+}
+
 const getClass = (val: boolean) => {
   return {
     'full-width inputgreen cursor-pointer': val,
@@ -383,3 +438,40 @@ const getClass = (val: boolean) => {
   }
 }
 </script>
+
+<style>
+.containerimage {
+  position: relative;
+  width: 100%;
+}
+
+.q-img {
+  display: block;
+  width: 160px;
+  height: 170px;
+  padding: 1%;
+  border-radius: 3px;
+  border: solid 2px rgba(168, 168, 168, 0.055) !important;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
+}
+
+.overlay {
+  position: absolute;
+  bottom: 0;
+  background: rgb(0, 0, 0);
+  background: rgba(0, 0, 0, 0.7);
+  color: #f1f1f1;
+  transition: 0.5s ease;
+  width: 160px;
+  height: 70px;
+  opacity: 0;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+  padding: 5% 0 5% 0;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+</style>

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

@@ -7,6 +7,7 @@
       icon="mdi-briefcase"
       :save="saveData"
       :addData="addData"
+      :cancel="cancelData"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -33,7 +34,7 @@
                 label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -60,7 +61,7 @@
                 label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -87,7 +88,7 @@
                 label="ข้าราชการประเภทอื่น ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -114,7 +115,7 @@
                 label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -127,7 +128,7 @@
             label="กำลังศึกษาต่อ"
             dense
             :disable="!edit"
-            size="xs"
+            size="md"
             style="font-size: 14px; color: black"
           />
           <q-input
@@ -152,7 +153,7 @@
                 label="อื่นๆ"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -227,7 +228,7 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -236,16 +237,25 @@ import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const occupationData = ref<Occupation>(defaultOccupation)
 const myform = ref<any>()
 
-const getClass = (val: boolean) => {
+const props = defineProps({
-  return {
+  statusEdit: {
-    'full-width inputgreen cursor-pointer': val,
+    type: Boolean,
-    'full-width cursor-pointer': !val
+    required: true
   }
-}
+})
+
+const emit = defineEmits(['update:statusEdit'])
+
+watch(edit, (count: boolean, prevCount: boolean) => {
+  if (props.statusEdit == true) {
+    edit.value = false
+    emit('update:statusEdit', count)
+  }
+})
 
 onMounted(() => {})
 
@@ -256,4 +266,13 @@ const saveData = async () => {
     }
   })
 }
+
+const cancelData = () => {}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
 </script>

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

@@ -7,6 +7,7 @@
       icon="mdi-file-document"
       :history="false"
       :addData="addData"
+      :cancel="cancelData"
     />
     <div class="row col-12 q-gutter-sm q-pt-sm">
       <q-card bordered flat class="full-width">
@@ -63,7 +64,7 @@ import { ref } from 'vue'
 import HeaderTop from '@/components/top.vue'
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const files = ref<any>([
   {
     key: 1,
@@ -84,4 +85,6 @@ const fileUpload = async (file: any) => {
     method: 'POST'
   }
 }
+
+const cancelData = () => {}
 </script>

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

@@ -1,5 +1,6 @@
 <!-- tab ข้อมูลส่วนบุคคล -->
 <template>
+  <!-- xxxxxxxx{{ statusEdit }}xxxxxxxx{{ statusEditx }} -->
   <Information
     :prefixOptions="prefixOptions"
     :genderOptions="genderOptions"
@@ -7,10 +8,18 @@
     :statusOptions="statusOptions"
     :religionOptions="religionOptions"
     :provinceOptions="provinceOptions"
+    v-model:statusEdit="statusEdit"
+  />
+  <Address v-model:statusEdit="statusEdit" />
+  <Family :prefixOptions="prefixOptions" v-model:statusEdit="statusEdit" />
+  <Occupation v-model:statusEdit="statusEdit" />
+  <notifyConfirm
+    :modal="modalNoEdit"
+    :modalTittle="modalNoEditTittle"
+    :modalDetail="modalNoEditDetail"
+    :ok="closeModalNoEdit"
+    :cancel="closeModalCancel"
   />
-  <Address />
-  <Family :prefixOptions="prefixOptions" />
-  <Occupation />
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
@@ -19,14 +28,30 @@ import Information from './Information.vue'
 import Address from './Address.vue'
 import Family from './Family.vue'
 import Occupation from './Occupation.vue'
+import NotifyConfirm from '@/components/NotifyConfirm.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 
 const loader = ref<boolean>(true)
+const statusEdit = ref<boolean>(false)
+const statusEditx = ref<boolean>(false)
+const modalNoEdit = ref<boolean>(false)
+const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
+const modalNoEditDetail = ref<string>(
+  'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
+)
+
 const prefixOptions = ref<DataOption[]>([])
 const bloodOptions = ref<DataOption[]>([])
 const genderOptions = ref<DataOption[]>([])
 const statusOptions = ref<DataOption[]>([])
 const religionOptions = ref<DataOption[]>([])
 const provinceOptions = ref<DataOption[]>([])
+
+const closeModalNoEdit = () => {
+  modalNoEdit.value = false
+}
+const closeModalCancel = () => {
+  modalNoEdit.value = false
+}
 </script>

src/modules/01_exam/router.ts

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

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

@@ -1,10 +1,9 @@
 <!-- page:detail page รายการสอบทั้งหมด -->
 <template>
   <q-toolbar class="q-py-sm q-px-md bg-grey-2">
-    <q-btn icon="chevron_left" color="grey" flat dense>
+    <q-toolbar-title class="toptitle text-dark col-12 row items-center">{{
-      <q-tooltip>กลับ</q-tooltip>
+      tittle
-    </q-btn>
+    }}</q-toolbar-title>
-    <q-toolbar-title class="toptitle text-dark col-12 row items-center">สมัครสอบ</q-toolbar-title>
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
@@ -16,21 +15,34 @@
         color="primary"
         animated
       >
-        <q-step :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
+        <q-step :done="step > 1" :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
           <ExamDetail />
         </q-step>
-        <q-step :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
+        <q-step :done="step > 2" :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
           <ExamForm />
         </q-step>
-        <q-step :name="3" title="ชำระค่าธรรมเนียมการสอบ" icon="edit" done-color="positive">
+        <q-step
+          :done="step > 3"
+          :name="3"
+          title="ชำระค่าธรรมเนียมการสอบ"
+          icon="edit"
+          done-color="positive"
+        >
           <ExamPayment />
         </q-step>
-        <q-step :name="4" title="สำเร็จ" icon="edit" done-color="positive">
+        <q-step :done="step > 4" :name="4" title="สำเร็จ" icon="edit" done-color="positive">
           <ExamFinished />
         </q-step>
       </q-stepper>
     </div>
   </q-card>
+  <notifyConfirm
+    :modal="modalConfirm"
+    :modalTittle="modalConfirmTittle"
+    :modalDetail="modalConfirmDetail"
+    :ok="closeModalConfirm"
+    :cancel="closeModalCancel"
+  />
 </template>
 
 <script setup lang="ts">
@@ -39,6 +51,7 @@ import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
 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 NotifyConfirm from '@/components/NotifyConfirm.vue'
 
 const examId = ref<string>('zxc')
 const step = ref<number>(1)
@@ -46,6 +59,12 @@ const stepRaw = ref<number>(1)
 const examPost = ref<any>()
 const test = ref<any>()
 const loading = ref<boolean>(false)
+const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว')
+const modalConfirm = ref<boolean>(true)
+const modalConfirmTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
+const modalConfirmDetail = ref<string>(
+  'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
+)
 
 onMounted(() => {
   loadCandidate()
@@ -84,4 +103,11 @@ const fetchExams = () => {
   //     .catch((err) => console.log(err))
   //     .finally(() => (this.loading = false))
 }
+
+const closeModalConfirm = () => {
+  modalConfirm.value = false
+}
+const closeModalCancel = () => {
+  modalConfirm.value = false
+}
 </script>

src/router/index.ts

@@ -3,31 +3,32 @@ 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";
+import keycloak from '@/plugins/keycloak'
 
 const MainLayout = () => import('@/views/MainLayout.vue')
+const Error404NotFound = () => import('@/views/Error404NotFound.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: '/exam/:id',
-      name: 'home',
+      //   name: 'home',
       component: MainLayout,
       children: [
-        {
+        // {
-          path: '/',
+        //   path: '/',
-          name: 'dashboard',
+        //   name: 'dashboard',
-          component: HomeView,
+        //   component: HomeView,
-          meta: {
+        //   meta: {
-            Auth: true,
+        //     Auth: true,
-            Key: [7]
+        //     Key: [7]
-          }
+        //   }
-        },
+        // },
-        ...Exam,
+        ...Exam
-        ...Meta02
+        // ...Meta02
       ]
-    }
+    },
     /**
      * 404 Not Found
      * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
@@ -37,6 +38,11 @@ const router = createRouter({
     //     path: "/:pathMatch(.*)*",
     //     component: Error404NotFound,
     //   },
+    {
+      // path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
+      path: '/:pathMatch(.*)*',
+      component: Error404NotFound
+    }
   ]
 })
 
@@ -59,20 +65,20 @@ const router = createRouter({
 //   ]
 // })
 router.beforeEach((to, from, next) => {
-    if (to.meta.Auth) {
+  if (to.meta.Auth) {
-      if (!keycloak.authenticated) {
+    if (!keycloak.authenticated) {
-        keycloak.login({
+      keycloak.login({
-          redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
+        redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
-          locale: "th",
+        locale: 'th'
-        });
+      })
-      } else {
-        //   keycloak.updateToken(60);
-        next();
-      }
     } else {
-      next();
+      //   keycloak.updateToken(60);
+      next()
     }
-    //   next();
+  } else {
-  });
+    next()
+  }
+  //   next();
+})
 
 export default router

src/views/Error404NotFound.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Error404NotFound'
+})
+</script>
+
+<template>
+  <div class="fullscreen bg-blue-10 text-white text-center q-pa-md flex flex-center">
+    <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/MainLayout.vue

@@ -68,7 +68,7 @@ const doLogout = () => {
     <!-- header -->
     <q-header flat class="bg-grey-2 text-dark" height-hint="7">
       <q-toolbar style="padding: 0 2%">
-        <q-btn
+        <!-- <q-btn
           size="13px"
           class="bg-grey-3"
           flat
@@ -82,7 +82,7 @@ const doLogout = () => {
             size="20px"
             color="grey-7"
           />
-        </q-btn>
+        </q-btn> -->
 
         <q-space />
 
@@ -208,7 +208,7 @@ const doLogout = () => {
     <!-- end header -->
 
     <!-- drawer -->
-    <q-drawer
+    <!-- <q-drawer
       side="left"
       bordered
       class="text-white"
@@ -248,33 +248,6 @@ const doLogout = () => {
         <q-separator inset color="grey-9" />
         <q-list padding>
           <div v-for="(menuItem, index) in menuList" :key="index">
-            <!-- <q-expansion-item
-              group="somegroup"
-              class="menuSub"
-              expand-icon="mdi-menu-right"
-              expanded-icon="mdi-menu-down"
-              v-if="menuItem.key == 3 || menuItem.key == 5"
-            >
-              <template v-slot:header>
-                <q-item-section avatar>
-                  <q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
-                </q-item-section>
-                <q-item-section>{{ menuItem.label }}</q-item-section>
-              </template>
-              <q-item
-                dense
-                class="menuSubHover"
-                active-class="text-primary active-item text-weight-bold menuSubAct"
-                clickable
-                v-for="subMenu in menuItem.children"
-                :key="subMenu.key"
-                :to="{ name: `${subMenu.path}` }"
-              >
-                <q-item-section>
-                  <q-item-label>{{ subMenu.label }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-expansion-item> -->
             <q-item
               class="text-weight-medium menu"
               active-class="text-primary active-item text-weight-bold menuActive"
@@ -285,7 +258,6 @@ const doLogout = () => {
               dense
               exact
             >
-              <!-- v-else -->
               <q-item-section avatar>
                 <q-avatar size="md" font-size="20px">
                   <q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
@@ -299,7 +271,7 @@ const doLogout = () => {
           </div>
         </q-list>
       </q-scroll-area>
-    </q-drawer>
+    </q-drawer> -->
 
     <q-page-container class="bg-grey-2">
       <q-page style="padding: 0 2%">

vite.config.ts

@@ -8,7 +8,9 @@ import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({
+      template: { transformAssetUrls }
+    }),
     quasar({
       sassVariables: 'src/style/quasar-variables.sass'
     }),
@@ -18,5 +20,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  build: {
+    target: 'esnext'
   }
 })