ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: address rendering

This commit is contained in:
Reto Aebersold 2024-01-25 10:28:30 +01:00
parent 911c35ae6c
commit a0888fe966
3 changed files with 147 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
client/src/pages/personalProfile/PersonalProfilePage.vue
View File

@ -2,10 +2,13 @@
import { useUserStore } from "@/stores/user";
import { useEntities } from "@/services/onboarding";
import { computed } from "vue";
import { useTranslation } from "i18next-vue";
const user = useUserStore();
const { organisations } = useEntities();
const { t } = useTranslation();
const organisationName = computed(() => {
const org = organisations.value.find((c) => c.id === user.organisation);
if (org) {
@ -13,6 +16,37 @@ const organisationName = computed(() => {
}
return "Keine Organisation";
});
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>
<template>
@ -27,10 +61,10 @@ const organisationName = computed(() => {
<h3>{{ user.first_name }} {{ user.last_name }}</h3>
<div>{{ user.email }}</div>
</section>
<section class="mt-8 w-full border-t pt-6">
<h3 class="mb-2">{{ $t("a.Lehrgang") }}</h3>
<router-link class="link" to="/">Überbetriebliche Kurse</router-link>
</section>
<!-- <section class="mt-8 w-full border-t pt-6">-->
<!-- <h3 class="mb-2">{{ $t("a.Lehrgang") }}</h3>-->
<!-- <router-link class="link" to="/">Überbetriebliche Kurse</router-link>-->
<!-- </section>-->
</div>
<div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
@ -47,11 +81,12 @@ const organisationName = computed(() => {
<label class="block font-semibold leading-6">
{{ $t("a.Privatadresse") }}
</label>
<div class="mb-3 sm:col-span-2 sm:mb-0">Strasse</div>
<label class="block font-semibold leading-6">
{{ $t("a.Rechnungsadresse") }}
</label>
<div class="sm:col-span-2">Gleich wie die Privatadresse</div>
<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">
@ -60,52 +95,60 @@ const organisationName = computed(() => {
<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.Rechnungsadresse") }}
{{ $t("a.Firmenanschrift") }}
</label>
<div class="sm:col-span-2">Gleich wie die Privatadresse</div>
<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-->
<!-- 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 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>
</template>

32
client/src/stores/user.ts
View File

@ -18,6 +18,14 @@ if (import.meta.env.VITE_OAUTH_API_BASE_URL) {
// typed state https://stackoverflow.com/questions/71012513/when-using-pinia-and-typescript-how-do-you-use-an-action-to-set-the-state
export type AvailableLanguages = "de" | "fr" | "it";
export type InvoiceAddress = "prv" | "org";
type Country = {
country_id: number;
name_de: string;
name_fr: string;
name_it: string;
};
export type UserState = {
id: string;
@ -31,6 +39,18 @@ export type UserState = {
course_session_experts: string[];
loggedIn: boolean;
language: AvailableLanguages;
invoice_address: InvoiceAddress | null;
street: string | null;
street_number?: string | null;
postal_code?: string | null;
city?: string | null;
country?: Country | null;
organisation_detail_name?: string | null;
organisation_street?: string | null;
organisation_street_number?: string | null;
organisation_postal_code?: string | null;
organisation_city?: string | null;
organisation_country?: Country | null;
};
let defaultLanguage: AvailableLanguages = "de";
@ -63,6 +83,18 @@ const initialUserState: UserState = {
course_session_experts: [],
loggedIn: false,
language: defaultLanguage,
invoice_address: "prv",
street: null,
street_number: null,
postal_code: null,
city: null,
country: null,
organisation_detail_name: null,
organisation_street: null,
organisation_street_number: null,
organisation_postal_code: null,
organisation_city: null,
organisation_country: null,
};
async function setLocale(language: AvailableLanguages) {

26
server/vbv_lernwelt/core/serializers.py
View File

@ -13,8 +13,16 @@ def create_json_from_objects(objects, serializer_class, many=True) -> str:
return JSONRenderer().render(serializer.data).decode("utf-8")
class CountrySerializer(serializers.ModelSerializer):
class Meta:
model = Country
fields = "__all__"
class UserSerializer(serializers.ModelSerializer):
course_session_experts = serializers.SerializerMethodField()
country = CountrySerializer()
organisation_country = CountrySerializer()
class Meta:
model = User
@ -29,6 +37,18 @@ class UserSerializer(serializers.ModelSerializer):
"is_superuser",
"course_session_experts",
"language",
"invoice_address",
"street",
"street_number",
"postal_code",
"city",
"country",
"organisation_detail_name",
"organisation_street",
"organisation_street_number",
"organisation_postal_code",
"organisation_city",
"organisation_country",
]
read_only_fields = [
"id",
@ -59,9 +79,3 @@ class OrganisationSerializer(serializers.ModelSerializer):
class Meta:
model = Organisation
fields = "__all__"
class CountrySerializer(serializers.ModelSerializer):
class Meta:
model = Country
fields = "__all__"