111 lines
3.7 KiB
Vue
111 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 type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
|
|
|
|
const { employeeProfile } = defineProps<{
|
|
employeeProfile: EmployeeProfile;
|
|
}>();
|
|
|
|
const is_editing = ref<boolean>(false);
|
|
|
|
let initial_info: EmployeeProfile = employeeProfile;
|
|
const personal_form_data = ref<EmployeeProfile>({ ...employeeProfile });
|
|
|
|
const onSubmit = () => {
|
|
if (!is_editing.value) {
|
|
is_editing.value = true;
|
|
return;
|
|
}
|
|
|
|
is_editing.value = false;
|
|
initial_info = { ...personal_form_data.value }; // update initial value for future possible resets
|
|
|
|
if (!deepEqual(personal_form_data.value, initial_info)) {
|
|
// save the new data here
|
|
return;
|
|
}
|
|
};
|
|
|
|
const onReset = () => {
|
|
personal_form_data.value= { ...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="personal_form_data.first_name"
|
|
type="text"
|
|
class="col"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.first_name')"
|
|
/>
|
|
<ProfileInputField
|
|
v-model="personal_form_data.last_name"
|
|
class="col"
|
|
type="text"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.last_name')"
|
|
/>
|
|
</div>
|
|
|
|
<div :class="$q.screen.lt.md ? 'column' : 'row'">
|
|
<ProfileInputField
|
|
v-model="personal_form_data.phone_number"
|
|
class="col"
|
|
type="text"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.phone_number')"
|
|
/>
|
|
<ProfileInputField
|
|
v-model="personal_form_data.birth_date"
|
|
class="col"
|
|
mask="#### / ## / ##"
|
|
hint="ex: 1970 / 01 / 01"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.birthdate')"
|
|
/>
|
|
</div>
|
|
|
|
<div :class="$q.screen.lt.md ? 'column' : 'row'">
|
|
<ProfileInputField
|
|
v-model="personal_form_data.residence"
|
|
class="col"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.address')"
|
|
:hint="$t('profile.personal.address_hint')"
|
|
/>
|
|
</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('timesheet.cancel_button')"
|
|
/>
|
|
<q-btn
|
|
push
|
|
size="sm"
|
|
color="primary"
|
|
type="submit"
|
|
: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> |