feat: edit view

client/src/components/personalProfile/ProfileEdit.vue

@@ -1,89 +1,380 @@
 <script setup lang="ts">
-import { useUserStore } from "@/stores/user";
+import { useEntities } from "@/services/onboarding";
-import { ref } from "vue";
 
-const user = useUserStore();
+const { countries, organisations } = useEntities();
 
-const formData = ref({
+const props = defineProps(["modelValue"]);
-  firstName: user.first_name,
+const emit = defineEmits(["update:modelValue"]);
-  lastName: user.last_name,
-  email: user.email,
-  street: user.street,
-  streetNumber: user.street_number,
-  postalCode: user.postal_code,
-  city: user.city,
-  country: user.country,
-  organisation: user.organisation,
-  organisationStreet: user.organisation_street,
-  organisationStreetNumber: user.organisation_street_number,
-  organisationPostalCode: user.organisation_postal_code,
-  organisationCity: user.organisation_city,
-  organisationCountry: user.organisation_country,
-  invoiceAddress: user.invoice_address,
-});
 </script>
 
 <template>
   <div class="mb-4 bg-white p-3 md:p-6">
     <h3 class="mb-8">{{ $t("a.Persönliche Informationen") }}</h3>
-    <label for="first-name" class="block pb-1.5 leading-6">
+    <section>
-      {{ $t("a.Vorname") }}
+      <label for="first-name" class="block pb-1.5 leading-6">
-    </label>
+        {{ $t("a.Vorname") }}
-    <div class="mb-4">
+      </label>
+
       <input
         id="first-name"
-        v-model="formData.firstName"
+        :value="props.modelValue.first_name"
         type="text"
         name="first-name"
         autocomplete="given-name"
         disabled
-        class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
+        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,
+          })
+        "
       />
-    </div>
+
-    <label for="last-name" class="block pb-1.5 leading-6">
+      <label for="last-name" class="block pb-1.5 leading-6">
-      {{ $t("a.Name") }}
+        {{ $t("a.Name") }}
-    </label>
+      </label>
-    <div class="mb-4">
+
       <input
         id="last-name"
-        v-model="formData.lastName"
+        :value="props.modelValue.last_name"
         type="text"
         name="last-name"
         autocomplete="family-name"
         disabled
-        class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
+        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,
+          })
+        "
       />
-    </div>
+
-    <label for="email" class="block pb-1.5 leading-6">
+      <label for="email" class="block pb-1.5 leading-6">
-      {{ $t("a.E-Mail Adresse") }}
+        {{ $t("a.E-Mail Adresse") }}
-    </label>
+      </label>
-    <div class="mb-8">
+
       <input
         id="email"
-        v-model="formData.email"
+        :value="props.modelValue.email"
         type="email"
         name="email"
         autocomplete="email"
         disabled
-        class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
+        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,
+          })
+        "
       />
-    </div>
+    </section>
-    <h4 class="mb-4 block border-t pt-6 text-lg font-bold">
+    <section class="mt-8 border-t pt-8">
-      {{ $t("a.Privatadresse") }}
+      <h4 class="mb-4 text-lg font-bold">
-    </h4>
+        {{ $t("a.Privatadresse") }}
+      </h4>
 
