refactor(timesheet): complete overhaul of expense UI, fix functionality in approval module.
This commit is contained in:
Nic D.
parent
4ab271e66f
commit
9213a42d6b
|
|
@ -11,7 +11,12 @@
|
|||
maxLength?: number;
|
||||
noTopPadding?: boolean;
|
||||
backgroundColor?: 'bg-secondary' | 'bg-dark';
|
||||
appendContent?: string | number;
|
||||
}>();
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -21,6 +26,7 @@
|
|||
>
|
||||
<q-input
|
||||
v-model="model"
|
||||
v-bind="$attrs"
|
||||
dense
|
||||
borderless
|
||||
color="accent"
|
||||
|
|
@ -43,7 +49,11 @@
|
|||
</span>
|
||||
</template>
|
||||
|
||||
<template #append v-if="requiresDatePicker">
|
||||
<template
|
||||
#append
|
||||
v-if="requiresDatePicker || !!appendContent"
|
||||
>
|
||||
<div v-if="requiresDatePicker">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
|
|
@ -64,6 +74,15 @@
|
|||
/>
|
||||
</q-dialog>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!!appendContent"
|
||||
class="self-end text-uppercase text-bold text-accent"
|
||||
style="font-size: 0.8em;"
|
||||
>
|
||||
{{ appendContent }}
|
||||
</div>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@
|
|||
<ExpenseDialogForm
|
||||
:email="timesheetStore.current_pay_period_overview?.email"
|
||||
:key="refreshKey"
|
||||
mode="approval"
|
||||
@click-save="onClickSaveNewExpense"
|
||||
/>
|
||||
</q-expansion-item>
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@
|
|||
<template>
|
||||
<div class="full-width">
|
||||
<LoadingOverlay v-model="timesheetStore.is_loading" />
|
||||
|
||||
<q-table
|
||||
dense
|
||||
row-key="email"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
const file = defineModel<File>('file');
|
||||
const { email } = defineProps<{
|
||||
email?: string | undefined;
|
||||
mode?: 'normal' | 'approval';
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
'clickSave': [void];
|
||||
|
|
@ -91,12 +92,10 @@
|
|||
flat
|
||||
@submit.prevent="requestExpenseCreationOrUpdate"
|
||||
>
|
||||
<div
|
||||
class="row justify-between rounded-5 q-pb-sm"
|
||||
:class="expenseStore.mode === 'create' ? 'q-px-lg' : ''"
|
||||
>
|
||||
<div class="column rounded-5 q-pb-sm">
|
||||
<div class="row">
|
||||
<!-- date selection input -->
|
||||
<div class="row col items-center">
|
||||
<div class="row col items-center q-pl-sm">
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
|
|
@ -187,26 +186,34 @@
|
|||
</div>
|
||||
|
||||
<!-- amount input -->
|
||||
<div class="col q-px-xs">
|
||||
<div class="col">
|
||||
<TargoInput
|
||||
v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenseStore.current_expense?.type ?? 'EXPENSES')"
|
||||
v-model.number="expenseStore.current_expense.amount"
|
||||
no-top-padding
|
||||
background-color="bg-dark"
|
||||
type="number"
|
||||
input-class="text-right"
|
||||
append-content=" $"
|
||||
:label="$t('timesheet.expense.amount')"
|
||||
/>
|
||||
|
||||
<TargoInput
|
||||
v-else
|
||||
v-model="expenseStore.current_expense.mileage"
|
||||
v-model.number="expenseStore.current_expense.mileage"
|
||||
no-top-padding
|
||||
background-color="bg-dark"
|
||||
type="number"
|
||||
input-class="text-right"
|
||||
append-content=" km"
|
||||
:label="$t('timesheet.expense.mileage')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pt-md">
|
||||
<!-- employee comment input -->
|
||||
<div class="col q-px-xs">
|
||||
<div class="col">
|
||||
<TargoInput
|
||||
v-model="expenseStore.current_expense.comment"
|
||||
no-top-padding
|
||||
|
|
@ -216,18 +223,36 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="mode === 'approval'"
|
||||
class="col"
|
||||
>
|
||||
<TargoInput
|
||||
v-model="expenseStore.current_expense.supervisor_comment"
|
||||
no-top-padding
|
||||
background-color="bg-dark"
|
||||
:max-length="COMMENT_MAX_LENGTH"
|
||||
:label="$t('timesheet.expense.supervisor_comment')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- import attach file section -->
|
||||
<div class="col q-px-xs">
|
||||
<div class="col-3 q-px-sm">
|
||||
<q-file
|
||||
v-model="file"
|
||||
standout
|
||||
dense
|
||||
borderless
|
||||
color="accent"
|
||||
label-color="white"
|
||||
stack-label
|
||||
label-slot
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="q-px-md rounded-5 inset-shadow"
|
||||
:class="$q.dark.isActive ? 'bg-primary' : 'bg-dark'"
|
||||
:style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
|
||||
>
|
||||
<template #prepend>
|
||||
<template #append>
|
||||
<q-icon
|
||||
name="attach_file"
|
||||
size="sm"
|
||||
|
|
@ -236,13 +261,17 @@
|
|||
</template>
|
||||
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
<span
|
||||
class="text-weight-medium text-uppercase q-px-sm no-pointer-events"
|
||||
:class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
|
||||
>
|
||||
{{ $t('timesheet.expense.hints.attach_file') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col row full-width items-center">
|
||||
<q-space />
|
||||
|
|
|
|||
|
|
@ -244,6 +244,7 @@
|
|||
<ExpenseDialogForm
|
||||
v-model="expense"
|
||||
:email="getEmployeeEmail()"
|
||||
:mode="mode"
|
||||
@click-save="hideUpdateForm"
|
||||
/>
|
||||
</q-expansion-item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user