feat: split profile edit
This commit is contained in:
Reto Aebersold
parent
a40f066279
commit
6263d905fd
|
|
@ -2,36 +2,84 @@
|
|||
import { useEntities } from "@/services/entities";
|
||||
import AvatarImage from "@/components/ui/AvatarImage.vue";
|
||||
import { ref } from "vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { type User, useUserStore } from "@/stores/user";
|
||||
|
||||
const { countries, organisations } = useEntities();
|
||||
|
||||
const props = defineProps(["modelValue"]);
|
||||
const emit = defineEmits(["update:modelValue", "inlineEditComplete"]);
|
||||
const emit = defineEmits(["cancel", "save"]);
|
||||
|
||||
const user = useUserStore();
|
||||
const { countries, organisations } = useEntities();
|
||||
|
||||
const avatarLoading = ref(false);
|
||||
const avatarError = ref(false);
|
||||
const error = ref(false);
|
||||
|
||||
const formData = ref({
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
email: user.email,
|
||||
street: user.street,
|
||||
street_number: user.street_number,
|
||||
postal_code: user.postal_code,
|
||||
city: user.city,
|
||||
country_id: user.country?.id,
|
||||
organisation: user.organisation,
|
||||
organisation_street: user.organisation_street,
|
||||
organisation_street_number: user.organisation_street_number,
|
||||
organisation_postal_code: user.organisation_postal_code,
|
||||
organisation_city: user.organisation_city,
|
||||
organisation_country_id: user.organisation_country?.id,
|
||||
invoice_address: user.invoice_address,
|
||||
});
|
||||
|
||||
async function save() {
|
||||
const { country_id, organisation_country_id, ...profileData } = formData.value;
|
||||
const typedProfileData: Partial<User> = { ...profileData };
|
||||
|
||||
typedProfileData.country = countries.value.find((c) => c.id === country_id);
|
||||
typedProfileData.organisation_country = countries.value.find(
|
||||
(c) => c.id === organisation_country_id
|
||||
);
|
||||
|
||||
await user.updateUserProfile(typedProfileData);
|
||||
emit("save");
|
||||
}
|
||||
|
||||
async function avatarUpload(e: Event) {
|
||||
const { files } = e.target as HTMLInputElement;
|
||||
if (!files?.length) return;
|
||||
avatarLoading.value = true;
|
||||
avatarError.value = false;
|
||||
error.value = false;
|
||||
|
||||
try {
|
||||
await user.setUserAvatar(files[0]);
|
||||
emit("save");
|
||||
} catch (e) {
|
||||
avatarError.value = true;
|
||||
error.value = true;
|
||||
} finally {
|
||||
avatarLoading.value = false;
|
||||
emit("inlineEditComplete");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button class="btn btn-secondary" @click="emit('cancel')">
|
||||
{{ $t("general.cancel") }}
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="save">
|
||||
{{ $t("general.save") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="flex items-center space-x-3 bg-red-200 px-6 py-3">
|
||||
<it-icon-close class="h-8 w-8 text-red-800" />
|
||||
<span>
|
||||
{{
|
||||
$t(
|
||||
"a.Bitte überprüfe deine Eingaben. Es sind Fehler in deinem Formular aufgetreten."
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-4 bg-white p-3 md:p-6">
|
||||
<h3 class="mb-8">{{ $t("a.Persönliche Informationen") }}</h3>
|
||||
<section>
|
||||
|
|
@ -41,18 +89,12 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="first-name"
|
||||
:value="props.modelValue.first_name"
|
||||
v-model="formData.first_name"
|
||||
type="text"
|
||||
name="first-name"
|
||||
autocomplete="given-name"
|
||||
disabled
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
first_name: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
|
||||
<label for="last-name" class="block pb-1.5 leading-6">
|
||||
|
|
@ -61,18 +103,12 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="last-name"
|
||||
:value="props.modelValue.last_name"
|
||||
v-model="formData.last_name"
|
||||
type="text"
|
||||
name="last-name"
|
||||
autocomplete="family-name"
|
||||
disabled
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
last_name: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
|
||||
<label for="email" class="block pb-1.5 leading-6">
|
||||
|
|
@ -81,18 +117,12 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="email"
|
||||
:value="props.modelValue.email"
|
||||
:value="formData.email"
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
disabled
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
email: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<label class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Profilbild") }}
|
||||
|
|
@ -130,17 +160,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="street-address"
|
||||
:value="props.modelValue.street"
|
||||
v-model="formData.street"
|
||||
type="text"
|
||||
name="street-address"
|
||||
autocomplete="street-address"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
street: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -151,17 +175,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="street-number"
|
||||
:value="props.modelValue.street_number"
|
||||
v-model="formData.street_number"
|
||||
name="street-number"
|
||||
type="text"
|
||||
autocomplete="street-number"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
street_number: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -173,17 +191,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="postal-code"
|
||||
:value="props.modelValue.postal_code"
|
||||
v-model="formData.postal_code"
|
||||
name="postal-code"
|
||||
type="text"
|
||||
autocomplete="postal-code"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
postal_code: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:max-w-sm">
|
||||
|
|
@ -193,17 +205,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="city"
|
||||
:value="props.modelValue.city"
|
||||
v-model="formData.city"
|
||||
type="text"
|
||||
name="city"
|
||||
autocomplete="address-level2"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
city: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -213,16 +219,10 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<select
|
||||
id="country"
|
||||
:value="props.modelValue.country"
|
||||
v-model="formData.country_id"
|
||||
name="country"
|
||||
autocomplete="country-name"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
country: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
<option v-for="country in countries" :key="country.id" :value="country.id">
|
||||
{{ country.name }}
|
||||
|
|
@ -239,16 +239,10 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<select
|
||||
id="organisation"
|
||||
:value="props.modelValue.organisation"
|
||||
v-model="formData.organisation"
|
||||
required
|
||||
name="organisation"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
<option
|
||||
v-for="organisation in organisations"
|
||||
|
|
@ -272,17 +266,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="org-street-address"
|
||||
:value="props.modelValue.organisation_street"
|
||||
v-model="formData.organisation_street"
|
||||
type="text"
|
||||
name="org-street-address"
|
||||
autocomplete="street-address"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_street: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -293,17 +281,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="org-street-number"
|
||||
:value="props.modelValue.organisation_street_number"
|
||||
v-model="formData.organisation_street_number"
|
||||
name="org-street-number"
|
||||
type="text"
|
||||
autocomplete="street-number"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_street_number: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -315,17 +297,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="org-postal-code"
|
||||
:value="props.modelValue.organisation_postal_code"
|
||||
v-model="formData.organisation_postal_code"
|
||||
name="org-postal-code"
|
||||
type="text"
|
||||
autocomplete="postal-code"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_postal_code: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:max-w-sm">
|
||||
|
|
@ -335,17 +311,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<input
|
||||
id="org-city"
|
||||
:value="props.modelValue.organisation_city"
|
||||
v-model="formData.organisation_city"
|
||||
type="text"
|
||||
name="org-city"
|
||||
autocomplete="address-level2"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_city: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -355,17 +325,11 @@ async function avatarUpload(e: Event) {
|
|||
|
||||
<select
|
||||
id="org-country"
|
||||
:value="props.modelValue.organisation_country"
|
||||
v-model="formData.organisation_country_id"
|
||||
required
|
||||
name="org-country"
|
||||
autocomplete="country-name"
|
||||
class="disabled:bg-gray-50 mb-4 block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_country: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
<option v-for="country in countries" :key="country.id" :value="country.id">
|
||||
{{ country.name }}
|
||||
|
|
@ -381,16 +345,10 @@ async function avatarUpload(e: Event) {
|
|||
<div class="flex items-center">
|
||||
<input
|
||||
id="invoice-address-private"
|
||||
v-model="formData.invoice_address"
|
||||
type="radio"
|
||||
value="prv"
|
||||
:checked="props.modelValue.invoice_address === 'prv'"
|
||||
class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
invoice_address: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<label
|
||||
for="invoice-address-private"
|
||||
|
|
@ -402,16 +360,10 @@ async function avatarUpload(e: Event) {
|
|||
<div class="flex items-center">
|
||||
<input
|
||||
id="invoice-address-organisation"
|
||||
v-model="formData.invoice_address"
|
||||
type="radio"
|
||||
value="org"
|
||||
:checked="props.modelValue.invoice_address === 'org'"
|
||||
class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
invoice_address: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<label
|
||||
for="invoice-address-organisation"
|
||||
|
|
@ -423,4 +375,12 @@ async function avatarUpload(e: Event) {
|
|||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button class="btn btn-secondary" @click="emit('cancel')">
|
||||
{{ $t("general.cancel") }}
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="save">
|
||||
{{ $t("general.save") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,56 +5,27 @@ import { ref } from "vue";
|
|||
|
||||
import ProfileView from "@/components/personalProfile/ProfileView.vue";
|
||||
import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
|
||||
import { useEntities } from "@/services/entities";
|
||||
|
||||
const { countries } = useEntities();
|
||||
const user = useUserStore();
|
||||
const editMode = ref(false);
|
||||
|
||||
const formData = ref();
|
||||
const editMode = ref(true);
|
||||
const saved = ref(false);
|
||||
|
||||
function startEditMode() {
|
||||
saved.value = false;
|
||||
formData.value = {
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
email: user.email,
|
||||
street: user.street,
|
||||
street_number: user.street_number,
|
||||
postal_code: user.postal_code,
|
||||
city: user.city,
|
||||
country: user.country?.id,
|
||||
organisation: user.organisation,
|
||||
organisation_street: user.organisation_street,
|
||||
organisation_street_number: user.organisation_street_number,
|
||||
organisation_postal_code: user.organisation_postal_code,
|
||||
organisation_city: user.organisation_city,
|
||||
organisation_country: user.organisation_country?.id,
|
||||
invoice_address: user.invoice_address,
|
||||
};
|
||||
editMode.value = true;
|
||||
}
|
||||
let saveBannerTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function exitEditMode() {
|
||||
function saveComplete() {
|
||||
editMode.value = false;
|
||||
saved.value = true;
|
||||
setTimeout(() => {
|
||||
if (saveBannerTimeout) {
|
||||
clearTimeout(saveBannerTimeout);
|
||||
}
|
||||
saveBannerTimeout = setTimeout(() => {
|
||||
saved.value = false;
|
||||
}, 10 * 1000);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
const profileData = Object.assign({}, formData.value);
|
||||
profileData.country = countries.value.find(
|
||||
(c) => c.id === parseInt(profileData.country)
|
||||
);
|
||||
profileData.organisation_country = countries.value.find(
|
||||
(c) => c.id === parseInt(profileData.organisation_country)
|
||||
);
|
||||
profileData.organisation = parseInt(profileData.organisation);
|
||||
await user.updateUserProfile(profileData);
|
||||
exitEditMode();
|
||||
function startEditMode() {
|
||||
editMode.value = true;
|
||||
saved.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -73,36 +44,16 @@ async function save() {
|
|||
</div>
|
||||
|
||||
<div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
|
||||
<div class="flex justify-end space-x-4">
|
||||
<template v-if="editMode">
|
||||
<button class="btn btn-secondary" @click="editMode = false">
|
||||
{{ $t("general.cancel") }}
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="save">
|
||||
{{ $t("general.save") }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-secondary" @click="startEditMode">
|
||||
{{ $t("a.Profil bearbeiten") }}
|
||||
</button>
|
||||
</template>
|
||||
<div v-if="!editMode" class="flex justify-end space-x-4">
|
||||
<button class="btn btn-secondary" @click="startEditMode">
|
||||
{{ $t("a.Profil bearbeiten") }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="saved" class="flex items-center space-x-3 bg-green-200 px-6 py-3">
|
||||
<it-icon-check class="h-10 w-10 text-green-800" />
|
||||
<span>{{ $t("a.Deine Änderungen wurden gespeichert") }}.</span>
|
||||
</div>
|
||||
<template v-if="editMode">
|
||||
<ProfileEdit v-model="formData" @inline-edit-complete="exitEditMode" />
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button class="btn btn-secondary" @click="editMode = false">
|
||||
{{ $t("general.cancel") }}
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="save">
|
||||
{{ $t("general.save") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<ProfileEdit v-if="editMode" @cancel="editMode = false" @save="saveComplete" />
|
||||
<ProfileView v-else />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue