118 lines
4.8 KiB
Vue
118 lines
4.8 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import AddModifyDialogForm from 'src/modules/employee-list/components/add-modify-dialog-form.vue';
|
|
import AddModifyDialogAccess from 'src/modules/employee-list/components/add-modify-dialog-access.vue';
|
|
import AddModifyDialogSchedule from 'src/modules/employee-list/components/add-modify-dialog-schedule.vue';
|
|
|
|
import { ref } from 'vue';
|
|
import { useEmployeeStore } from 'src/stores/employee-store';
|
|
import { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
|
|
|
|
const employee_store = useEmployeeStore();
|
|
const current_step = ref<'form' | 'access' | 'schedule'>('form');
|
|
const initial_employee_profile = ref(new EmployeeProfile)
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog
|
|
v-model="employee_store.is_add_modify_dialog_open"
|
|
full-width
|
|
@beforeShow="current_step = 'form'"
|
|
@show="Object.assign(initial_employee_profile, employee_store.employee)"
|
|
class="shadow-24"
|
|
>
|
|
<div
|
|
class="column bg-secondary rounded-10 no-wrap"
|
|
:class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
|
|
:style="($q.screen.lt.md ? ' ' : 'max-width: 60vw !important; height: 60vh') +
|
|
($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
|
|
>
|
|
<div class="row col-auto text-white bg-primary flex-center shadow-5">
|
|
<div class="q-py-sm text-uppercase text-weight-bolder text-h5 ">
|
|
{{ $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"
|
|
>
|
|
{{ `${employee_store.employee.first_name} ${employee_store.employee.last_name}` }}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col column q-pa-md no-wrap scroll">
|
|
<q-tabs
|
|
v-model="current_step"
|
|
dense
|
|
inline-label
|
|
align="justify"
|
|
indicator-color="transparent"
|
|
active-class="text-white bg-accent"
|
|
class="q-mb-sm"
|
|
>
|
|
<q-tab
|
|
name="form"
|
|
icon="las la-id-card"
|
|
:label="$q.screen.lt.sm ? '' : $t('employee_management.details_label')"
|
|
class="rounded-25 q-ma-xs"
|
|
style="border: 2px solid var(--q-accent);"
|
|
/>
|
|
<q-tab
|
|
name="access"
|
|
icon="las la-key"
|
|
:label="$q.screen.lt.sm ? '' : $t('employee_management.access_label')"
|
|
class="rounded-25 q-ma-xs"
|
|
style="border: 2px solid var(--q-accent);"
|
|
/>
|
|
<q-tab
|
|
name="schedule"
|
|
icon="calendar_month"
|
|
:label="$q.screen.lt.sm ? '' : $t('employee_management.schedule_label')"
|
|
class="rounded-25 q-ma-xs"
|
|
style="border: 2px solid var(--q-accent);"
|
|
/>
|
|
</q-tabs>
|
|
|
|
<q-tab-panels
|
|
v-model="current_step"
|
|
animated
|
|
:transition-prev="$q.screen.lt.sm ? 'jump-down' : 'jump-left'"
|
|
:transition-next="$q.screen.lt.sm ? 'jump-up' : 'jump-right'"
|
|
class="bg-transparent full-height"
|
|
>
|
|
<q-tab-panel
|
|
name="form"
|
|
class="q-pa-xs"
|
|
>
|
|
<AddModifyDialogForm />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel
|
|
name="access"
|
|
class="q-pa-xs"
|
|
>
|
|
<AddModifyDialogAccess />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel
|
|
name="schedule"
|
|
class="q-pa-xs"
|
|
>
|
|
<AddModifyDialogSchedule />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
|
|
<q-btn
|
|
square
|
|
color="accent"
|
|
:label="employee_store.management_mode === 'add_employee' ? $t('shared.label.save') : $t('shared.label.update')"
|
|
class="col-auto q-py-sm shadow-up-5"
|
|
@click="employee_store.createOrUpdateEmployee(employee_store.employee)"
|
|
/>
|
|
</div>
|
|
</q-dialog>
|
|
</template> |