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

feat: 01 functional hold dialog

Browse source
This commit is contained in:
puriphatt 2024-07-19 04:56:08 +00:00
parent 97c5c88721
commit fd5532b46a
1 changed files with 85 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/pages/01_branch-management/MainPage.vue
View file

@ -68,7 +68,7 @@ const expandedTree = ref<string[]>([]);
const profileFileImg = ref<File | undefined>(undefined);
const imageUrl = ref<string | null>('');
const currentTreehHeadOfficeId = ref<string>('');
const currentNode = ref<BranchWithChildren>();
const inputFileImg = (() => {
const element = document.createElement('input');
@ -492,9 +492,12 @@ function changeTitle(
return '';
}
function handleHold() {
function handleHold(node: BranchWithChildren) {
if ($q.screen.gt.xs) return;
holdDialog.value = true;
return function (props: unknown) {
holdDialog.value = true;
currentNode.value = node;
};
}
watch(locale, () => {
@ -633,7 +636,7 @@ watch(
<template #default-header="{ node }">
<div
class="full-width q-py-sm"
v-touch-hold.mouse="handleHold"
v-touch-hold.mouse="handleHold(node)"
@click.stop="
() => {
if (
@ -1704,8 +1707,15 @@ watch(
></div>
</div>
<q-list>
<q-item clickable v-ripple>
<q-list v-if="currentNode">
<q-item
clickable
v-ripple
v-close-popup
@click.stop="
triggerCreate('subBranch', currentNode.id, currentNode.code)
"
>
<q-item-section avatar>
<q-icon name="mdi-file-plus" class="app-text-muted-2" />
</q-item-section>
@ -1714,7 +1724,23 @@ watch(
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item
clickable
v-ripple
v-close-popup
@click.stop="
if (currentNode.isHeadOffice) {
triggerEdit(
'drawer',
currentNode.id,
'headOffice',
currentNode.code,
);
} else {
triggerEdit('drawer', currentNode.id, 'subBranch');
}
"
>
<q-item-section avatar>
<q-icon
name="mdi-eye-outline"
@ -1724,7 +1750,25 @@ watch(
<q-item-section>{{ $t('viewDetail') }}</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item
clickable
v-ripple
v-close-popup
@click="
() => {
if (currentNode && currentNode.isHeadOffice) {
triggerEdit(
'form',
currentNode.id,
'headOffice',
currentNode.code,
);
} else {
currentNode && triggerEdit('form', currentNode.id, 'subBranch');
}
}
"
>
<q-item-section avatar>
<q-icon
name="mdi-pencil-outline"
@ -1734,18 +1778,47 @@ watch(
<q-item-section>{{ $t('edit') }}</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item
clickable
v-ripple
v-close-popup
@click="triggerDelete(currentNode.id)"
>
<q-item-section avatar>
<q-icon name="mdi-trash-can-outline" class="app-text-negative" />
</q-item-section>
<q-item-section>{{ $t('delete') }}</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item clickable v-ripple v-close-popup>
<q-item-section avatar>
<q-toggle dense size="sm" :model-value="holdDialog" />
<q-toggle
dense
:id="`view-detail-btn-${currentNode.name}-status`"
size="sm"
@click="
async () => {
if (!currentNode) return;
const res = await branchStore.editById(currentNode.id, {
status:
currentNode.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
});
if (res) currentNode.status = res.status;
}
"
:model-value="
currentNode.status === 'CREATED' ||
currentNode.status === 'ACTIVE'
"
/>
</q-item-section>
<q-item-section>
{{
currentNode.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</q-item-section>
<q-item-section>{{ $t('switchOnLabel') }}</q-item-section>
</q-item>
</q-list>
</div>