flaschengeist-users/src/pages/Settings.vue

56 lines
1.7 KiB
Vue

<template>
<div>
<q-page padding class="fit row justify-center content-center items-center q-gutter-sm">
<q-card class="col-12">
<q-card-section class="fit row justify-start content-center items-center">
<div class="col-12 text-center text-h6">Benutzereinstellungen</div>
</q-card-section>
<MainUserSettings :user="currentUser" @update:user="updateUser" />
</q-card>
<div class="col-12 text-left text-h6">Aktive Sessions:</div>
<Session
v-for="(session, index) in sessions"
:key="'session' + index"
v-model="sessions[index]"
@delete="removeSession(session)"
/>
</q-page>
</div>
</template>
<script lang="ts">
import { useMainStore, useUserStore, useSessionStore } from '@flaschengeist/api';
import MainUserSettings from '../components/settings/MainUserSettings.vue';
import { defineComponent, onBeforeMount, ref } from 'vue';
import Session from '../components/settings/Session.vue';
export default defineComponent({
// name: 'PageName'
components: { Session, MainUserSettings },
setup() {
const mainStore = useMainStore();
const sessionStore = useSessionStore();
const userStore = useUserStore();
onBeforeMount(() => sessionStore.getSessions().then((s) => (sessions.value = s)));
const currentUser = ref(mainStore.currentUser);
const sessions = ref([] as FG.Session[]);
async function updateUser(value: FG.User) {
await userStore.updateUser(value);
}
function removeSession(s: FG.Session) {
sessions.value = sessions.value.filter((ss) => ss.token !== s.token);
}
return {
currentUser,
sessions,
updateUser,
removeSession,
};
},
});
</script>