feat: save profile

client/src/components/personalProfile/ProfileView.vue

@@ -10,19 +10,25 @@ const user = useUserStore();
 const { organisations } = useEntities();
 
 const privateAddress = computed(() => {
-  let addressText = `${user.street} ${user.street_number}`;
+  let addressText = `${user.street} ${user.street_number}`.trim();
   if (user.postal_code || user.city) {
-    addressText += `, ${user.postal_code} ${user.city}`;
+    if (addressText.length) {
+      addressText += ", ";
+    }
+    addressText += `${user.postal_code} ${user.city}`;
   }
   if (user.country) {
-    addressText += `, ${user.country.name}`;
+    if (addressText.length) {
+      addressText += ", ";
+    }
+    addressText += user.country.name;
   }
 
   return addressText.trim();
 });
 
 const organisationName = computed(() => {
-  const org = organisations.value.find((c) => c.id === user.organisation);
+  const org = organisations.value.find((o) => o.id === user.organisation);
   if (org) {
     return org.name;
   }
@@ -30,12 +36,19 @@ const organisationName = computed(() => {
 });
 
 const orgAddress = computed(() => {
-  let addressText = `${user.organisation_street} ${user.organisation_street_number}`;
+  let addressText =
+    `${user.organisation_street} ${user.organisation_street_number}`.trim();
   if (user.organisation_postal_code || user.organisation_city) {
-    addressText += `, ${user.organisation_postal_code} ${user.organisation_city}`;
+    if (addressText.length) {
+      addressText += ", ";
+    }
+    addressText += `${user.organisation_postal_code} ${user.organisation_city}`;
   }
   if (user.organisation_country) {
-    addressText += `, ${user.organisation_country.name}`;
+    if (addressText.length) {
+      addressText += ", ";
+    }
+    addressText += user.organisation_country.name;
   }
 
   return addressText.trim();

client/src/pages/personalProfile/PersonalProfilePage.vue

@@ -5,11 +5,14 @@ import { ref } from "vue";
 
 import ProfileView from "@/components/personalProfile/ProfileView.vue";
 import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
+import { useEntities } from "@/services/entities";
 
+const { countries } = useEntities();
 const user = useUserStore();
 const editMode = ref(false);
 
 const formData = ref();
+const saved = ref(false);
 
 function startEditMode() {
   formData.value = {
@@ -29,16 +32,24 @@ function startEditMode() {
     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);
-  profileData.country = { id: profileData.country };
-  profileData.organisation_country = { id: profileData.organisation_country };
-  await user.setUserProfile(profileData);
+  profileData.country = countries.value.find(
+    (c) => c.id === parseInt(profileData.country)
+  );
+  profileData.organisation_country = countries.value.find(
+    (c) => c.id === parseInt(profileData.organisation_country)
+  );
+  profileData.organisation = parseInt(profileData.organisation);
+  await user.updateUserProfile(profileData);
   editMode.value = false;
+  saved.value = true;
+  setTimeout(() => {
+    saved.value = false;
+  }, 10 * 1000);
 }
 </script>
 
@@ -72,6 +83,10 @@ async function save() {
           </button>
         </template>
       </div>
+      <div v-if="saved" class="flex items-center space-x-3 bg-green-200 px-6 py-3">
+        <it-icon-check class="h-10 w-10 text-green-800" />
+        <span>{{ $t("a.Deine Änderungen wurden gespeichert") }}.</span>
+      </div>
       <template v-if="editMode">
         <ProfileEdit v-model="formData" />
         <div class="flex justify-end space-x-4">

client/src/stores/user.ts

@@ -183,9 +183,9 @@ export const useUserStore = defineStore({
       const r = await directUpload("/api/core/avatar/", file);
       this.$state.avatar_url = r.url;
     },
-    async setUserProfile(profileData: UserProfile) {
-      console.log("Save", profileData);
+    async updateUserProfile(profileData: UserProfile) {
       await itPost("/api/core/me/", profileData, { method: "PUT" });
+      Object.assign(this.$state, profileData);
     },
   },
 });

server/vbv_lernwelt/core/serializers.py

@@ -36,7 +36,7 @@ class CountrySerializer(serializers.ModelSerializer):
         if country_id is not None:
             try:
                 country = Country.objects.get(country_id=country_id)
-                return {"id": country.country_id, "name": "Belize"}
+                return {"id": country.country_id, "name": self.get_name(country)}
             except Country.DoesNotExist:
                 raise serializers.ValidationError({"id": "Invalid country ID"})
         return super().to_internal_value(data)