Merge branch 'develop' of https://github.com/Frappet/BMA-EHR-RECRUIT-EXAM-VUE3 into develop

src/app.config.ts

@@ -1,9 +1,9 @@
 /**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
 
-import manageOrganization from './api/manage/api.organization'
+import metadata from './api/exam/api.metadata'
 
 const API = {
-  ...manageOrganization
+  ...metadata
 }
 
 export default {

src/components/NotifyConfirm.vue

@@ -12,9 +12,9 @@
           />
         </div>
         <div class="col text-dark">
-          <span class="text-bold">{{ modalTittle }}</span>
+          <span class="text-bold">{{ tittle }}</span>
           <br />
-          <span>{{ modalDetail }}</span>
+          <span>{{ detail }}</span>
         </div>
       </q-card-section>
 
@@ -30,8 +30,8 @@ import { ref, useAttrs } from 'vue'
 
 const props = defineProps({
   modal: Boolean,
-  modalTittle: String,
+  tittle: String,
-  modalDetail: String,
+  detail: String,
   ok: {
     type: Function,
     default: () => console.log('not function')

src/components/NotifyDelete.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">{{ 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/modules/01_exam/components/ExamForm.vue

@@ -74,23 +74,23 @@
         color="primary"
         class="q-ml-md"
         label="สมัครสอบ"
-        @click="okModalComfirm"
+        @click="okModalConfirm"
         v-if="step === 2 && tab == 'document'"
         :disable="!acceptTermOfUse || statusEdit"
       />
     </div>
   </div>
   <NotifyConfirm
-    :modal="modalComfirm"
+    :modal="modalConfirm"
-    :modalTittle="modalComfirmTittle"
+    :tittle="modalConfirmTittle"
-    :modalDetail="modalComfirmDetail"
+    :detail="modalConfirmDetail"
     :ok="applyCandidate"
-    :cancel="cancelModalComfirm"
+    :cancel="cancelModalConfirm"
   />
   <NotifyError
-    :modalError="modalNoEdit"
+    :modal="modalNoEdit"
-    :modalErrorTittle="modalNoEditTittle"
+    :Tittle="modalNoEditTittle"
-    :modalErrorDetail="modalNoEditDetail"
+    :Detail="modalNoEditDetail"
     :close="closeModalError"
   />
 </template>
@@ -121,9 +121,9 @@ const tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
-const modalComfirm = ref<boolean>(false)
+const modalConfirm = ref<boolean>(false)
-const modalComfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
+const modalConfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
-const modalComfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
+const modalConfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
 const modalNoEdit = ref<boolean>(false)
 const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
 const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
@@ -134,18 +134,18 @@ onMounted(async () => {
   }
 })
 
-const okModalComfirm = () => {
+const okModalConfirm = () => {
   if (statusEdit.value == true) {
     modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
     modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
     modalNoEdit.value = true
   } else {
-    modalComfirm.value = true
+    modalConfirm.value = true
   }
 }
 
-const cancelModalComfirm = () => {
+const cancelModalConfirm = () => {
-  modalComfirm.value = false
+  modalConfirm.value = false
 }
 
 const closeModalError = () => {

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

@@ -135,7 +135,6 @@ const getFontColor = (val: string) => {
       return 'text-blue'
   }
 }
-console.log(getFontColor)
 </script>
 
 <style lang="scss" scoped>

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

@@ -45,7 +45,7 @@
                 round
                 size="14px"
                 icon="mdi-trash-can-outline"
-                @click="clickDeleteRow(props.row)"
+                @click="checkDelete(props.row)"
               />
             </q-td>
           </q-tr>
@@ -57,7 +57,7 @@
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">
-        <DialogHeader tittle="ประวัติการทำงาน/ฝึกงาน" :close="clickClose" />
+        <DialogHeader tittle="ประวัติการทำงาน/ฝึกงาน" :close="checkClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -177,12 +177,6 @@
       </q-form>
     </q-card>
   </q-dialog>
-  <notifyError
-    :modalError="modalError"
-    :modalErrorTittle="modalErrorTittle"
-    :modalErrorDetail="modalErrorDetail"
-    :close="closeModalError"
-  ></notifyError>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
@@ -219,7 +213,7 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange } = mixin
+const { dateThaiRange, notifyDelete, notifyConfirm } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
@@ -238,17 +232,8 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
-const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
-const modalErrorTittle = ref<string>('') // tittle modal error
-const modalErrorDetail = ref<string>('') // detail modal error
 const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
-const closeModalError = () => {
-  modalError.value = false
-  if (statusCode.value != 404) {
-    // fetchData();
-  }
-}
 
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
@@ -343,7 +328,9 @@ onMounted(async () => {
   //   await fetchData()
 })
 
-const fetchData = async () => {}
+const fetchData = async () => {
+  editRow.value = false
+}
 
 /**
  * กดดูข้อมูลก่อนหน้า
@@ -377,19 +364,6 @@ const clickNext = () => {
   checkRowPage()
 }
 
-/**
- * กดดูข้อมูลต่อไป
- */
-const getData = () => {
-  const row = rows.value[rowIndex.value]
-  location.value = row.location
-  position.value = row.position
-  salary.value = row.salary
-  duration.value = row.duration
-  reason.value = row.reason
-  id.value = row.id
-}
-
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
@@ -421,22 +395,17 @@ const clickAdd = () => {
   addRow()
 }
 
