From 55576bc7b34d70fc967613c9dd5a1d162091a622 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 26 Nov 2024 14:24:50 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20web=20services?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   9 +
 .../components/DialogApiKey.vue               | 139 +++++++++++++
 .../components/DialogUsability.vue            |  27 +++
 src/modules/06_webservices/router.ts          |  12 ++
 src/modules/06_webservices/view/main.vue      | 187 ++++++++++++++++++
 src/router/index.ts                           |   2 +
 6 files changed, 376 insertions(+)
 create mode 100644 src/modules/06_webservices/components/DialogApiKey.vue
 create mode 100644 src/modules/06_webservices/components/DialogUsability.vue
 create mode 100644 src/modules/06_webservices/router.ts
 create mode 100644 src/modules/06_webservices/view/main.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 989fac5f..93b3d0b2 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -167,6 +167,15 @@ const menuList = readonly<any[]>([
       },
     ],
   },
+
+  {
+    key: 6,
+    icon: "mdi-web",
+    activeIcon: "mdi-web",
+    label: "จัดการ web services",
+    path: "manageWebservices",
+    role: ["SUPER_ADMIN"],
+  },
 ]);
 
 export { menuList };
diff --git a/src/modules/06_webservices/components/DialogApiKey.vue b/src/modules/06_webservices/components/DialogApiKey.vue
new file mode 100644
index 00000000..deddbc09
--- /dev/null
+++ b/src/modules/06_webservices/components/DialogApiKey.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogMessageNotify } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const isAPIKey = ref<boolean>(false);
+const topicRef = ref<any>(null);
+const apiKey = ref<string>("");
+const options = ref<any[]>([
+  { label: "API 1", value: "API 1" },
+  { label: "API 2", value: "API 2" },
+  { label: "API 3", value: "API 3" },
+]);
+
+const formData = reactive({
+  topic: "",
+  access: [],
+});
+
+const titleName = computed(() => {
+  return !isAPIKey.value ? "สร้าง API Key" : "API Key";
+});
+
+function onCreateAPIKey() {
+  topicRef.value.validate();
+  if (topicRef.value.validate()) {
+    if (formData.access.length > 0) {
+      console.log(formData);
+      apiKey.value = "APIKEY";
+      isAPIKey.value = true;
+    } else {
+      dialogMessageNotify($q, "กรุณาเลือก API ที่เข้าถึงได้");
+    }
+  }
+}
+
+function onCopyToClipboard() {
+  navigator.clipboard.writeText(apiKey.value);
+}
+
+function onCloseDialog() {
+  modal.value = false;
+  isAPIKey.value = false;
+  formData.topic = "";
+  formData.access = [];
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader :tittle="titleName" :close="onCloseDialog" />
+      <q-separator />
+
+      <q-card-section v-if="!isAPIKey">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              ref="topicRef"
+              dense
+              outlined
+              v-model="formData.topic"
+              label="ชื่อ/คำอธิบาย"
+              hide-bottom-space
+              lazy-rules
+              :rules="[(val:string) => !!val || 'กรุณากรอกชื่อ/คำอธิบาย']"
+            />
+          </div>
+
+          <div class="col-12">
+            API ที่เข้าถึงได้
+            <q-option-group
+              :options="options"
+              type="checkbox"
+              keep-color
+              color="primary"
+              v-model="formData.access"
+            />
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-section v-else>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <span class="text-red">
+              * API Key ด้านล่างนี้จะแสดงเพียงครั้งเดียว
+              ขอให้ทำสำเนาไว้ในที่ปลอดภัย
+            </span>
+            <q-input dense outlined readonly bottom-slots v-model="apiKey">
+              <template v-slot:append>
+                <q-btn
+                  round
+                  dense
+                  flat
+                  color="primary"
+                  icon="mdi-content-copy"
+                  @click.pervent="onCopyToClipboard"
+                >
+                  <q-tooltip>คัดลอก</q-tooltip></q-btn
+                >
+              </template>
+            </q-input>
+          </div>
+
+          <div class="col-12">
+            API ที่เข้าถึงได้
+            <q-option-group
+              :options="options"
+              type="checkbox"
+              keep-color
+              color="primary"
+              v-model="formData.access"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          :label="!isAPIKey ? 'สร้าง API Key' : 'ปิด'"
+          color="secondary"
+          @click.pervent="!isAPIKey ? onCreateAPIKey() : onCloseDialog()"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_webservices/components/DialogUsability.vue b/src/modules/06_webservices/components/DialogUsability.vue
new file mode 100644
index 00000000..86044545
--- /dev/null
+++ b/src/modules/06_webservices/components/DialogUsability.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+function onCloseDialog() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader tittle="การใช้งาน" :close="onCloseDialog" />
+      <q-separator />
+
+      <q-card-section> </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ปิด" color="secondary" @click.pervent="onCloseDialog()" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_webservices/router.ts b/src/modules/06_webservices/router.ts
new file mode 100644
index 00000000..8d7577c6
--- /dev/null
+++ b/src/modules/06_webservices/router.ts
@@ -0,0 +1,12 @@
+const mainView = () => import("@/modules/06_webservices/view/main.vue");
+
+export default [
+  {
+    path: "/manage-web-services",
+    name: "manageWebservices",
+    component: mainView,
+    meta: {
+      Role: ["SUPER_ADMIN"],
+    },
+  },
+];
diff --git a/src/modules/06_webservices/view/main.vue b/src/modules/06_webservices/view/main.vue
new file mode 100644
index 00000000..ac0a1e0b
--- /dev/null
+++ b/src/modules/06_webservices/view/main.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+import DialogApiKey from "@/modules/06_webservices/components/DialogApiKey.vue";
+import DialogUsability from "@/modules/06_webservices/components/DialogUsability.vue";
+
+/** Table*/
+const rows = ref<any>([]);
+const keyword = ref<string>("");
+const visibleColumns = ref<string[]>(["topic", "access", "amount"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "topic",
+    align: "left",
+    label: "ชื่อ-คำอธิบาย",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "access",
+    align: "left",
+    label: "API ที่เข้าถึง",
+    sortable: true,
+    field: "access",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "สถิติ ",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** API Key*/
+const modalApiKey = ref<boolean>(false);
+
+/** usability*/
+const modalUsability = ref<boolean>(false);
+
+function fetchListWebServices() {
+  const data = [
+    {
+      topic: "รายการ web services 1",
+      access: ["API1", "API2", "API3"],
+      amount: "1",
+    },
+    {
+      topic: "รายการ web services 2",
+      access: ["API1", "API2", "API3"],
+      amount: "2",
+    },
+  ];
+  rows.value = data;
+}
+
+onMounted(() => {
+  fetchListWebServices();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายการ web services
+    </div>
+    <q-space />
+    <q-btn
+      flat
+      color="public"
+      label="วิธีการใช้งาน"
+      @click.pervent="modalUsability = true"
+    />
+  </div>
+
+  <q-card flast bordered class="q-pa-md">
+    <div class="items-center col-12 row q-col-gutter-sm">
+      <q-btn
+        class="q-ml-sm"
+        flat
+        round
+        dense
+        color="primary"
+        icon="add"
+        @click.pervent="modalApiKey = true"
+      >
+        <q-tooltip>สร้าง API Key </q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-input
+        borderless
+        dense
+        outlined
+        clearable
+        v-model="keyword"
+        placeholder="ค้นหา"
+        @clear="keyword = ''"
+      >
+        <template v-slot:append v-if="keyword === ''">
+          <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"
+        style="min-width: 140px"
+      />
+    </div>
+
+    <div class="col-12 q-pt-sm">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :filters="keyword"
+        flat
+        bordered
+        :paging="true"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <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-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name === 'access'">
+                <q-list dense>
+                  <q-item v-for="(item, key) in col.value">
+                    <q-item-section> {{ item }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+        <!-- <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="fetchListUsers"
+          ></q-pagination>
+        </template> -->
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogApiKey v-model:modal="modalApiKey" />
+  <DialogUsability y v-model:modal="modalUsability" />
+</template>
+
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index afe58b1f..32831ea0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,6 +11,7 @@ import ModuleUser from "@/modules/02_users/router";
 import ModuleLogs from "@/modules/03_logs/router";
 import ModuleSystem from "@/modules/04_system/router";
 import ModuleCommand from "@/modules/05_command/router";
+import ModuleWebServices from "@/modules/06_webservices/router";
 
 // TODO: ใช้หรือไม่?
 import { authenticated, logout } from "@/plugins/auth";
@@ -48,6 +49,7 @@ const router = createRouter({
         ...ModuleLogs,
         ...ModuleSystem,
         ...ModuleCommand,
+        ...ModuleWebServices,
       ],
     },
     /**