เพิ่มรายละเอียด ฟิลด์ที่อ่าน/อัปเดตข้อมูลจากกรมการปกครองผ่านทาง Linkage Center

src/modules/10_registry/components/DialogAddRequestEdit.vue

@@ -22,6 +22,7 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
 /**
  *  props
  */
+const modalInfo = ref<boolean>(false);
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   fetchData: { type: Function, requied: true },
@@ -167,6 +168,12 @@ function fetchProfile() {
       hideLoader();
     });
 }
+
+/** popup รายละเอียดของ ขออัปเดตข้อมูลจากกรมการปกครอง */
+function onInfo() {
+  modalInfo.value = true;
+}
+
 watch(
   () => modal.value,
   () => {
@@ -202,6 +209,18 @@ watch(
                 doneFn:Function) => filterOption(inputValue, doneFn
                 ) "
               >
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section v-if="scope.index == 0">
+                      <q-item-label @click="onInfo">{{
+                        scope.opt
+                      }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section v-else>
+                      <q-item-label>{{ scope.opt }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </template>
                 <template v-slot:no-option>
                   <q-item>
                     <q-item-section class="text-grey">
@@ -248,6 +267,67 @@ watch(
       </q-form>
     </q-card>
   </q-dialog>
+
+  <!-- popup รายละเอียดของ ขออัปเดตข้อมูลจากกรมการปกครอง -->
+  <q-dialog v-model="modalInfo">
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader
+        tittle="ฟิลด์ที่อ่าน/อัปเดตข้อมูลจากกรมการปกครองผ่านทาง Linkage Center"
+        :close="() => (modalInfo = false)"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pa-none">
+        <ul class="list-main">
+          <li>เลขประจำ ตัวประชาชน (ไม่สามารถแก้ไขได้)</li>
+          <li>คำนำหน้า</li>
+          <li>ชื่อ</li>
+          <li>นามสกุล</li>
+          <li>วัน เดือน ปีเกิด</li>
+          <li>เพศ</li>
+          <li>สถานภาพ (ดึงจากข้อมูลประวัติการจดทะเบียนสมรส, ข้อมูลประวัติการจดทะเบียนหย่า)</li>
+          <li>สัญชาติ</li>
+          <li>ที่อยู่ตามทะเบียนบ้าน 
+            <ul>
+              <li>ที่อยู่ (บ้านเลขที่ หมู่ ตรอก ซอย ถนน ใส่ในฟิลด์นี้)</li>
+              <li>แขวง/ตำ บล</li>
+              <li>เขต/อำ เภอ</li>
+              <li>จังหวัด</li>
+              <li>รหัสไปรษณีย์</li>
+            </ul>
+          </li>
+          <li>บิดา
+            <ul>
+              <li>เลขประจำตัวประชาชน</li>
+              <li>คำนำหน้า</li>
+              <li>ชื่อ</li>
+              <li>นามสกุล</li>
+            </ul>
+          </li>
+          <li>มารดา
+            <ul>
+              <li>เลขประจำตัวประชาชน</li>
+              <li>คำนำหน้า</li>
+              <li>ชื่อ</li>
+              <li>นามสกุล</li>
+            </ul>
+          </li>
+          
+        </ul>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn label="ตกลง" color="secondary" type="submit"
+          ><q-tooltip>ตกลง</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+.list-main li::marker{
+  color: $primary;
+}
+</style>

src/modules/10_registry/store/RequestEdit.ts

@@ -4,14 +4,17 @@ import type { DataOption } from "@/modules/10_registry/interface/index/Main";
 
 export const useRequestEditStore = defineStore("requestEditStore", () => {
   const optionTopic = ref<string[]>([
-    "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+    "ขออัปเดตข้อมูลจากกรมการปกครอง",
     "ขอแก้ไขรูปภาพประจำตัว",
-    "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
-    "ขอแก้ไขชื่อ - นามสกุล บิดา",
-    "ขอแก้ไขชื่อ - นามสกุล มารดา",
-    "ขอแก้ไขข้อมูลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/เหรียญจักรพรรดิมาลา",
-    "ขอแก้ไขประกาศเกียรติคุณ",
+    "ขอแก้ไขอาชีพ คู่สมรส",
+    "ขอแก้ไขอาชีพ บิดา",
+    "ขอแก้ไขอาชีพ มารดา",
+    "ขอแก้ไขข้อมูลเครื่องราชฯ เหรียญจักพรรดิมาลา",
     "ขอแก้ไขข้อมูลประวัติการศึกษา",
+    "ขอแก้ไขข้อมูลประวัติการฝึกอบรม",
+    "ขอแก้ไขที่อยู่ปัจจุบัน",
+    "ขอแก้ไขเบอร์โทร",
+    "ขอแก้ไขข้อมูลบุตร",
   ]);
   const optionStatus = ref<DataOption[]>([
     { id: "", name: "ทั้งหมด" },