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, type ModuleAccessName, employee_access_presets } from 'src/modules/employee-list/models/employee-profile.models';

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

    const toggleInSelected = (value: ModuleAccessName) => {
        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: ModuleAccessName) => {
        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: ModuleAccessName) => {
        if (employee_store.employee.user_module_access.includes(name)) return 'bg-accent text-white';

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

<template>
    <div class="row full-width items-start content-start overflow-hidden-y">
        <div class="col-12 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="column col-3 overflow-hidden-y">
            <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="col-xs-0 col-sm-1"></div>

        <div class="row col items-start content-start">
            <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)"
                >
                    <span class="text-uppercase text-weight-bold">
                        {{ $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>
</template>