210 lines
8.5 KiB
Vue
210 lines
8.5 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import AddModifyDialogFormInput from 'src/modules/employee-list/components/add-modify-dialog-form-input.vue';
|
|
import AddModifyDialogFormSelect from 'src/modules/employee-list/components/add-modify-dialog-form-select.vue';
|
|
|
|
import { ref, computed } from 'vue';
|
|
import { useEmployeeStore } from 'src/stores/employee-store';
|
|
import { type QuasarRules, useEmployeeProfileRules, company_options } from 'src/modules/employee-list/employee-list-utils';
|
|
|
|
const employee_store = useEmployeeStore();
|
|
const last_work_day = computed(() => employee_store.employee.last_work_day ?? '---');
|
|
const is_first_day_picker_open = ref(false);
|
|
const is_last_day_picker_open = ref(false);
|
|
|
|
const form_rules = useEmployeeProfileRules();
|
|
|
|
const supervisor_options = computed(() => {
|
|
const supervisors = employee_store.employee_list.filter(employee => employee.is_supervisor === true && employee.last_work_day === null);
|
|
return supervisors.map(supervisor => supervisor.first_name + ' ' + supervisor.last_name);
|
|
})
|
|
|
|
const setLastWorkDay = (date: string | number | null | undefined) => {
|
|
if (typeof date === 'string' && date.length > 0) {
|
|
employee_store.employee.last_work_day = date;
|
|
}
|
|
employee_store.employee.last_work_day = null;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<q-form>
|
|
<div class="row flex-center">
|
|
<transition
|
|
enter-active-class="animated pulse fast"
|
|
mode="out-in"
|
|
>
|
|
<q-checkbox
|
|
v-model="employee_store.employee.is_supervisor"
|
|
:key="employee_store.employee.is_supervisor ? '1' : '0'"
|
|
dense
|
|
left-label
|
|
:label="$t('employee_list.table.is_supervisor')"
|
|
size="lg"
|
|
color="accent"
|
|
class="col-auto text-uppercase q-py-xs q-px-lg q-ma-xs rounded-25"
|
|
:class="employee_store.employee.is_supervisor ? 'bg-accent text-white text-weight-bold' : ''"
|
|
/>
|
|
</transition>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.sm ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.first_name"
|
|
:label="$t('profile.personal.first_name')"
|
|
:rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.first_name_required'))]"
|
|
/>
|
|
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.last_name"
|
|
:label="$t('profile.personal.last_name')"
|
|
:rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.last_name_required'))]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.sm ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.email"
|
|
:label="$t('profile.employee.email')"
|
|
/>
|
|
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.phone_number"
|
|
:label="$t('profile.personal.phone_number')"
|
|
mask="(###) ### - ####"
|
|
:rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.phone_number_required'))]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.sm ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.job_title"
|
|
:label="$t('profile.employee.job_title')"
|
|
/>
|
|
|
|
<AddModifyDialogFormSelect
|
|
v-model="employee_store.employee.company_name"
|
|
:options="company_options"
|
|
:label="$t('profile.employee.company')"
|
|
:rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.company_required'))]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.sm ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormSelect
|
|
v-model="employee_store.employee.supervisor_full_name"
|
|
:options="supervisor_options"
|
|
:label="$t('profile.employee.supervisor')"
|
|
/>
|
|
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.external_payroll_id"
|
|
:label="$t('profile.employee.bankroll_id')"
|
|
:placeholder="$t('employee_management.can_be_entered_later')"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.sm ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.daily_expected_hours"
|
|
:label="$t('employee_list.table.expected_daily_hours')"
|
|
:rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.daily_hours_required'))]"
|
|
type="number"
|
|
/>
|
|
|
|
<AddModifyDialogFormInput
|
|
v-if="employee_store.employee.paid_time_off"
|
|
v-model="employee_store.employee.paid_time_off.banked_hours"
|
|
:label="$t('employee_management.banked_hours')"
|
|
type="number"
|
|
/>
|
|
|
|
<div
|
|
v-else
|
|
class="col q-px-sm"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.sm ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormInput
|
|
v-if="employee_store.employee.paid_time_off"
|
|
v-model="employee_store.employee.paid_time_off.sick_hours"
|
|
:label="$t('employee_management.sick_hours')"
|
|
type="number"
|
|
@update:model-value="employee_store.employee.paid_time_off.last_updated = new Date().toISOString().slice(0, 10)"
|
|
/>
|
|
|
|
<AddModifyDialogFormInput
|
|
v-if="employee_store.employee.paid_time_off"
|
|
v-model="employee_store.employee.paid_time_off.vacation_hours"
|
|
:label="$t('employee_management.vacation_hours')"
|
|
type="number"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="q-ma-xs"
|
|
:class="$q.screen.lt.md ? 'column' : 'row'"
|
|
>
|
|
<AddModifyDialogFormInput
|
|
v-model="employee_store.employee.first_work_day"
|
|
v-model:is-date-picker-open="is_first_day_picker_open"
|
|
reqires-date-picker
|
|
:label="$t('profile.employee.hired_date')"
|
|
:rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.hire_date_required'))]"
|
|
mask="####-##-##"
|
|
/>
|
|
|
|
<AddModifyDialogFormInput
|
|
v-model="last_work_day"
|
|
v-model:is-date-picker-open="is_last_day_picker_open"
|
|
reqires-date-picker
|
|
:label="$t('profile.employee.fired_date')"
|
|
mask="####-##-##"
|
|
@update:model-value="setLastWorkDay"
|
|
/>
|
|
</div>
|
|
</q-form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.q-field--error .q-field__bottom) {
|
|
color: white;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
border-radius: 0 0 5px 5px;
|
|
padding-top: 0;
|
|
align-items: center;
|
|
background-color: var(--q-negative);
|
|
}
|
|
|
|
:deep(.row > .col) {
|
|
height: fit-content;
|
|
}
|
|
|
|
:deep(.q-field--outlined.q-field--highlighted .q-field__control::after) {
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
</style> |