Merge pull request 'fix(timesheet-approval): fix issue where expense wouldn't show correct expense type an refuse to update' (#66) from dev/nicolas/staging-prep into main

Reviewed-on: Targo/targo_frontend#66

src/modules/timesheets/components/expense-dialog-form.vue

@@ -33,6 +33,8 @@
     const period_start_date = computed(() => timesheet_store.pay_period?.period_start.replaceAll('-', '/') ?? '');
     const period_end_date = computed(() => timesheet_store.pay_period?.period_end.replaceAll('-', '/') ?? '');
 
+    const expense = defineModel<Expense>({ default: new Expense(new Date().toISOString().slice(0, 10)) })
+
     const expense_options: ExpenseOption[] = [
         { label: t('timesheet.expense.types.PER_DIEM'), value: 'PER_DIEM', icon: getExpenseIcon('PER_DIEM') },
         { label: t('timesheet.expense.types.EXPENSES'), value: 'EXPENSES', icon: getExpenseIcon('EXPENSES') },
@@ -55,6 +57,9 @@
     }
 
     const requestExpenseCreationOrUpdate = async () => {
+        if (expenses_store.mode === 'update')
+            await expenses_api.upsertExpense(expenses_store.current_expense, timesheet_store.current_pay_period_overview?.email);
+        else
             await expenses_api.upsertExpense(expenses_store.current_expense);
 
         expenses_store.is_showing_create_form = true;
@@ -63,13 +68,18 @@
     };
 
     onMounted(() => {
-        expense_selected.value = expense_options.find(expense => expense.value === expenses_store.current_expense.type);
+        if (expense.value)
+            expense_selected.value = expense_options.find(expense_option => expense_option.value === expense.value.type);
+        else
+            expense_selected.value = expense_options[1];
+
+        console.log('expense mount triggered: current expense type is ', expenses_store.current_expense.type, ', matching option is: ', expense_selected.value);
     })
 </script>
 
 <template>
     <q-form
-        v-if="!timesheet_store.timesheets?.every(timesheet => timesheet.is_approved)"
+        v-if="!expenses_store.current_expense.is_approved"
         flat
         @submit.prevent="requestExpenseCreationOrUpdate"
         class="full-width q-mt-md q-px-md"
@@ -288,7 +298,7 @@
 </template>
 
 <style scoped>
-:deep(.q-field--standout.q-field--readonly .q-field__control::before) {
+    :deep(.q-field--standout.q-field--readonly .q-field__control::before) {
         border: transparent;
-}
+    }
 </style>

src/modules/timesheets/components/expense-dialog-list-item.vue

@@ -212,6 +212,6 @@
             </div>
         </template>
 
-        <ExpenseDialogForm />
+        <ExpenseDialogForm v-model="expense" />
     </q-expansion-item>
 </template>

src/modules/timesheets/composables/use-expense-api.ts

@@ -8,18 +8,19 @@ export const useExpensesApi = () => {
     const expenses_store = useExpensesStore();
     const timesheet_store = useTimesheetStore();
 
-    const upsertExpense = async (expense: Expense): Promise<void> => {
+    const upsertExpense = async (expense: Expense, employee_email?: string): Promise<void> => {
-        const success = await expenses_store.upsertExpense(expense);
+        const success = await expenses_store.upsertExpense(expense, employee_email);
+        
         if (success) {
             expenses_store.current_expense = new Expense(date.formatDate( new Date(), 'YYYY-MM-DD'));
-            timesheet_store.getTimesheetsByOptionalEmployeeEmail();
+            timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
         }   
     };
 
-    const deleteExpenseById = async (expense_id: number): Promise<void> => {
+    const deleteExpenseById = async (expense_id: number, employee_email?: string): Promise<void> => {
         const success = await expenses_store.deleteExpenseById(expense_id);
         if (success) {
-            timesheet_store.getTimesheetsByOptionalEmployeeEmail();
+            timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
         }   
     };
 

src/modules/timesheets/composables/use-shift-api.ts

@@ -1,18 +1,16 @@
-import { useAuthStore } from "src/stores/auth-store";
 import { useShiftStore } from "src/stores/shift-store";
 import { useTimesheetStore } from "src/stores/timesheet-store";
 
 export const useShiftApi = () => {
     const timesheet_store = useTimesheetStore();
     const shift_store = useShiftStore();
-    const auth_store = useAuthStore();
 
     const deleteShiftById = async (shift_id: number, employee_email?: string) => {
         timesheet_store.is_loading = true;
         const success = await shift_store.deleteShiftById(shift_id, employee_email);
 
         if (success) {
-            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(auth_store.user?.email ?? '');
+            await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
         }
 
         timesheet_store.is_loading = false;