refactor(timesheet): working on expense list, optimizing class usage
working to refactor expense list and form to instead be q-expansion-items that are part of the same group, will trim a lot of needless code and q-slide-transition use this way.
This commit is contained in:
parent
c5cf6becda
commit
1b4e59b292
|
|
@ -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' : ''"
|
||||
>
|
||||
<!-- date selection input -->
|
||||
<q-input
|
||||
v-model="expenses_store.current_expense.date"
|
||||
dense
|
||||
type="date"
|
||||
borderless
|
||||
readonly
|
||||
stack-label
|
||||
color="primary"
|
||||
class="col-auto q-px-xs"
|
||||
input-class="text-weight-medium"
|
||||
input-style="font-size: 1em;"
|
||||
:label="$t('timesheet.expense.date')"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
icon="event"
|
||||
color="accent"
|
||||
class="q-mr-sm"
|
||||
@click="openDatePicker"
|
||||
/>
|
||||
|
||||
<q-dialog
|
||||
v-model="is_navigator_open"
|
||||
transition-show="jump-right"
|
||||
transition-hide="jump-right"
|
||||
>
|
||||
<q-date
|
||||
v-model="expenses_store.current_expense.date"
|
||||
mask="YYYY-MM-DD"
|
||||
event-color="accent"
|
||||
:options="date => date >= period_start_date && date <= period_end_date"
|
||||
@update:model-value="closeDatePicker"
|
||||
<div class="col q-px-xs">
|
||||
<q-input
|
||||
v-model="expenses_store.current_expense.date"
|
||||
dense
|
||||
standout
|
||||
readonly
|
||||
stack-label
|
||||
color="primary"
|
||||
input-class="text-weight-medium"
|
||||
input-style="font-size: 1em;"
|
||||
:label="$t('timesheet.expense.date')"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
icon="event"
|
||||
color="accent"
|
||||
class="q-mr-sm"
|
||||
@click="openDatePicker"
|
||||
/>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.date') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-dialog
|
||||
v-model="is_navigator_open"
|
||||
transition-show="jump-right"
|
||||
transition-hide="jump-right"
|
||||
>
|
||||
<q-date
|
||||
v-model="expenses_store.current_expense.date"
|
||||
mask="YYYY-MM-DD"
|
||||
event-color="accent"
|
||||
:options="date => date >= period_start_date && date <= period_end_date"
|
||||
@update:model-value="closeDatePicker"
|
||||
/>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.date') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- expenses type selection -->
|
||||
<q-select
|
||||
v-model="expense_selected"
|
||||
standout="bg-blue-grey-9"
|
||||
dense
|
||||
:options="expense_options"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-slot
|
||||
class="col q-px-xs"
|
||||
color="primary"
|
||||
:label="$t('timesheet.expense.type')"
|
||||
:menu-offset="[0, 10]"
|
||||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
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"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.type') }}
|
||||
</span>
|
||||
</template>
|
||||
<div class="col q-px-xs">
|
||||
<q-select
|
||||
v-model="expense_selected"
|
||||
standout
|
||||
dense
|
||||
:options="expense_options"
|
||||
hide-dropdown-icon
|
||||
stack-label
|
||||
label-slot
|
||||
color="primary"
|
||||
:label="$t('timesheet.expense.type')"
|
||||
:menu-offset="[0, 10]"
|
||||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
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"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.type') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #selected-item="scope">
|
||||
<div
|
||||
class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
|
||||
:class="ui_store.is_mobile_mode ? 'full-height' : ''"
|
||||
:tabindex="scope.tabindex"
|
||||
>
|
||||
<q-icon
|
||||
:name="scope.opt.icon"
|
||||
size="xs"
|
||||
class="col-auto q-mx-xs"
|
||||
/>
|
||||
<span
|
||||
style="line-height: 1em;"
|
||||
class="col-auto ellipsis text-uppercase"
|
||||
>{{ scope.opt.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-select>
|
||||
<template #selected-item="scope">
|
||||
<div
|
||||
class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
|
||||
:class="ui_store.is_mobile_mode ? 'full-height' : ''"
|
||||
:tabindex="scope.tabindex"
|
||||
>
|
||||
<q-icon
|
||||
:name="scope.opt.icon"
|
||||
size="xs"
|
||||
class="col-auto q-mx-xs"
|
||||
/>
|
||||
<span
|
||||
style="line-height: 1em;"
|
||||
class="col-auto ellipsis text-uppercase"
|
||||
>{{ scope.opt.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<!-- amount input -->
|
||||
<div v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense?.type ?? 'EXPENSES')">
|
||||
<div class="col q-px-xs">
|
||||
<q-input
|
||||
key="amount"
|
||||
v-model.number="expenses_store.current_expense.amount"
|
||||
standout="bg-blue-grey-9"
|
||||
v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense?.type ?? 'EXPENSES')"
|
||||
v-model="expense_monetary_string"
|
||||
standout
|
||||
dense
|
||||
label-slot
|
||||
stack-label
|
||||
suffix="$"
|
||||
color="primary"
|
||||
class="col-auto q-px-xs"
|
||||
input-class="text-right text-weight-bold"
|
||||
:input-style="'font-size: 1.2em;'"
|
||||
lazy-rules="ondemand"
|
||||
:rules="[rules.amountRequired]"
|
||||
@blur="expenses_store.current_expense.amount = convertToMonetaryAmount(expenses_store.current_expense.amount)"
|
||||
@blur="saveAndConvert()"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
|
|
@ -206,24 +214,22 @@
|
|||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- mileage input -->
|
||||
<div v-else>
|
||||
<q-input
|
||||
v-else
|
||||
key="mileage"
|
||||
v-model.number="expenses_store.current_expense.mileage"
|
||||
standout="bg-blue-grey-9"
|
||||
input-class="text-right"
|
||||
v-model="expenses_store.current_expense.mileage"
|
||||
standout
|
||||
dense
|
||||
stack-label
|
||||
clearable
|
||||
color="primary"
|
||||
class="col q-px-xs"
|
||||
label-slot
|
||||
input-class="text-right"
|
||||
color="primary"
|
||||
suffix="km"
|
||||
lazy-rules="ondemand"
|
||||
:rules="[rules.mileageRequired]"
|
||||
@blur="expenses_store.current_expense.amount = convertToMonetaryAmount(expense_monetary_string)"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
|
|
@ -234,53 +240,55 @@
|
|||
</div>
|
||||
|
||||
<!-- employee comment input -->
|
||||
<q-input
|
||||
v-model="expenses_store.current_expense.comment"
|
||||
standout="bg-blue-grey-9"
|
||||
dense
|
||||
stack-label
|
||||
label-slot
|
||||
color="primary"
|
||||
type="text"
|
||||
class="col q-px-sm"
|
||||
:maxlength="COMMENT_MAX_LENGTH"
|
||||
lazy-rules="ondemand"
|
||||
:rules="[rules.commentRequired]"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.employee_comment') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="col q-px-xs">
|
||||
<q-input
|
||||
v-model="expenses_store.current_expense.comment"
|
||||
standout
|
||||
dense
|
||||
stack-label
|
||||
label-slot
|
||||
color="primary"
|
||||
type="text"
|
||||
:maxlength="COMMENT_MAX_LENGTH"
|
||||
lazy-rules="ondemand"
|
||||
:rules="[rules.commentRequired]"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.employee_comment') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- import attach file section -->
|
||||
<q-file
|
||||
v-model="files"
|
||||
standout="bg-blue-grey-9"
|
||||
dense
|
||||
use-chips
|
||||
multiple
|
||||
stack-label
|
||||
:label="$t('timesheet.expense.hints.attach_file')"
|
||||
class="col"
|
||||
style="max-width: 300px;"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon
|
||||
name="attach_file"
|
||||
size="sm"
|
||||
color="accent"
|
||||
/>
|
||||
</template>
|
||||
<div class="col q-px-xs">
|
||||
<q-file
|
||||
v-model="files"
|
||||
standout
|
||||
dense
|
||||
use-chips
|
||||
multiple
|
||||
stack-label
|
||||
label-slot
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon
|
||||
name="attach_file"
|
||||
size="sm"
|
||||
color="accent"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.hints.attach_file') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-file>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.hints.attach_file') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col row full-width items-center">
|
||||
<q-space />
|
||||
|
||||
|
|
@ -307,4 +315,10 @@
|
|||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-field--standout.q-field--readonly .q-field__control::before) {
|
||||
border: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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<boolean>({ 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<Expense>({ 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 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-item
|
||||
:key="refresh_key"
|
||||
:clickable="horizontal"
|
||||
class="column col-4 items-center q-my-sm q-py-none shadow-3 rounded-5 bg-dark"
|
||||
:class="background_class + approved_class"
|
||||
@click="onExpenseClicked"
|
||||
<q-expansion-item
|
||||
v-model="is_showing_update_form"
|
||||
hide-expand-icon
|
||||
dense
|
||||
group="expenses"
|
||||
class="shadow-3 rounded-5 bg-dark"
|
||||
:class="expense.is_approved ? ' bg-accent text-white' : ''"
|
||||
>
|
||||
<div class="col row fit items-center">
|
||||
<!-- avatar type icon section -->
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:name="getExpenseIcon(expense.type)"
|
||||
:color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'primary')"
|
||||
size="lg"
|
||||
/>
|
||||
</q-item-section>
|
||||
<template #header>
|
||||
<div class="col row items-center full-width">
|
||||
<!-- avatar type icon section -->
|
||||
<div class="col-auto">
|
||||
<q-icon
|
||||
:name="getExpenseIcon(expense.type)"
|
||||
:color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'primary')"
|
||||
size="lg"
|
||||
class="q-px-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- amount or mileage section -->
|
||||
<q-item-section class="col col-md-2 text-weight-bold">
|
||||
<q-item-label v-if="expense.type === 'MILEAGE'">
|
||||
{{ expense.mileage?.toFixed(1) }} km
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
$ {{ expense.amount.toFixed(2) }}
|
||||
</q-item-label>
|
||||
<!-- amount or mileage section -->
|
||||
<div class="col column">
|
||||
<span
|
||||
class="text-weight-bolder"
|
||||
:class="expense.is_approved ? ' bg-accent text-white' : ''"
|
||||
style="font-size: 1.3em;"
|
||||
>
|
||||
{{ expense.type === 'MILEAGE' ? `${expense.mileage?.toFixed(1)} km` : `$
|
||||
${expense.amount.toFixed(2)}` }}
|
||||
</span>
|
||||
|
||||
<!-- date label -->
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
class="text-uppercase text-weight-light"
|
||||
:class="approved_class"
|
||||
>
|
||||
{{ $d(date.extractDate(expense.date, 'YYYY-MM-DD'), {
|
||||
month: 'short', day: 'numeric', weekday:
|
||||
'long'
|
||||
}) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<!-- date label -->
|
||||
<span
|
||||
class="text-uppercase text-weight-light text-caption"
|
||||
:class="expense.is_approved ? ' bg-accent text-white' : ''"
|
||||
>
|
||||
{{ $d(date.extractDate(expense.date, 'YYYY-MM-DD'), {
|
||||
month: 'short', day: 'numeric', weekday:
|
||||
'long'
|
||||
}) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<q-space v-if="horizontal" />
|
||||
<!-- attachment file icon -->
|
||||
<div class="col row items-center justify-start">
|
||||
<q-btn
|
||||
push
|
||||
:color="expense.is_approved ? 'white' : 'accent'"
|
||||
:text-color="expense.is_approved ? 'accent' : 'white'"
|
||||
class="col-auto q-px-sm q-mr-sm"
|
||||
icon="attach_file"
|
||||
/>
|
||||
|
||||
<!-- attachment file icon -->
|
||||
<q-item-section avatar>
|
||||
<q-btn
|
||||
push
|
||||
:color="expense.is_approved ? 'white' : 'accent'"
|
||||
:text-color="expense.is_approved ? 'accent' : 'white'"
|
||||
class="col-auto q-mx-sm q-px-sm q-pb-sm"
|
||||
icon="attach_file"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-label class="col">
|
||||
attachment_name.jpg
|
||||
</q-item-label>
|
||||
</div>
|
||||
|
||||
<q-item-label class="col text-weight-light text-caption">
|
||||
<span>attachment_goes_here.jpg</span>
|
||||
</q-item-label>
|
||||
<!-- comment section -->
|
||||
<div class="col column">
|
||||
<span class="col-auto text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.employee_comment') }}
|
||||
</span>
|
||||
|
||||
<!-- comment section -->
|
||||
<q-item-section
|
||||
v-if="!horizontal"
|
||||
top
|
||||
>
|
||||
<q-item-label
|
||||
lines="1"
|
||||
class="text-weight-medium text-uppercase"
|
||||
>
|
||||
{{ $t('timesheet.expense.employee_comment') }}
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
:class="approved_class"
|
||||
>
|
||||
{{ expense.comment }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<span
|
||||
class="col"
|
||||
:class="expense.is_approved ? ' bg-accent text-white' : ''"
|
||||
style="font-size: 1.3em;"
|
||||
>
|
||||
{{ expense.comment }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- supervisor comment section -->
|
||||
<q-item-section
|
||||
v-if="is_authorized_to_approve"
|
||||
top
|
||||
>
|
||||
<q-item-label
|
||||
lines="1"
|
||||
class="text-weight-medium text-uppercase"
|
||||
>
|
||||
{{ $t('timesheet.expense.supervisor_comment') }}
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
<!-- supervisor comment section -->
|
||||
<div
|
||||
v-if="expense.supervisor_comment"
|
||||
caption
|
||||
lines="2"
|
||||
class="col column"
|
||||
>
|
||||
{{ expense.supervisor_comment }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<span class="col-auto text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.supervisor_comment') }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="col"
|
||||
:class="expense.is_approved ? ' bg-accent text-white' : ''"
|
||||
style="font-size: 1.3em;"
|
||||
>
|
||||
{{ expense.supervisor_comment }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<q-item-section
|
||||
:key="refresh_key"
|
||||
side
|
||||
:class="is_current_expense ? 'invisible' : ''"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="lg"
|
||||
icon="edit"
|
||||
color="accent"
|
||||
:disable="expense.is_approved"
|
||||
class="q-py-none z-top"
|
||||
:class="expense.is_approved ? 'invisible no-pointer' : ''"
|
||||
@click.stop="onUpdateClicked"
|
||||
/>
|
||||
</q-item-section>
|
||||
<div
|
||||
class="col-auto row"
|
||||
:class="is_current_expense ? 'invisible' : ''"
|
||||
>
|
||||
<q-icon
|
||||
v-if="expense.is_approved"
|
||||
name="verified"
|
||||
color="white"
|
||||
size="lg"
|
||||
/>
|
||||
|
||||
<q-item-section
|
||||
side
|
||||
:class="is_current_expense ? 'invisible' : ''"
|
||||
>
|
||||
<q-icon
|
||||
v-if="expense.is_approved"
|
||||
name="verified"
|
||||
color="white"
|
||||
size="lg"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
flat
|
||||
dense
|
||||
size="lg"
|
||||
icon="close"
|
||||
color="negative"
|
||||
class="q-py-none z-top q-my-xs"
|
||||
@click.stop="requestExpenseDeletion"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<q-btn
|
||||
v-else
|
||||
flat
|
||||
dense
|
||||
size="lg"
|
||||
icon="close"
|
||||
color="negative"
|
||||
class="q-py-none z-top q-my-xs"
|
||||
@click.stop="requestExpenseDeletion"
|
||||
/>
|
||||
</q-item-section>
|
||||
</div>
|
||||
|
||||
<q-slide-transition
|
||||
@hide="expenses_store.mode === 'update' ? null : expenses_store.is_hiding_create_form = false"
|
||||
:duration="200"
|
||||
>
|
||||
<ExpenseDialogForm
|
||||
v-if="is_current_expense && expenses_store.is_hiding_create_form"
|
||||
@on-click-update-cancel="onUpdateClicked"
|
||||
@on-click-save-updates="onSaveUpdatesClicked"
|
||||
/>
|
||||
</q-slide-transition>
|
||||
</q-item>
|
||||
<ExpenseDialogForm
|
||||
@on-click-update-cancel="is_showing_update_form = false"
|
||||
@on-click-save-updates="onSaveUpdatesClicked"
|
||||
/>
|
||||
</q-expansion-item>
|
||||
</template>
|
||||
|
|
@ -51,10 +51,8 @@
|
|||
|
||||
<ExpenseDialogListItem
|
||||
v-else
|
||||
v-model="expense.is_approved"
|
||||
v-model="expenses_list[index]!"
|
||||
:index="index"
|
||||
:expense="expense"
|
||||
:horizontal="horizontal"
|
||||
/>
|
||||
</div>
|
||||
</q-list>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user