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

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

@@ -0,0 +1,241 @@
+<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";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
+  useCounterMixin();
+
+/**
+ * props
+ */
+const tab = defineModel<string>("tab", { required: true });
+
+/**
+ * Table
+ */
+const rows = ref<DataBackup[]>([]);
+const filter = ref<string>("");
+const visibleColumns = ref<string[]>(["name", "createAt", "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: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns = computed(() => {
+  if (tab.value === "restore") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter((column) => column.name !== "status");
+    }
+  }
+  return baseColumns.value;
+});
+
+/**
+ * function เรียกข้อมูลรายการสำรอง
+ */
+function fetchListBackup() {
+  showLoader();
+  const data: DataBackup[] = [
+    {
+      id: "1",
+      name: "สำรอง1",
+      createAt: new Date(),
+      status: "ดำเนินการ",
+    },
+    {
+      id: "2",
+      name: "สำรอง2",
+      createAt: new Date(),
+      status: "ดำเนินการ",
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+/**
+ * function สร้างรายการข้อมูสำรอง
+ */
+function onCreateBackup() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      fetchListBackup();
+    },
+    "ยืนยันการสร้างข้อมูสำรอง",
+    "ต้องการยืนยันการสร้างข้อมูสำรองใช่หรือไม่?"
+  );
+}
+
+/**
+ * function ลบรายการข้อมูสำรอง
+ * @param id รายการสำรอง
+ */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    fetchListBackup();
+  });
+}
+
+/**
+ * function คืนค่าข้อมูสำรอง
+ * @param id ข้อมูสำรอง
+ */
+function onRestore(id: string) {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      fetchListBackup();
+    },
+    "ยืนยันการคืนค่าข้อมูสำรอง",
+    "ต้องการยืนยันการคืนค่าข้อมูสำรองนี้ใช่หรือไม่?"
+  );
+}
+
+onMounted(() => {
+  fetchListBackup();
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
+      <q-btn
+        v-if="tab === 'backup'"
+        color="primary"
+        icon="add"
+        label="สร้างข้อมูลสำรอง"
+        @click="onCreateBackup"
+      >
+        <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="rows"
+      :columns="columns"
+      row-key="name"
+      :visible-columns="visibleColumns"
+      :filter="filter"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ 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 in props.cols" :key="col.name" :props="props">
+            <div>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td>
+            <q-btn
+              v-if="tab === 'backup'"
+              dense
+              flat
+              round
+              icon="delete"
+              color="red"
+              size="12px"
+              @click.petvent="onDelete(props.row.id)"
+            >
+              <q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
+            </q-btn>
+
+            <q-btn
+              v-else
+              dense
+              flat
+              round
+              icon="restore"
+              color="primary"
+              size="12px"
+              @click.petvent="onRestore(props.row.id)"
+            >
+              <q-tooltip>คืนค่า </q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </q-card-section>
+</template>
+
+<style scoped></style>

src/modules/04_system/interface/index/Main.ts

@@ -0,0 +1,7 @@
+interface ItemsTeb {
+  name: string;
+  label: string;
+  icon: string;
+}
+
+export type { ItemsTeb };

src/modules/04_system/interface/response/Main.ts

@@ -0,0 +1,8 @@
+interface DataBackup {
+  id: string;
+  name: string;
+  createAt: Date;
+  status: string;
+}
+
+export type { DataBackup };

src/modules/04_system/router.ts

@@ -0,0 +1,12 @@
+const MainView = () => import("@/modules/04_system/views/MainView.vue");
+
+export default [
+  {
+    path: "/system",
+    name: "viewSystem",
+    component: MainView,
+    meta: {
+      Role: ["SUPER_ADMIN", "ADMIN"],
+    },
+  },
+];

src/modules/04_system/views/MainView.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/**
+ * import type
+ */
+import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
+
+/**
+ * import components
+ */
+import Card from "@/modules/04_system/components/cardBackupRestore.vue";
+
+/**
+ * ตัวแปร
+ */
+const tab = ref<string>("backup");
+const tabItems = ref<ItemsTeb[]>([
+  { name: "backup", label: "Backup", icon: "mdi-database" },
+  { name: "restore", label: "Restore", icon: "restore" },
+]);
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">ตั้งค่าระบบ</div>
+  </div>
+  <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" :icon="item.icon" />
+      </div>
+    </q-tabs>
+    <q-separator />
+    <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
+      <q-tab-panel name="backup">
+        <q-card-section class="q-pa-none">
+          <div class="text-h6">ข้อมูลสำรอง</div>
+        </q-card-section>
+
+        <Card :tab="tab" />
+      </q-tab-panel>
+
+      <q-tab-panel name="restore">
+        <q-card-section class="q-pa-none">
+          <div class="text-h6">คืนค่า</div>
+        </q-card-section>
+        <Card :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>
+
+<style scoped></style>