86 lines
3.2 KiB
Vue
86 lines
3.2 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
|
|
import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';
|
|
import ExpenseDialogHeader from 'src/modules/timesheets/components/expense-dialog-header.vue';
|
|
import ExpenseDialogFormMobile from 'src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue';
|
|
import ExpenseDialogAttachmentViewer from 'src/modules/timesheets/components/expense-dialog-attachment-viewer.vue';
|
|
|
|
import { date } from 'quasar';
|
|
import { useExpensesStore } from 'src/stores/expense-store';
|
|
import { Expense } from 'src/modules/timesheets/models/expense.models';
|
|
import { ref } from 'vue';
|
|
|
|
const expense_store = useExpensesStore();
|
|
const refreshKey = ref(0);
|
|
|
|
const { isApproved = false } = defineProps<{
|
|
isApproved?: boolean;
|
|
}>();
|
|
|
|
const onClickExpenseCreate = () => {
|
|
expense_store.mode = 'create';
|
|
expense_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
|
refreshKey.value += 1
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog
|
|
v-model="expense_store.is_open"
|
|
persistent
|
|
:full-width="$q.platform.is.mobile"
|
|
backdrop-filter="blur(6px)"
|
|
transition-show="jump-down"
|
|
transition-hide="jump-down"
|
|
>
|
|
<ExpenseDialogAttachmentViewer class="z-top" />
|
|
|
|
<q-card
|
|
class="q-pa-none rounded-10 shadow-24 bg-secondary"
|
|
style=" min-width: 70vw;"
|
|
:style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
|
|
>
|
|
<q-inner-loading :showing="expense_store.is_loading">
|
|
<q-spinner size="32px" />
|
|
</q-inner-loading>
|
|
|
|
<q-card-section class="q-pa-none">
|
|
<ExpenseDialogHeader />
|
|
|
|
<ExpenseDialogList />
|
|
|
|
<q-expansion-item
|
|
v-if="!isApproved"
|
|
v-model="expense_store.is_showing_create_form"
|
|
hide-expand-icon
|
|
:dense="!$q.platform.is.mobile"
|
|
group="expenses"
|
|
@before-show="onClickExpenseCreate()"
|
|
header-class="bg-accent text-white"
|
|
>
|
|
<template #header>
|
|
<div class="row items-center">
|
|
<q-icon
|
|
name="add_circle_outline"
|
|
size="md"
|
|
class="col-auto"
|
|
:class="expense_store.is_showing_create_form ? 'invisible' : ''"
|
|
/>
|
|
|
|
<span class="col-auto text-uppercase text-weight-bold text-h6 q-ml-xs q-mr-sm">
|
|
{{ $t('timesheet.expense.add_expense') }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<ExpenseDialogFormMobile v-if="$q.platform.is.mobile" />
|
|
|
|
<ExpenseDialogForm v-else :key="refreshKey" :refresh-key="refreshKey" />
|
|
</q-expansion-item>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template> |