แก้ชื่อเมนู, popup คุณสมบัติ

src/modules/06_evaluate/components/step/step1.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import PopupCheckFeatures from "@/modules/06_evaluate/components/PopupCheckFeatures.vue";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
@@ -19,6 +20,8 @@ const props = defineProps({
   },
 });
 
+const modal = ref<boolean>(false);
+const show = ref<boolean>(false);
 const emit = defineEmits(["update:spec"]);
 
 const formData = reactive<any>({
@@ -56,6 +59,15 @@ async function fetchCheckSpec(id: string) {
     });
 }
 
+function openModal(status: boolean) {
+  modal.value = true;
+  show.value = status
+}
+
+function closeModal() {
+  modal.value = false;
+}
+
 onMounted(() => {
   console.log(store.step);
 
@@ -77,7 +89,14 @@ onMounted(() => {
       <q-item-section>
         <q-item-label
           >คุณวุฒิการศึกษา
-          <q-btn flat round dense color="info" icon="info">
+          <q-btn
+            flat
+            round
+            dense
+            color="info"
+            icon="info"
+            @click="openModal(false)"
+          >
             <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
           </q-btn>
         </q-item-label>
@@ -121,7 +140,14 @@ onMounted(() => {
       <q-item-section>
         <q-item-label
           >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-          <q-btn flat round dense color="info" icon="info">
+          <q-btn
+            flat
+            round
+            dense
+            color="info"
+            icon="info"
+            @click="openModal(true)"
+          >
             <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
           </q-btn></q-item-label
         >
@@ -178,6 +204,8 @@ onMounted(() => {
       </q-item-section>
     </q-item>
   </q-list>
+
+  <PopupCheckFeatures :modal="modal" :show="show" :close-modal="closeModal" />
 </template>
 
 <style scoped></style>