From f7748dec439bb48fc30f96c5135330ea5bb257f6 Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Thu, 25 Jan 2024 11:10:10 +0100
Subject: [PATCH] feat: edit mode

---
 .../personalProfile/PersonalProfilePage.vue   | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/client/src/pages/personalProfile/PersonalProfilePage.vue b/client/src/pages/personalProfile/PersonalProfilePage.vue
index 3266a9b1..8558d72b 100644
--- a/client/src/pages/personalProfile/PersonalProfilePage.vue
+++ b/client/src/pages/personalProfile/PersonalProfilePage.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { useUserStore } from "@/stores/user";
 import { useEntities } from "@/services/onboarding";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useTranslation } from "i18next-vue";
 
+const { t } = useTranslation();
+
 const user = useUserStore();
 const { organisations } = useEntities();
-
-const { t } = useTranslation();
+const editMode = ref(false);
 
 const organisationName = computed(() => {
   const org = organisations.value.find((c) => c.id === user.organisation);
   if (org) {
     return org.name;
   }
-  return "Keine Organisation";
+  return t("a.Keine Angabe");
 });
 
 const privateAddress = computed(() => {
@@ -61,15 +62,17 @@ const invoiceAddress = computed(() => {
         <h3>{{ user.first_name }} {{ user.last_name }}</h3>
         <div>{{ user.email }}</div>
       </section>
-      <!--      <section class="mt-8 w-full border-t pt-6">-->
-      <!--        <h3 class="mb-2">{{ $t("a.Lehrgang") }}</h3>-->
-      <!--        <router-link class="link" to="/">Überbetriebliche Kurse</router-link>-->
-      <!--      </section>-->
     </div>
 
     <div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
-      <div class="flex justify-end">
-        <button class="btn btn-secondary">{{ $t("a.Profil bearbeiten") }}</button>
+      <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-primary">{{ $t("general.save") }}</button>
+        </template>
+        <template v-else>
+          <button class="btn btn-secondary">{{ $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>
@@ -78,6 +81,10 @@ const invoiceAddress = computed(() => {
           <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>