fix: change status dialog

This commit is contained in:
puriphatt 2024-07-25 10:49:43 +00:00
parent 305d1f2e2b
commit f9eeb7f529
4 changed files with 152 additions and 84 deletions

View file

@ -419,8 +419,8 @@ async function triggerChangeStatus(
): Promise<Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }> { ): Promise<Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }> {
return await new Promise((resolve) => { return await new Promise((resolve) => {
dialog({ dialog({
color: 'warning', color: status !== 'INACTIVE' ? 'warning' : 'info',
icon: 'mdi-alert', icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
title: t('confirmChangeStatusTitle'), title: t('confirmChangeStatusTitle'),
actionText: actionText:
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'), status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),

View file

@ -493,6 +493,26 @@ async function toggleStatus(id: string) {
if (res) record.status = res.status; if (res) record.status = res.status;
} }
async function triggerChangeStatus(id: string, status: string) {
return await new Promise((resolve, reject) => {
dialog({
color: status !== 'INACTIVE' ? 'warning' : 'info',
icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
title: t('confirmChangeStatusTitle'),
actionText:
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
message:
status !== 'INACTIVE'
? t('confirmChangeStatusOffMessage')
: t('confirmChangeStatusOnMessage'),
action: async () => {
await toggleStatus(id).then(resolve).catch(reject);
},
cancel: () => {},
});
});
}
async function assignFormData(idEdit: string) { async function assignFormData(idEdit: string) {
if (!userData.value) return; if (!userData.value) return;
const foundUser = userData.value.result.find((user) => user.id === idEdit); const foundUser = userData.value.result.find((user) => user.id === idEdit);
@ -1248,7 +1268,10 @@ watch(
" "
@click=" @click="
async () => { async () => {
toggleStatus(props.row.id); triggerChangeStatus(
props.row.id,
props.row.status,
);
} }
" "
:model-value="props.row.status !== 'INACTIVE'" :model-value="props.row.status !== 'INACTIVE'"
@ -1305,7 +1328,9 @@ watch(
@update-card="(a, b) => openDialog(a, props.row.id, b)" @update-card="(a, b) => openDialog(a, props.row.id, b)"
@delete-card="onDelete(props.row.id)" @delete-card="onDelete(props.row.id)"
@enter-card="(a) => openDialog(a, props.row.id)" @enter-card="(a) => openDialog(a, props.row.id)"
@toggle-status="toggleStatus(props.row.id)" @toggle-status="
triggerChangeStatus(props.row.id, props.row.status)
"
/> />
</div> </div>
</template> </template>

View file

@ -755,6 +755,7 @@ function clearFormEmployee() {
infoDrawerEmployeeEdit.value = false; infoDrawerEmployeeEdit.value = false;
formDataEmployeeSameAddr.value = true; formDataEmployeeSameAddr.value = true;
currentEmployeeCode.value = ''; currentEmployeeCode.value = '';
formDataEmployeeTab.value = 'personalInfo';
currentEmployee.value = undefined; currentEmployee.value = undefined;
formDataEmployeeOwner.value = undefined; formDataEmployeeOwner.value = undefined;
@ -990,6 +991,35 @@ async function fetchListEmployee() {
} }
} }
async function triggerChangeStatus(id: string, status: string) {
console.log('asd');
return await new Promise((resolve, reject) => {
dialog({
color: status !== 'INACTIVE' ? 'warning' : 'info',
icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
title: t('confirmChangeStatusTitle'),
actionText:
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
message:
status !== 'INACTIVE'
? t('confirmChangeStatusOffMessage')
: t('confirmChangeStatusOnMessage'),
action: async () => {
if (currentTab.value === 'employee') {
await toggleStatusEmployee(id, status === 'ACTIVE' ? true : false)
.then(resolve)
.catch(reject);
} else {
await toggleStatusCustomer(id, status === 'ACTIVE' ? true : false)
.then(resolve)
.catch(reject);
}
},
cancel: () => {},
});
});
}
async function toggleStatusEmployee(id: string, status: boolean) { async function toggleStatusEmployee(id: string, status: boolean) {
await employeeStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' }); await employeeStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
@ -2219,11 +2249,9 @@ watch(isMainPage, () => {
" "
@click=" @click="
async () => { async () => {
toggleStatusCustomer( triggerChangeStatus(
props.row.id, props.row.id,
props.row.status === 'ACTIVE' props.row.status,
? true
: false,
); );
} }
" "
@ -2313,10 +2341,7 @@ watch(isMainPage, () => {
" "
@delete-card="deleteCustomerById(props.row.id)" @delete-card="deleteCustomerById(props.row.id)"
@toggle-status=" @toggle-status="
toggleStatusCustomer( triggerChangeStatus(props.row.id, props.row.status)
props.row.id,
props.row.status === 'ACTIVE' ? true : false,
)
" "
/> />
</div> </div>
@ -2685,11 +2710,9 @@ watch(isMainPage, () => {
" "
@click=" @click="
async () => { async () => {
toggleStatusEmployee( triggerChangeStatus(
props.row.id, props.row.id,
props.row.status === 'ACTIVE' props.row.status,
? true
: false,
); );
} }
" "
@ -2754,10 +2777,7 @@ watch(isMainPage, () => {
" "
@delete-card="onDelete(props.row.id)" @delete-card="onDelete(props.row.id)"
@toggle-status=" @toggle-status="
toggleStatusEmployee( triggerChangeStatus(props.row.id, props.row.status)
props.row.id,
props.row.status === 'ACTIVE' ? true : false,
)
" "
/> />
</div> </div>
@ -4019,30 +4039,28 @@ watch(isMainPage, () => {
employee employee
> >
<template #person-card> <template #person-card>
<div class="q-ma-md"> <div class="q-pa-md full-height" style="overflow: hidden">
<AppBox class="surface-1" style="padding: 0"> <PersonCard
<PersonCard :can-edit-profile="infoDrawerEmployeeEdit"
:can-edit-profile="infoDrawerEmployeeEdit" no-hover
no-hover no-action
no-action no-detail
no-detail :data="{
:data="{ name:
name: formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
formDataEmployee.firstName + ' ' + formDataEmployee.lastName, code: formDataEmployee.code,
code: formDataEmployee.code, male: formDataEmployee.gender === 'male',
male: formDataEmployee.gender === 'male', female: formDataEmployee.gender === 'female',
female: formDataEmployee.gender === 'female', img: profileUrl || undefined,
img: profileUrl || undefined, }"
}" :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
:list="infoEmployeePersonCard ? infoEmployeePersonCard : []" :gridColumns="1"
:gridColumns="1" @edit-profile="
@edit-profile=" () => {
() => { inputFile.click();
inputFile.click(); }
} "
" />
/>
</AppBox>
</div> </div>
</template> </template>
<template #information> <template #information>

View file

@ -695,6 +695,46 @@ async function toggleStatusGroup(id: string, status: Status) {
flowStore.rotate(); flowStore.rotate();
} }
async function triggerChangeStatus(
id: string,
status: string,
type?: 'type' | 'group' | 'service' | 'product',
) {
return await new Promise((resolve, reject) => {
dialog({
color: status !== 'INACTIVE' ? 'warning' : 'info',
icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
title: t('confirmChangeStatusTitle'),
actionText:
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
message:
status !== 'INACTIVE'
? t('confirmChangeStatusOffMessage')
: t('confirmChangeStatusOnMessage'),
action: async () => {
if (type === 'group' || productMode.value === 'group') {
await toggleStatusGroup(id, status as Status)
.then(resolve)
.catch(reject);
} else if (type === 'type' || productMode.value === 'type') {
await toggleStatusType(id, status as Status)
.then(resolve)
.catch(reject);
} else if (type === 'service' || productMode.value === 'service') {
await toggleStatusService(id, status as Status)
.then(resolve)
.catch(reject);
} else if (type === 'product' || productMode.value === 'product') {
await toggleStatusProduct(id, status as Status)
.then(resolve)
.catch(reject);
}
},
cancel: () => {},
});
});
}
async function deleteServiceById(serviceId?: string) { async function deleteServiceById(serviceId?: string) {
dialog({ dialog({
color: 'negative', color: 'negative',
@ -1712,15 +1752,17 @@ watch(
@click.stop=" @click.stop="
async () => { async () => {
if (node.type === 'type') { if (node.type === 'type') {
toggleStatusType( triggerChangeStatus(
node.id, node.id,
node.status, node.status,
node.type,
); );
} }
if (node.type === 'group') { if (node.type === 'group') {
toggleStatusGroup( triggerChangeStatus(
node.id, node.id,
node.status, node.status,
node.type,
); );
} }
} }
@ -2175,18 +2217,10 @@ watch(
" "
@click=" @click="
async () => { async () => {
if (productMode === 'type') { triggerChangeStatus(
toggleStatusType( props.row.id,
props.row.id, props.row.status,
props.row.status, );
);
}
if (productMode === 'group') {
toggleStatusGroup(
props.row.id,
props.row.status,
);
}
} }
" "
:model-value=" :model-value="
@ -2225,12 +2259,7 @@ watch(
}[productMode] || 'var(--pink-6-hsl)' }[productMode] || 'var(--pink-6-hsl)'
" "
@toggleStatus=" @toggleStatus="
if (productMode === 'type') { triggerChangeStatus(props.row.id, props.row.status)
toggleStatusType(props.row.id, props.row.status);
}
if (productMode === 'group') {
toggleStatusGroup(props.row.id, props.row.status);
}
" "
@viewCard=" @viewCard="
() => { () => {
@ -3000,18 +3029,11 @@ watch(
" "
@click=" @click="
() => { () => {
if (props.row.type === 'product') { triggerChangeStatus(
toggleStatusProduct( props.row.id,
props.row.id, props.row.status,
props.row.status, props.row.type,
); );
}
if (props.row.type === 'service') {
toggleStatusService(
props.row.id,
props.row.status,
);
}
} }
" "
:model-value=" :model-value="
@ -3038,12 +3060,7 @@ watch(
:isDisabled="row.status === 'INACTIVE' ? true : false" :isDisabled="row.status === 'INACTIVE' ? true : false"
@toggleStatus=" @toggleStatus="
() => { () => {
if (row.type === 'product') { triggerChangeStatus(row.id, row.status, row.type);
toggleStatusProduct(row.id, row.status);
}
if (row.type === 'service') {
toggleStatusService(row.id, row.status);
}
} }
" "
@menuViewDetail=" @menuViewDetail="
@ -3890,13 +3907,21 @@ watch(
async () => { async () => {
if (!currentNode) return; if (!currentNode) return;
if (currentNode.type === 'type') { if (currentNode.type === 'type') {
toggleStatusType(currentNode.id, currentNode.status); triggerChangeStatus(
currentNode.id,
currentNode.status,
currentNode.type,
);
currentNode.status === 'ACTIVE' currentNode.status === 'ACTIVE'
? (currentNode.status = 'INACTIVE') ? (currentNode.status = 'INACTIVE')
: (currentNode.status = 'ACTIVE'); : (currentNode.status = 'ACTIVE');
} }
if (currentNode.type === 'group') { if (currentNode.type === 'group') {
toggleStatusGroup(currentNode.id, currentNode.status); triggerChangeStatus(
currentNode.id,
currentNode.status,
currentNode.type,
);
currentNode.status === 'ACTIVE' currentNode.status === 'ACTIVE'
? (currentNode.status = 'INACTIVE') ? (currentNode.status = 'INACTIVE')
: (currentNode.status = 'ACTIVE'); : (currentNode.status = 'ACTIVE');