151 lines
5.2 KiB
Vue
151 lines
5.2 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
|
|
import { expenseTypeIcon } from 'src/modules/timesheets/utils/expense.util';
|
|
import { useExpensesStore } from 'src/stores/expense-store';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
|
|
import { default_expense, type Expense } from 'src/modules/timesheets/models/expense.models';
|
|
import { computed, inject } from 'vue';
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
const expenses_store = useExpensesStore();
|
|
const expenses_api = useExpensesApi();
|
|
|
|
const expenses_list = computed(() => timesheet_store.pay_period_details.weeks.flatMap(week =>
|
|
Object.values(week.expenses).flatMap(day => day.expenses)));
|
|
|
|
const employee_email = inject('employeeEmail', '');
|
|
|
|
const setExpenseToModify = (expense: Expense) => {
|
|
expenses_store.mode = 'update';
|
|
expenses_store.current_expense = expense;
|
|
expenses_store.initial_expense = unwrapAndClone(expense);
|
|
};
|
|
|
|
const requestExpenseDeletion = async (expense: Expense) => {
|
|
expenses_store.mode = 'delete';
|
|
expenses_store.initial_expense = expense;
|
|
expenses_store.current_expense = default_expense;
|
|
await expenses_api.deleteExpenseByEmployeeEmail(employee_email, expenses_store.initial_expense.date);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- liste des dépenses pré existantes -->
|
|
<q-list
|
|
padding
|
|
class="rounded-borders"
|
|
>
|
|
<q-item-label
|
|
v-if="expenses_store.pay_period_expenses.expenses.length === 0"
|
|
class="text-italic q-px-sm"
|
|
>
|
|
{{ $t('timesheet.expense.empty_list') }}
|
|
</q-item-label>
|
|
<q-item
|
|
style="border: solid 1px lightgrey; border-radius: 7px;"
|
|
v-for="(expense, index) in expenses_list"
|
|
:key="index"
|
|
class="q-my-xs shadow-1"
|
|
:class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
|
|
>
|
|
<!-- avatar type icon section -->
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:name="expenseTypeIcon(expense.type)"
|
|
color="primary"
|
|
/>
|
|
</q-item-section>
|
|
|
|
<!-- amount or mileage section -->
|
|
<q-item-section top>
|
|
<q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
|
|
<template v-if="typeof expense.mileage === 'number'">
|
|
{{ expense.mileage?.toFixed(1) }} km
|
|
</template>
|
|
<template v-else>
|
|
{{ expense.amount.toFixed(2) }} $
|
|
</template>
|
|
</q-item-label>
|
|
<q-item-label v-else>
|
|
{{ expense.amount.toFixed(2) }} $
|
|
</q-item-label>
|
|
|
|
<!-- date label -->
|
|
<q-item-label
|
|
caption
|
|
lines="2"
|
|
>
|
|
{{ $d(new Date(expense.date), { year: 'numeric', month: 'short', day: 'numeric', weekday: 'short' })
|
|
}}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
<!-- attachment file icon -->
|
|
<q-item-section side>
|
|
<q-btn
|
|
push
|
|
dense
|
|
size="md"
|
|
color="primary"
|
|
class="q-mx-lg"
|
|
icon="attach_file"
|
|
/>
|
|
</q-item-section>
|
|
|
|
<!-- comment section -->
|
|
<q-item-section top>
|
|
<q-item-label lines="1">
|
|
{{ $t('timesheet.expense.employee_comment') }}
|
|
</q-item-label>
|
|
<q-item-label
|
|
caption
|
|
lines="2"
|
|
>
|
|
{{ expense.comment }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
<!-- supervisor comment section -->
|
|
<q-item-section top>
|
|
<q-item-label lines="1">
|
|
{{ $t('timesheet.expense.supervisor_comment') }}
|
|
</q-item-label>
|
|
<q-item-label
|
|
v-if="expense.supervisor_comment"
|
|
caption
|
|
lines="2"
|
|
>
|
|
{{ expense.supervisor_comment }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section
|
|
v-if="!expenses_store.pay_period_expenses.is_approved && !expense.is_approved"
|
|
side
|
|
>
|
|
<q-btn
|
|
push
|
|
dense
|
|
size="xs"
|
|
color="primary"
|
|
icon="edit"
|
|
@click="setExpenseToModify(expense)"
|
|
/>
|
|
|
|
<q-btn
|
|
push
|
|
dense
|
|
size="xs"
|
|
color="negative"
|
|
icon="close"
|
|
@click="requestExpenseDeletion(expense)"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
</template> |