From 388df9722b23b3e5817ce0f7ca278851c57c032f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 19 Jul 2024 14:33:29 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=AA=E0=B8=94?=
 =?UTF-8?q?=E0=B8=87=20schedule?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_system/components/cardAutoBackup.vue   | 401 ++++++++++++++++++
 1 file changed, 401 insertions(+)
 create mode 100644 src/modules/04_system/components/cardAutoBackup.vue

diff --git a/src/modules/04_system/components/cardAutoBackup.vue b/src/modules/04_system/components/cardAutoBackup.vue
new file mode 100644
index 00000000..116c1f2c
--- /dev/null
+++ b/src/modules/04_system/components/cardAutoBackup.vue
@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataBackup } 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";
+
+/**
+ * import components
+ */
+import FormDialog from "@/modules/04_system/components/formDialog.vue";
+import FormAutoBackup from "@/modules/04_system/components/formAutoBackup.vue";
+import formSchedule from "./formSchedule .vue";
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/modules/04_system/stores/main";
+import { storeToRefs } from "pinia";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
+  useCounterMixin();
+const {
+  fetchListBackup,
+  createBackUp,
+  restore,
+  deleteBackUp,
+  backupRunningList,
+  restoreRunningList,
+
+  getSize,
+
+  getSchedule,
+  createSchedule,
+  editSchedule,
+  deleteSchedule,
+} = useDataStore();
+const storeData = useDataStore();
+const { dataBackUp, restoreRunTotal, dataSchedule } = storeToRefs(storeData);
+
+/**
+ * props
+ */
+
+/**
+ * ref
+ */
+const openDialog = ref<boolean>(false);
+const formDataschedule = ref<ScheduleCreate>({
+  timeStartEvery: "",
+
+  type: "",
+  date: [],
+  name: "",
+  time: "",
+  schedule: "",
+});
+
+/**
+ * Table
+ */
+const filter = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "name",
+  "createAt",
+  "databaseSize",
+  "storageSize",
+  "status",
+]);
+const baseColumns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อของข้อมูลสำรองใหม่",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createAt",
+    align: "center",
+    label: "ตารางการข้อมูลสำรองใหม่",
+    sortable: true,
+    // field: (v) => date2Thai(v, false, true),
+    field: "timestamp",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "databaseSize",
+    align: "center",
+    label: "เวลาการทำข้อมูลสำรองใหม่",
+    sortable: true,
+    // field: (v) => date2Thai(v, false, true),
+    field: "databaseSize",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "center",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = computed(() => {
+  return baseColumns.value;
+});
+
+/**
+ * function submit() เเปลงค่าให้เป็น แบบ cron ก่อนส่งไปยัง backend
+ *
+ */
+function convertFormToCron() {
+  let allValues = formDataschedule.value.date.join(" ").split(" ");
+
+  let uniqueValues = [...new Set(allValues)];
+
+  let result = uniqueValues.join(",");
+
+  let [hour, minute] = formDataschedule.value.time.split(":");
+
+  let time = `${minute} ${hour}`;
+
+  if (formDataschedule.value.type === "daily") {
+    if (typeTime.value.includes("set")) {
+      formDataschedule.value.schedule = `0 ${time} * * *`;
+    } else {
+      formDataschedule.value.schedule = `0 * 23/${formDataschedule.value.timeStartEvery} * * *`;
+    }
+  }
+
+  if (formDataschedule.value.type === "weekly") {
+    formDataschedule.value.schedule = `0 ${time} * * ${result}`;
+  }
+
+  if (formDataschedule.value.type === "monthly") {
+    formDataschedule.value.schedule = `0 ${time} ${result} * *`;
+  }
+
+  console.log(formDataschedule.value);
+}
+
+/**
+ * function submit() ตั้งเวลา backup
+ *
+ */
+async function onSubmit() {
+  showLoader();
+  await createSchedule(formDataschedule.value);
+  getSchedule();
+  hideLoader();
+}
+
+/**
+ * function ลบรายการข้อมูลสำรอง
+ * @param id รายการสำรอง
+ */
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    deleteBackUp(id);
+  });
+}
+
+/**
+ * function คืนค่าข้อมูลสำรอง
+ * @param id ข้อมูลสำรอง
+ */
+function onRestore(id: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      await restore(id);
+    },
+    "ยืนยันการคืนค่าข้อมูลสำรอง",
+    "ต้องการยืนยันการคืนค่าข้อมูลสำรองนี้ใช่หรือไม่?"
+  );
+}
+
+const dateStart = ref<string>("");
+const typeTime = ref<string>("");
+const timeStartEvery = ref<number>();
+const tab = ref("daily");
+const tabItems = ref<ItemsTeb[]>([
+  { name: "daily", label: "ทุกวัน", icon: "" },
+  { name: "weekly", label: "ทุกสัปดาห์", icon: "" },
+  { name: "monthly", label: "ทุกเดือน", icon: "" },
+]);
+
+onMounted(async () => {
+  getSchedule();
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
+      <q-btn
+        color="primary"
+        icon="add"
+        label="ตั้งเวลาสำรองข้อมูล"
+        @click="
+          () => {
+            openDialog = true;
+          }
+        "
+      >
+        <q-tooltip>ตั้งเวลาสำรองข้อมูล </q-tooltip>
+      </q-btn>
+
+      <q-space />
+
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        outlined
+        v-model="filter"
+        placeholder="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+
+    <d-table
+      :rows="dataSchedule"
+      :columns="columns"
+      row-key="name"
+      :visible-columns="visibleColumns"
+      :filter="filter"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="(col, i) in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium" :class="{ 'q-ml-md': i === 2 }">{{
+              col.label
+            }}</span>
+          </q-th>
+          <q-th auto-width></q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td v-for="(col, i) in props.cols" :key="col.name" :props="props">
+            <div :class="{ 'text-center': i === 4 }">
+              {{
+                i !== 4 && i !== 2 && i !== 3
+                  ? col.value
+                  : col.value === "สำเร็จ"
+                  ? "สำเร็จ"
+                  : i === 2 || i === 3
+                  ? getSize(col.value)
+                  : ""
+              }}
+
+              <q-circular-progress
+                v-if="props.row.status === 'running' && col.name === 'status'"
+                indeterminate
+                rounded
+                size="20px"
+                color="lime"
+                class="q-ma-md"
+              />
+            </div>
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              icon="delete"
+              color="red"
+              size="12px"
+              @click.petvent="onDelete(props.row.name)"
+            >
+              <q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
+            </q-btn>
+
+            <q-btn
+              dense
+              flat
+              round
+              :disable="restoreRunTotal !== 0"
+              icon="restore"
+              color="primary"
+              size="12px"
+              @click.petvent="onRestore(props.row.name)"
+            >
+              <q-tooltip>คืนค่า </q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </q-card-section>
+
+  <FormDialog
+    v-model:openDialog="openDialog"
+    title="สร้างข้อมูลสำรองใหม่ ตั้งตารางเวลา"
+    class="bbbb"
+    :close="() => (openDialog = false)"
+    :submit="
+      () => {
+        formDataschedule.type = tab;
+
+        if (formDataschedule.startAt !== undefined) {
+          formDataschedule.startAt = new Date(
+            formDataschedule.startAt
+          ).toISOString();
+        }
+        convertFormToCron();
+
+        onSubmit();
+      }
+    "
+  >
+    <q-card flast bordered>
+      <q-tabs
+        v-model="tab"
+        dense
+        align="left"
+        inline-label
+        class="bg-white text-grey"
+        active-color="primary"
+        indicator-color="primary"
+      >
+        <div v-for="item in tabItems">
+          <q-tab :name="item.name" :label="item.label" />
+        </div>
+      </q-tabs>
+      <q-separator />
+
+      <div class="q-pa-sm">
+        <formSchedule
+          v-model:name="formDataschedule.name"
+          v-model:type-time="typeTime"
+          v-model:time="formDataschedule.time"
+          v-model:time-start-every="formDataschedule.timeStartEvery"
+          v-model:start-at="formDataschedule.startAt"
+          v-model:date="formDataschedule.date"
+          v-model:tab="tab"
+        />
+      </div>
+
+      <!-- <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
+        <q-tab-panel name="daily">
+          <FormDaily />
+        </q-tab-panel>
+
+        <q-tab-panel name="weekly">
+          <FormWeekly />
+        </q-tab-panel>
+
+        <q-tab-panel name="monthly">
+          <q-card-section class="q-pa-none">
+            <div class="text-h6">คืนค่า</div>
+          </q-card-section>
+        </q-tab-panel>
+      </q-tab-panels> -->
+    </q-card>
+
+    <!-- <FormAutoBackup
+      v-model:nameBackup="formDataschedule.name"
+      v-model:typeBackup="formDataschedule.type"
+      v-model:dateList="formDataschedule.date"
+      v-model:time="formDataschedule.time"
+    /> -->
+  </FormDialog>
+</template>
+
+<style scoped></style>