77 lines
2.6 KiB
Vue
77 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { default_employee_job_info, type EmployeeJobInfo } from 'src/modules/profile/types/profile-employee-interface';
|
|
import ProfileInputField from 'src/modules/profile/components/shared/profile-input-field.vue';
|
|
import { deepEqual } from 'src/utils/deep-equal';
|
|
// import ProfileSelectField from 'src/modules/profile/components/shared/profile-select-field.vue';
|
|
|
|
const props = withDefaults( defineProps<{
|
|
employeeInfo?: EmployeeJobInfo;
|
|
}>(), {
|
|
employeeInfo: () => default_employee_job_info,
|
|
});
|
|
|
|
const initial_info = props.employeeInfo;
|
|
|
|
const job_info = ref<EmployeeJobInfo>(props.employeeInfo);
|
|
const is_editing = ref<boolean>(false);
|
|
|
|
const onSubmit = () => {
|
|
if (!deepEqual(job_info.value, initial_info)) {
|
|
// saving profile logic here
|
|
console.log('Changes saved!');
|
|
}
|
|
console.log('Nothing was changed...');
|
|
};
|
|
|
|
const onReset = () => {
|
|
job_info.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
|
|
class="col"
|
|
:model-reference="job_info.company"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profilePage.employeeInfo.firstName')"
|
|
/>
|
|
<ProfileInputField
|
|
class="col"
|
|
:model-reference="job_info.email"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profilePage.employeeInfo.lastName')"
|
|
/>
|
|
</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"
|
|
:icon="is_editing ? 'save_alt' : 'create'"
|
|
class="q-ma-sm"
|
|
:label="is_editing ? $t('timesheet.saveButton') : $t('shiftsTemplate.updateButton')"
|
|
@click="is_editing = !is_editing"
|
|
/>
|
|
</div>
|
|
</q-form>
|
|
</template> |