refactor(user-management): slowly add styling to panel and UI/UX adjustments
This commit is contained in:
parent
d8a1a87e98
commit
8dd378fdd1
|
|
@ -21,13 +21,15 @@ export default {
|
|||
timesheets: "timesheets",
|
||||
timesheets_approval: "timesheet approval",
|
||||
user_access: "module access",
|
||||
presets: "access presets",
|
||||
by_role: "by role",
|
||||
by_module: "by module",
|
||||
preset_admin: "administrator",
|
||||
preset_employee: "employee",
|
||||
uncheck_all: "remove all",
|
||||
admin_description: "Check all modules",
|
||||
employee_description: "Only check modules that are relevant to standard employees with no management access",
|
||||
none_description: "Uncheck all modules",
|
||||
usage_description: "You can use roles to enable preset modules, add or remove modules individually, or both",
|
||||
},
|
||||
add_employee: "Add employee",
|
||||
modify_employee: "Modify employee",
|
||||
|
|
|
|||
|
|
@ -14,20 +14,22 @@ export default {
|
|||
|
||||
employee_management: {
|
||||
module_access: {
|
||||
dashboard: "Dashboard",
|
||||
employee_list: "employee list",
|
||||
employee_management: "employee management",
|
||||
personal_profile: "profile",
|
||||
timesheets: "timesheets",
|
||||
timesheets_approval: "timesheet approval",
|
||||
dashboard: "Accueil",
|
||||
employee_list: "Répertoire du personnel",
|
||||
employee_management: "Gestion employés",
|
||||
personal_profile: "profil personnel",
|
||||
timesheets: "carte de temps",
|
||||
timesheets_approval: "validation cartes de temps",
|
||||
user_access: "module access",
|
||||
presets: "access presets",
|
||||
by_role: "par rôle",
|
||||
by_module: "par module",
|
||||
preset_admin: "administrateur",
|
||||
preset_employee: "employé",
|
||||
uncheck_all: "Tout enlever",
|
||||
admin_description: "Selectionner tous les modules",
|
||||
employee_description: "Selectionner seulement les modules qui sont pertinents aux employés sans accès spéciaux",
|
||||
none_description: "Enlever tous les accès",
|
||||
usage_description: "Vous pouvez utiliser les rôles pour sélectionner des modules prédéfinis, enlever ou ajouter des modules individuellement, ou les deux",
|
||||
},
|
||||
add_employee: "Ajouter employé",
|
||||
modify_employee: "Modifier employé",
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
}
|
||||
|
||||
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';
|
||||
|
||||
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';
|
||||
|
|
@ -40,8 +40,19 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row full-width">
|
||||
<div class="column col-3 q-px-md">
|
||||
<div class="row full-width items-start content-start">
|
||||
<div class="column col-3">
|
||||
<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"
|
||||
|
|
@ -78,26 +89,35 @@
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
class="shadow-2 rounded-5 q-ma-sm bg-dark"
|
||||
<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"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-uppercase text-weight-bold">
|
||||
{{ $t('employee_management.module_access.uncheck_all') }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption>
|
||||
{{ $t('employee_management.module_access.none_description') }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
/>
|
||||
</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"
|
||||
|
|
|
|||
|
|
@ -19,16 +19,33 @@
|
|||
@beforeShow="current_step = 'form'"
|
||||
>
|
||||
<q-card
|
||||
class="bg-secondary shadow-10 rounded-10"
|
||||
:style="$q.screen.lt.md ? '' : 'max-width: 70vw !important;'"
|
||||
class="bg-secondary rounded-10"
|
||||
:class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
|
||||
:style="($q.screen.lt.md ? ' ' : 'max-width: 70vw !important; ') +
|
||||
($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
|
||||
>
|
||||
<q-card-section
|
||||
class="text-weight-bolder text-white text-h6 text-uppercase bg-primary text-center shadow-10 q-py-xs"
|
||||
class="text-weight-bolder text-white text-h5 bg-primary text-center shadow-5 q-pa-none"
|
||||
>
|
||||
<span>{{ $t('employee_management.' + employee_store.management_mode) }}</span>
|
||||
<div class="q-py-sm text-uppercase">{{ $t('employee_management.' + employee_store.management_mode) }}</div>
|
||||
<q-slide-transition>
|
||||
<div v-if="current_step === 'access'" class="col-12 row flex-center q-px-sm q-py-xs bg-accent">
|
||||
<q-icon
|
||||
name="info_outline"
|
||||
color="white"
|
||||
size="sm"
|
||||
class="self-end q-mr-sm"
|
||||
/>
|
||||
|
||||
<q-item-label
|
||||
caption
|
||||
class="text-white text-weight-medium"
|
||||
>{{ $t('employee_management.module_access.usage_description') }}</q-item-label>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-card-section class="q-pt-sm">
|
||||
<q-carousel
|
||||
v-model="current_step"
|
||||
transition-prev="slide-right"
|
||||
|
|
@ -37,18 +54,27 @@
|
|||
control-color="accent"
|
||||
class="rounded-10 transparent"
|
||||
>
|
||||
<q-carousel-slide name="form">
|
||||
<div class="rounded-5 q-pb-sm bg-dark">
|
||||
<q-carousel-slide
|
||||
name="form"
|
||||
class="q-pt-none"
|
||||
>
|
||||
<div class="rounded-5 q-pb-sm bg-dark shadow-10">
|
||||
<AddModifyDialogForm />
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
|
||||
<q-carousel-slide name="access">
|
||||
<q-carousel-slide
|
||||
name="access"
|
||||
class="q-pt-none"
|
||||
>
|
||||
<AddModifyDialogAccess />
|
||||
</q-carousel-slide>
|
||||
|
||||
<template #control>
|
||||
<q-carousel-control position="bottom">
|
||||
<q-carousel-control
|
||||
position="bottom"
|
||||
style="margin: none !important;"
|
||||
>
|
||||
<div class="row">
|
||||
<q-btn
|
||||
v-if="current_step === 'access'"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user