feat: split profile edit

client/src/components/personalProfile/ProfileEdit.vue

@@ -2,36 +2,84 @@
 import { useEntities } from "@/services/entities";
 import AvatarImage from "@/components/ui/AvatarImage.vue";
 import { ref } from "vue";
-import { useUserStore } from "@/stores/user";
+import { type User, useUserStore } from "@/stores/user";
 
-const { countries, organisations } = useEntities();
+const emit = defineEmits(["cancel", "save"]);
-
-const props = defineProps(["modelValue"]);
-const emit = defineEmits(["update:modelValue", "inlineEditComplete"]);
 
 const user = useUserStore();
+const { countries, organisations } = useEntities();
 
 const avatarLoading = ref(false);
-const avatarError = ref(false);
+const error = ref(false);
+
+const formData = ref({
+  first_name: user.first_name,
+  last_name: user.last_name,
+  email: user.email,
+  street: user.street,
+  street_number: user.street_number,
+  postal_code: user.postal_code,
+  city: user.city,
+  country_id: 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_id: user.organisation_country?.id,
+  invoice_address: user.invoice_address,
+});
+
+async function save() {
+  const { country_id, organisation_country_id, ...profileData } = formData.value;
+  const typedProfileData: Partial<User> = { ...profileData };
+
+  typedProfileData.country = countries.value.find((c) => c.id === country_id);
+  typedProfileData.organisation_country = countries.value.find(
+    (c) => c.id === organisation_country_id
+  );
+
+  await user.updateUserProfile(typedProfileData);
+  emit("save");
+}
 
 async function avatarUpload(e: Event) {
   const { files } = e.target as HTMLInputElement;
   if (!files?.length) return;
   avatarLoading.value = true;
-  avatarError.value = false;
+  error.value = false;
 
   try {
     await user.setUserAvatar(files[0]);
+    emit("save");
   } catch (e) {
-    avatarError.value = true;
+    error.value = true;
   } finally {
     avatarLoading.value = false;
-    emit("inlineEditComplete");
   }
 }
 </script>
 
 <template>
+  <div class="flex justify-end space-x-4">
+    <button class="btn btn-secondary" @click="emit('cancel')">
+      {{ $t("general.cancel") }}
+    </button>
+    <button class="btn btn-primary" @click="save">
+      {{ $t("general.save") }}
+    </button>
+  </div>
+
+  <div v-if="error" class="flex items-center space-x-3 bg-red-200 px-6 py-3">
+    <it-icon-close class="h-8 w-8 text-red-800" />
+    <span>
+      {{
+        $t(
+          "a.Bitte überprüfe deine Eingaben. Es sind Fehler in deinem Formular aufgetreten."
+        )
+      }}
+    </span>
+  </div>
   <div class="mb-4 bg-white p-3 md:p-6">
     <h3 class="mb-8">{{ $t("a.Persönliche Informationen") }}</h3>
     <section>
