edit my details
This commit is contained in:
parent
8c5b4429b1
commit
6f135af4a6
7 changed files with 143 additions and 10 deletions
|
@ -1,10 +1,17 @@
|
|||
<template>
|
||||
<footer
|
||||
v-if="authCheck && routeName.includes('admin')"
|
||||
v-if="authCheck && (routeName.includes('admin') || routeName.includes('account'))"
|
||||
class="md:hidden flex flex-row h-16 min-h-16 justify-center md:justify-normal p-1 bg-white"
|
||||
>
|
||||
<div class="w-full flex flex-row gap-2 h-full align-middle">
|
||||
<TopLevelLink v-for="item in topLevel" :key="item.key" :link="item" :disableSubLink="true" />
|
||||
<TopLevelLink
|
||||
v-if="routeName.includes('admin')"
|
||||
v-for="item in topLevel"
|
||||
:key="item.key"
|
||||
:link="item"
|
||||
:disableSubLink="true"
|
||||
/>
|
||||
<TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disableSubLink="true" />
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
|
|
@ -5,8 +5,9 @@
|
|||
<h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">Mitgliederverwaltung</h1>
|
||||
</RouterLink>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<div v-if="authCheck && routeName.includes('admin')" class="hidden md:flex flex-row gap-2 h-full align-middle">
|
||||
<TopLevelLink v-for="item in topLevel" :key="item.key" :link="item" />
|
||||
<div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">
|
||||
<TopLevelLink v-if="routeName.includes('admin')" v-for="item in topLevel" :key="item.key" :link="item" />
|
||||
<TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disable-sub-link="true" />
|
||||
</div>
|
||||
<UserMenu v-if="authCheck" />
|
||||
</div>
|
||||
|
|
|
@ -464,7 +464,7 @@ const router = createRouter({
|
|||
{
|
||||
path: "me",
|
||||
name: "account-me",
|
||||
component: () => import("@/views/account/ViewSelect.vue"),
|
||||
component: () => import("@/views/account/Me.vue"),
|
||||
},
|
||||
{
|
||||
path: "logindata",
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
:to="{
|
||||
name:
|
||||
overviewFullOverwrite ??
|
||||
`${rootRoute}${useStagedOverviewLink ? ('-' + overviewOverwrite ?? activeNavigation) : ''}-default`,
|
||||
`${rootRoute}${useStagedOverviewLink ? '-' + (overviewOverwrite ?? activeNavigation) : ''}-default`,
|
||||
}"
|
||||
class="mid:hidden text-primary"
|
||||
>
|
||||
|
@ -37,11 +37,11 @@ export default defineComponent({
|
|||
props: {
|
||||
overviewFullOverwrite: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: null,
|
||||
},
|
||||
overviewOverwrite: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: null,
|
||||
},
|
||||
useStagedOverviewLink: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<MainTemplate :useStagedOverviewLink="false">
|
||||
<template #topBar>
|
||||
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||||
<h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>
|
||||
|
|
125
src/views/account/Me.vue
Normal file
125
src/views/account/Me.vue
Normal file
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<MainTemplate :useStagedOverviewLink="false">
|
||||
<template #topBar>
|
||||
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||||
<h1 class="font-bold text-xl h-8">Mein Account</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<form
|
||||
v-else-if="user != null"
|
||||
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
|
||||
@submit.prevent="triggerUpdateUser"
|
||||
>
|
||||
<div>
|
||||
<label for="username">Nutzername</label>
|
||||
<input type="text" id="username" required v-model="user.username" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="firstname">Vorname</label>
|
||||
<input type="text" id="firstname" required v-model="user.firstname" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Nachname</label>
|
||||
<input type="text" id="lastname" required v-model="user.lastname" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="mail">Mailadresse</label>
|
||||
<input type="email" id="mail" required v-model="user.mail" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
|
||||
verwerfen
|
||||
</button>
|
||||
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
|
||||
speichern
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import isEqual from "lodash.isEqual";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
origin: null as null | UserViewModel,
|
||||
user: null as null | UserViewModel,
|
||||
timeout: null as any,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canSaveOrReset(): boolean {
|
||||
return isEqual(this.origin, this.user);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.user = cloneDeep(this.origin);
|
||||
},
|
||||
fetchItem() {
|
||||
this.$http
|
||||
.get(`/user/me`)
|
||||
.then((result) => {
|
||||
this.loading = "fetched";
|
||||
this.user = result.data;
|
||||
this.origin = cloneDeep(result.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = "failed";
|
||||
});
|
||||
},
|
||||
triggerUpdateUser(e: any) {
|
||||
if (this.user == null) return;
|
||||
let formData = e.target.elements;
|
||||
this.status = "loading";
|
||||
this.$http
|
||||
.patch(`/user/me`, {
|
||||
username: formData.username.value,
|
||||
firstname: formData.firstname.value,
|
||||
lastname: formData.lastname.value,
|
||||
mail: formData.mail.value,
|
||||
})
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
|
@ -6,7 +6,7 @@
|
|||
<RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
|
||||
</template>
|
||||
<template #list>
|
||||
<RoutingLink title="Mein Account" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
|
||||
<RoutingLink title="Mein Account" :link="{ name: 'account-me' }" :active="activeRouteName == 'account-me'" />
|
||||
<RoutingLink
|
||||
title="Anmeldedaten"
|
||||
:link="{ name: 'account-logindata' }"
|
||||
|
|
Loading…
Reference in a new issue