flaschengeist-frontend/src/plugins/user/pages/Settings.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 { defineComponent, onBeforeMount, ref } from 'vue';
import Session from '../components/settings/Sessions.vue';
import MainUserSettings from '../components/settings/MainUserSettings.vue';
import { useMainStore } from 'src/store';
import { useSessionStore } from '../store';
import { useUserStore } from '../store';

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>