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">
|
||||
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 { organisations } = useEntities();
|
||||
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");
|
||||
});
|
||||
const editMode = ref(true);
|
||||
</script>
|
||||
|
||||
<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 justify-end space-x-4">
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<template v-if="editMode">
|
||||
<ProfileEdit />
|
||||
<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">{{ $t("general.save") }}</button>
|
||||
</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>
|
||||
<!-- <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>-->
|
||||
</template>
|
||||
<ProfileView v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue