targo-frontend/src/modules/timesheets/components/expense-dialog.vue

47 lines
1.6 KiB
Vue

<script
setup
lang="ts"
>
import { useExpensesStore } from 'src/stores/expense-store';
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';
const expense_store = useExpensesStore();
</script>
<template>
<q-dialog
v-model="expense_store.is_open"
persistent
transition-show="jump-down"
transition-hide="jump-down"
>
<q-card
class="q-pa-none rounded-10 shadow-10 bg-secondary"
style=" min-width: 70vw;"
>
<q-inner-loading :showing="expense_store.is_loading">
<q-spinner size="32px" />
</q-inner-loading>
<q-card-section class="q-pa-none">
<!-- <q-banner
v-if="expenses_error"
dense
class="bg-red-2 col-auto text-negative q-mt-sm"
>
{{ expenses_error }}
</q-banner> -->
<ExpenseDialogHeader />
<ExpenseDialogList />
<q-slide-transition @hide="expense_store.is_hiding_create_form = true" :duration="200">
<ExpenseDialogForm v-if="!expense_store.current_expense.is_approved && expense_store.mode !== 'update' && expense_store.is_hiding_create_form === false" />
</q-slide-transition>
</q-card-section>
</q-card>
</q-dialog>
</template>