feat: edit mode

This commit is contained in:
Reto Aebersold 2024-01-25 11:10:10 +01:00
parent a0888fe966
commit f7748dec43
1 changed files with 17 additions and 10 deletions

View File

@ -1,20 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { useEntities } from "@/services/onboarding"; import { useEntities } from "@/services/onboarding";
import { computed } from "vue"; import { computed, ref } from "vue";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
const { t } = useTranslation();
const user = useUserStore(); const user = useUserStore();
const { organisations } = useEntities(); const { organisations } = useEntities();
const editMode = ref(false);
const { t } = useTranslation();
const organisationName = computed(() => { const organisationName = computed(() => {
const org = organisations.value.find((c) => c.id === user.organisation); const org = organisations.value.find((c) => c.id === user.organisation);
if (org) { if (org) {
return org.name; return org.name;
} }
return "Keine Organisation"; return t("a.Keine Angabe");
}); });
const privateAddress = computed(() => { const privateAddress = computed(() => {
@ -61,15 +62,17 @@ const invoiceAddress = computed(() => {
<h3>{{ user.first_name }} {{ user.last_name }}</h3> <h3>{{ user.first_name }} {{ user.last_name }}</h3>
<div>{{ user.email }}</div> <div>{{ user.email }}</div>
</section> </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>
<div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16"> <div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
<div class="flex justify-end"> <div class="flex justify-end space-x-4">
<button class="btn btn-secondary">{{ $t("a.Profil bearbeiten") }}</button> <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>
<div class="mb-4 bg-white p-3 md:p-6"> <div class="mb-4 bg-white p-3 md:p-6">
<h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3> <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> <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> <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> <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"> <label class="block font-semibold leading-6">
{{ $t("a.Privatadresse") }} {{ $t("a.Privatadresse") }}
</label> </label>