meeting time
This commit is contained in:
parent
8dd378fdd1
commit
8368702490
|
|
@ -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 class="q-py-sm text-uppercase">{{ $t('employee_management.' + employee_store.management_mode) }}</div>
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="employee_store.employee.first_name.length > 0"
|
||||||
|
class="text-uppercase text-weight-light text-h6 q-ml-sm"
|
||||||
|
>
|
||||||
|
{{ `${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,61 +63,50 @@
|
||||||
</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
|
|
||||||
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"
|
|
||||||
class="q-pt-none"
|
|
||||||
>
|
|
||||||
<AddModifyDialogAccess />
|
|
||||||
</q-carousel-slide>
|
|
||||||
|
|
||||||
<template #control>
|
|
||||||
<q-carousel-control
|
|
||||||
position="bottom"
|
|
||||||
style="margin: none !important;"
|
|
||||||
>
|
>
|
||||||
<div class="row">
|
<div
|
||||||
<q-btn
|
v-if="current_step === 'form'"
|
||||||
v-if="current_step === 'access'"
|
class="rounded-5 q-pb-sm bg-dark shadow-10"
|
||||||
flat
|
>
|
||||||
size="lg"
|
<AddModifyDialogForm />
|
||||||
color="accent"
|
|
||||||
icon="arrow_back"
|
|
||||||
:label="$t('employee_management.details_label')"
|
|
||||||
@click="current_step = 'form'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-space />
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
v-if="current_step === 'form'"
|
|
||||||
flat
|
|
||||||
size="lg"
|
|
||||||
color="accent"
|
|
||||||
icon-right="arrow_forward"
|
|
||||||
:label="$t('employee_management.access_label')"
|
|
||||||
@click="current_step = 'access'"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</q-carousel-control>
|
|
||||||
</template>
|
<AddModifyDialogAccess v-else />
|
||||||
</q-carousel>
|
</transition>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row col-auto">
|
||||||
|
<q-btn
|
||||||
|
v-if="current_step === 'access'"
|
||||||
|
flat
|
||||||
|
size="lg"
|
||||||
|
color="accent"
|
||||||
|
icon="arrow_back"
|
||||||
|
:label="$t('employee_management.details_label')"
|
||||||
|
@click="getNextMenu('fadeInLeft', 'fadeOutRight', 'form')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
v-if="current_step === 'form'"
|
||||||
|
flat
|
||||||
|
size="lg"
|
||||||
|
color="accent"
|
||||||
|
icon-right="arrow_forward"
|
||||||
|
:label="$t('employee_management.access_label')"
|
||||||
|
@click="getNextMenu('fadeInRight', 'fadeOutLeft', 'access')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<q-inner-loading :showing="employee_store.is_loading" />
|
<q-inner-loading :showing="employee_store.is_loading" />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user