UI รายการ web services
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6cdb755d07
commit
55576bc7b3
6 changed files with 376 additions and 0 deletions
|
|
@ -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 };
|
||||
|
|
|
|||
139
src/modules/06_webservices/components/DialogApiKey.vue
Normal file
139
src/modules/06_webservices/components/DialogApiKey.vue
Normal file
|
|
@ -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>
|
||||
27
src/modules/06_webservices/components/DialogUsability.vue
Normal file
27
src/modules/06_webservices/components/DialogUsability.vue
Normal file
|
|
@ -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>
|
||||
12
src/modules/06_webservices/router.ts
Normal file
12
src/modules/06_webservices/router.ts
Normal file
|
|
@ -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"],
|
||||
},
|
||||
},
|
||||
];
|
||||
187
src/modules/06_webservices/view/main.vue
Normal file
187
src/modules/06_webservices/view/main.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
],
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue