src/plugins/user/components/settings/Session.vue

@@ -1,27 +1,27 @@
 <template>
   <q-card class="col-12" height="">
-    <q-card-section v-if="isThisSession(session.token)" class="text-caption">
+    <q-card-section v-if="isThisSession(modelValue.token)" class="text-caption">
       Diese Session.
     </q-card-section>
     <q-card-section>
       <div class="row">
         <div class="col-xs-12 col-sm-6">
           Browser:
-          <q-icon :name="getBrowserIcon(session.browser)" size="24px" />
-          {{ session.browser }}
+          <q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
+          {{ modelValue.browser }}
         </div>
         <div class="col-xs-12 col-sm-6">
           Plattform:
-          <q-icon :name="getPlatformIcon(session.platform)" size="24px" />
-          {{ session.platform }}
+          <q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
+          {{ modelValue.platform }}
         </div>
       </div>
       <div v-if="!isEdit" class="row">
         <div class="col-xs-12 col-sm-6">
           Lebenszeit:
-          {{ session.lifetime }}
+          {{ modelValue.lifetime }}
         </div>
-        <div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(session.expires) }}</div>
+        <div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(modelValue.expires) }}</div>
       </div>
       <div v-else class="row q-my-sm">
         <q-input
@@ -36,7 +36,7 @@
     </q-card-section>
     <q-card-actions v-if="!isEdit" align="right">
       <q-btn flat round dense icon="mdi-pencil" @click="edit(true)" />
-      <q-btn flat round dense icon="mdi-delete" @click="deleteSession(session.token)" />
+      <q-btn flat round dense icon="mdi-delete" @click="deleteSession(modelValue.token)" />
     </q-card-actions>
     <q-card-actions v-else align="right">
       <q-btn flat dense label="Abbrechen" @click="edit(false)" />
@@ -52,14 +52,18 @@ import { useMainStore } from 'src/store';
 import { useSessionStore } from '../../store';
 
 export default defineComponent({
-  name: 'Sessions',
+  name: 'Session',
   props: {
-    session: {
+    modelValue: {
       required: true,
       type: Object as PropType<FG.Session>,
     },
   },
-  setup(props) {
+  emits: {
+    'update:modelValue': (s: FG.Session) => !!s,
+    delete: () => true,
+  },
+  setup(props, { emit }) {
     const sessionStore = useSessionStore();
     const mainStore = useMainStore();
 
@@ -94,6 +98,7 @@ export default defineComponent({
 
     async function deleteSession(token: string) {
       await sessionStore.deleteSession(token);
+      emit('delete');
     }
     function isThisSession(token: string) {
       return mainStore.session?.token === token;
@@ -131,14 +136,18 @@ export default defineComponent({
     });
 
     function edit(value: boolean) {
-      lifetime.value = props.session.lifetime;
+      lifetime.value = props.modelValue.lifetime;
       isEdit.value = value;
     }
 
     async function save() {
       console.log(lifetime.value);
       isEdit.value = false;
-      await sessionStore.updateSession(lifetime.value, props.session.token);
+      await sessionStore.updateSession(lifetime.value, props.modelValue.token);
+      emit(
+        'update:modelValue',
+        Object.assign(Object.assign({}, props.modelValue), { lifetime: lifetime.value })
+      );
     }
 
     return {

src/plugins/user/pages/Settings.vue

@@ -8,14 +8,19 @@
         <MainUserSettings :user="currentUser" @update:user="updateUser" />
       </q-card>
       <div class="col-12 text-left text-h6">Aktive Sessions:</div>
-      <sessions v-for="(session, index) in sessions" :key="'session' + index" :session="session" />
+      <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 Sessions from '../components/settings/Sessions.vue';
+import Session from '../components/settings/Sessions.vue';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
 import { useMainStore } from 'src/store';
 import { useSessionStore } from '../store';
@@ -23,7 +28,7 @@ import { useUserStore } from '../store';
 
 export default defineComponent({
   // name: 'PageName'
-  components: { Sessions, MainUserSettings },
+  components: { Session, MainUserSettings },
   setup() {
     const mainStore = useMainStore();
     const sessionStore = useSessionStore();
@@ -37,10 +42,15 @@ export default defineComponent({
       await userStore.updateUser(value);
     }
 
+    function removeSession(s: FG.Session) {
+      sessions.value = sessions.value.filter((ss) => ss.token !== s.token);
+    }
+
     return {
       currentUser,
       sessions,
       updateUser,
+      removeSession,
     };
   },
 });