From c8bc52a9fc46c686be521e6dd7b8bec96aa429e8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 1 Apr 2024 14:27:46 +0700
Subject: [PATCH] =?UTF-8?q?-=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20dial?=
 =?UTF-8?q?og=20fixed=20header=20&=20footer=20-=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B8=84=E0=B8=B3=E0=B8=9C=E0=B8=B4=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/01_Profile.vue |   2 +-
 .../PersonalInformation/05_Education.vue      | 788 +++++++++---------
 src/style/quasar-variables.sass               |   4 +
 3 files changed, 408 insertions(+), 386 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 996adf546..850de1dfe 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -378,7 +378,7 @@ onMounted(async () => {
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
-        <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
+        <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </div>
   </div>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index 1238e5941..e9687418f 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -948,225 +948,276 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 40%" class="bg-white">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 85vh"
+      class="bg-white"
+    >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-        <q-separator color="grey-4" />
-        <div class="col">
-          <div class="row q-pa-md q-col-gutter-sm">
-            <div class="col-6">
-              <q-select
-                outlined
-                dense
-                emit-value
-                option-value="label"
-                option-label="label"
-                map-options
-                bg-color="white"
-                v-model="educationData.educationLevel"
-                :options="educationLevelOption"
-                input-debounce="0"
-                use-input
-                @filter="(inputValue:string,
+        <q-header>
+          <q-toolbar>
+            <dialog-header
+              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+              :close="closeDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
+
+        <q-page-container>
+          <q-page class="q-pb-md">
+            <div class="row q-pa-md q-col-gutter-sm">
+              <div class="col-6">
+                <q-select
+                  outlined
+                  dense
+                  emit-value
+                  option-value="label"
+                  option-label="label"
+                  map-options
+                  bg-color="white"
+                  v-model="educationData.educationLevel"
+                  :options="educationLevelOption"
+                  input-debounce="0"
+                  use-input
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'educationLevelOption'
                       ) "
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
-                label="ระดับการศึกษา"
-                class="inputgreen"
-              />
+                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                  label="ระดับการศึกษา"
+                  class="inputgreen"
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  outlined
+                  v-model="educationData.institute"
+                  label="สถานศึกษา"
+                  bg-color="white"
+                  dense
+                  class="inputgreen"
+                  :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                  hide-bottom-space
+                />
+              </div>
             </div>
-            <div class="col-6">
-              <q-input
-                outlined
-                v-model="educationData.institute"
-                label="สถานศึกษา"
-                bg-color="white"
-                dense
-                class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-          <q-card
-            flat
-            bordered
-            class="q-mx-md q-px-md q-pb-md q-mb-md borderCard"
-          >
-            <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
-              <q-radio
-                v-model="isDate"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="false"
-                label="ปี"
-                class="inputgreen"
-                dense
-              />
-              <q-radio
-                v-model="isDate"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="true"
-                class="inputgreen"
-                label="วัน/เดือน/ปี"
-                dense
-              />
-            </div>
-            <div v-if="isDate === 'false'" class="row q-gutter-sm">
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="educationData.startYear"
-                  :locale="'th'"
-                  autoApply
-                  year-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="
+            <q-card
+              flat
+              bordered
+              class="q-mx-md q-px-md q-pb-md q-mb-md borderCard"
+            >
+              <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+                <q-radio
+                  v-model="isDate"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  val="false"
+                  label="ปี"
+                  class="inputgreen"
+                  dense
+                />
+                <q-radio
+                  v-model="isDate"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  val="true"
+                  class="inputgreen"
+                  label="วัน/เดือน/ปี"
+                  dense
+                />
+              </div>
+              <div v-if="isDate === 'false'" class="row q-col-gutter-sm">
+                <div class="col">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="educationData.startYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    @update:modelValue="
                     (v:number) =>
                       (educationData.startDate = new Date(
                         `${v}-01-01T00:00:02.010+07:00`
                       ))
                   "
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      lazy-rules
-                      outlined
-                      class="inputgreen"
-                      hide-bottom-space
-                      :model-value="educationData.startYear + 543"
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
-                      ]"
-                      :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">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="educationData.endYear"
-                  :locale="'th'"
-                  autoApply
-                  year-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        hide-bottom-space
+                        :model-value="educationData.startYear + 543"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                        ]"
+                        :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">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="educationData.endYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    @update:modelValue="
                     (v:number) =>
                       (educationData.endDate = new Date(
                         `${v}-01-01T00:00:02.010+07:00`
                       ))
                   "
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      class="inputgreen"
-                      lazy-rules
-                      outlined
-                      hide-bottom-space
-                      :model-value="educationData.endYear + 543"
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
-                      ]"
-                      :label="`${'ปีที่จบการศึกษา'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        class="inputgreen"
+                        lazy-rules
+                        outlined
+                        hide-bottom-space
+                        :model-value="educationData.endYear + 543"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                        ]"
+                        :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>
-            </div>
-            <div v-if="isDate === 'true'" class="row q-gutter-sm">
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="educationData.startDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:modelValue="
+              <div v-if="isDate === 'true'" class="row q-col-gutter-sm">
+                <div class="col">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="educationData.startDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:modelValue="
                     (v: Date) =>
                       (educationData.startYear = parseInt(
                         v.toString().slice(11, 15)
                       ))
                   "
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      class="inputgreen"
-                      dense
-                      lazy-rules
-                      :model-value="date2Thai(educationData.startDate)"
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
-                      ]"
-                      hide-bottom-space
-                      :label="`${'วันที่เริ่มต้นศึกษา'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="educationData.endDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:modelValue="
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        class="inputgreen"
+                        dense
+                        lazy-rules
+                        :model-value="date2Thai(educationData.startDate)"
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
+                        ]"
+                        hide-bottom-space
+                        :label="`${'วันที่เริ่มต้นศึกษา'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            color="primary"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="educationData.endDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:modelValue="
                     (v: Date)  =>
                       (educationData.endYear = parseInt(
                         v.toString().slice(11, 15)
                       ))
                   "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        class="inputgreen"
