เพิม่ปุ่มลบ ประวัติการศึกษา

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

@@ -1,9 +1,11 @@
 <!-- page:detail 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">{{
-      tittle
-    }}</q-toolbar-title>
+    <q-toolbar-title class="toptitle text-dark col-12 row items-center">
+      {{ tittle }}
+      <q-space />
+      <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
+    </q-toolbar-title>
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
@@ -17,15 +19,19 @@
         header-nav
         animated
         done-color="positive"
-        active-color="amber-7"
+        active-color="blue-7"
         inactive-color="positive"
+        done-icon="check"
+        :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil-outline' : 'mdi-eye-outline'"
       >
         <q-step
           :done="step > 1"
           :disable="stepRaw < 1"
           :name="1"
           title="อ่านคำชี้แจง"
-          :icon="stepRaw >= 1 ? 'check' : 'edit'"
+          :icon="
+            stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -33,8 +39,10 @@
           :done="step > 2"
           :disable="stepRaw < 2"
           :name="2"
-          title="กรอกข้อมูล"
-          :icon="stepRaw >= 2 ? 'check' : 'edit'"
+          title="ข้อมูลสมัครสอบ"
+          :icon="
+            stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -43,7 +51,9 @@
           :disable="stepRaw < 3"
           :name="3"
           title="ชำระค่าธรรมเนียมการสอบ"
-          :icon="stepRaw >= 3 ? 'check' : 'edit'"
+          :icon="
+            stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -52,7 +62,9 @@
           :disable="stepRaw < 4"
           :name="4"
           title="สำเร็จ"
-          :icon="stepRaw >= 4 ? 'check' : 'edit'"
+          :icon="
+            stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+          "
         >
           <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -67,7 +79,10 @@ 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 keycloak from '@/plugins/keycloak'
+import { useQuasar } from 'quasar'
 
+const $q = useQuasar()
 const examId = ref<string>('zxc')
 const step = ref<number>(1)
 const stepRaw = ref<number>(1)
@@ -118,4 +133,20 @@ const fetchStep = () => {
   stepRaw.value += 1
   step.value += 1
 }
+
+/**
+ * logout keycloak
+ * confirm ก่อนออกจากระบบ
+ */
+const doLogout = () => {
+  $q.dialog({
+    title: 'ยืนยันการออกจากระบบ',
+    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    cancel: 'ยกเลิก',
+    ok: 'ยืนยัน',
+    persistent: true
+  }).onOk(() => {
+    keycloak.logout()
+  })
+}
 </script>