feat: edit view
This commit is contained in:
Reto Aebersold
parent
f7748dec43
commit
5d956cbfd7
|
|
@ -0,0 +1,91 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
import { useEntities } from "@/services/onboarding";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const user = useUserStore();
|
||||||
|
const { organisations } = useEntities();
|
||||||
|
|
||||||
|
const formData = ref({
|
||||||
|
firstName: user.first_name,
|
||||||
|
lastName: user.last_name,
|
||||||
|
email: user.email,
|
||||||
|
street: user.street,
|
||||||
|
streetNumber: user.street_number,
|
||||||
|
postalCode: user.postal_code,
|
||||||
|
city: user.city,
|
||||||
|
country: user.country,
|
||||||
|
organisation: user.organisation,
|
||||||
|
organisationStreet: user.organisation_street,
|
||||||
|
organisationStreetNumber: user.organisation_street_number,
|
||||||
|
organisationPostalCode: user.organisation_postal_code,
|
||||||
|
organisationCity: user.organisation_city,
|
||||||
|
organisationCountry: user.organisation_country,
|
||||||
|
invoiceAddress: user.invoice_address,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="mb-4 bg-white p-3 md:p-6">
|
||||||
|
<h3 class="mb-8">{{ $t("a.Persönliche Informationen") }}</h3>
|
||||||
|
<label for="first-name" class="block pb-1.5 leading-6">
|
||||||
|
{{ $t("a.Vorname") }}
|
||||||
|
</label>
|
||||||
|
<div class="mb-4">
|
||||||
|
<input
|
||||||
|
v-model="formData.firstName"
|
||||||
|
type="text"
|
||||||
|
name="first-name"
|
||||||
|
id="first-name"
|
||||||
|
autocomplete="given-name"
|
||||||
|
disabled
|
||||||
|
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<label for="last-name" class="block pb-1.5 leading-6">
|
||||||
|
{{ $t("a.Name") }}
|
||||||
|
</label>
|
||||||
|
<div class="mb-4">
|
||||||
|
<input
|
||||||
|
v-model="formData.lastName"
|
||||||
|
type="text"
|
||||||
|
name="last-name"
|
||||||
|
id="last-name"
|
||||||
|
autocomplete="family-name"
|
||||||
|
disabled
|
||||||
|
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<label for="email" class="block pb-1.5 leading-6">
|
||||||
|
{{ $t("a.E-Mail Adresse") }}
|
||||||
|
</label>
|
||||||
|
<div class="mb-8">
|
||||||
|
<input
|
||||||
|
v-model="formData.email"
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
autocomplete="email"
|
||||||
|
disabled
|
||||||
|
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h4 class="mb-4 block border-t pt-6 text-lg font-bold">
|
||||||
|
{{ $t("a.Privatadresse") }}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<label for="email" class="block pb-1.5 leading-6">
|
||||||
|
{{ $t("a.Strasse") }}
|
||||||
|
</label>
|
||||||
|
<div class="mb-4">
|
||||||
|
<input
|
||||||
|
v-model="formData.street"
|
||||||
|
type="text"
|
||||||
|
name="street"
|
||||||
|
id="street"
|
||||||
|
autocomplete="street"
|
||||||
|
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useEntities } from "@/services/onboarding";
|
||||||
|
import { useTranslation } from "i18next-vue";
|
||||||
|
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const user = useUserStore();
|
||||||
|
const { organisations } = useEntities();
|
||||||
|
|
||||||
|
const privateAddress = computed(() => {
|
||||||
|
let addressText = `${user.street} ${user.street_number}`;
|
||||||
|
if (user.postal_code || user.city) {
|
||||||
|
addressText += `, ${user.postal_code} ${user.city}`;
|
||||||
|
}
|
||||||
|
if (user.country) {
|
||||||
|
addressText += `, ${user.country[`name_${user.language}`]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return addressText.trim();
|
||||||
|
});
|
||||||
|
|
||||||
|
const organisationName = computed(() => {
|
||||||
|
const org = organisations.value.find((c) => c.id === user.organisation);
|
||||||
|
if (org) {
|
||||||
|
return org.name;
|
||||||
|
}
|
||||||
|
return t("a.Keine Angabe");
|
||||||
|
});
|
||||||
|
|
||||||
|
const orgAddress = computed(() => {
|
||||||
|
let addressText = `${user.organisation_street} ${user.organisation_street_number}`;
|
||||||
|
if (user.organisation_postal_code || user.organisation_city) {
|
||||||
|
addressText += `, ${user.organisation_postal_code} ${user.organisation_city}`;
|
||||||
|
}
|
||||||
|
if (user.organisation_country) {
|
||||||
|
addressText += `, ${user.organisation_country[`name_${user.language}`]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return addressText.trim();
|
||||||
|
});
|
||||||
|
|
||||||
|
const invoiceAddress = computed(() => {
|
||||||
|
if (user.invoice_address === "org") {
|
||||||
|
return t("a.Gleich wie die Firmenanschrift");
|
||||||
|
}
|
||||||
|
return t("a.Gleich wie die Privatadresse");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="mb-4 bg-white p-3 md:p-6">
|
||||||
|
<h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3>
|
||||||
|
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
|
||||||
|
<label class="block font-semibold leading-6">{{ $t("a.Vorname") }}</label>
|
||||||
|
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.first_name }}</div>
|
||||||
|
<label class="block font-semibold leading-6">{{ $t("a.Name") }}</label>
|
||||||
|
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.last_name }}</div>
|
||||||
|
<label class="block font-semibold leading-6">
|
||||||
|
{{ $t("a.E-Mail Adresse") }}
|
||||||
|
</label>
|
||||||
|
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.email }}</div>
|
||||||
|
<label class="block font-semibold leading-6">
|
||||||
|
{{ $t("a.Privatadresse") }}
|
||||||
|
</label>
|
||||||
|
<div class="mb-3 sm:col-span-2 sm:mb-0">
|
||||||
|
<template v-if="privateAddress">
|
||||||
|
{{ privateAddress }}
|
||||||
|
</template>
|
||||||
|
<span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-3 md:p-6">
|
||||||
|
<h3 class="my-2">{{ $t("a.Geschäftsdaten") }}</h3>
|
||||||
|
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
|
||||||
|
<label class="block font-semibold leading-6">{{ $t("a.Unternehmen") }}</label>
|
||||||
|
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ organisationName }}</div>
|
||||||
|
<label class="block font-semibold leading-6">
|
||||||
|
{{ $t("a.Firmenanschrift") }}
|
||||||
|
</label>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<template v-if="orgAddress">
|
||||||
|
{{ orgAddress }}
|
||||||
|
</template>
|
||||||
|
<span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-3 md:p-6">
|
||||||
|
<h3 class="my-2">{{ $t("a.Rechnungsadresse") }}</h3>
|
||||||
|
{{ invoiceAddress }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,53 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { useEntities } from "@/services/onboarding";
|
|
||||||
import { computed, ref } from "vue";
|
|
||||||
import { useTranslation } from "i18next-vue";
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
import ProfileView from "@/components/personalProfile/ProfileView.vue";
|
||||||
|
import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
|
||||||
|
|
||||||
const user = useUserStore();
|
const user = useUserStore();
|
||||||
const { organisations } = useEntities();
|
const editMode = ref(true);
|
||||||
const editMode = ref(false);
|
|
||||||
|
|
||||||
const organisationName = computed(() => {
|
|
||||||
const org = organisations.value.find((c) => c.id === user.organisation);
|
|
||||||
if (org) {
|
|
||||||
return org.name;
|
|
||||||
}
|
|
||||||
return t("a.Keine Angabe");
|
|
||||||
});
|
|
||||||
|
|
||||||
const privateAddress = computed(() => {
|
|
||||||
let addressText = `${user.street} ${user.street_number}`;
|
|
||||||
if (user.postal_code || user.city) {
|
|
||||||
addressText += `, ${user.postal_code} ${user.city}`;
|
|
||||||
}
|
|
||||||
if (user.country) {
|
|
||||||
addressText += `, ${user.country[`name_${user.language}`]}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return addressText.trim();
|
|
||||||
});
|
|
||||||
|
|
||||||
const orgAddress = computed(() => {
|
|
||||||
let addressText = `${user.organisation_street} ${user.organisation_street_number}`;
|
|
||||||
if (user.organisation_postal_code || user.organisation_city) {
|
|
||||||
addressText += `, ${user.organisation_postal_code} ${user.organisation_city}`;
|
|
||||||
}
|
|
||||||
if (user.organisation_country) {
|
|
||||||
addressText += `, ${user.organisation_country[`name_${user.language}`]}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return addressText.trim();
|
|
||||||
});
|
|
||||||
|
|
||||||
const invoiceAddress = computed(() => {
|
|
||||||
if (user.invoice_address === "org") {
|
|
||||||
return t("a.Gleich wie die Firmenanschrift");
|
|
||||||
}
|
|
||||||
return t("a.Gleich wie die Privatadresse");
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -67,95 +27,27 @@ const invoiceAddress = computed(() => {
|
||||||
<div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
|
<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">
|
<div class="flex justify-end space-x-4">
|
||||||
<template v-if="editMode">
|
<template v-if="editMode">
|
||||||
<button class="btn btn-secondary">{{ $t("general.cancel") }}</button>
|
<button class="btn btn-secondary" @click="editMode = false">
|
||||||
|
{{ $t("general.cancel") }}
|
||||||
|
</button>
|
||||||
<button class="btn btn-primary">{{ $t("general.save") }}</button>
|
<button class="btn btn-primary">{{ $t("general.save") }}</button>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<button class="btn btn-secondary">{{ $t("a.Profil bearbeiten") }}</button>
|
<button class="btn btn-secondary" @click="editMode = true">
|
||||||
|
{{ $t("a.Profil bearbeiten") }}
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-4 bg-white p-3 md:p-6">
|
<template v-if="editMode">
|
||||||
<h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3>
|
<ProfileEdit />
|
||||||
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
|
<div class="flex justify-end space-x-4">
|
||||||
<label class="block font-semibold leading-6">{{ $t("a.Vorname") }}</label>
|
<button class="btn btn-secondary" @click="editMode = false">
|
||||||
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.first_name }}</div>
|
{{ $t("general.cancel") }}
|
||||||
<label class="block font-semibold leading-6">{{ $t("a.Name") }}</label>
|
</button>
|
||||||
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.last_name }}</div>
|
<button class="btn btn-primary">{{ $t("general.save") }}</button>
|
||||||
<label class="block font-semibold leading-6">
|
|
||||||
{{ $t("a.E-Mail Adresse") }}
|
|
||||||
</label>
|
|
||||||
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.email }}</div>
|
|
||||||
<label class="block font-semibold leading-6">
|
|
||||||
{{ $t("a.Privatadresse") }}
|
|
||||||
</label>
|
|
||||||
<div class="mb-3 sm:col-span-2 sm:mb-0">
|
|
||||||
<template v-if="privateAddress">
|
|
||||||
{{ privateAddress }}
|
|
||||||
</template>
|
|
||||||
<span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div class="bg-white p-3 md:p-6">
|
<ProfileView v-else />
|
||||||
<h3 class="my-2">{{ $t("a.Geschäftsdaten") }}</h3>
|
|
||||||
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
|
|
||||||
<label class="block font-semibold leading-6">{{ $t("a.Unternehmen") }}</label>
|
|
||||||
<div class="mb-3 sm:col-span-2 sm:mb-0">{{ organisationName }}</div>
|
|
||||||
<label class="block font-semibold leading-6">
|
|
||||||
{{ $t("a.Firmenanschrift") }}
|
|
||||||
</label>
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<template v-if="orgAddress">
|
|
||||||
{{ orgAddress }}
|
|
||||||
</template>
|
|
||||||
<span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white p-3 md:p-6">
|
|
||||||
<h3 class="my-2">{{ $t("a.Rechnungsadresse") }}</h3>
|
|
||||||
{{ invoiceAddress }}
|
|
||||||
</div>
|
|
||||||
<!-- <div-->
|
|
||||||
<!-- class="mt-10 space-y-8 pb-12 sm:space-y-0 sm:pb-0"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">-->
|
|
||||||
<!-- <label-->
|
|
||||||
<!-- for="first-name"-->
|
|
||||||
<!-- class="block font-semibold leading-6 sm:pt-1.5"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- First name-->
|
|
||||||
<!-- </label>-->
|
|
||||||
<!-- <div class="mt-2 sm:col-span-2 sm:mt-0">-->
|
|
||||||
<!-- <input-->
|
|
||||||
<!-- type="text"-->
|
|
||||||
<!-- name="first-name"-->
|
|
||||||
<!-- id="first-name"-->
|
|
||||||
<!-- autocomplete="given-name"-->
|
|
||||||
<!-- class="focus:ring-blue-600 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 sm:max-w-xs sm:text-sm sm:leading-6"-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6">-->
|
|
||||||
<!-- <label-->
|
|
||||||
<!-- for="last-name"-->
|
|
||||||
<!-- class="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Last name-->
|
|
||||||
<!-- </label>-->
|
|
||||||
<!-- <div class="mt-2 sm:col-span-2 sm:mt-0">-->
|
|
||||||
<!-- <input-->
|
|
||||||
<!-- type="text"-->
|
|
||||||
<!-- name="last-name"-->
|
|
||||||
<!-- id="last-name"-->
|
|
||||||
<!-- autocomplete="family-name"-->
|
|
||||||
<!-- class="focus:ring-indigo-600 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:max-w-xs sm:text-sm sm:leading-6"-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue