refactor(timesheet): Implement refactor of select and input fields from freeswitch-ui branch
This commit is contained in:
Nic D
parent
1271d1eb61
commit
4ab271e66f
77
src/modules/shared/components/targo-input.vue
Normal file
77
src/modules/shared/components/targo-input.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
>
|
||||
const model = defineModel<string | number | null | undefined>({ required: true });
|
||||
const is_date_picker_open = defineModel<boolean>('isDatePickerOpen', {default: false});
|
||||
|
||||
defineProps<{
|
||||
label?: string | undefined;
|
||||
requiresDatePicker?: boolean | undefined;
|
||||
maxLength?: number;
|
||||
noTopPadding?: boolean;
|
||||
backgroundColor?: 'bg-secondary' | 'bg-dark';
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="col q-px-sm"
|
||||
:class="noTopPadding ? '' : 'q-pt-md'"
|
||||
>
|
||||
<q-input
|
||||
v-model="model"
|
||||
dense
|
||||
borderless
|
||||
color="accent"
|
||||
label-color="white"
|
||||
stack-label
|
||||
label-slot
|
||||
no-error-icon
|
||||
hide-bottom-space
|
||||
:maxlength="maxLength"
|
||||
class="q-px-md rounded-5 inset-shadow"
|
||||
:class="$q.dark.isActive ? 'bg-primary' : (backgroundColor ?? 'bg-secondary')"
|
||||
:style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
|
||||
>
|
||||
<template #label>
|
||||
<span
|
||||
class="text-weight-bold text-uppercase q-px-md"
|
||||
:class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #append v-if="requiresDatePicker">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
size="lg"
|
||||
icon="calendar_month"
|
||||
color="accent"
|
||||
@click="is_date_picker_open = true"
|
||||
>
|
||||
<q-dialog
|
||||
v-model="is_date_picker_open"
|
||||
backdrop-filter="none"
|
||||
>
|
||||
<q-date
|
||||
v-model="model"
|
||||
mask="YYYY-MM-DD"
|
||||
color="accent"
|
||||
@update:model-value="is_date_picker_open = false"
|
||||
/>
|
||||
</q-dialog>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-field--dense.q-field--float .q-field__label) {
|
||||
transform: translate(-17px, -60%) scale(0.75);
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
</style>
|
||||
54
src/modules/shared/components/targo-select.vue
Normal file
54
src/modules/shared/components/targo-select.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
>
|
||||
const model = defineModel<string>({ required: true });
|
||||
|
||||
defineProps<{
|
||||
label?: string | undefined;
|
||||
options: string[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col q-px-sm q-pt-md">
|
||||
<q-select
|
||||
v-model="model"
|
||||
dense
|
||||
borderless
|
||||
color="accent"
|
||||
label-color="white"
|
||||
stack-label
|
||||
label-slot
|
||||
:options="options"
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
hide-bottom-space
|
||||
options-selected-class="text-white text-bold bg-accent"
|
||||
class="q-px-md rounded-5 inset-shadow"
|
||||
:class="$q.dark.isActive ? 'bg-primary' : 'bg-secondary'"
|
||||
popup-content-class="text-uppercase text-weight-medium rounded-5 shadow-12 z-top"
|
||||
popup-content-style="border: 1px solid var(--q-primary)"
|
||||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
:menu-offset="[0, 5]"
|
||||
:style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
|
||||
>
|
||||
<template #label>
|
||||
<span
|
||||
class="text-weight-medium text-uppercase q-px-sm no-pointer-events"
|
||||
:class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-field--dense.q-field--float .q-field__label) {
|
||||
transform: translate(-17px, -60%) scale(0.75) !important;
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
setup
|
||||
lang="ts"
|
||||
>
|
||||
import TargoInput from 'src/modules/shared/components/targo-input.vue';
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useUiStore } from 'src/stores/ui-store';
|
||||
|
|
@ -90,79 +92,76 @@
|
|||
@submit.prevent="requestExpenseCreationOrUpdate"
|
||||
>
|
||||
<div
|
||||
class="row justify-between items-start rounded-5 q-pb-sm"
|
||||
class="row justify-between rounded-5 q-pb-sm"
|
||||
:class="expenseStore.mode === 'create' ? 'q-px-lg' : ''"
|
||||
>
|
||||
<!-- date selection input -->
|
||||
<div class="col q-px-xs">
|
||||
<q-input
|
||||
v-model="expenseStore.current_expense.date"
|
||||
<div class="row col items-center">
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
standout
|
||||
readonly
|
||||
stack-label
|
||||
color="primary"
|
||||
input-class="text-weight-medium"
|
||||
input-style="font-size: 1em;"
|
||||
:label="$t('timesheet.expense.date')"
|
||||
icon="event"
|
||||
color="accent"
|
||||
class="col-auto"
|
||||
@click="openDatePicker"
|
||||
/>
|
||||
|
||||
<q-dialog
|
||||
v-model="isNavigatorOpen"
|
||||
transition-show="jump-right"
|
||||
transition-hide="jump-right"
|
||||
class="z-top"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
push
|
||||
dense
|
||||
icon="event"
|
||||
color="accent"
|
||||
class="q-mr-sm"
|
||||
@click="openDatePicker"
|
||||
/>
|
||||
<q-date
|
||||
v-model="expenseStore.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>
|
||||
|
||||
<q-dialog
|
||||
v-model="isNavigatorOpen"
|
||||
transition-show="jump-right"
|
||||
transition-hide="jump-right"
|
||||
class="z-top"
|
||||
>
|
||||
<q-date
|
||||
v-model="expenseStore.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>
|
||||
<TargoInput
|
||||
v-model="expenseStore.current_expense.date"
|
||||
no-top-padding
|
||||
:label="$t('timesheet.expense.date')"
|
||||
background-color="bg-dark"
|
||||
class="col"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- expenses type selection -->
|
||||
<div class="col q-px-xs">
|
||||
<div class="col">
|
||||
<q-select
|
||||
v-model="expenseSelected"
|
||||
standout
|
||||
dense
|
||||
:options="expenseOptions"
|
||||
hide-dropdown-icon
|
||||
borderless
|
||||
color="accent"
|
||||
label-color="white"
|
||||
stack-label
|
||||
label-slot
|
||||
color="primary"
|
||||
:label="$t('timesheet.expense.type')"
|
||||
:menu-offset="[0, 10]"
|
||||
:options="expenseOptions"
|
||||
hide-dropdown-icon
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
hide-bottom-space
|
||||
options-selected-class="text-white text-bold bg-accent"
|
||||
class="q-px-md rounded-5 inset-shadow"
|
||||
:class="$q.dark.isActive ? 'bg-primary' : 'bg-dark'"
|
||||
popup-content-class="text-uppercase text-weight-medium rounded-5 shadow-12 z-top"
|
||||
popup-content-style="border: 1px solid var(--q-primary);"
|
||||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
popup-content-class="text-uppercase text-weight-bold text-center rounded-5 z-top"
|
||||
options-selected-class="text-weight-bolder text-white bg-accent"
|
||||
popup-content-style="border: 2px solid var(--q-accent)"
|
||||
:menu-offset="[0, 5]"
|
||||
:style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
|
||||
:rules="[rules.typeRequired]"
|
||||
@update:model-value="option => expenseStore.current_expense.type = option.value"
|
||||
>
|
||||
<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.type') }}
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -189,72 +188,32 @@
|
|||
|
||||
<!-- amount input -->
|
||||
<div class="col q-px-xs">
|
||||
<q-input
|
||||
<TargoInput
|
||||
v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenseStore.current_expense?.type ?? 'EXPENSES')"
|
||||
v-model.number="expenseStore.current_expense.amount"
|
||||
standout
|
||||
dense
|
||||
label-slot
|
||||
stack-label
|
||||
suffix="$"
|
||||
type="number"
|
||||
color="primary"
|
||||
input-class="text-right text-weight-medium"
|
||||
input-style="font-size: 1.3em;"
|
||||
lazy-rules="ondemand"
|
||||
:rules="[rules.amountRequired]"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.amount') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
no-top-padding
|
||||
background-color="bg-dark"
|
||||
:label="$t('timesheet.expense.amount')"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
<TargoInput
|
||||
v-else
|
||||
v-model="expenseStore.current_expense.mileage"
|
||||
standout
|
||||
dense
|
||||
label-slot
|
||||
stack-label
|
||||
suffix="km"
|
||||
type="number"
|
||||
input-class="text-right text-weight-medium"
|
||||
input-style="font-size: 1.3em;"
|
||||
color="primary"
|
||||
lazy-rules="ondemand"
|
||||
:rules="[rules.mileageRequired]"
|
||||
>
|
||||
<template #label>
|
||||
<span class="text-weight-bold text-accent text-uppercase text-caption">
|
||||
{{ $t('timesheet.expense.mileage') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
no-top-padding
|
||||
background-color="bg-dark"
|
||||
:label="$t('timesheet.expense.mileage')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- employee comment input -->
|
||||
<div class="col q-px-xs">
|
||||
<q-input
|
||||
<TargoInput
|
||||
v-model="expenseStore.current_expense.comment"
|
||||
standout
|
||||
dense
|
||||
stack-label
|
||||
label-slot
|
||||
color="primary"
|
||||
input-class="text-weight-medium"
|
||||
input-style="font-size: 1.3em;"
|
||||
: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>
|
||||
no-top-padding
|
||||
background-color="bg-dark"
|
||||
:max-length="COMMENT_MAX_LENGTH"
|
||||
:label="$t('timesheet.expense.employee_comment')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- import attach file section -->
|
||||
|
|
@ -303,8 +262,12 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-field--standout.q-field--readonly .q-field__control::before) {
|
||||
border: transparent;
|
||||
<style
|
||||
scoped
|
||||
lang="css"
|
||||
>
|
||||
:deep(.q-field--dense.q-field--float .q-field__label) {
|
||||
transform: translate(-17px, -60%) scale(0.75) !important;
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user