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

<script
    setup
    lang="ts"
>
    import { ref } from 'vue';
    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import { employee_access_options, type ModuleAccessPreset, employee_access_presets, getEmployeeAccessOptionIcon } from 'src/modules/employee-list/models/employee-profile.models';
    import type { UserModuleAccess } from 'src/modules/shared/models/user.models';

    const employee_store = useEmployeeStore();
    const preset_preview = ref<ModuleAccessPreset>();

    const toggleInSelected = (value: UserModuleAccess) => {
        const i = employee_store.employee.user_module_access.indexOf(value);
        if (i === -1) employee_store.employee.user_module_access.push(value);
        else employee_store.employee.user_module_access.splice(i, 1);
    }

    const applyAccessPreset = (preset: ModuleAccessPreset) => {
        employee_store.employee.user_module_access = unwrapAndClone(employee_access_presets[preset]);
    }


    const getPreviewBackgroundColor = (name: UserModuleAccess) => {
        if (employee_access_presets[preset_preview.value!].includes(name)) {
            if (!employee_store.employee.user_module_access.includes(name)) return 'bg-info text-white';

            return 'bg-accent text-white';
        }

        if (employee_store.employee.user_module_access.includes(name)) return 'bg-negative text-white';

        return 'bg-dark';
    };

    const getBackgroundColor = (name: UserModuleAccess) => {
        if (employee_store.employee.user_module_access.includes(name)) return 'bg-accent text-white';

        return 'bg-dark';
    };
</script>

<template>
    <div class="column full-width items-start content-start overflow-hidden-y">
        <!-- warning when all modules are disabled -->
        <div class="col-auto row flex-center q-px-lg q-py-xs full-width">
            <q-slide-transition>
                <div
                    v-if="employee_store.employee.user_module_access.length === 0"
                    class="row flex-center q-px-md q-py-xs bg-dark"
                    style="border: 2px solid var(--q-warning);"
                >
                    <q-icon 
                        name="las la-exclamation-triangle"
                        color="warning"
                        size="sm"
                    />

                    <span class="text-warning text-weight-medium q-px-sm">{{ $t('employee_list.errors.no_modules_warning') }}</span>

                    <q-icon 
                        name="las la-exclamation-triangle"
                        color="warning"
                        size="sm"
                    />
                </div>
            </q-slide-transition>
        </div>

        <!-- info line explaining how to customize access -->
        <div class="col-auto row flex-center q-px-sm q-py-xs no-wrap">
            <q-icon
                name="info_outline"
                size="sm"
                color="accent"
                class="col-auto q-mr-sm"
            />

            <q-item-label
                caption
                class="col-auto text-weight-medium"
            >{{ $t('employee_management.module_access.usage_description') }}</q-item-label>
        </div>

        <div
            class="col"
            :class="$q.platform.is.mobile ? 'column' : 'row'"
        >
            <!-- column to attribute access by roles -->
            <div class="column col-4 overflow-hidden-y q-pr-sm">
                <span class="text-uppercase text-weight-medium q-mx-sm">
                    {{ $t('employee_management.module_access.by_role') }}
                </span>

                <q-separator
                    size="2px"
                    color="accent"
                    class="q-mx-sm"
                    style="transform: translateY(-4px);"
                />

                <q-item
                    clickable
                    class="shadow-2 rounded-5 q-ma-sm bg-dark"
                    @click="applyAccessPreset('admin')"
                    @mouseover="preset_preview = 'admin'"
                    @mouseleave="preset_preview = undefined"
                >
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">
                            {{ $t('employee_management.module_access.preset_admin') }}
                        </q-item-label>

                        <q-item-label caption>
                            {{ $t('employee_management.module_access.admin_description') }}
                        </q-item-label>
                    </q-item-section>
                </q-item>

                <q-item
                    clickable
                    class="shadow-2 rounded-5 q-ma-sm bg-dark"
                    @click="applyAccessPreset('employee')"
                    @mouseover="preset_preview = 'employee'"
                    @mouseleave="preset_preview = undefined"
                >
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">
                            {{ $t('employee_management.module_access.preset_employee') }}
                        </q-item-label>

                        <q-item-label caption>
                            {{ $t('employee_management.module_access.employee_description') }}
                        </q-item-label>
                    </q-item-section>
                </q-item>

                <q-btn
                    flat
                    color="negative"
                    icon="clear"
                    size="md"
                    align="left"
                    :label="$t('employee_management.module_access.uncheck_all')"
                    class="q-ma-sm q-px-xs rounded-5"
                    @click="applyAccessPreset('none')"
                    @mouseover="preset_preview = 'none'"
                    @mouseleave="preset_preview = undefined"
                />
            </div>

            <div class="row col items-start content-start q-pl-sm">
                <div class="col-12 q-mb-xs">
                    <span class="text-uppercase text-weight-medium q-mx-sm">
                        {{ $t('employee_management.module_access.by_module') }}
                    </span>

                    <q-separator
                        size="2px"
                        color="accent"
                        class="q-mx-sm"
                        style="transform: translateY(-4px);"
                    />
                </div>
                <div
                    v-for="option in employee_access_options"
                    :key="option.label"
                    class="col-lg-6 col-sm-12 col-xs-12 q-pa-xs"
                >
                    <div
                        class="row full-width cursor-pointer flex-center q-pa-sm rounded-5 no-wrap shadow-5"
                        :class="preset_preview !== undefined ? getPreviewBackgroundColor(option.value) : getBackgroundColor(option.value)"
                        @click="toggleInSelected(option.value)"
                    >
                        <q-icon
                            :name="getEmployeeAccessOptionIcon(option.value)"
                            size="sm"
                            class="q-mr-sm"
                        />
                        <span class="text-uppercase text-weight-bold non-selectable">
                            {{ $t('employee_management.module_access.' + option.value) }}
                        </span>
                        <q-space />
                        <q-icon
                            :name="employee_store.employee.user_module_access.includes(option.value) ? 'check' : ''"
                            size="sm"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>