Nicolas Drolet
33061ef2ab
Change timesheet UI to better fit current app model and avoid adding extra clicks and interactions to add new shifts and expenses. Also refactoring calls to backend to be more efficient and use recently-finalized OIDC implementation and integration.
115 lines
3.7 KiB
Vue
115 lines
3.7 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { ref } from 'vue';
|
|
import { deepEqual } from 'src/utils/deep-equal';
|
|
import MenuPanelInputField from 'src/modules/profile/components/shared/menu-panel-input-field.vue';
|
|
import type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
|
|
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
|
|
|
|
const employee_profile = defineModel<EmployeeProfile>({required: true});
|
|
|
|
const is_editing = ref<boolean>(false);
|
|
|
|
let initial_info: EmployeeProfile = unwrapAndClone(employee_profile.value);
|
|
|
|
const onSubmit = () => {
|
|
if (!is_editing.value) {
|
|
is_editing.value = true;
|
|
return;
|
|
}
|
|
|
|
is_editing.value = false;
|
|
initial_info = unwrapAndClone(employee_profile.value); // update initial value for future possible resets
|
|
|
|
if (!deepEqual(employee_profile.value, initial_info)) {
|
|
// save the new data here
|
|
return;
|
|
}
|
|
};
|
|
|
|
const onReset = () => {
|
|
employee_profile.value = unwrapAndClone(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'">
|
|
<MenuPanelInputField
|
|
v-model="employee_profile.first_name"
|
|
type="text"
|
|
class="col"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.first_name')"
|
|
/>
|
|
<MenuPanelInputField
|
|
v-model="employee_profile.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'">
|
|
<MenuPanelInputField
|
|
v-model="employee_profile.phone_number"
|
|
class="col"
|
|
type="text"
|
|
:is-editing="is_editing"
|
|
:label-string="$t('profile.personal.phone_number')"
|
|
/>
|
|
<MenuPanelInputField
|
|
v-model="employee_profile.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'">
|
|
<MenuPanelInputField
|
|
v-model="employee_profile.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> |