fix(timesheet): resolve issue with mobile expenses and timesheet presets.

fix issue with mobile version of expense dialog where select menu for expense type was refusing to show on screen due to z-index behavior. switch q-select options dialog to menu behavior instead of dialog

fix issue with timesheet presets not applying correctly due to user email being sent as query param on timesheet inadvertedly, which is a route reserved for timesheet approval module

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

@@ -11,7 +11,7 @@
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
     import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
     import { Expense, type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-import { useAuthStore } from 'src/stores/auth-store';
+    import { useAuthStore } from 'src/stores/auth-store';
 
     // ================= state ======================
 

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

@@ -2,19 +2,20 @@
     setup
     lang="ts"
 >
-    import { computed, ref } from 'vue';
+    import { computed, ref, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { useUiStore } from 'src/stores/ui-store';
     import { useExpensesStore } from 'src/stores/expense-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
     import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
-    import { type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
+    import { Expense, type ExpenseOption, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
-import { useAuthStore } from 'src/stores/auth-store';
+    import { useAuthStore } from 'src/stores/auth-store';
 
     const COMMENT_MAX_LENGTH = 280;
 
-    const file = defineModel<File | undefined>();
+    const expense = defineModel<Expense>({ default: new Expense(new Date().toISOString().slice(0, 10)) })
+    const file = defineModel<File | undefined>('file');
 
     const { employeeEmail } = defineProps<{
         employeeEmail?: string;
@@ -53,6 +54,13 @@ import { useAuthStore } from 'src/stores/auth-store';
         if (file.value)
             await expenses_api.upsertExpense(expenses_store.current_expense, file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL');
     };
+
+    onMounted(() => {
+        if (expense.value)
+            expense_selected.value = expense_options.find(expense_option => expense_option.value === expense.value.type);
+        else
+            expense_selected.value = expense_options[1];
+    })
 </script>
 
 <template>
@@ -66,9 +74,8 @@ import { useAuthStore } from 'src/stores/auth-store';
             class="col column items-start rounded-5 q-pb-sm"
             :class="expenses_store.is_showing_create_form ? 'q-px-md' : 'q-px-sm'"
         >
-            <!-- date and type row -->
+            <!-- date selection input -->
-            <div class="col row q-my-xs full-width">
+            <div class="col-auto row q-my-xs full-width">
-                <!-- date selection input -->
                 <q-input
                     v-model="expenses_store.current_expense.date"
                     dense
@@ -77,7 +84,7 @@ import { useAuthStore } from 'src/stores/auth-store';
                     stack-label
                     hide-bottom-space
                     color="primary"
-                    class="col-auto q-mr-sm"
+                    class="col-auto full-width"
                     input-class="text-weight-medium"
                     input-style="font-size: 1em;"
                     :label="$t('timesheet.expense.date')"
@@ -114,8 +121,10 @@ import { useAuthStore } from 'src/stores/auth-store';
                         </span>
                     </template>
                 </q-input>
+            </div>
 
-                <!-- expenses type selection -->
+            <!-- expenses type selection -->
+            <div class="col-auto row q-my-xs full-width">
                 <q-select
                     v-model="expense_selected"
                     standout="bg-blue-grey-9 text-white"
@@ -127,12 +136,12 @@ import { useAuthStore } from 'src/stores/auth-store';
                     hide-bottom-space
                     class="col"
                     color="primary"
+                    behavior="menu"
+                    :menu-offset="[0, 5]"
                     :label="$t('timesheet.expense.type')"
-                    :menu-offset="[0, 10]"
+                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5 z-top"
-                    menu-anchor="bottom middle"
+                    popup-content-style="border: 3px solid var(--q-accent)"
-                    menu-self="top middle"
+                    options-selected-class="text-weight-bolder text-white bg-accent"
-                    popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
-                    popup-content-style="border: 2px solid var(--q-accent)"
                     :rules="[rules.typeRequired]"
                     @update:model-value="option => expenses_store.current_expense.type = option.value"
                 >