109 lines
3.7 KiB
Vue
109 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { deepEqual } from 'src/utils/deep-equal';
|
|
import ProfileInputField from 'src/modules/profile/components/shared/profile-panel-input-field.vue';
|
|
import ProfileSelectField from 'src/modules/profile/components/shared/profile-panel-select-field.vue';
|
|
import { type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';
|
|
|
|
const { employeeProfile } = defineProps<{
|
|
employeeProfile: EmployeeProfile;
|
|
}>();
|
|
|
|
let initial_info: EmployeeProfile = employeeProfile;
|
|
let employee_form_data = ref<EmployeeProfile>({ ...employeeProfile });
|
|
const is_editing = ref<boolean>(false);
|
|
|
|
const supervisor_options = [{ label: 'AAA', value: '1' }, { label: 'BBB', value: '2' }, { label: 'CCC', value: '3' }, { label: 'DDD', value: '4' }];
|
|
|
|
const onSubmit = () => {
|
|
if (!is_editing.value) {
|
|
is_editing.value = true;
|
|
return;
|
|
}
|
|
|
|
is_editing.value = false;
|
|
initial_info = { ...employee_form_data.value }; // update initial value for future possible resets
|
|
|
|
if (!deepEqual(employee_form_data, initial_info)) {
|
|
// save the new data here
|
|
return;
|
|
}
|
|
};
|
|
|
|
const onReset = () => {
|
|
employee_form_data = ref<EmployeeProfile>(initial_info);
|
|
is_editing.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-form
|
|
class="q-pa-md full-height"
|
|
@submit="onSubmit"
|
|
@reset="onReset"
|
|
>
|
|
<div :class="$q.screen.lt.md ? 'column' : 'row'">
|
|
<ProfileInputField
|
|
v-model="employee_form_data.job_title"
|
|
class="col"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.employee.job_title')"
|
|
/>
|
|
<ProfileInputField
|
|
v-model="employee_form_data.company_name"
|
|
class="col"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.employee.company')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="q-mx-xs">
|
|
<ProfileSelectField
|
|
v-model="employee_form_data.supervisor_full_name"
|
|
:options="supervisor_options"
|
|
:label-string="$t('profile.employee.supervisor')"
|
|
:is-editing="is_editing"
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div :class="$q.screen.lt.md ? 'column' : 'row'">
|
|
<ProfileInputField
|
|
v-model="employee_form_data.email"
|
|
class="col"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.employee.email')"
|
|
/>
|
|
<ProfileInputField
|
|
v-model="employee_form_data.first_work_day"
|
|
readonly
|
|
class="col"
|
|
type="date"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.employee.hired_date')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="absolute-bottom" :class="$q.screen.lt.md ? 'column' : 'row'">
|
|
<q-space />
|
|
<q-btn
|
|
v-if="is_editing"
|
|
push
|
|
size="sm"
|
|
color="negative"
|
|
type="reset"
|
|
icon="cancel"
|
|
class="q-ma-sm"
|
|
:label="$t('shared.label.cancel')"
|
|
/>
|
|
<q-btn
|
|
push
|
|
size="sm"
|
|
color="primary"
|
|
:icon="is_editing ? 'save_alt' : 'create'"
|
|
class="q-ma-sm"
|
|
:label="is_editing ? $t('shared.label.save') : $t('shared.label.update')"
|
|
/>
|
|
</div>
|
|
</q-form>
|
|
</template> |