chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: new 02 ui & layout

Browse source
This commit is contained in:
puriphatt 2024-07-05 11:01:40 +00:00
parent 70f3959c08
commit 701d82e7a7
2 changed files with 296 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

386
src/pages/02_personnel-management/MainPage.vue
View file

@ -76,6 +76,9 @@ const defaultFormData = {
checkpointEN: null,
};
const modeView = ref(true);
const fieldSelected = ref();
const fieldDisplay = ref();
const hideStat = ref(false);
const userCode = ref<string>();
const currentUser = ref<User>();
@ -91,7 +94,7 @@ const statusToggle = ref(true);
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
const inputSearch = ref('');
const userId = ref<string>();
const selectorLabel = ref<string>('MESSENGER');
const selectorLabel = ref<string>('ALL');
const hqId = ref<string>();
const brId = ref<string>();
const formDialogRef = ref();
@ -459,11 +462,11 @@ onMounted(async () => {
: '';
typeStats.value = await userStore.typeStats();
const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
(v) => v[1] > 0,
);
// const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
// (v) => v[1] > 0,
// );
firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
// firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
const res = await branchStore.userStats(formData.value.userType);
if (res) {
@ -513,7 +516,7 @@ async function fetchUserList() {
pageSize: pageSize.value,
page: currentPage.value,
query: !!inputSearch.value ? inputSearch.value : undefined,
userType: selectorLabel.value ?? undefined,
userType: selectorLabel.value === 'ALL' ? undefined : selectorLabel.value,
});
}
@ -538,8 +541,23 @@ watch(inputSearch, async () => await fetchUserList());
<div class="column full-height no-wrap">
<div class="text-body-2 q-mb-xs flex items-center">
{{ $t('personnelStatTitle') }}
<q-badge
v-if="typeStats"
rounded
class="q-ml-sm"
style="
background-color: hsla(var(--info-bg) / 0.15);
color: hsl(var(--info-bg));
"
>
{{
selectorLabel === 'ALL'
? Object.values(typeStats).reduce((acc, val) => acc + val, 0)
: typeStats[selectorLabel]
}}
</q-badge>
<q-btn
class="q-ml-xs"
class="q-ml-sm"
icon="mdi-pin"
color="primary"
size="sm"
@ -556,22 +574,39 @@ watch(inputSearch, async () => await fetchUserList());
<div v-if="!hideStat" class="scroll q-mb-md">
<div style="display: inline-block">
<StatCardComponent
v-if="typeStats"
v-if="typeStats && userData?.result"
labelI18n
:branch="
Object.entries(typeStats).map(([key, val]) => ({
count: val,
label: key,
icon: 'mdi-account',
color:
(
selectorLabel === 'ALL'
? Object.entries(typeStats).map(([key, val]) => ({
count: val,
label: key,
icon: 'mdi-account',
color:
(
{
USER: 'cyan',
MESSENGER: 'yellow',
DELEGATE: 'red',
AGENCY: 'magenta',
} as const
)[key] || 'pink',
}))
: [
{
USER: 'cyan',
MESSENGER: 'yellow',
DELEGATE: 'red',
AGENCY: 'magenta',
} as const
)[key] || 'pink',
}))
label: selectorLabel,
count: typeStats[selectorLabel],
icon: 'mdi-account',
color:
selectorLabel === 'USER'
? 'cyan'
: selectorLabel === 'MESSENGER'
? 'yellow'
: selectorLabel === 'DELEGATE'
? 'red'
: 'magenta',
},
]
"
:dark="$q.dark.isActive"
/>
@ -584,65 +619,234 @@ watch(inputSearch, async () => await fetchUserList());
class="col surface-1 rounded justify-between column no-wrap"
style="overflow: hidden"
>
<div class="surface-2 bordered-b q-px-md q-py-sm">
<div class="row justify-end" style="gap: var(--size-2)">
<q-input
for="input-search"
style="width: 250px"
outlined
<div class="column">
<div
class="row surface-3 bordered-b justify-between full-width items-center surface-1"
style="z-index: 1"
>
<div class="row q-py-sm q-px-md justify-between full-width">
<q-input
for="input-search"
outlined
dense
style="width: 250px"
:label="$t('search')"
class="q-mr-md"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
debounce="200"
>
<template #prepend>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<div class="row">
<q-select
v-model="statusFilter"
outlined
dense
option-value="value"
option-label="label"
class="q-pr-md"
map-options
emit-value
:options="[
{ label: $t('all'), value: 'all' },
{ label: $t('statusACTIVE'), value: 'statusACTIVE' },
{ label: $t('statusINACTIVE'), value: 'statusINACTIVE' },
]"
></q-select>
<q-select
id="select-field"
for="select-field"
:options="[
{ label: 'กันว่าง 1', value: 'กันว่าง 1' },
{ label: 'กันว่าง 2', value: 'กันว่าง 2' },
]"
:display-value="$t('displayField')"
v-model="fieldSelected"
option-label="label"
option-value="value"
map-options
emit-value
outlined
multiple
dense
/>
<q-btn-toggle
id="btn-mode"
v-model="modeView"
dense
class="no-shadow bordered rounded surface-1 q-ml-md"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs"
:options="[
{ value: true, slot: 'folder' },
{ value: false, slot: 'list' },
]"
>
<template v-slot:folder>
<q-icon
name="mdi-view-grid-outline"
size="16px"
class="q-px-sm q-py-xs rounded"
:style="{
color: $q.dark.isActive
? modeView
? '#C9D3DB '
: '#787B7C'
: modeView
? '#787B7C'
: '#C9D3DB',
}"
/>
</template>
<template v-slot:list>
<q-icon
name="mdi-format-list-bulleted"
class="q-px-sm q-py-xs rounded"
size="16px"
:style="{
color: $q.dark.isActive
? modeView === false
? '#C9D3DB'
: '#787B7C'
: modeView === false
? '#787B7C'
: '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</div>
</div>
</div>
<div class="surface-2 bordered-b q-px-md">
<q-tabs
dense
:label="$t('search')"
debounce="500"
v-model="inputSearch"
></q-input>
<q-btn
id="btn-filter"
icon="mdi-tune-vertical-variant"
size="sm"
class="bordered rounded surface-1"
:class="{ 'app-text-info': statusFilter !== 'all' }"
unelevated
v-model="selectorLabel"
align="left"
class="full-height"
active-color="info"
>
<q-menu class="bordered">
<q-list v-close-popup dense>
<q-item
id="btn-filter-all"
clickable
class="flex items-center"
:class="{ 'app-text-info': statusFilter === 'all' }"
@click="statusFilter = 'all'"
>
{{ $t('all') }}
</q-item>
<q-item
id="btn-filter-active"
clickable
class="flex items-center"
:class="{
'app-text-info': statusFilter === 'statusACTIVE',
}"
@click="statusFilter = 'statusACTIVE'"
>
{{ $t('statusACTIVE') }}
</q-item>
<q-item
id="btn-filter-inactive"
clickable
class="flex items-center"
:class="{
'app-text-info': statusFilter === 'statusINACTIVE',
}"
@click="statusFilter = 'statusINACTIVE'"
>
{{ $t('statusINACTIVE') }}
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-tab
name="employer"
@click="
async () => {
currentPage = 1;
inputSearch = '';
selectorLabel = 'ALL';
statusFilter = 'all';
flowStore.rotate();
}
"
>
<div
class="row"
:class="
selectorLabel === 'ALL' ? 'text-bold' : 'app-text-muted'
"
>
{{ $t('all') }}
</div>
</q-tab>
<q-tab
name="employee"
@click="
async () => {
selectorLabel = 'USER';
statusFilter = 'all';
currentPage = 1;
inputSearch = '';
flowStore.rotate();
}
"
>
<div
class="row"
:class="
selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
"
>
{{ $t('USER') }}
</div>
</q-tab>
<q-tab
name="MESSENGER"
@click="
async () => {
selectorLabel = 'MESSENGER';
statusFilter = 'all';
currentPage = 1;
inputSearch = '';
flowStore.rotate();
}
"
>
<div
class="row"
:class="
selectorLabel === 'MESSENGER' ? 'text-bold' : 'app-text-muted'
"
>
{{ $t('MESSENGER') }}
</div>
</q-tab>
<q-tab
name="DELEGATE"
@click="
async () => {
selectorLabel = 'DELEGATE';
statusFilter = 'all';
currentPage = 1;
inputSearch = '';
flowStore.rotate();
}
"
>
<div
class="row"
:class="
selectorLabel === 'DELEGATE' ? 'text-bold' : 'app-text-muted'
"
>
{{ $t('DELEGATE') }}
</div>
</q-tab>
<q-tab
name="AGENCY"
@click="
async () => {
selectorLabel = 'AGENCY';
statusFilter = 'all';
currentPage = 1;
inputSearch = '';
flowStore.rotate();
}
"
>
<div
class="row"
:class="
selectorLabel === 'AGENCY' ? 'text-bold' : 'app-text-muted'
"
>
{{ $t('AGENCY') }}
</div>
</q-tab>
</q-tabs>
</div>
</div>
<div class="col scroll">
<div class="q-pa-md q-col-gutter-md row">
<div class="col scroll column">
<div
v-if="userData && userData.total > 0 && !inputSearch"
class="q-pa-md q-col-gutter-md row"
>
<div
v-for="v in userData?.result.filter((v) => {
if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
@ -704,31 +908,31 @@ watch(inputSearch, async () => await fetchUserList());
/>
</div>
</div>
<template v-if="userData && userData.total === 0 && !inputSearch">
<div class="col-1 self-end">
<div class="row">
<TooltipComponent
title="personnelTooltipTitle"
caption="personnelTooltipCaption"
imgSrc="personnel-table-"
/>
</div>
<div
v-if="userData && userData.total === 0 && !inputSearch"
class="col column"
>
<div class="flex justify-end q-pa-md">
<TooltipComponent
title="personnelTooltipTitle"
caption="personnelTooltipCaption"
imgSrc="personnel-table-"
/>
</div>
<div
class="col self-center"
style="display: flex; flex-grow: 1; align-items: center"
>
<div class="col items-center flex justify-center">
<AddButton
:label="'personnelAdd'"
:cyanOn="true"
@trigger="openDialog('FORM')"
/>
</div>
</template>
</div>
<div
v-if="userData?.total === 0 && !!inputSearch"
class="row full-width items-center justify-center"
class="row col full-width items-center justify-center"
style="min-height: 250px"
>
<NoData :not-found="!!inputSearch" />

1
src/stores/user/types.ts
View file

@ -97,6 +97,7 @@ export type UserAttachmentDelete = {
};
export type UserTypeStats = {
[x: string]: number;
USER: number;
MESSENGER: number;
DELEGATE: number;