+const checkDelete = (row: RequestItemsObject) => {
+  rawItem.value = row
+  notifyDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
+}
+
 /**
  * ลบข้อมูลใน table
  */
-const clickDeleteRow = (row: RequestItemsObject) => {
+function clickDeleteRow() {
-  $q.dialog({
+  rows.value = rows.value.filter((val: any) => val.id != rawItem.value?.id)
-    title: 'ยืนยันการลบข้อมูล',
+  edit.value = false
-    message: 'หากต้องการลบกดให้กดตกลง',
-    cancel: true,
-    persistent: true
-  })
-    .onOk(() => {
-      rows.value = rows.value.filter((val: any) => val.id != row.id)
-      edit.value = false
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {})
 }
 
 /**
@@ -507,28 +476,22 @@ const editData = async () => {
   //     });
 }
 
+const checkClose = async () => {
+  if (editRow.value == true) {
+    notifyConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
+  } else {
+    await clickClose()
+  }
+  await fetchData()
+}
+
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
-  if (editRow.value == true) {
+  modal.value = false
-    $q.dialog({
+  next.value = false
-      title: `ข้อมูลมีการแก้ไข`,
+  previous.value = false
-      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-      cancel: 'ยกเลิก',
-      ok: 'ยืนยัน',
-      persistent: true
-    }).onOk(async () => {
-      modal.value = false
-      next.value = false
-      previous.value = false
-      await getData()
-    })
-  } else {
-    modal.value = false
-    next.value = false
-    previous.value = false
-  }
 }
 
 /**
@@ -573,22 +536,6 @@ const addRow = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  //   if (editRow.value == true) {
-  //     $q.dialog({
-  //       title: `ข้อมูลมีการแก้ไข`,
-  //       message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-  //       cancel: 'ยกเลิก',
-  //       ok: 'ยืนยัน',
-  //       persistent: true
-  //     }).onOk(async () => {
-  //       //   edit.value = false
-  //       checkRowPage()
-  //       await getData()
-  //     })
-  //   } else {
-  //     // edit.value = false
-  //     checkRowPage()
-  //   }
   edit.value = false
 }
 

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

@@ -42,7 +42,7 @@
                 round
                 size="14px"
                 icon="mdi-trash-can-outline"
-                @click="clickDeleteRow(props.row)"
+                @click="checkDelete(props.row)"
               />
             </q-td>
           </q-tr>
@@ -54,7 +54,7 @@
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">
-        <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
+        <DialogHeader tittle="ประวัติการศึกษา" :close="checkClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -178,12 +178,6 @@
       </q-form>
     </q-card>
   </q-dialog>
-  <notifyError
-    :modalError="modalError"
-    :modalErrorTittle="modalErrorTittle"
-    :modalErrorDetail="modalErrorDetail"
-    :close="closeModalError"
-  ></notifyError>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
@@ -221,7 +215,7 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange } = mixin
+const { dateThaiRange, notifyDelete, notifyConfirm } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
@@ -242,17 +236,9 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
-const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
-const modalErrorTittle = ref<string>('') // tittle modal error
-const modalErrorDetail = ref<string>('') // detail modal error
 const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
-const closeModalError = () => {
+
-  modalError.value = false
-  if (statusCode.value != 404) {
-    // fetchData();
-  }
-}
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
 const rows = ref<RequestItemsObject[]>([
@@ -367,7 +353,9 @@ const fetchQualification = async () => {
   //     })
 }
 
-const fetchData = async () => {}
+const fetchData = async () => {
+  editRow.value = false
+}
 
 /**
  * กดดูข้อมูลก่อนหน้า
@@ -403,20 +391,6 @@ const clickNext = () => {
   checkRowPage()
 }
 
-/**
- * กดดูข้อมูลต่อไป
- */
-const getData = () => {
-  const row = rows.value[rowIndex.value]
-  qualification.value = row.qualification
-  qualificationId.value = row.qualificationId
-  major.value = row.major
-  scores.value = row.scores
-  name.value = row.name
-  duration.value = row.duration
-  id.value = row.id
-}
-
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
@@ -448,22 +422,17 @@ const clickAdd = () => {
   addRow()
 }
 
+const checkDelete = (row: RequestItemsObject) => {
+  rawItem.value = row
+  notifyDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
+}
+
 /**
  * ลบข้อมูลใน table
  */
-const clickDeleteRow = (row: RequestItemsObject) => {
+function clickDeleteRow() {
-  $q.dialog({
+  rows.value = rows.value.filter((val: any) => val.id != rawItem.value?.id)
-    title: 'ยืนยันการลบข้อมูล',
+  edit.value = false
-    message: 'หากต้องการลบกดให้กดตกลง',
-    cancel: true,
-    persistent: true
-  })
-    .onOk(() => {
-      rows.value = rows.value.filter((val: any) => val.id != row.id)
-      edit.value = false
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {})
 }
 
 /**
@@ -534,28 +503,22 @@ const editData = async () => {
   //     });
 }
 
+const checkClose = async () => {
+  if (editRow.value == true) {
+    notifyConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
+  } else {
+    await clickClose()
+  }
+  await fetchData()
+}
+
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
-  if (editRow.value == true) {
+  modal.value = false
-    $q.dialog({
+  next.value = false
-      title: `ข้อมูลมีการแก้ไข`,
+  previous.value = false
-      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-      cancel: 'ยกเลิก',
-      ok: 'ยืนยัน',
-      persistent: true
-    }).onOk(async () => {
-      modal.value = false
-      next.value = false
-      previous.value = false
-      await getData()
-    })
-  } else {
-    modal.value = false
-    next.value = false
-    previous.value = false
-  }
 }
 
 /**
@@ -602,22 +565,6 @@ const addRow = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  //   if (editRow.value == true) {
-  //     $q.dialog({
-  //       title: `ข้อมูลมีการแก้ไข`,
-  //       message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-  //       cancel: 'ยกเลิก',
-  //       ok: 'ยืนยัน',
-  //       persistent: true
-  //     }).onOk(async () => {
-  //       edit.value = false
-  //       checkRowPage()
-  //       await getData()
-  //     })
-  //   } else {
-  //     edit.value = false
-  //     checkRowPage()
-  //   }
   edit.value = false
 }
 

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

@@ -20,9 +20,9 @@
   />
   <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
   <NotifyError
-    :modalError="modalNoEdit"
+    :modal="modalNoEdit"
-    :modalErrorTittle="modalNoEditTittle"
+    :tittle="modalNoEditTittle"
-    :modalErrorDetail="modalNoEditDetail"
+    :detail="modalNoEditDetail"
     :close="closeModalError"
   />
 </template>
@@ -36,6 +36,8 @@ import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue
 import NotifyError from '@/components/NotifyError.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
 
 const props = defineProps({
   loader: {
@@ -53,6 +55,8 @@ const props = defineProps({
   }
 })
 
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { notifyConfirm } = mixin
 const loader = ref<boolean>(true)
 const statusEdit = ref<boolean>(false)
 const modalNoEdit = ref<boolean>(false)

src/stores/mixin.ts

@@ -215,6 +215,7 @@ export const useCounterMixin = defineStore('mixin', () => {
       })
     }
   }
+
   function notifyError(q: any, val: string) {
     if (val !== '') {
       q.notify({
@@ -229,6 +230,48 @@ export const useCounterMixin = defineStore('mixin', () => {
     }
   }
 
+  function notifyDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
+    q.dialog({
+      title: `<span class="text-red">${title}</span>`,
+      message: `<span class="text-red">${message}</span>`,
+      cancel: true,
+      ok: {
+        push: true,
+        color: 'negative'
+      },
+      persistent: true,
+      html: true
+    })
+      .onOk(() => {
+        ok()
+      })
+      .onCancel(() => {
+        if (cancel != undefined) cancel()
+      })
+      .onDismiss(() => {})
+  }
+
+  function notifyConfirm(q: any, title: string, message: string, ok: Function, cancel?: Function) {
+    q.dialog({
+      title: `<span class="text-primary">${title}</span>`,
+      message: `<span class="text-primary">${message}</span>`,
+      cancel: true,
+      ok: {
+        push: true,
+        color: 'primary'
+      },
+      persistent: true,
+      html: true
+    })
+      .onOk(() => {
+        ok()
+      })
+      .onCancel(() => {
+        if (cancel != undefined) cancel()
+      })
+      .onDismiss(() => {})
+  }
+
   const dateText = (val: Date) => {
     if (val != null) {
       return date2Thai(val)
@@ -343,6 +386,8 @@ export const useCounterMixin = defineStore('mixin', () => {
     textToPhone,
     textToFax,
     dateThaiRange,
-    monthThaiRange
+    monthThaiRange,
+    notifyDelete,
+    notifyConfirm
   }
 })