feat: user store

client/src/components/header/AccountMenuContent.vue

@@ -2,6 +2,8 @@
 import CourseSessionsMenu from "@/components/header/CourseSessionsMenu.vue";
 import type { UserState } from "@/stores/user";
 import type { CourseSession } from "@/types";
+import { PopoverButton } from "@headlessui/vue";
+import { useRouter } from "vue-router";
 
 const props = defineProps<{
   courseSessions: CourseSession[];
@@ -10,6 +12,12 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits(["selectCourseSession", "logout"]);
+
+const router = useRouter();
+
+async function navigate(routeName: string) {
+  await router.push({ name: routeName });
+}
 </script>
 
 <template>
@@ -26,9 +34,9 @@ const emit = defineEmits(["selectCourseSession", "logout"]);
         <div class="ml-6">
           <h3>{{ user.first_name }} {{ user.last_name }}</h3>
           <div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
-          <router-link class="underline" :to="{ name: 'personalProfile' }">
-            Profil anzeigen
-          </router-link>
+          <PopoverButton @click="navigate('personalProfile')">
+            {{ $t("a.Profil anzeigen") }}
+          </PopoverButton>
         </div>
       </div>
     </div>

client/src/components/onboarding/OrganisationAddress.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useEntities } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 
 const props = defineProps<{
   modelValue: {

client/src/components/onboarding/PersonalAddress.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useEntities } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 
 const props = defineProps<{
   modelValue: {

client/src/components/personalProfile/ProfileEdit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEntities } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 
 const { countries, organisations } = useEntities();
 

client/src/components/personalProfile/ProfileView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useUserStore } from "@/stores/user";
 import { computed } from "vue";
-import { useEntities } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 import { useTranslation } from "i18next-vue";
 
 const { t } = useTranslation();
@@ -15,7 +15,7 @@ const privateAddress = computed(() => {
     addressText += `, ${user.postal_code} ${user.city}`;
   }
   if (user.country) {
-    addressText += `, ${user.country[`name_${user.language}`]}`;
+    addressText += `, ${user.country.name}`;
   }
 
   return addressText.trim();
@@ -35,7 +35,7 @@ const orgAddress = computed(() => {
     addressText += `, ${user.organisation_postal_code} ${user.organisation_city}`;
   }
   if (user.organisation_country) {
-    addressText += `, ${user.organisation_country[`name_${user.language}`]}`;
+    addressText += `, ${user.organisation_country.name}`;
   }
 
   return addressText.trim();

client/src/pages/onboarding/AccountProfile.vue

@@ -5,7 +5,8 @@ import { computed, ref, watch } from "vue";
 import { useUserStore } from "@/stores/user";
 import { useRoute } from "vue-router";
 import { useTranslation } from "i18next-vue";
-import { profileNextRoute, useEntities } from "@/services/onboarding";
+import { profileNextRoute } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 import AvatarImage from "@/components/ui/AvatarImage.vue";
 
 const { t } = useTranslation();

client/src/pages/onboarding/vv/CheckoutAddress.vue

@@ -6,7 +6,7 @@ import { useUserStore } from "@/stores/user";
 import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
 import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
 import { itPost, itPut } from "@/fetchHelpers";
-import { useEntities } from "@/services/onboarding";
+import { useEntities } from "@/services/entities";
 import { useDebounceFn, useFetch } from "@vueuse/core";
 import { useRoute } from "vue-router";
 import { useTranslation } from "i18next-vue";
@@ -237,7 +237,7 @@ const executePayment = () => {
           $t("a.Fehler bei der Zahlung. Bitte versuche es erneut oder kontaktiere uns")
         }}:
         <a href="mailto:vermittler@vbv-afa.ch" class="underline">
-          vermittler@vbv-afa.ch@vbv.ch
+          vermittler@vbv-afa.ch
         </a>
       </p>
 

client/src/pages/personalProfile/PersonalProfilePage.vue

@@ -20,21 +20,23 @@ function startEditMode() {
     street_number: user.street_number,
     postal_code: user.postal_code,
     city: user.city,
-    country: user.country?.country_id,
+    country: user.country?.id,
     organisation: user.organisation,
     organisation_street: user.organisation_street,
     organisation_street_number: user.organisation_street_number,
     organisation_postal_code: user.organisation_postal_code,
     organisation_city: user.organisation_city,
-    organisation_country: user.organisation_country?.country_id,
+    organisation_country: user.organisation_country?.id,
     invoice_address: user.invoice_address,
   };
+  console.log("Start Edit", formData.value);
   editMode.value = true;
 }
 
 async function save() {
   const profileData = Object.assign({}, formData.value);
-  // TODO: Resolve country
+  profileData.country = { id: profileData.country };
+  profileData.organisation_country = { id: profileData.organisation_country };
   await user.setUserProfile(profileData);
   editMode.value = false;
 }

client/src/services/entities.ts

@@ -0,0 +1,25 @@
+import { itGetCached } from "@/fetchHelpers";
+import type { Ref } from "vue";
+import { ref } from "vue";
+
+export type Organisation = {
+  id: number;
+  name: string;
+};
+
+export type Country = {
+  id: number;
+  name: string;
+};
+
+export function useEntities() {
+  const countries: Ref<Country[]> = ref([]);
+  const organisations: Ref<Organisation[]> = ref([]);
+
+  itGetCached("/api/core/entities/").then((res) => {
+    countries.value = res.countries;
+    organisations.value = res.organisations;
+  });
+
+  return { organisations, countries };
+}

client/src/services/onboarding.ts

@@ -1,8 +1,4 @@
-import { itGetCached } from "@/fetchHelpers";
-import { useUserStore } from "@/stores/user";
 import { isString, startsWith } from "lodash";
-import type { Ref } from "vue";
-import { computed, ref } from "vue";
 
 export function profileNextRoute(courseType: string | string[]) {
   if (courseType === "uk") {
@@ -14,54 +10,3 @@ export function profileNextRoute(courseType: string | string[]) {
   }
   return "";
 }
-
-export type Organisation = {
-  organisation_id: number;
-  name_de: string;
-  name_fr: string;
-  name_it: string;
-};
-
-export type Country = {
-  country_id: number;
-  name_de: string;
-  name_fr: string;
-  name_it: string;
-};
-
-export type Entities = {
-  organisations: Organisation[];
-  countries: Country[];
-};
-
-// TODO: Update backend to just return the data we need {id: number, name: string}
-export function useEntities() {
-  const user = useUserStore();
-  const entities: Ref<Entities | undefined> = ref();
-
-  itGetCached("/api/core/entities/").then((res) => {
-    entities.value = res;
-  });
-
-  const organisations = computed(() => {
-    if (entities.value) {
-      return entities.value.organisations.map((c) => ({
-        id: c.organisation_id,
-        name: c[`name_${user.language}`],
-      }));
-    }
-    return [];
-  });
-
-  const countries = computed(() => {
-    if (entities.value) {
-      return entities.value.countries.map((c) => ({
-        id: c.country_id,
-        name: c[`name_${user.language}`],
-      }));
-    }
-    return [];
-  });
-
-  return { organisations, countries };
-}

client/src/stores/user.ts

@@ -2,6 +2,7 @@ import log from "loglevel";
 
 import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
 import { setI18nLanguage } from "@/i18nextWrapper";
+import type { Country } from "@/services/entities";
 import { directUpload } from "@/services/files";
 import dayjs from "dayjs";
 import { defineStore } from "pinia";
@@ -15,27 +16,21 @@ if (import.meta.env.VITE_OAUTH_API_BASE_URL) {
   }logout/?post_logout_redirect_uri=${window.location.origin}`;
 }
 
-// typed state https://stackoverflow.com/questions/71012513/when-using-pinia-and-typescript-how-do-you-use-an-action-to-set-the-state
+const AVAILABLE_LANGUAGES = ["de", "fr", "it"];
 
 export type AvailableLanguages = "de" | "fr" | "it";
 export type InvoiceAddress = "prv" | "org";
 
-// TODO: harmonize with  to {id: number, name: string} and refactor useEntities in onboarding.ts
-// Same with Organisations
-type Country = {
-  country_id: number;
-  name_de: string;
-  name_fr: string;
-  name_it: string;
-};
-
 export interface UserProfile {
-  first_name: string; // Maybe fields Optional?
+  id: string;
+  username: string;
+  first_name: string;
   last_name: string;
   email: string;
   avatar_url: string;
   organisation: number | null;
   is_superuser: boolean;
+  language: AvailableLanguages;
   course_session_experts: string[];
   invoice_address: InvoiceAddress | null;
   street: string | null;
@@ -52,33 +47,10 @@ export interface UserProfile {
 }
 
 export type UserState = {
-  id: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  username: string;
-  avatar_url: string;
-  organisation: number | null;
-  is_superuser: boolean;
-  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;
-};
+} & UserProfile;
 
 let defaultLanguage: AvailableLanguages = "de";
-const AVAILABLE_LANGUAGES = ["de", "fr", "it"];
 
 const isAvailableLanguage = (language: string): language is AvailableLanguages => {
   return AVAILABLE_LANGUAGES.includes(language);

server/vbv_lernwelt/api/directory.py

@@ -18,8 +18,12 @@ def list_entities(request):
 
     field_name = field_mapping.get(language_code, field_mapping["de"])
 
+    context = {"langauge": request.user.language}
+
     organisations = OrganisationSerializer(
-        Organisation.objects.all().order_by(field_name), many=True
+        Organisation.objects.all().order_by(field_name), many=True, context=context
+    ).data
+    countries = CountrySerializer(
+        Country.objects.all(), many=True, context=context
     ).data
-    countries = CountrySerializer(Country.objects.all(), many=True).data
     return Response({"organisations": organisations, "countries": countries})

server/vbv_lernwelt/api/tests/test_entities_api.py

@@ -23,6 +23,9 @@ class EntitiesViewTest(APITestCase):
         # GIVEN
         url = reverse("list_entities")
 
+        self.user.language = "it"
+        self.user.save()
+
         # WHEN
         response = self.client.get(url)
 
@@ -34,10 +37,8 @@ class EntitiesViewTest(APITestCase):
         self.assertEqual(
             organisations[-1],
             {
-                "organisation_id": 28,
-                "name_de": "Zürich",
-                "name_fr": "Zurich",
-                "name_it": "Zurigo",
+                "id": 28,
+                "name": "Zurigo",
             },
         )
 
@@ -46,9 +47,7 @@ class EntitiesViewTest(APITestCase):
         self.assertEqual(
             countries[0],
             {
-                "country_id": 1,
-                "name_de": "Afghanistan",
-                "name_fr": "Afghanistan",
-                "name_it": "Afghanistan",
+                "id": 1,
+                "name": "Afghanistan",
             },
         )

server/vbv_lernwelt/api/user.py

@@ -17,18 +17,20 @@ def me_user_view(request):
     if not request.user.is_authenticated:
         return Response(status=403)
 
+    context = {"langauge": request.user.language}
+
     if request.method == "GET":
-        return Response(UserSerializer(request.user).data)
+        return Response(UserSerializer(request.user, context=context).data)
 
     if request.method == "PUT":
         serializer = UserSerializer(
-            request.user,
-            data=request.data,
-            partial=True,
+            request.user, data=request.data, partial=True, context=context
         )
         if serializer.is_valid():
             serializer.save()
             return Response(UserSerializer(request.user).data)
+        else:
+            return Response(serializer.errors, status=400)
 
     return Response(status=400)
 

server/vbv_lernwelt/core/serializers.py

@@ -14,9 +14,32 @@ def create_json_from_objects(objects, serializer_class, many=True) -> str:
 
 
 class CountrySerializer(serializers.ModelSerializer):
+    id = serializers.IntegerField(source="country_id", read_only=True)
+    name = serializers.SerializerMethodField()
+
     class Meta:
         model = Country
-        fields = "__all__"
+        fields = ["id", "name"]
+
+    def get_name(self, obj):
+        language = self.context.get("langauge")
+
+        if language == "fr":
+            return obj.name_fr
+        elif language == "it":
+            return obj.name_it
+
+        return obj.name_de
+
+    def to_internal_value(self, data):
+        country_id = data.get("id")
+        if country_id is not None:
+            try:
+                country = Country.objects.get(country_id=country_id)
+                return {"id": country.country_id, "name": "Belize"}
+            except Country.DoesNotExist:
+                raise serializers.ValidationError({"id": "Invalid country ID"})
+        return super().to_internal_value(data)
 
 
 class UserSerializer(serializers.ModelSerializer):
@@ -74,8 +97,43 @@ class UserSerializer(serializers.ModelSerializer):
 
         return [str(_id) for _id in (supervisor_in_session_ids | expert_in_session_ids)]
 
+    def update(self, instance, validated_data):
+        country_data = validated_data.pop("country", None)
+        organisation_country_data = validated_data.pop("organisation_country", None)
+
+        for attr, value in validated_data.items():
+            setattr(instance, attr, value)
+
+        if country_data is not None:
+            country_id = country_data.get("id")
+            country_instance = Country.objects.filter(country_id=country_id).first()
+            instance.country = country_instance
+
+        if organisation_country_data is not None:
+            organisation_country_id = organisation_country_data.get("id")
+            organisation_country_instance = Country.objects.filter(
+                country_id=organisation_country_id
+            ).first()
+            instance.organisation_country = organisation_country_instance
+
+        instance.save()
+        return instance
+
 
 class OrganisationSerializer(serializers.ModelSerializer):
+    id = serializers.IntegerField(source="organisation_id", read_only=True)
+    name = serializers.SerializerMethodField()
+
     class Meta:
         model = Organisation
-        fields = "__all__"
+        fields = ["id", "name"]
+
+    def get_name(self, obj):
+        language = self.context.get("langauge")
+
+        if language == "fr":
+            return obj.name_fr
+        elif language == "it":
+            return obj.name_it
+
+        return obj.name_de