targo-frontend/src/modules/employee-list/components/schedule-presets-dialog-row.vue

<script
    setup
    lang="ts"
>
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import type { ShiftOption } from 'src/modules/timesheets/models/shift.models';
    import type { SchedulePresetShift } from '../models/schedule-presets.models';

    const { t } = useI18n();

    const SHIFT_OPTIONS: ShiftOption[] = [
        { label: t('timesheet.shift.types.REGULAR'), value: 'REGULAR', icon: 'wb_sunny', icon_color: 'blue-grey-3' },
        { label: t('timesheet.shift.types.EVENING'), value: 'EVENING', icon: 'bedtime', icon_color: 'indigo-8' },
        { label: t('timesheet.shift.types.EMERGENCY'), value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-8' },
        { label: t('timesheet.shift.types.VACATION'), value: 'VACATION', icon: 'beach_access', icon_color: 'yellow-8' },
        { label: t('timesheet.shift.types.HOLIDAY'), value: 'HOLIDAY', icon: 'forest', icon_color: 'green-8' },
        { label: t('timesheet.shift.types.SICK'), value: 'SICK', icon: 'medication_liquid', icon_color: 'light-blue-6' },
    ];

    const shift = defineModel<SchedulePresetShift>('shift', { required: true });
    const shift_type_selected = ref(SHIFT_OPTIONS[0]);
    
    defineProps<{
        error: boolean;
    }>();

    defineEmits<{
        'clickDelete': [void];
        'blurTimeField': [void];
    }>();
</script>

<template>
    <div class="row col-auto flex-center">
        <div class="col q-pa-xs">
            <q-select
                ref="select"
                v-model="shift_type_selected"
                :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
                dense
                options-dense
                hide-dropdown-icon
                :menu-offset="[0, 10]"
                menu-anchor="bottom middle"
                menu-self="top middle"
                :options="SHIFT_OPTIONS"
                class="col rounded-5 bg-dark weekday-field"
                popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
                popup-content-style="border: 2px solid var(--q-accent)"
                @update:model-value="option => shift.type = option.value"
            >
                <template #selected-item="scope">
                    <div
                        class="row flex-center text-uppercase q-ma-none q-pa-none no-wrap ellipsis full-width"
                        :tabindex="scope.tabindex"
                    >
                        <q-icon
                            :name="scope.opt.icon"
                            :color="scope.opt.icon_color"
                            class="col-auto q-mx-xs"
                        />
                        <span
                            style="line-height: 0.9em;"
                            class="col-auto ellipsis"
                        >{{ scope.opt.label }}</span>
                    </div>
                </template>

                <template #after>
                     <q-toggle
                        v-model="shift.is_remote"
                        dense
                        keep-color
                        size="2.5em"
                        color="accent"
                        icon="las la-building"
                        checked-icon="las la-laptop"
                    >
                        <q-tooltip
                            anchor="top middle"
                            self="bottom middle"
                            :offset="[0, 10]"
                            class="text-uppercase text-weight-medium text-white bg-accent"
                        >
                            {{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
                                $t('timesheet.shift.types.OFFICE') }}
                        </q-tooltip>
                    </q-toggle>
                </template>
            </q-select>
        </div>

        <div class="col q-px-xs">
            <q-input
                v-model="shift.start_time"
                standout
                dense
                hide-bottom-space
                type="time"
                class="text-uppercase weekday-field"
                :error="error"
                @blur="$emit('blurTimeField')"
            >
                <template #prepend>
                    <div
                        class="column text-uppercase text-accent text-weight-bold full-height"
                        style="font-size: 0.5em; transform: translateY(4px);"
                    >
                        {{ $t('shared.misc.in') }} :
                    </div>
                </template>
            </q-input>
        </div>

        <div class="col q-px-xs">
            <q-input
                v-model="shift.end_time"
                standout
                dense
                hide-bottom-space
                type="time"
                class="text-uppercase weekday-field"
                :error="error"
                @blur="$emit('blurTimeField')"
            >
                <template #prepend>
                    <div
                        class="column text-uppercase text-accent text-weight-bold full-height"
                        style="font-size: 0.5em; transform: translateY(4px);"
                    >
                        {{ $t('shared.misc.out') }} :
                    </div>
                </template>
            </q-input>
        </div>

        <div class="col-auto q-px-xs">
            <q-btn
                dense
                push
                color="negative"
                icon="clear"
                size="sm"
                tabindex="-1"
                @click="$emit('clickDelete')"
            />
        </div>
    </div>
</template>

<style scoped>
    :deep(.q-field__native) {
        padding: 0 !important;
    }

    .weekday-field :deep(.q-field__control) {
        height: 25px;
        min-height: 25px;
    }

    .weekday-field :deep(.q-field__marginal) {
        height: 25px;
        min-height: 25px;
    }

    :deep(.q-field--auto-height.q-field--dense .q-field__native) {
        min-height: 25px;
    }
</style>