+                        lazy-rules
+                        :model-value="date2Thai(educationData.endDate)"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
+                        ]"
+                        hide-bottom-space
+                        :label="`${'วันที่จบการศึกษา'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            color="primary"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </q-card>
+            <div class="row q-col-gutter-sm q-px-md">
+              <div class="col-6">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.finishDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -1175,15 +1226,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       outlined
+                      bg-color="white"
                       dense
                       class="inputgreen"
                       lazy-rules
-                      :model-value="date2Thai(educationData.endDate)"
+                      :model-value="date2Thai(educationData.finishDate)"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
+                        (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วันที่จบการศึกษา'}`"
+                      :label="`${'วันที่สำเร็จการศึกษา'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -1197,198 +1249,164 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-            </div>
-          </q-card>
-          <div class="row q-gutter-sm q-px-md">
-            <div class="col">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="educationData.finishDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    lazy-rules
-                    :model-value="date2Thai(educationData.finishDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่สำเร็จการศึกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col">
-              <q-select
-                outlined
-                dense
-                emit-value
-                map-options
-                bg-color="white"
-                v-model="educationData.isEducation"
-                :options="educationOption"
-                option-value="value"
-                class="inputgreen"
-                option-label="label"
-                input-debounce="0"
-                use-input
-                @filter="(inputValue:string,
+              <div class="col-6">
+                <q-select
+                  outlined
+                  dense
+                  emit-value
+                  map-options
+                  bg-color="white"
+                  v-model="educationData.isEducation"
+                  :options="educationOption"
+                  option-value="value"
+                  class="inputgreen"
+                  option-label="label"
+                  input-debounce="0"
+                  use-input
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'educationOption'
                       ) "
-                :rules="[
-                  (val) =>
-                    val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,
-                ]"
-                label="เป็นวุฒิการศึกษาในตำแหน่ง"
-              />
+                  :rules="[
+                    (val) =>
+                      val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,
+                  ]"
+                  label="เป็นวุฒิการศึกษาในตำแหน่ง"
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-6">
+                <q-input
+                  outlined
+                  v-model="educationData.degree"
+                  label="วุฒิการศึกษา"
+                  class="inputgreen"
+                  bg-color="white"
+                  dense
+                  :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.field"
+                  label="สาขาวิชา/ทาง"
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-6">
+                <q-input
+                  outlined
+                  v-model="educationData.fundName"
+                  label="ทุน"
+                  class="inputgreen"
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.gpa"
+                  label="เกรดเฉลี่ย"
+                  bg-color="white"
+                  dense
+                  mask="#.##"
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-6">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.country"
+                  label="ประเทศ"
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.other"
+                  label="ข้อมูลติดต่อ"
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-6">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.duration"
+                  label="ระยะเวลา"
+                  :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลา'}`]"
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.durationYear"
+                  label="ระยะเวลาหลักสูตร (ปี)"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร (ปี)'}`,
+                  ]"
+                  bg-color="white"
+                  type="number"
+                  dense
+                  hide-bottom-space
+                />
+              </div>
+
+              <div class="col-12">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  v-model="educationData.note"
+                  label="หมายเหตุ"
+                  bg-color="white"
+                  dense
+                  type="textarea"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md q-mb-sm">
-            <div class="col">
-              <q-input
-                outlined
-                v-model="educationData.degree"
-                label="วุฒิการศึกษา"
-                class="inputgreen"
-                bg-color="white"
-                dense
-                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.field"
-                label="สาขาวิชา/ทาง"
-                bg-color="white"
-                dense
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md q-mb-sm">
-            <div class="col">
-              <q-input
-                outlined
-                v-model="educationData.fundName"
-                label="ทุน"
-                class="inputgreen"
-                bg-color="white"
-                dense
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.gpa"
-                label="เกรดเฉลี่ย"
-                bg-color="white"
-                dense
-                mask="#.##"
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md q-mb-sm">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.country"
-                label="ประเทศ"
-                bg-color="white"
-                dense
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.other"
-                label="ข้อมูลติดต่อ"
-                bg-color="white"
-                dense
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.duration"
-                label="ระยะเวลา"
-                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลา'}`]"
-                bg-color="white"
-                dense
-              />
-            </div>
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.durationYear"
-                label="ระยะเวลาหลักสูตร (ปี)"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร (ปี)'}`,
-                ]"
-                bg-color="white"
-                type="number"
-                dense
-              />
-            </div>
-          </div>
-          <div class="row q-gutter-sm q-px-md">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                v-model="educationData.note"
-                label="หมายเหตุ"
-                bg-color="white"
-                dense
-                type="textarea"
-              />
-            </div>
-          </div>
-        </div>
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+          </q-page>
+        </q-page-container>
+
+        <q-footer>
+          <q-separator color="grey-4" />
+          <q-toolbar class="fit row wrap justify-end items-start content-start">
+            <q-btn
+              id="onSubmit"
+              type="submit"
+              dense
+              unelevated
+              label="บันทึก"
+              color="public"
+              class="q-px-md"
+            >
+              <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            </q-btn>
+          </q-toolbar>
+        </q-footer>
       </q-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index cfb2edf5b..070d6407e 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -155,3 +155,7 @@ h3.resigtry-tab-title
   font-weight: 600
   margin: 0 0
   padding: 0 0
+
+.q-dialog .q-layout__section--marginal 
+    background-color: #fff
+    color: #000
\ No newline at end of file