143 lines
4.6 KiB
Vue
143 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
import { useUserStore } from "@/stores/user";
|
|
import { computed } from "vue";
|
|
import { useEntities } from "@/services/entities";
|
|
import { useTranslation } from "i18next-vue";
|
|
import dayjs from "dayjs";
|
|
import { displaySwissPhoneNumber } from "@/utils/phone";
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const user = useUserStore();
|
|
const { organisations } = useEntities();
|
|
|
|
const privateAddress = computed(() => {
|
|
const textParts = [];
|
|
|
|
if (user.street || user.street_number) {
|
|
textParts.push(`${user.street} ${user.street_number}`.trim());
|
|
}
|
|
|
|
if (user.postal_code || user.city) {
|
|
textParts.push(`${user.postal_code} ${user.city}`);
|
|
}
|
|
if (textParts.length && user.country) {
|
|
textParts.push(user.country.name);
|
|
}
|
|
|
|
return textParts;
|
|
});
|
|
|
|
const organisationName = computed(() => {
|
|
const org = organisations.value.find((o) => o.id === user.organisation);
|
|
if (org) {
|
|
return org.name;
|
|
}
|
|
return t("a.Keine Angabe");
|
|
});
|
|
|
|
const orgAddress = computed(() => {
|
|
const textParts = [];
|
|
|
|
if (user.organisation_detail_name) {
|
|
textParts.push(user.organisation_detail_name);
|
|
}
|
|
|
|
if (user.organisation_street || user.organisation_street_number) {
|
|
textParts.push(
|
|
`${user.organisation_street} ${user.organisation_street_number}`.trim()
|
|
);
|
|
}
|
|
if (user.organisation_postal_code || user.organisation_city) {
|
|
textParts.push(`${user.organisation_postal_code} ${user.organisation_city}`);
|
|
}
|
|
if (textParts.length && user.organisation_country) {
|
|
textParts.push(user.organisation_country.name);
|
|
}
|
|
|
|
return textParts;
|
|
});
|
|
|
|
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" data-cy="firstName">
|
|
{{ 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" data-cy="lastName">
|
|
{{ 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" data-cy="email">{{ user.email }}</div>
|
|
<label class="block font-semibold leading-6">
|
|
{{ $t("a.Telefonnummer") }}
|
|
</label>
|
|
<div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="phone">
|
|
<span v-if="user.phone_number">
|
|
{{ displaySwissPhoneNumber(user.phone_number) }}
|
|
</span>
|
|
<span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
|
|
</div>
|
|
<label class="block font-semibold leading-6">
|
|
{{ $t("a.Geburtsdatum") }}
|
|
</label>
|
|
<div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="birthDate">
|
|
<span v-if="user.birth_date">
|
|
{{ dayjs(user.birth_date).format("DD.MM.YYYY") }}
|
|
</span>
|
|
<span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
|
|
</div>
|
|
<label class="block font-semibold leading-6">
|
|
{{ $t("a.Privatadresse") }}
|
|
</label>
|
|
<div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="privateAddress">
|
|
<div v-if="privateAddress.length">
|
|
<span v-for="(line, index) in privateAddress" :key="index">
|
|
{{ line }}
|
|
<br />
|
|
</span>
|
|
</div>
|
|
<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" data-cy="organisationDetailName">
|
|
{{ organisationName }}
|
|
</div>
|
|
<label class="block font-semibold leading-6">
|
|
{{ $t("a.Firmenanschrift") }}
|
|
</label>
|
|
<div class="sm:col-span-2">
|
|
<div v-if="orgAddress" data-cy="organisationAddress">
|
|
<span v-for="(line, index) in orgAddress" :key="index">
|
|
{{ line }}
|
|
<br />
|
|
</span>
|
|
</div>
|
|
<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>
|