ปรับ เพิ่มโครงการ/หลักสูตรการฝึกอบรม

src/modules/15_development/views/MainPage.vue

@@ -4,6 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 import genReportXLSX from "@/plugins/genreportxlsx";
 
@@ -24,6 +25,10 @@ const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+const modal = ref<boolean>(false);
+const projectName = ref<string>("");
+const orgName = ref<string>("");
+const year = ref<number>(0);
 /** หัวตาราง */
 const rows = ref<ResListProject[]>([]); // ข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
@@ -123,6 +128,9 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
   status ? router.push(`/development/${id}`) : router.push("/development/add");
 }
 
+function onAdd() {
+  modal.value = true;
+}
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
@@ -164,6 +172,18 @@ function onDownload() {
     });
 }
 
+function closeDialog() {
+  modal.value = false;
+  year.value = 0;
+  orgName.value = "";
+  projectName.value = "";
+}
+
+/** dialog submit */
+function onSubmit() {
+  router.push("/development/add");
+}
+
 onMounted(() => {
   fetchListProject();
 });
@@ -232,14 +252,7 @@ onMounted(() => {
           @update:model-value="fetchListProjectNew"
         />
         <q-toolbar-title>
-          <q-btn
+          <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
-            flat
-            round
-            dense
-            icon="add"
-            color="primary"
-            @click="onClickAddOrView()"
-          >
             <q-tooltip>เพิ่ม</q-tooltip>
           </q-btn>
         </q-toolbar-title>
@@ -381,6 +394,88 @@ onMounted(() => {
       </d-table>
     </div>
   </q-card>
+
+  <q-dialog persistent v-model="modal">
+    <q-card flat bordered style="min-width: 60vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          tittle="เพิ่มโครงการ/หลักสูตรการฝึกอบรม"
+          :close="closeDialog"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
+                    outlined
+                    :model-value="year === 0 ? null : Number(year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-if="year" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="year = 0"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                    <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-8">
+              <q-input
+                v-model="orgName"
+                label="ชื่อหน่วยงานที่รับผิดชอบ"
+                dense
+                outlined
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อหน่วยงานที่รับผิดชอบ'}`,]"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="projectName"
+                label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+                dense
+                outlined
+                hide-bottom-space
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public" dense></q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scoped>