From 5d956cbfd76c798580f8587624f8575565d58ff9 Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Thu, 25 Jan 2024 14:11:55 +0100
Subject: [PATCH] feat: edit view

---
 .../personalProfile/ProfileEdit.vue           |  91 +++++++++++
 .../personalProfile/ProfileView.vue           |  95 +++++++++++
 .../personalProfile/PersonalProfilePage.vue   | 148 +++---------------
 3 files changed, 206 insertions(+), 128 deletions(-)
 create mode 100644 client/src/components/personalProfile/ProfileEdit.vue
 create mode 100644 client/src/components/personalProfile/ProfileView.vue

diff --git a/client/src/components/personalProfile/ProfileEdit.vue b/client/src/components/personalProfile/ProfileEdit.vue
new file mode 100644
index 00000000..76591b0a
--- /dev/null
+++ b/client/src/components/personalProfile/ProfileEdit.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+import { useEntities } from "@/services/onboarding";
+import { ref } from "vue";
+
+const user = useUserStore();
+const { organisations } = useEntities();
+
+const formData = ref({
+  firstName: user.first_name,
+  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">
+      {{ $t("a.Vorname") }}
+    </label>
+    <div class="mb-4">
+      <input
+        v-model="formData.firstName"
+        type="text"
+        name="first-name"
+        id="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"
+      />
+    </div>
+    <label for="last-name" class="block pb-1.5 leading-6">
+      {{ $t("a.Name") }}
+    </label>
+    <div class="mb-4">
+      <input
+        v-model="formData.lastName"
+        type="text"
+        name="last-name"
+        id="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"
+      />
+    </div>
+    <label for="email" class="block pb-1.5 leading-6">
+      {{ $t("a.E-Mail Adresse") }}
+    </label>
+    <div class="mb-8">
+      <input
+        v-model="formData.email"
+        type="email"
+        name="email"
+        id="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"
+      />
+    </div>
+    <h4 class="mb-4 block border-t pt-6 text-lg font-bold">
+      {{ $t("a.Privatadresse") }}
+    </h4>
+
+    <label for="email" class="block pb-1.5 leading-6">
+      {{ $t("a.Strasse") }}
+    </label>
+    <div class="mb-4">
+      <input
+        v-model="formData.street"
+        type="text"
+        name="street"
+        id="street"
+        autocomplete="street"
+        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"
+      />
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/personalProfile/ProfileView.vue b/client/src/components/personalProfile/ProfileView.vue
new file mode 100644
index 00000000..7f9d4902
--- /dev/null
+++ b/client/src/components/personalProfile/ProfileView.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+import { computed } from "vue";
+import { useEntities } from "@/services/onboarding";
+import { useTranslation } from "i18next-vue";
+
+const { t } = useTranslation();
+
+const user = useUserStore();
+const { organisations } = useEntities();
+
+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 organisationName = computed(() => {
+  const org = organisations.value.find((c) => c.id === user.organisation);
+  if (org) {
+    return org.name;
+  }
+  return t("a.Keine Angabe");
+});
+
+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>
+  <div class="mb-4 bg-white p-3 md:p-6">
+    <h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3>
+    <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
+      <label class="block font-semibold leading-6">{{ $t("a.Vorname") }}</label>
+      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.first_name }}</div>
+      <label class="block font-semibold leading-6">{{ $t("a.Name") }}</label>
+      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.last_name }}</div>
+      <label class="block font-semibold leading-6">
+        {{ $t("a.E-Mail Adresse") }}
+      </label>
+      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.email }}</div>
+      <label class="block font-semibold leading-6">
+        {{ $t("a.Privatadresse") }}
+      </label>
+      <div class="mb-3 sm:col-span-2 sm:mb-0">
+        <template v-if="privateAddress">
+          {{ privateAddress }}
+        </template>
+        <span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="bg-white p-3 md:p-6">
+    <h3 class="my-2">{{ $t("a.Geschäftsdaten") }}</h3>
+    <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
+      <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.Firmenanschrift") }}
+      </label>
+      <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>
+  <div class="bg-white p-3 md:p-6">
+    <h3 class="my-2">{{ $t("a.Rechnungsadresse") }}</h3>
+    {{ invoiceAddress }}
+  </div>
+</template>
diff --git a/client/src/pages/personalProfile/PersonalProfilePage.vue b/client/src/pages/personalProfile/PersonalProfilePage.vue
index 8558d72b..f659dddf 100644
--- a/client/src/pages/personalProfile/PersonalProfilePage.vue
+++ b/client/src/pages/personalProfile/PersonalProfilePage.vue
@@ -1,53 +1,13 @@
 <script setup lang="ts">
 import { useUserStore } from "@/stores/user";
-import { useEntities } from "@/services/onboarding";
-import { computed, ref } from "vue";
-import { useTranslation } from "i18next-vue";
 
-const { t } = useTranslation();
+import { ref } from "vue";
+
+import ProfileView from "@/components/personalProfile/ProfileView.vue";
+import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
 
 const user = useUserStore();
-const { organisations } = useEntities();
-const editMode = ref(false);
-
-const organisationName = computed(() => {
-  const org = organisations.value.find((c) => c.id === user.organisation);
-  if (org) {
-    return org.name;
-  }
-  return t("a.Keine Angabe");
-});
-
-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");
-});
+const editMode = ref(true);
 </script>
 
 <template>
@@ -67,95 +27,27 @@ const invoiceAddress = computed(() => {
     <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">
         <template v-if="editMode">
-          <button class="btn btn-secondary">{{ $t("general.cancel") }}</button>
+          <button class="btn btn-secondary" @click="editMode = false">
+            {{ $t("general.cancel") }}
+          </button>
           <button class="btn btn-primary">{{ $t("general.save") }}</button>
         </template>
         <template v-else>
-          <button class="btn btn-secondary">{{ $t("a.Profil bearbeiten") }}</button>
+          <button class="btn btn-secondary" @click="editMode = true">
+            {{ $t("a.Profil bearbeiten") }}
+          </button>
         </template>
       </div>
-      <div class="mb-4 bg-white p-3 md:p-6">
-        <h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3>
-        <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
-          <label class="block font-semibold leading-6">{{ $t("a.Vorname") }}</label>
-          <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.first_name }}</div>
-          <label class="block font-semibold leading-6">{{ $t("a.Name") }}</label>
-          <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.last_name }}</div>
-          <label class="block font-semibold leading-6">
-            {{ $t("a.E-Mail Adresse") }}
-          </label>
-          <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.email }}</div>
-          <label class="block font-semibold leading-6">
-            {{ $t("a.Privatadresse") }}
-          </label>
-          <div class="mb-3 sm:col-span-2 sm:mb-0">
-            <template v-if="privateAddress">
-              {{ privateAddress }}
-            </template>
-            <span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
-          </div>
+      <template v-if="editMode">
+        <ProfileEdit />
+        <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">{{ $t("general.save") }}</button>
         </div>
-      </div>
-      <div class="bg-white p-3 md:p-6">
-        <h3 class="my-2">{{ $t("a.Geschäftsdaten") }}</h3>
-        <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
-          <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.Firmenanschrift") }}
-          </label>
-          <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>
-      <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>-->
+      </template>
+      <ProfileView v-else />
     </div>
   </div>
 </template>