feat: edit mode
This commit is contained in:
parent
a0888fe966
commit
f7748dec43
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue