flaschengeist-users/src/pages/Settings.vue

82 lines
2.6 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 v-for="(item, index) in widgets" :key="index" class="full-height col-12">
<component :is="item.widget" />
</div>
<div class="col-12 text-left text-h6">Aktive Sessions:</div>
<user-session
v-for="(session, index) in sessions"
:key="'session' + index"
v-model="sessions[index]"
@delete="removeSession(session)"
/>
<q-btn label="List Widgets" @click="listWidgets" />
</q-page>
</div>
</template>
<script lang="ts">
import { useMainStore, useUserStore, useSessionStore, hasPermissions } from '@flaschengeist/api';
import MainUserSettings from '../components/settings/MainUserSettings.vue';
import { defineComponent, onBeforeMount, ref, computed, inject } from 'vue';
import UserSession from '../components/settings/UserSession.vue';
import { FG_Plugin } from '@flaschengeist/types';
import { Notify } from 'quasar';
export default defineComponent({
name: 'UserSettings',
components: { MainUserSettings, UserSession },
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);
Notify.create({
group: false,
type: 'positive',
message: 'Änderungen gespeichert',
timeout: 4000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }],
});
console.log(widgets);
}
function removeSession(s: FG.Session) {
sessions.value = sessions.value.filter((ss) => ss.token !== s.token);
}
const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
const widgets = computed(() =>
flaschengeist?.settingWidgets.filter((widget) => hasPermissions(widget.permissions))
);
function listWidgets() {
console.log(widgets);
}
return {
currentUser,
sessions,
updateUser,
removeSession,
widgets,
listWidgets,
};
},
});
</script>