targo-frontend/src/modules/employee-list/components/add-modify-dialog-schedule.vue

<script
    setup
    lang="ts"
>
    import SchedulePresetsDialog from 'src/modules/employee-list/components/schedule-presets-dialog.vue';
    import AddModifyDialogSchedulePreview from './add-modify-dialog-schedule-preview.vue';

    import { useI18n } from 'vue-i18n';
    import { onMounted, ref } from 'vue';
    import { useSchedulePresetsStore } from 'src/stores/schedule-presets.store';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import { useEmployeeListApi } from '../composables/use-employee-api';
    import type { PresetManagerMode } from 'src/modules/employee-list/models/schedule-presets.models';
    import type { QSelectOption } from 'quasar';

    // ========== state ========================================

    const { t } = useI18n();
    const schedule_preset_store = useSchedulePresetsStore();
    const employee_store = useEmployeeStore();
    const employee_list_api = useEmployeeListApi();

    const preset_options = ref<QSelectOption<number>[]>([]);
    const selected_preset = ref<QSelectOption<number>>({ label: '', value: -1 });

    // ========== methods ========================================

    const getPresetOptions = (): QSelectOption<number>[] => {
        const options: QSelectOption<number>[] = [{ label: t('shared.label.empty'), value: -1 }];
        schedule_preset_store.schedule_presets.forEach(preset => {
            options.push({ label: preset.name, value: preset.id })
        });
        options.push({ label: '', value: 0 });

        return options;
    };

    const onClickSchedulePresetManager = (mode: PresetManagerMode, preset_id?: number) => {
        schedule_preset_store.schedule_preset_dialog_mode = mode;
        schedule_preset_store.openSchedulePresetManager(preset_id ?? selected_preset.value.value);
    }

    const loadSelectedPresetOption = () => {
        preset_options.value = getPresetOptions();
        const employee = employee_store.employee;

        if (!employee.preset_id)
            selected_preset.value = preset_options.value[0]!;
        
        else
            selected_preset.value = preset_options.value.find(opt => 
                opt.value === employee.preset_id
            )!;

        schedule_preset_store.setCurrentSchedulePreset(selected_preset.value.value);
        schedule_preset_store.schedule_preset_dialog_mode = undefined;
    };

    onMounted(() => {
        loadSelectedPresetOption();
    });
</script>

<template>
    <div
        :key="schedule_preset_store.isManagerOpen === false ? '0' : '1'"
        class="column full-width flex-center items-start"
    >
        <SchedulePresetsDialog @on-close="loadSelectedPresetOption" />

        <div class="col row flex-center full-width no-wrap">
            <q-select
                v-model="selected_preset"
                :options="getPresetOptions()"
                standout="bg-primary"
                dense
                options-dense
                rounded
                color="accent"
                menu-anchor="bottom middle"
                menu-self="top middle"
                :menu-offset="[0, 5]"
                class="col-xs-10 col-md-7"
                popup-content-class="text-uppercase text-weight-medium rounded-20 shadow-24"
                popup-content-style="border: 2px solid var(--q-primary)"
                style="font-size: 1.4em;"
                @update:modelValue="option => employee_list_api.setSchedulePreset(option.value)"
            >
                <template #selected>
                    <span
                        class="text-uppercase text-center text-weight-bold full-width"
                        :style="selected_preset.label === undefined ? 'opacity: 0.5;' : ''"
                    >
                        {{ selected_preset.label === undefined ?
                            $t('employee_management.schedule_presets.preset_list_placeholder') :
                            selected_preset.label }}
                    </span>
                </template>

                <template #option="scope">
                    <q-item
                        v-if="scope.opt.value !== 0"
                        v-bind="scope.itemProps"
                        class="row flex-center"
                        style="font-size: 1.2em;"
                    >
                        <div class="col">
                            <span>{{ scope.label }}</span>
                        </div>

                        <div
                            v-if="scope.opt.value > 0"
                            class="row items-center no-wrap"
                        >

                            <!-- edit currently-selected preset -->
                            <div class="col-auto q-px-sm">
                                <q-btn
                                    flat
                                    dense
                                    icon="edit"
                                    color="accent"
                                    @click.stop="onClickSchedulePresetManager('update', scope.opt.value)"
                                />
                            </div>

                            <!-- copy currently-selected preset -->
                            <div class="col-auto">
                                <q-btn
                                    flat
                                    dense
                                    icon="content_copy"
                                    color="accent"
                                    @click.stop="onClickSchedulePresetManager('copy', scope.opt.value)"
                                />
                            </div>

                            <!-- delete currently-selected preset -->
                            <div class="col-auto q-px-xs">
                                <q-btn
                                    flat
                                    dense
                                    color="negative"
                                    icon="las la-trash"
                                    class="q-py-none"
                                    @click.stop="onClickSchedulePresetManager('delete', scope.opt.value)"
                                />
                            </div>
                        </div>
                    </q-item>

                    <q-item
                        v-else
                        class="q-pa-none"
                    >
                        <q-btn
                            square
                            icon="add"
                            size="md"
                            color="accent"
                            class="full-width q-py-none"
                            :label="$t('shared.label.add')"
                            style="font-size: 1.2em;"
                            @click.stop="onClickSchedulePresetManager('create', -1)"
                        />
                    </q-item>
                </template>
            </q-select>
        </div>

        <AddModifyDialogSchedulePreview :current-preset-id="selected_preset.value" />
    </div>
</template>