refactor: edit ui and check role
This commit is contained in:
Net
parent
a773fa272d
commit
8a2c94028b
1 changed files with 108 additions and 74 deletions
|
|
@ -9,6 +9,7 @@ import type { QTableProps } from 'quasar';
|
|||
import { resetScrollBar } from 'src/stores/utils';
|
||||
import useBranchStore from 'stores/branch';
|
||||
import useFlowStore from 'stores/flow';
|
||||
import { isRoleInclude } from 'src/stores/utils';
|
||||
import {
|
||||
BranchWithChildren,
|
||||
BranchCreate,
|
||||
|
|
@ -45,6 +46,7 @@ import {
|
|||
SaveButton,
|
||||
UndoButton,
|
||||
} from 'components/button';
|
||||
import { getRole } from 'src/services/keycloak';
|
||||
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
||||
const $q = useQuasar();
|
||||
|
|
@ -181,7 +183,10 @@ const treeData = computed(() => {
|
|||
|
||||
branchData.value?.result.forEach((v) => {
|
||||
if (v.isHeadOffice) map[v.id] = Object.assign(v, { branch: [] });
|
||||
else children.push(v);
|
||||
if (v.virtual && isRoleInclude(['head_of_admin']) === false) {
|
||||
return;
|
||||
}
|
||||
if (!v.isHeadOffice) children.push(v);
|
||||
});
|
||||
|
||||
children.forEach((v) => {
|
||||
|
|
@ -193,32 +198,54 @@ const treeData = computed(() => {
|
|||
return Object.values(map);
|
||||
});
|
||||
|
||||
async function calculateStats() {
|
||||
const _stats = await branchStore.stats();
|
||||
async function calculateStats(headOfficeId?: string) {
|
||||
const _stats = await branchStore.stats({ headOfficeId });
|
||||
|
||||
if (_stats) {
|
||||
stats.value = [
|
||||
{
|
||||
icon: 'mdi-office-building-outline',
|
||||
count: _stats.hq,
|
||||
label: 'branch.card.branchHQLabel',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-home-group',
|
||||
count: _stats.br,
|
||||
label: 'branch.card.branchLabel',
|
||||
color: 'purple',
|
||||
},
|
||||
if (!_stats) return;
|
||||
|
||||
{
|
||||
icon: 'mdi-home-group',
|
||||
count: _stats.virtual,
|
||||
label: 'branch.card.branchVirtual',
|
||||
color: 'blue',
|
||||
},
|
||||
];
|
||||
}
|
||||
const baseStats: {
|
||||
icon: string;
|
||||
count: number;
|
||||
label: string;
|
||||
color: 'pink' | 'purple' | 'blue';
|
||||
}[] = [
|
||||
{
|
||||
icon: 'mdi-office-building-outline',
|
||||
count: _stats.hq,
|
||||
label: 'branch.card.branchHQLabel',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-home-group',
|
||||
count: _stats.br,
|
||||
label: 'branch.card.branchLabel',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-home-group',
|
||||
count: _stats.virtual,
|
||||
label: 'branch.card.branchVirtual',
|
||||
color: 'blue',
|
||||
},
|
||||
];
|
||||
|
||||
stats.value = baseStats.filter((v) => {
|
||||
if (isRoleInclude(['head_of_admin'])) {
|
||||
if (headOfficeId !== undefined && v.label.includes('HQ')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
if (v.label.includes('Virtual')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (headOfficeId !== undefined && v.label.includes('HQ')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -417,6 +444,10 @@ async function undo() {
|
|||
formData.value = prevFormData.value;
|
||||
}
|
||||
|
||||
watch(expandedTree, async () => {
|
||||
calculateStats(expandedTree.value[0]);
|
||||
});
|
||||
|
||||
watch(modal, () => {
|
||||
if (!modal.value) {
|
||||
clearData();
|
||||
|
|
@ -786,21 +817,7 @@ watch(currentHq, () => {
|
|||
v-if="!hideStat"
|
||||
class="q-pb-md"
|
||||
label-i18n
|
||||
:branch="
|
||||
expandedTree[0]
|
||||
? [
|
||||
{
|
||||
...stats[1],
|
||||
count: (() => {
|
||||
const foundItem = treeData.find(
|
||||
(i) => i.id === expandedTree[0],
|
||||
);
|
||||
return foundItem ? foundItem._count.branch : 0;
|
||||
})(),
|
||||
},
|
||||
]
|
||||
: stats
|
||||
"
|
||||
:branch="stats"
|
||||
:dark="$q.dark.isActive"
|
||||
/>
|
||||
</transition>
|
||||
|
|
@ -1204,43 +1221,56 @@ watch(currentHq, () => {
|
|||
'status-inactive':
|
||||
props.row.status === 'INACTIVE',
|
||||
'branch-card__hq': props.row.isHeadOffice,
|
||||
'branch-card__br': !props.row.isHeadOffice,
|
||||
'branch-card__br':
|
||||
!props.row.isHeadOffice && !props.row.virtual,
|
||||
'branch-card__br-virtual':
|
||||
!props.row.isHeadOffice && props.row.virtual,
|
||||
}"
|
||||
style="display: flex"
|
||||
>
|
||||
<q-avatar size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="
|
||||
baseUrl +
|
||||
`/branch/${props.row.id}/branch-image?ts=${Date.now()}`
|
||||
"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="branch-card__icon no-padding full-width full-height items-center justify-center"
|
||||
>
|
||||
<q-icon
|
||||
size="sm"
|
||||
name="mdi-office-building-outline"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
<div
|
||||
:style="`
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: hsl(var(${props.row.isHeadOffice ? '--pink-6-hsl' : props.row.virtual ? '--blue-6-hsl' : '--violet-11-hsl'}));
|
||||
`"
|
||||
class="q-pa-xs"
|
||||
>
|
||||
<q-avatar size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="
|
||||
baseUrl +
|
||||
`/branch/${props.row.id}/branch-image?ts=${Date.now()}`
|
||||
"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="branch-card__icon no-padding full-width full-height items-center justify-center"
|
||||
>
|
||||
<q-icon
|
||||
size="sm"
|
||||
name="mdi-office-building-outline"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col">{{ props.row.name }}</div>
|
||||
|
|
@ -2096,7 +2126,7 @@ watch(currentHq, () => {
|
|||
() => {
|
||||
modelCreateTypeBranch = false;
|
||||
|
||||
if (value.text === 'Virtual Branch') {
|
||||
if (value.text === $t('branch.card.branchVirtual')) {
|
||||
formData.virtual = true;
|
||||
} else {
|
||||
formData.virtual = false;
|
||||
|
|
@ -2153,6 +2183,10 @@ watch(currentHq, () => {
|
|||
}
|
||||
}
|
||||
|
||||
.branch-card__br-virtual {
|
||||
--_branch-card-bg: var(--blue-6-hsl);
|
||||
}
|
||||
|
||||
.status-active {
|
||||
--_branch-status-color: var(--green-6-hsl);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue