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

56 lines
1.6 KiB
Vue

<script
setup
lang="ts"
>
import { computed } 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';
const timesheet_store = useTimesheetStore();
const { horizontal = false } = defineProps<{
horizontal?: boolean;
}>();
const expenses_list = computed(() => {
if (timesheet_store.timesheets !== undefined) {
return timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
}
return [];
})
</script>
<template>
<!-- liste des dépenses pré existantes -->
<q-list
padding
class="q-px-lg"
:class="horizontal ? 'row flex-center' : ''"
>
<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"
/>
</div>
</q-list>
</template>