no message

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

@@ -80,6 +80,32 @@
       <Consendform :ok="consendOk" :editorCondition="editorCondition" />
     </q-card>
   </q-dialog>
+  <q-dialog :model-value="timeout" persistent>
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
+      <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
+        <div class="row col-12 justify-center">
+          <div class="text-bold text-subtitle1">หมดช่วงเวลาสมัครสอบ</div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section style="max-height: 70vh" class="scroll q-pb-sm">
+        <div class="text-center row justify-center">
+          <q-card class="col-xs-12 col-sm-11 row text-left q-py-sm" flat>
+            <div class="col-12">
+              <p>
+                &nbsp;&nbsp;&nbsp;&nbsp;รายการสอบนี้สามารถสมัครสอบได้เมื่อ
+                {{ dateThaiRange([registerStartDate, registerEndDate]) }}
+              </p>
+            </div>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white text-teal justify-center">
+        <q-btn label="ตกลง" color="primary" style="width: 150px" @click="logout" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
@@ -95,11 +121,12 @@ 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 Consendform from '@/modules/01_exam/components/Consendform.vue'
+import keycloak from '@/plugins/keycloak'
 
 const $q = useQuasar()
 const storeExam = useExamDataStore()
 const mixin = useCounterMixin()
-const { modalError, messageError } = mixin
+const { modalError, messageError, dateThaiRange } = mixin
 const dataStore = useDataStore()
 const { loaderPage } = dataStore
 const step = ref<number>(1)
@@ -113,11 +140,14 @@ const positionId = ref<string>(route.params.positionId.toString())
 const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 const stepPayment = ref<boolean>(true)
+const timeout = ref<boolean>(false)
 const rejectMessage = ref<string>('')
 const round = ref<number | null>(null)
 const yearly = ref<number | null>(null)
 const editorCondition = ref<string>(``)
 const editorConfirm = ref<string>(``)
+const registerStartDate = ref<Date>(new Date())
+const registerEndDate = ref<Date>(new Date())
 
 onMounted(async () => {
   await fetchPeriodExam()
@@ -152,9 +182,15 @@ const candidateCheck = async () => {
         if (storeExam.consend == true) {
           await fetchStep()
         } else {
-          modalConsend.value = true
-          stepRaw.value = 2
-          step.value = 2
+          if (data.canRegister == true) {
+            modalConsend.value = true
+            stepRaw.value = 2
+            step.value = 2
+          } else {
+            registerStartDate.value = new Date(data.registerEndDate)
+            registerEndDate.value = new Date(data.registerStartDate)
+            timeout.value = true
+          }
         }
       }
     })
@@ -251,6 +287,10 @@ const consenClose = () => {
 const consendOk = () => {
   modalConsend.value = false
 }
+
+const logout = () => {
+  keycloak.logout()
+}
 </script>
 <style>
 .q-stepper {