diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue index 846bcc0..325ea56 100644 --- a/src/modules/timesheets/components/expense-dialog-form.vue +++ b/src/modules/timesheets/components/expense-dialog-form.vue @@ -35,13 +35,15 @@ const period_end_date = computed(() => timesheet_store.pay_period?.period_end.replaceAll('-', '/') ?? ''); 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')}, - {label: t('timesheet.expense.types.MILEAGE'), value: 'MILEAGE', icon: getExpenseIcon('MILEAGE')}, - {label: t('timesheet.expense.types.ON_CALL'), value: 'ON_CALL', icon: getExpenseIcon('ON_CALL')}, + { 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') }, + { label: t('timesheet.expense.types.MILEAGE'), value: 'MILEAGE', icon: getExpenseIcon('MILEAGE') }, + { label: t('timesheet.expense.types.ON_CALL'), value: 'ON_CALL', icon: getExpenseIcon('ON_CALL') }, ] const expense_selected = ref(expense_options.find(expense => expense.value == expenses_store.current_expense.type)); + const expense_monetary_string = ref(expenses_store.current_expense.amount.toString()); + const emit = defineEmits<{ 'onClickUpdateCancel': [void]; 'onClickSaveUpdates': [void]; @@ -61,13 +63,19 @@ const requestExpenseCreationOrUpdate = async () => { await expenses_api.upsertExpense(expenses_store.current_expense); - + if (expenses_store.current_expense.id) { emit('onClickSaveUpdates'); } }; + const saveAndConvert = () => { + expenses_store.current_expense.amount = convertToMonetaryAmount(expense_monetary_string.value); + expense_monetary_string.value = expenses_store.current_expense.amount.toString(); + console.log('current expense amount: ', expenses_store.current_expense.amount); + } + watch(expenses_store.current_expense, () => { is_initial_expense.value = deepEqual(expenses_store.current_expense, expenses_store.initial_expense); }); @@ -92,113 +100,113 @@ :class="expenses_store.mode === 'create' ? 'q-px-lg' : ''" > - - + + + + - - +
+ + - - + + +
-
+
-
- -
\ No newline at end of file + + + \ No newline at end of file diff --git a/src/modules/timesheets/components/expense-dialog-list-item.vue b/src/modules/timesheets/components/expense-dialog-list-item.vue index 7fe6277..a6be764 100644 --- a/src/modules/timesheets/components/expense-dialog-list-item.vue +++ b/src/modules/timesheets/components/expense-dialog-list-item.vue @@ -2,60 +2,25 @@ setup lang="ts" > - import { date } from 'quasar'; - import { computed, ref, toRaw } from 'vue'; - import { unwrapAndClone } from 'src/utils/unwrap-and-clone'; - import { deepEqual } from 'src/utils/deep-equal'; - import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api'; - import { useExpensesStore } from 'src/stores/expense-store'; - import { getExpenseIcon } from 'src/modules/timesheets/utils/expense.util'; - import { useAuthStore } from 'src/stores/auth-store'; - import { CAN_APPROVE_PAY_PERIODS } from 'src/modules/shared/models/user.models'; - import { Expense } from 'src/modules/timesheets/models/expense.models'; import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue'; - const { expense, horizontal = false } = defineProps<{ - expense: Expense; - index: number; - horizontal?: boolean; - }>(); - const is_approved = defineModel({ required: true }); + import { date } from 'quasar'; + import { computed, ref } from 'vue'; + import { useExpensesStore } from 'src/stores/expense-store'; + import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api'; + import { getExpenseIcon } from 'src/modules/timesheets/utils/expense.util'; + import { Expense } from 'src/modules/timesheets/models/expense.models'; + + const expense = defineModel({ required: true }); const expenses_store = useExpensesStore(); - const auth_store = useAuthStore(); const expenses_api = useExpensesApi(); - const refresh_key = ref(1); - const background_class = computed(() => deepEqual(expense, expenses_store.current_expense) ? '' : ''); - const approved_class = computed(() => expense.is_approved ? ' bg-accent text-white' : '') - const is_authorized_to_approve = computed(() => CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')) const is_showing_update_form = ref(false); - const is_current_expense = computed(() => expense.id === expenses_store.current_expense.id); + const is_current_expense = computed(() => expense.value.id === expenses_store.current_expense.id); const requestExpenseDeletion = async () => { - await expenses_api.deleteExpenseById(expense.id); - } - - const onExpenseClicked = () => { - if (is_authorized_to_approve.value) { - is_approved.value = !is_approved.value; - refresh_key.value += 1; - } - } - - const onUpdateClicked = () => { - if (deepEqual(expense, expenses_store.current_expense)) { - expenses_store.mode = 'create'; - Object.assign(expense, toRaw(expenses_store.initial_expense)) - expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')); - is_showing_update_form.value = false; - return; - } - - expenses_store.mode = 'update'; - expenses_store.current_expense = expense; - expenses_store.initial_expense = unwrapAndClone(expense); - is_showing_update_form.value = true; + await expenses_api.deleteExpenseById(expense.value.id); } const onSaveUpdatesClicked = () => { @@ -66,155 +31,126 @@ \ No newline at end of file diff --git a/src/modules/timesheets/components/expense-dialog-list.vue b/src/modules/timesheets/components/expense-dialog-list.vue index 207f2cf..ab1ea90 100644 --- a/src/modules/timesheets/components/expense-dialog-list.vue +++ b/src/modules/timesheets/components/expense-dialog-list.vue @@ -51,10 +51,8 @@
diff --git a/src/modules/timesheets/utils/expense.util.ts b/src/modules/timesheets/utils/expense.util.ts index 80d18cd..6cbb182 100644 --- a/src/modules/timesheets/utils/expense.util.ts +++ b/src/modules/timesheets/utils/expense.util.ts @@ -27,17 +27,25 @@ export const useExpenseRules = (t: (_key: string) => string) => { export const convertToMonetaryAmount = (amount: number | string): number => { if (typeof amount === 'number') return Number(amount.toFixed(2)); - + if (typeof amount === 'string') { try { - const single_decimal_amount = amount.replace(/\.(?=.*\.)/g, ''); - const numbers_only_decimal = single_decimal_amount.replace(/[^0-9.]/g, ''); - - return Number(numbers_only_decimal); - } catch(error) { + let cleaned_amount = amount.replace(/[^\d.]/g, ''); + const first_dot = cleaned_amount.indexOf('.'); + + if (first_dot !== -1) { + cleaned_amount = + cleaned_amount.slice(0, first_dot + 1) + + cleaned_amount + .slice(first_dot + 1, first_dot + 3) + .replace(/\./g, ''); + } + + return Number(cleaned_amount); + } catch (error) { console.error(error); } } - return 0; + return 0; }; \ No newline at end of file