@@ -41,18 +89,12 @@ async function avatarUpload(e: Event) {
 
       <input
         id="first-name"
-        :value="props.modelValue.first_name"
+        v-model="formData.first_name"
         type="text"
         name="first-name"
         autocomplete="given-name"
         disabled
         class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
-        @input="
-          emit('update:modelValue', {
-            ...props.modelValue,
-            first_name: ($event.target as HTMLInputElement).value,
-          })
-        "
       />
 
       <label for="last-name" class="block pb-1.5 leading-6">
@@ -61,18 +103,12 @@ async function avatarUpload(e: Event) {
 
       <input
         id="last-name"
-        :value="props.modelValue.last_name"
+        v-model="formData.last_name"
         type="text"
         name="last-name"
         autocomplete="family-name"
         disabled
         class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
-        @input="
-          emit('update:modelValue', {
-            ...props.modelValue,
-            last_name: ($event.target as HTMLInputElement).value,
-          })
-        "
       />
 
       <label for="email" class="block pb-1.5 leading-6">
@@ -81,18 +117,12 @@ async function avatarUpload(e: Event) {
 
       <input
         id="email"
-        :value="props.modelValue.email"
+        :value="formData.email"
         type="email"
         name="email"
         autocomplete="email"
         disabled
         class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
-        @input="
-          emit('update:modelValue', {
-            ...props.modelValue,
-            email: ($event.target as HTMLInputElement).value,
-          })
-        "
       />
       <label class="block pb-1.5 leading-6">
         {{ $t("a.Profilbild") }}
@@ -130,17 +160,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="street-address"
-            :value="props.modelValue.street"
+            v-model="formData.street"
             type="text"
             name="street-address"
             autocomplete="street-address"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                street: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
 
@@ -151,17 +175,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="street-number"
-            :value="props.modelValue.street_number"
+            v-model="formData.street_number"
             name="street-number"
             type="text"
             autocomplete="street-number"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                street_number: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
       </div>
@@ -173,17 +191,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="postal-code"
-            :value="props.modelValue.postal_code"
+            v-model="formData.postal_code"
             name="postal-code"
             type="text"
             autocomplete="postal-code"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                postal_code: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
         <div class="w-full md:max-w-sm">
@@ -193,17 +205,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="city"
-            :value="props.modelValue.city"
+            v-model="formData.city"
             type="text"
             name="city"
             autocomplete="address-level2"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                city: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
       </div>
@@ -213,16 +219,10 @@ async function avatarUpload(e: Event) {
 
       <select
         id="country"
-        :value="props.modelValue.country"
+        v-model="formData.country_id"
         name="country"
         autocomplete="country-name"
         class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
-        @change="
-          emit('update:modelValue', {
-            ...props.modelValue,
-            country: ($event.target as HTMLInputElement).value,
-          })
-        "
       >
         <option v-for="country in countries" :key="country.id" :value="country.id">
           {{ country.name }}
@@ -239,16 +239,10 @@ async function avatarUpload(e: Event) {
 
       <select
         id="organisation"
-        :value="props.modelValue.organisation"
+        v-model="formData.organisation"
         required
         name="organisation"
         class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
-        @input="
-          emit('update:modelValue', {
-            ...props.modelValue,
-            organisation: ($event.target as HTMLInputElement).value,
-          })
-        "
       >
         <option
           v-for="organisation in organisations"
@@ -272,17 +266,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="org-street-address"
-            :value="props.modelValue.organisation_street"
+            v-model="formData.organisation_street"
             type="text"
             name="org-street-address"
             autocomplete="street-address"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                organisation_street: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
 
@@ -293,17 +281,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="org-street-number"
-            :value="props.modelValue.organisation_street_number"
+            v-model="formData.organisation_street_number"
             name="org-street-number"
             type="text"
             autocomplete="street-number"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                organisation_street_number: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
       </div>
@@ -315,17 +297,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="org-postal-code"
-            :value="props.modelValue.organisation_postal_code"
+            v-model="formData.organisation_postal_code"
             name="org-postal-code"
             type="text"
             autocomplete="postal-code"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                organisation_postal_code: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
         <div class="w-full md:max-w-sm">
@@ -335,17 +311,11 @@ async function avatarUpload(e: Event) {
 
           <input
             id="org-city"
-            :value="props.modelValue.organisation_city"
+            v-model="formData.organisation_city"
             type="text"
             name="org-city"
             autocomplete="address-level2"
             class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6"
-            @input="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                organisation_city: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
         </div>
       </div>
@@ -355,17 +325,11 @@ async function avatarUpload(e: Event) {
 
       <select
         id="org-country"
-        :value="props.modelValue.organisation_country"
+        v-model="formData.organisation_country_id"
         required
         name="org-country"
         autocomplete="country-name"
         class="disabled:bg-gray-50 mb-4 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 focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
-        @change="
-          emit('update:modelValue', {
-            ...props.modelValue,
-            organisation_country: ($event.target as HTMLInputElement).value,
-          })
-        "
       >
         <option v-for="country in countries" :key="country.id" :value="country.id">
           {{ country.name }}
@@ -381,16 +345,10 @@ async function avatarUpload(e: Event) {
         <div class="flex items-center">
           <input
             id="invoice-address-private"
+            v-model="formData.invoice_address"
             type="radio"
             value="prv"
-            :checked="props.modelValue.invoice_address === 'prv'"
             class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600"
-            @change="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                invoice_address: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
           <label
             for="invoice-address-private"
@@ -402,16 +360,10 @@ async function avatarUpload(e: Event) {
         <div class="flex items-center">
           <input
             id="invoice-address-organisation"
+            v-model="formData.invoice_address"
             type="radio"
             value="org"
-            :checked="props.modelValue.invoice_address === 'org'"
             class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600"
-            @change="
-              emit('update:modelValue', {
-                ...props.modelValue,
-                invoice_address: ($event.target as HTMLInputElement).value,
-              })
-            "
           />
           <label
             for="invoice-address-organisation"
@@ -423,4 +375,12 @@ async function avatarUpload(e: Event) {
       </div>
     </fieldset>
   </div>
+  <div class="flex justify-end space-x-4">
+    <button class="btn btn-secondary" @click="emit('cancel')">
+      {{ $t("general.cancel") }}
+    </button>
+    <button class="btn btn-primary" @click="save">
+      {{ $t("general.save") }}
+    </button>
+  </div>
 </template>

client/src/pages/personalProfile/PersonalProfilePage.vue

@@ -5,56 +5,27 @@ 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 editMode = ref(true);
-
-const formData = ref();
 const saved = ref(false);
 
-function startEditMode() {
+let saveBannerTimeout: ReturnType<typeof setTimeout> | null = null;
-  saved.value = false;
-  formData.value = {
-    first_name: user.first_name,
-    last_name: user.last_name,
-    email: user.email,
-    street: user.street,
-    street_number: user.street_number,
-    postal_code: user.postal_code,
-    city: user.city,
-    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?.id,
-    invoice_address: user.invoice_address,
-  };
-  editMode.value = true;
-}
 
-function exitEditMode() {
+function saveComplete() {
   editMode.value = false;
   saved.value = true;
-  setTimeout(() => {
+  if (saveBannerTimeout) {
+    clearTimeout(saveBannerTimeout);
+  }
+  saveBannerTimeout = setTimeout(() => {
     saved.value = false;
   }, 10 * 1000);
 }
 
-async function save() {
+function startEditMode() {
-  const profileData = Object.assign({}, formData.value);
+  editMode.value = true;
-  profileData.country = countries.value.find(
+  saved.value = false;
-    (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);
-  exitEditMode();
 }
 </script>
 
@@ -73,36 +44,16 @@ async function save() {
     </div>
 
     <div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
-      <div class="flex justify-end space-x-4">
+      <div v-if="!editMode" class="flex justify-end space-x-4">
-        <template v-if="editMode">
+        <button class="btn btn-secondary" @click="startEditMode">
-          <button class="btn btn-secondary" @click="editMode = false">
+          {{ $t("a.Profil bearbeiten") }}
-            {{ $t("general.cancel") }}
+        </button>
-          </button>
-          <button class="btn btn-primary" @click="save">
-            {{ $t("general.save") }}
-          </button>
-        </template>
-        <template v-else>
-          <button class="btn btn-secondary" @click="startEditMode">
-            {{ $t("a.Profil bearbeiten") }}
-          </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-if="editMode" @cancel="editMode = false" @save="saveComplete" />
-        <ProfileEdit v-model="formData" @inline-edit-complete="exitEditMode" />
-        <div class="flex justify-end space-x-4">
-          <button class="btn btn-secondary" @click="editMode = false">
-            {{ $t("general.cancel") }}
-          </button>
-          <button class="btn btn-primary" @click="save">
-            {{ $t("general.save") }}
-          </button>
-        </div>
-      </template>
       <ProfileView v-else />
     </div>
   </div>