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

64 lines
1.9 KiB
Vue

<script
setup
lang="ts"
>
import { computed, inject } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import ExpenseDialogListItem from 'src/modules/timesheets/components/expense-dialog-list-item.vue';
import ExpenseDialogListItemMobile from 'src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue';
// ================== state =======================
const timesheet_store = useTimesheetStore();
const { mode = 'normal' } = defineProps<{
mode?: 'approval' | 'normal';
}>();
// ========================== computed ==========================
const expenses_list = computed(() => {
if (timesheet_store.timesheets !== undefined) {
return timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
}
return [];
})
// ==================== methods ========================
inject( 'employeeEmail', mode === 'approval' ? timesheet_store.current_pay_period_overview?.email : undefined);
</script>
<template>
<!-- liste des dépenses pré existantes -->
<q-list
padding
class="q-px-lg"
>
<q-item-label
v-if="expenses_list.length < 1"
class="text-italic text-center q-pa-sm rounded-4"
>
<q-separator spaced />
{{ $t('timesheet.expense.empty_list') }}
<q-separator spaced />
</q-item-label>
<div
v-for="(expense, index) in expenses_list"
:key="index"
>
<ExpenseDialogListItemMobile
v-if="$q.platform.is.mobile"
v-model="expenses_list[index]!"
/>
<ExpenseDialogListItem
v-else
v-model="expenses_list[index]!"
:index="index"
:mode="mode"
/>
</div>
</q-list>
</template>