-    <label for="email" class="block pb-1.5 leading-6">
+      <div class="flex flex-col justify-start md:flex-row md:space-x-4">
-      {{ $t("a.Strasse") }}
+        <div class="w-full md:max-w-sm">
-    </label>
+          <label for="street-address" class="block pb-1.5 leading-6">
-    <div class="mb-4">
+            {{ $t("a.Strasse") }}
-      <input
+          </label>
-        id="street"
+
-        v-model="formData.street"
+          <input
-        type="text"
+            id="street-address"
-        name="street"
+            :value="props.modelValue.street"
-        autocomplete="street"
+            type="text"
-        class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
+            name="street-address"
-      />
+            autocomplete="street-address"
-    </div>
+            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>
+
+        <div class="w-full md:max-w-[160px]">
+          <label for="street-number" class="block pb-1.5 leading-6">
+            {{ $t("a.Hausnummmer") }}
+          </label>
+
+          <input
+            id="street-number"
+            :value="props.modelValue.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>
+      <div class="flex flex-col justify-start md:flex-row md:space-x-4">
+        <div class="w-full md:max-w-[160px]">
+          <label for="postal-code" class="block pb-1.5 leading-6">
+            {{ $t("a.PLZ") }}
+          </label>
+
+          <input
+            id="postal-code"
+            :value="props.modelValue.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">
+          <label for="city" class="block pb-1.5 leading-6">
+            {{ $t("a.Ort") }}
+          </label>
+
+          <input
+            id="city"
+            :value="props.modelValue.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>
+      <label for="country" class="block pb-1.5 leading-6">
+        {{ $t("a.Land") }}
+      </label>
+
+      <select
+        id="country"
+        :value="props.modelValue.country"
+        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 }}
+        </option>
+      </select>
+    </section>
+  </div>
+  <div class="mb-4 bg-white p-3 md:p-6">
+    <h3 class="mb-8">{{ $t("a.Geschäftsdaten") }}</h3>
+    <section>
+      <label for="organisation" class="block pb-1.5 leading-6">
+        {{ $t("a.Unternehmen") }}
+      </label>
+
+      <select
+        id="organisation"
+        :value="props.modelValue.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"
+          :key="organisation.id"
+          :value="organisation.id"
+        >
+          {{ organisation.name }}
+        </option>
+      </select>
+    </section>
+    <section class="mt-8 border-t pt-8">
+      <h4 class="mb-4 text-lg font-bold">
+        {{ $t("a.Firmenanschrift") }}
+      </h4>
+
+      <div class="flex flex-col justify-start md:flex-row md:space-x-4">
+        <div class="w-full md:max-w-sm">
+          <label for="org-street-address" class="block pb-1.5 leading-6">
+            {{ $t("a.Strasse") }}
+          </label>
+
+          <input
+            id="org-street-address"
+            :value="props.modelValue.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>
+
+        <div class="w-full md:max-w-[160px]">
+          <label for="org-street-number" class="block pb-1.5 leading-6">
+            {{ $t("a.Hausnummmer") }}
+          </label>
+
+          <input
+            id="org-street-number"
+            :value="props.modelValue.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>
+      <div class="flex flex-col justify-start md:flex-row md:space-x-4">
+        <div class="w-full md:max-w-[160px]">
+          <label for="org-postal-code" class="block pb-1.5 leading-6">
+            {{ $t("a.PLZ") }}
+          </label>
+
+          <input
+            id="org-postal-code"
+            :value="props.modelValue.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">
+          <label for="org-city" class="block pb-1.5 leading-6">
+            {{ $t("a.Ort") }}
+          </label>
+
+          <input
+            id="org-city"
+            :value="props.modelValue.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>
+      <label for="org-country" class="block pb-1.5 leading-6">
+        {{ $t("a.Land") }}
+      </label>
+
+      <select
+        id="org-country"
+        :value="props.modelValue.organisation_country"
+        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 }}
+        </option>
+      </select>
+    </section>
+  </div>
+  <div class="mb-4 bg-white p-3 md:p-6">
+    <h3 class="mb-8">{{ $t("a.Rechnungsadresse") }}</h3>
+    <fieldset class="mt-4">
+      <legend class="sr-only">Notification method</legend>
+      <div class="space-y-4">
+        <div class="flex items-center">
+          <input
+            id="invoice-address-private"
+            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"
+            class="ml-3 block text-sm font-medium leading-6 text-gray-900"
+          >
+            {{ $t("a.Gleich wie die Privatadresse") }}
+          </label>
+        </div>
+        <div class="flex items-center">
+          <input
+            id="invoice-address-organisation"
+            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"
+            class="ml-3 block text-sm font-medium leading-6 text-gray-900"
+          >
+            {{ $t("a.Gleich wie die Firmenanschrift") }}
+          </label>
+        </div>
+      </div>
+    </fieldset>
   </div>
 </template>

client/src/pages/personalProfile/PersonalProfilePage.vue

@@ -7,20 +7,43 @@ import ProfileView from "@/components/personalProfile/ProfileView.vue";
 import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
 
 const user = useUserStore();
-const editMode = ref(true);
+const editMode = ref(false);
+
+const formData = ref();
+
+function startEditMode() {
+  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?.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,
+    invoice_address: user.invoice_address,
+  };
+  editMode.value = true;
+}
 </script>
 
 <template>
   <div class="flex flex-grow flex-col bg-gray-200 md:flex-row">
     <div class="bg-white p-8">
-      <section class="flex flex-col items-center space-y-2">
+      <section class="flex max-w-lg flex-col items-center space-y-2">
         <img
           :alt="user.first_name"
-          class="h-32 w-32 rounded-full md:h-48 md:w-48"
+          class="h-auto w-32 rounded-full md:w-48"
           :src="user.avatar_url"
         />
         <h3>{{ user.first_name }} {{ user.last_name }}</h3>
-        <div>{{ user.email }}</div>
+        <span>{{ user.email }}</span>
       </section>
     </div>
 
@@ -33,13 +56,13 @@ const editMode = ref(true);
           <button class="btn btn-primary">{{ $t("general.save") }}</button>
         </template>
         <template v-else>
-          <button class="btn btn-secondary" @click="editMode = true">
+          <button class="btn btn-secondary" @click="startEditMode">
             {{ $t("a.Profil bearbeiten") }}
           </button>
         </template>
       </div>
       <template v-if="editMode">
-        <ProfileEdit />
+        <ProfileEdit v-model="formData" />
         <div class="flex justify-end space-x-4">
           <button class="btn btn-secondary" @click="editMode = false">
             {{ $t("general.cancel") }}