feat: add cancel button functionality and improve close tab logic in task order views

This commit is contained in:
puriphatt 2025-02-24 16:38:43 +07:00
parent 3732aa9bf5
commit f12c9e9df6
2 changed files with 28 additions and 13 deletions

View file

@ -1209,19 +1209,19 @@ watch(
{{ $t('general.view', { msg: $t('general.example') }) }}
</MainButton>
<div class="row" style="gap: var(--size-2)">
<UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
<CancelButton
v-if="state.mode !== 'edit'"
:label="$t('dialog.action.close')"
outlined
@click="closeTab()"
/>
<template
v-if="
fullTaskOrder?.taskOrderStatus === TaskOrderStatus.Pending ||
state.mode === 'create'
"
>
<UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
<CancelButton
@click="closeTab()"
:label="$t('dialog.action.close')"
v-if="state.mode === 'info'"
outlined
/>
<SaveButton
v-if="state.mode && ['create', 'edit'].includes(state.mode)"
@click="() => formDocument.submit()"

View file

@ -3,9 +3,10 @@ import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { computed, onMounted, ref, watch } from 'vue';
import { getUserId } from 'src/services/keycloak';
import { useI18n } from 'vue-i18n';
// NOTE: Import Components
import { SaveButton } from 'src/components/button';
import { SaveButton, CancelButton } from 'src/components/button';
import { StateButton } from 'components/button';
import InfoMessengerExpansion from '../expansion/receive/InfoMessengerExpansion.vue';
import InfoProductExpansion from '../expansion/receive/InfoProductExpansion.vue';
@ -31,6 +32,7 @@ import { useTaskOrderStore } from 'src/stores/task-order';
const route = useRoute();
const taskOrderFormStore = useTaskOrderForm();
const { t } = useI18n();
const { currentFormData, state, fullTaskOrder } =
storeToRefs(taskOrderFormStore);
@ -342,6 +344,16 @@ function sortList(
});
}
async function closeTab() {
dialogWarningClose(t, {
message: t('dialog.message.close'),
action: () => {
window.close();
},
cancel: () => {},
});
}
onMounted(async () => {
initTheme();
initLang();
@ -756,12 +768,15 @@ watch([currentFormData.value.taskStatus], () => {
<!-- SEC: footer -->
<footer
v-if="fullTaskOrder.taskOrderStatus !== TaskOrderStatus.Pending"
class="surface-1 q-pa-md full-width"
>
<nav class="row justify-end">
<footer class="surface-1 q-pa-md full-width">
<nav class="row justify-end" style="gap: var(--size-2)">
<CancelButton
:label="$t('dialog.action.close')"
outlined
@click="closeTab()"
/>
<SaveButton
v-if="fullTaskOrder.taskOrderStatus !== TaskOrderStatus.Pending"
:disabled="
fullTaskOrder.taskList.some(
(t) =>