ตั้งค่าระบบ => ปรับ calendar

src/modules/04_system/components/cardAutoBackup.vue

@@ -26,8 +26,14 @@ import { storeToRefs } from "pinia";
  * use
  */
 const $q = useQuasar();
-const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
+const {
-  useCounterMixin();
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
 const {
   fetchListBackup,
   createBackUp,
@@ -209,7 +215,15 @@ function convertFormToCron() {
  * function submit() ตั้งเวลา backup
  *
  */
-async function onSubmit() {
+function onSubmit() {
+  if (
+    (formDataschedule.value.type === "weekly" ||
+      formDataschedule.value.type === "monthly") &&
+    formDataschedule.value.date.length === 0
+  ) {
+    dialogMessageNotify($q, "กรุณาเลือกวันสำรองข้อมูล");
+  } else {
+    dialogConfirm($q, async () => {
       showLoader();
       if (typeOnSubmit.value === "create") {
         await createSchedule(formDataschedule.value);
@@ -219,6 +233,10 @@ async function onSubmit() {
       }
       getSchedule();
       hideLoader();
+      openDialog.value = false;
+      clearForm();
+    });
+  }
 }
 
 /**
@@ -285,6 +303,15 @@ const typeSchedule: { [key: string]: string } = {
   monthly: "รายเดือน",
 };
 
+function clearForm() {
+  formDataschedule.value.timeStartEvery = "";
+  formDataschedule.value.type = "";
+  formDataschedule.value.date = [];
+  formDataschedule.value.name = "";
+  formDataschedule.value.time = "";
+  formDataschedule.value.schedule = "";
+}
+
 onMounted(async () => {
   getSchedule();
 });
@@ -313,6 +340,7 @@ watch(tab, () => {
           () => {
             typeOnSubmit = 'create';
             openDialog = true;
+            clearForm();
           }
         "
       >
@@ -488,7 +516,6 @@ watch(tab, () => {
         convertFormToCron();
 
         onSubmit();
-        openDialog = false;
       }
     "
   >

src/modules/04_system/components/formDialog.vue

@@ -14,7 +14,7 @@ defineProps<{
 </script>
 
 <template>
-  <q-dialog v-model="openDialog" class="dialog-content-top">
+  <q-dialog v-model="openDialog" persistent>
     <q-card style="width: 80%">
       <q-form
         greedy

src/modules/04_system/components/formSchedule .vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai } = useCounterMixin();
 
 const name = defineModel<string>("name");
 const typeTime = defineModel<string>("typeTime", { default: "set" });
 const time = defineModel<string>("time");
 const timeStartEvery = defineModel<string>("timeStartEvery");
-const startAt = defineModel<string>("startAt");
+const startAt = defineModel<any>("startAt", { default: new Date() });
 const selectDate = defineModel<string[]>("date", { default: [] });
 const tab = defineModel<string>("tab");
 
@@ -43,12 +46,14 @@ watch(typeTime, () => {
         </div>
         <div class="col-4">
           <q-input
+            :disable="typeTime === 'start'"
             v-model="time"
             outlined
             clearable
             hide-bottom-space
             dense
             type="time"
+            :rules="[(val:string) => !!val || 'กรุณากำหนดเวลา' ]"
           />
         </div>
       </div>
@@ -58,6 +63,7 @@ watch(typeTime, () => {
         </div>
         <div class="col-4">
           <q-select
+            :disable="typeTime === 'set'"
             label="เลือก"
             v-model="timeStartEvery"
             :options="timeStartEveryOptions"
@@ -69,6 +75,7 @@ watch(typeTime, () => {
             option-value="value"
             map-options
             suffix="ชั่วโมง"
+            :rules="[(val:string) => !!val || 'กรุณาเลือกเวลา' ]"
           />
         </div>
       </div>
@@ -85,6 +92,7 @@ watch(typeTime, () => {
             hide-bottom-space
             dense
             type="time"
+            :rules="[(val:string) => !!val || 'กรุณากำหนดเวลา' ]"
           />
         </div>
       </div>
@@ -153,6 +161,7 @@ watch(typeTime, () => {
             hide-bottom-space
             dense
             type="time"
+            :rules="[(val:string) => !!val || 'กรุณากำหนดเวลา' ]"
           />
         </div>
       </div>
@@ -199,7 +208,41 @@ watch(typeTime, () => {
     <div class="col-6 column">
       วันที่ - เวลาเริ่มการสำรองข้อมูล
 
-      <q-input outlined clearable hide-bottom-space dense v-model="startAt">
+      <datepicker
+        v-model="startAt"
+        :locale="'th'"
+        selectText="เลือก"
+        cancelText="ยกเลิก"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            outlined
+            :model-value="startAt ? date2Thai(startAt, false, true) : null"
+            :label="`${'วันเริ่มต้น'}`"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+
+        <template #action-preview="{ value }">
+          {{ date2Thai(value, false, true) }}
+        </template>
+      </datepicker>
+
+      <!-- <q-input outlined clearable hide-bottom-space dense v-model="startAt">
         <template v-slot:prepend>
           <q-icon name="event" class="cursor-pointer">
             <q-popup-proxy
@@ -231,7 +274,7 @@ watch(typeTime, () => {
             </q-popup-proxy>
           </q-icon>
         </template>
-      </q-input>
+      </q-input> -->
       <!-- 
       <q-input v-model="startAt" outlined clearable hide-bottom-space dense>
         <template v-slot:prepend>