pop up ตั้งเวลาเผยแพร่

src/modules/02_organizationalNew/components/DialogFormDateTime.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { FormDateTimeRef } from "@/modules/02_organizationalNew/interface/index/Main";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai } = mixin;
+
+const dateTimeRef = ref<Object | null>(null);
+
+const dateTime = ref<Date>();
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectRef: FormDateTimeRef = {
+  dateTime: dateTimeRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(dateTime.value);
+  });
+}
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 10vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateTime"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="#dateTime"
+                      ref="dateTimeRef"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :model-value="
+                        dateTime != null ? date2Thai(dateTime) : null
+                      "
+                      label="วันเวลาเผยแพร่"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันเวลาเผยแพร่'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <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>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal">
+            <q-btn type="submit" :label="`บันทึก`" color="public" />
+          </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -38,4 +38,8 @@ interface FormPositionRef {
   positionNo: object | null;
   [key: string]: any;
 }
-export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef };
+interface FormDateTimeRef {
+  dateTime: object | null;
+  [key: string]: any;
+}
+export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef,FormDateTimeRef };

src/modules/02_organizationalNew/views/main.vue

@@ -3,15 +3,18 @@ import { ref } from "vue";
 import DialogFormAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
 import DialogFormPosition from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
 import DialogFormHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
+import DialogFormDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
 
 const modalAgency = ref<boolean>(false);
 const modalPosition = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
+const modalDate = ref<boolean>(false);
 
 function close() {
   modalAgency.value = false;
   modalPosition.value = false;
   modalHistory.value = false;
+  modalDate.value = false;
 }
 </script>
 
@@ -20,10 +23,12 @@ function close() {
   <q-btn @click="modalAgency = true" color="primary">pop up test (agency)</q-btn>
   <q-btn @click="modalPosition = true" color="blue">pop up test (position)</q-btn>
   <q-btn @click="modalHistory = true" color="warning">pop up test (history)</q-btn>
+  <q-btn @click="modalDate = true" color="public">pop up test (Date)</q-btn>
 
   <DialogFormAgency :modal="modalAgency" :close="close" />
   <DialogFormPosition :modal="modalPosition" :close="close" />
   <DialogFormHistory :modal="modalHistory" :close="close" />
+  <DialogFormDateTime :modal="modalDate" :close="close" />
 </template>
 
 <style scoped></style>