เพิ่ม แก้ไขข้อมูล

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 
 /**
  * importType
  */
 import type { QTableProps } from "quasar";
-import type { DataBackup } from "@/modules/04_system/interface/response/Main";
+import type { Schedule } from "@/modules/04_system/interface/response/Main";
 import type { ScheduleCreate } from "@/modules/04_system/interface/request/Main";
 import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
 
@@ -55,10 +55,21 @@ const { dataBackUp, restoreRunTotal, dataSchedule } = storeToRefs(storeData);
 /**
  * ref
  */
+
+const idEditSchedule = ref<string>("");
 const openDialog = ref<boolean>(false);
+
+const prevFormDataschedule = ref<ScheduleCreate>({
+  timeStartEvery: "",
+  type: "",
+  date: [],
+  name: "",
+  time: "",
+  schedule: "",
+});
+
 const formDataschedule = ref<ScheduleCreate>({
   timeStartEvery: "",
-
   type: "",
   date: [],
   name: "",
@@ -132,6 +143,36 @@ const columns = computed(() => {
   return baseColumns.value;
 });
 
+/**
+ * function assignDataformDataschedule() iรับค่าเข้า formDataschedule
+ *
+ */
+
+function assignDataformDataschedule(data: Schedule) {
+  typeTime.value = data.time !== "" ? "set" : "start";
+
+  idEditSchedule.value = data.id;
+  prevFormDataschedule.value = {
+    timeStartEvery: data.timeStartEvery,
+    type: data.type,
+    date: [],
+    name: data.name,
+    time: data.time,
+    schedule: data.schedule,
+    startAt: data.startAt,
+  };
+
+  const tempValue = data.date.split(" ");
+
+  tempValue.forEach((element) => {
+    prevFormDataschedule.value.date.push(element);
+  });
+
+  formDataschedule.value = { ...prevFormDataschedule.value };
+
+  tab.value = data.type;
+}
+
 /**
  * function submit() เเปลงค่าให้เป็น แบบ cron ก่อนส่งไปยัง backend
  *
@@ -170,7 +211,12 @@ function convertFormToCron() {
  */
 async function onSubmit() {
   showLoader();
-  await createSchedule(formDataschedule.value);
+  if (typeOnSubmit.value === "create") {
+    await createSchedule(formDataschedule.value);
+  }
+  if (typeOnSubmit.value === "edit") {
+    await editSchedule(idEditSchedule.value, formDataschedule.value);
+  }
   getSchedule();
   hideLoader();
 }
@@ -202,10 +248,11 @@ function onRestore(id: string) {
   );
 }
 
+const typeOnSubmit = ref<"edit" | "create">("create");
 const dateStart = ref<string>("");
-const typeTime = ref<string>("");
+const typeTime = ref<string>("set");
 const timeStartEvery = ref<number>();
-const tab = ref("daily");
+const tab = ref<string>("daily");
 const tabItems = ref<ItemsTeb[]>([
   { name: "daily", label: "ทุกวัน", icon: "" },
   { name: "weekly", label: "ทุกสัปดาห์", icon: "" },
@@ -241,6 +288,18 @@ const typeSchedule: { [key: string]: string } = {
 onMounted(async () => {
   getSchedule();
 });
+
+watch(tab, () => {
+  if (tab.value === formDataschedule.value.type) {
+    formDataschedule.value = { ...prevFormDataschedule.value };
+  }
+  if (tab.value !== formDataschedule.value.type) {
+    formDataschedule.value.date = [];
+    formDataschedule.value.time = "";
+    formDataschedule.value.timeStartEvery = "";
+    typeTime.value = "set";
+  }
+});
 </script>
 
 <template>
@@ -252,6 +311,7 @@ onMounted(async () => {
         label="ตั้งเวลาสำรองข้อมูล"
         @click="
           () => {
+            typeOnSubmit = 'create';
             openDialog = true;
           }
         "
@@ -305,17 +365,17 @@ onMounted(async () => {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props">
-          <q-td>
+          <q-td v-if="visibleColumns.includes('name')">
             {{ props.row.name }}
           </q-td>
-          <q-td class="text-center">
+          <q-td class="text-center" v-if="visibleColumns.includes('type')">
             <q-badge
               rounded
               style="color: #007aff; background: #ededed"
               :label="typeSchedule[props.row.type]"
             />
           </q-td>
-          <q-td>
+          <q-td v-if="visibleColumns.includes('date')">
             <div class="column">
               <div class="col-6">{{ props.row.time }}</div>
 
@@ -359,10 +419,10 @@ onMounted(async () => {
               </div>
             </div>
           </q-td>
-          <q-td>
+          <q-td v-if="visibleColumns.includes('startAt')">
             {{ date2Thai(props.row.startAt, true, false) }}
           </q-td>
-          <q-td>
+          <q-td v-if="visibleColumns.includes('status')">
             <q-toggle
               size="lg"
               v-model="props.row.enabled"
@@ -381,7 +441,13 @@ onMounted(async () => {
               icon="edit"
               color="primary"
               size="12px"
-              @click.petvent="onDelete(props.row.id)"
+              @click.petvent="
+                () => {
+                  typeOnSubmit = 'edit';
+                  assignDataformDataschedule({ ...props.row });
+                  openDialog = true;
+                }
+              "
             >
               <q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
             </q-btn>
@@ -406,8 +472,9 @@ onMounted(async () => {
 
   <FormDialog
     v-model:openDialog="openDialog"
-    title="สร้างข้อมูลสำรองใหม่ ตั้งตารางเวลา"
-    class="bbbb"
+    :title="`${
+      typeOnSubmit === 'create' ? 'สร้าง' : 'แก้ไข'
+    }ข้อมูลสำรองใหม่ ตั้งตารางเวลา`"
     :close="() => (openDialog = false)"
     :submit="
       () => {
@@ -421,6 +488,7 @@ onMounted(async () => {
         convertFormToCron();
 
         onSubmit();
+        openDialog = false;
       }
     "
   >