hrms-bangkok/hrms-admin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ต่อฟังก์ชั่น

Browse source
This commit is contained in:
oat_dev 2024-07-11 11:39:04 +07:00
parent 3f225d2d58
commit 85fa54088d
2 changed files with 196 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

236
src/modules/03_logs/components/LogTable.vue
View file

@ -1,15 +1,21 @@
<script setup lang="ts">
import { ref } from "vue";
import { cloneVNode, ref } from "vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/03_logs/stores/main";
import { storeToRefs } from "pinia";
/** importStore*/
const storeData = useDataStore();
const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
const { date2Thai } = useCounterMixin();
const columns = ref<QTableProps["columns"]>([
{
name: "timestamp",
name: "startTimeStamp",
align: "left",
label: "เวลา",
sortable: true,
field: "timestamp",
field: "startTimeStamp",
headerStyle: "font-size: 14px",
format: (v) => date2Thai(v, false, true),
style: "font-size: 14px",
@ -72,22 +78,22 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
name: "logType",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
field: "logType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "message",
name: "responseDescription",
align: "left",
label: "ข้อความ",
sortable: true,
field: "message",
field: "responseDescription",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -95,54 +101,39 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const inputSearch = defineModel<string>("inputSearch");
const selectDate = ref<Date>(new Date());
const pagination = ref({
page: 1,
rowsPerPage: 10,
rowsPerPage: 0,
});
const inputSearch = ref<string>("");
const visibleColumns = ref<string[]>([
"timestamp",
"startTimeStamp",
"username",
"host",
"endpoint",
"method",
"responseCode",
"status",
"message",
"logType",
"responseDescription",
]);
const rows = [
{
timestamp: new Date(),
username: "สมรักษ์ จงใจรักชาติ",
host: "http://localhost:3005/lists",
endpoint: "registry-employee",
method: "Put",
responseCode: 401,
status: "Error",
message: "Unknow value Found",
},
{
timestamp: new Date(),
username: "สมรักษ์ จงใจรักชาติ",
host: "http://localhost:3005/lists",
endpoint: "registry-employee",
method: "Delete",
responseCode: 200,
status: "Warning",
message: "Balance getting below",
},
{
timestamp: new Date(),
username: "สมรักษ์ จงใจรักชาติ",
host: "http://localhost:3005/lists",
endpoint: "registry-employee",
method: "Get",
responseCode: 200,
status: "Info",
message: "Backup success",
},
];
function handleScroll(event: any) {
const element = event.target;
if (element.scrollHeight - element.scrollTop === element.clientHeight) {
storeData.fetchLog(
{
size: size.value ?? undefined,
search: inputSearch.value ?? undefined,
systemName: systemName.value ?? undefined,
searchAfter: searchAfter.value ?? undefined,
},
true
);
setTimeout(() => {}, 500);
}
}
</script>
<template>
@ -154,7 +145,7 @@ const rows = [
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="console.log('test')"
@update:modelValue="console.log('date')"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
@ -182,11 +173,17 @@ const rows = [
standout
dense
clearable
:model-value="inputSearch"
v-model="inputSearch"
ref="filterRef"
@update:model-value="console.log('update')"
@update:model-value="
storeData.fetchLog({
size: size ?? undefined,
search: inputSearch ?? undefined,
systemName: systemName ?? undefined,
})
"
outlined
debounce="300"
debounce="500"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
@ -212,72 +209,85 @@ const rows = [
/>
</div>
</div>
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="name"
flat
bordered
:paging="true"
:filter="inputSearch"
dense
v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
: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.id">
<div v-if="col.name === 'username'">
{{ col.value }}
<div class="text-grey">{{ 12421321334 }}</div>
</div>
<div v-else-if="col.name === 'method'">
<q-badge text-color="blue" style="background-color: #f0ecec">{{
col.value
}}</q-badge>
</div>
<div v-else-if="col.name === 'status'">
<q-badge
text-color="white"
:color="
col.value === 'Error'
? 'red'
: col.value === 'Info'
? 'primary'
: 'warning'
"
>{{ col.value }}</q-badge
>
</div>
<div
v-else-if="col.name === 'message'"
:class="`text-${
props.row.status === 'Error'
? 'red'
: props.row.status === 'Info'
? 'primary'
: 'warning'
}`"
<div class="q-pa-md">
<div style="max-height: 70vh; overflow: scroll" @scroll="handleScroll">
<d-table
ref="table"
:columns="columns"
:rows="storeData.logData"
row-key="name"
flat
bordered
hide-pagination
v-model:pagination="pagination"
dense
:rows-per-page-options="[0]"
class="custom-header-table"
: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"
style="overflow: scroll"
>
{{ col.value }}
</div>
<div v-else>
{{ col.value === "" || col.value === null ? "-" : col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'username'">
{{ props.row.user }}
<div class="text-grey" style="font-size: 65%">
{{ props.row.userId }}
</div>
</div>
<div v-else-if="col.name === 'method'">
<q-badge
text-color="blue"
style="background-color: #f0ecec"
>{{ col.value ?? "-" }}</q-badge
>
</div>
<div v-else-if="col.name === 'logType'">
<q-badge
text-color="white"
:color="
col.value === 'error'
? 'red'
: col.value === 'info'
? 'primary'
: 'warning'
"
>{{ col.value ?? "-" }}</q-badge
>
</div>
<div
v-else-if="col.name === 'responseDescription'"
:class="`text-${
props.row.logType === 'Error'
? 'red'
: props.row.logType === 'info'
? 'primary'
: 'warning'
}`"
>
{{ col.value ?? "-" }}
</div>
<div v-else class="ellipsis" style="max-width: 15vw">
{{ col.value === "" || col.value === null ? "-" : col.value }}
<q-tooltip> {{ col.value }} </q-tooltip>
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</template>