refactor(approvals): Move save timesheets button to top bar in details dialog. Force timesheet reload when saving any modifications to timesheets.
74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
// ========== state ========================================
|
|
const emit = defineEmits<{
|
|
clickSaveNo: [];
|
|
clickSaveYes: [];
|
|
}>();
|
|
|
|
const timesheetStore = useTimesheetStore();
|
|
|
|
// ========== methods ========================================
|
|
|
|
const onClickSaveOptionButton = (option: 'cancel' | 'no' | 'yes') => {
|
|
switch(option) {
|
|
case 'cancel':
|
|
timesheetStore.isShowingUnsavedWarning = false;
|
|
break;
|
|
case 'no':
|
|
emit('clickSaveNo');
|
|
break;
|
|
case 'yes':
|
|
emit('clickSaveYes');
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog
|
|
v-model="timesheetStore.isShowingUnsavedWarning"
|
|
backdrop-filter="blur(4px)"
|
|
>
|
|
<q-card
|
|
class="bg-dark shadow-12 flex-center"
|
|
style="border: 2px solid var(--q-accent);"
|
|
>
|
|
<div class="column flex-center q-py-sm q-px-md text-center">
|
|
<span class="col-auto text-bold text-uppercase" style="font-size: 1.2em;">
|
|
{{ $t('timesheet.unsaved_changes_title') }}
|
|
</span>
|
|
<span class="">{{ $t('timesheet.unsaved_changes_caption') }}</span>
|
|
</div>
|
|
|
|
<div class="col-auto row full-width">
|
|
<q-btn
|
|
flat
|
|
:label="$t('shared.label.cancel')"
|
|
class="col"
|
|
@click="onClickSaveOptionButton('cancel')"
|
|
/>
|
|
|
|
<q-btn
|
|
flat
|
|
color="negative"
|
|
:label="$t('shared.misc.no')"
|
|
class="col"
|
|
@click="onClickSaveOptionButton('no')"
|
|
/>
|
|
|
|
<q-btn
|
|
flat
|
|
color="accent"
|
|
:label="$t('shared.misc.yes')"
|
|
class="col"
|
|
@click="onClickSaveOptionButton('yes')"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template> |