feat: address rendering

client/src/pages/personalProfile/PersonalProfilePage.vue

@@ -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">
+      <!--      <section class="mt-8 w-full border-t pt-6">-->
-        <h3 class="mb-2">{{ $t("a.Lehrgang") }}</h3>
+      <!--        <h3 class="mb-2">{{ $t("a.Lehrgang") }}</h3>-->
-        <router-link class="link" to="/">Überbetriebliche Kurse</router-link>
+      <!--        <router-link class="link" to="/">Überbetriebliche Kurse</router-link>-->
-      </section>
+      <!--      </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>
+          <div class="mb-3 sm:col-span-2 sm:mb-0">
-          <label class="block font-semibold leading-6">
+            <template v-if="privateAddress">
-            {{ $t("a.Rechnungsadresse") }}
+              {{ privateAddress }}
-          </label>
+            </template>
-          <div class="sm:col-span-2">Gleich wie die Privatadresse</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">
@@ -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>

client/src/stores/user.ts

@@ -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) {

server/vbv_lernwelt/core/serializers.py

@@ -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__"