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

meeting time

Browse Source
This commit is contained in:
Nicolas Drolet 2025-12-03 09:04:05 -05:00
parent 8dd378fdd1
commit 8368702490
1 changed files with 66 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,14 @@
const employee_store = useEmployeeStore(); const employee_store = useEmployeeStore();
const current_step = ref<'form' | 'access'>('form'); const current_step = ref<'form' | 'access'>('form');
const transition_in_animation = ref('fadeInRight');
const transition_out_animation = ref('fadeOutLeft');
const getNextMenu = (animation_in: string, animation_out: string, next_step: 'form' | 'access') => {
transition_in_animation.value = animation_in;
transition_out_animation.value = animation_out;
current_step.value = next_step;
};
</script> </script>
<template> <template>
@ -21,15 +29,24 @@
<q-card <q-card
class="bg-secondary rounded-10" class="bg-secondary rounded-10"
:class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'" :class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
:style="($q.screen.lt.md ? ' ' : 'max-width: 70vw !important; ') + :style="($q.screen.lt.md ? ' ' : 'max-width: 70vw !important; height: 50vh') +
($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')" ($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
> >
<q-card-section <q-card-section class="row text-weight-bolder text-white text-h5 bg-primary flex-center shadow-5 q-pa-none">
class="text-weight-bolder text-white text-h5 bg-primary text-center shadow-5 q-pa-none" <div class="q-py-sm text-uppercase">
{{ $t('employee_management.' + employee_store.management_mode) }}
</div>
<div
v-if="employee_store.employee.first_name.length > 0"
class="text-uppercase text-weight-light text-h6 q-ml-sm"
> >
<div class="q-py-sm text-uppercase">{{ $t('employee_management.' + employee_store.management_mode) }}</div> {{ `${employee_store.employee.first_name} ${employee_store.employee.last_name}` }}
</div>
<q-slide-transition> <q-slide-transition>
<div v-if="current_step === 'access'" class="col-12 row flex-center q-px-sm q-py-xs bg-accent"> <div
v-if="current_step === 'access'"
class="col-12 row flex-center q-px-sm q-py-xs bg-accent"
>
<q-icon <q-icon
name="info_outline" name="info_outline"
color="white" color="white"
@ -46,36 +63,27 @@
</q-card-section> </q-card-section>
<q-card-section class="q-pt-sm"> <q-card-section class="q-pt-sm">
<q-carousel <div class="full-height column">
v-model="current_step" <div class="col">
transition-prev="slide-right" <transition
transition-next="slide-left" :enter-active-class="'animated ' + transition_in_animation"
animated :leave-active-class="'animated ' + transition_out_animation"
control-color="accent" mode="out-in"
class="rounded-10 transparent"
> >
<q-carousel-slide <div
name="form" v-if="current_step === 'form'"
class="q-pt-none" class="rounded-5 q-pb-sm bg-dark shadow-10"
> >
<div class="rounded-5 q-pb-sm bg-dark shadow-10">
<AddModifyDialogForm /> <AddModifyDialogForm />
</div> </div>
</q-carousel-slide>
<q-carousel-slide <AddModifyDialogAccess v-else />
name="access" </transition>
class="q-pt-none" </div>
>
<AddModifyDialogAccess />
</q-carousel-slide>
<template #control>
<q-carousel-control
position="bottom" <div class="row col-auto">
style="margin: none !important;"
>
<div class="row">
<q-btn <q-btn
v-if="current_step === 'access'" v-if="current_step === 'access'"
flat flat
@ -83,7 +91,7 @@
color="accent" color="accent"
icon="arrow_back" icon="arrow_back"
:label="$t('employee_management.details_label')" :label="$t('employee_management.details_label')"
@click="current_step = 'form'" @click="getNextMenu('fadeInLeft', 'fadeOutRight', 'form')"
/> />
<q-space /> <q-space />
@ -95,12 +103,10 @@
color="accent" color="accent"
icon-right="arrow_forward" icon-right="arrow_forward"
:label="$t('employee_management.access_label')" :label="$t('employee_management.access_label')"
@click="current_step = 'access'" @click="getNextMenu('fadeInRight', 'fadeOutLeft', 'access')"
/> />
</div> </div>
</q-carousel-control> </div>
</template>
</q-carousel>
</q-card-section> </q-card-section>
<q-inner-loading :showing="employee_store.is_loading" /> <q-inner-loading :showing="employee_store.is_loading" />