From b875a9c0e56514309260387141d6a23e86983543 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 6 Nov 2024 09:30:55 +0700
Subject: [PATCH] updated development

---
 src/modules/09_scholarship/views/detail.vue | 152 +++++++++++++++++++-
 src/modules/09_scholarship/views/main.vue   |   1 +
 2 files changed, 151 insertions(+), 2 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index a747f76..e0fe2a5 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -169,6 +169,40 @@ const fundTypeOp = ref<DataOptions[]>([
   { id: "FUND5", name: "ทุนส่วนตัว" },
 ]);
 
+const convertStudyPlace = () => {
+  switch (formBody.studyTopic) {
+    case "ศึกษา":
+      return "สถานที่ไปศึกษา (เมือง/ประเทศ)";
+    case "ฝึกอบรม":
+      return "สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)";
+    case "ดูงาน":
+      return "สถานที่ไปดูงาน";
+    case "ประชุม":
+      return "สถานที่จัดประชุม (เมือง/ประเทศ)";
+    case "ปฏิบัติการวิจัย":
+      return "สถานที่ไปปฏิบัติการวิจัย (เมือง/ประเทศ)";
+    default:
+      return "สถานที่ (เมือง/ประเทศ)";
+  }
+};
+
+const convertCourse = () => {
+  switch (formBody.studyTopic) {
+    case "ศึกษา":
+      return "หลักสูตรการศึกษา";
+    case "ฝึกอบรม":
+      return "หลักสูตรการฝึกอบรม";
+    case "ดูงาน":
+      return "หัวข้อการไปดูงาน";
+    case "ประชุม":
+      return "ชื่อการประชุม";
+    case "ปฏิบัติการวิจัย":
+      return "หลักสูตร";
+    default:
+      return "หลักสูตร";
+  }
+};
+
 function updateTotalPeriod(
   startDate: any,
   endDate: any,
@@ -468,6 +502,7 @@ onMounted(async () => {
   await getFile();
 });
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
@@ -2061,7 +2096,7 @@ onMounted(async () => {
                       readonly
                       outlined
                       class="inputgreen"
-                      label="หลักสูตรการฝึกอบรม"
+                      :label="convertCourse()"
                       v-model="formBody.course"
                     />
                   </div>
@@ -2186,11 +2221,124 @@ onMounted(async () => {
                       dense
                       readonly
                       outlined
-                      label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
+                      :label="convertStudyPlace()"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+
+                  <div
+                    v-if="formBody.studyTopic == 'ดูงาน'"
+                    class="col-xs-12 col-md-3"
+                  >
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
                   </div>
+
+                  <div class="col-xs-12 col-md-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="
+                        changeStartDate('studyAbroadStartDate')
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-12 col-md-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyAbroadStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyAbroadStartDate,
+                          formBody.studyAbroadEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-12 col-md-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 62b5690..e8ef6ff 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -238,6 +238,7 @@ onMounted(async () => {
               :options="columns"
               option-value="name"
               options-cover
+              style="min-width: 140px"
               class="col-xs-12 col-md-1"
             />
           </div>