louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(user-management): slowly add styling to panel and UI/UX adjustments

Browse Source
This commit is contained in:
Nicolas Drolet 2025-12-02 17:07:06 -05:00
parent d8a1a87e98
commit 8dd378fdd1
4 changed files with 87 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/i18n/en-ca/index.ts
View File

@ -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",

16
src/i18n/fr-ca/index.ts
View File

@ -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é",

52
src/modules/employee-list/components/employee/add-modify-dialog-access.vue
View File

@ -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"

44
src/modules/employee-list/components/employee/add-modify-dialog.vue
View File

@ -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'"