Optionally show invites in room list

Work on issue #109. Also, add a loading indicator for issue #43.

src/components/Home.vue

@@ -1,7 +1,24 @@
 <template>
-  <div>
+  <div class="pa-4">
-    <RoomList />
+    <RoomList showInvites />
     <v-btn block depressed class="outlined-button" @click.stop="logout">Logout</v-btn>
+
+    <!-- Loading indicator -->
+    <v-container
+      fluid
+      fill-height
+      style="position: absolute;background-color:rgba(0,0,0,0.2)"
+      v-if="loading"
+    >
+      <v-row align="center" justify="center">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          ></v-progress-circular>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
@@ -12,6 +29,11 @@ export default {
   components: {
     RoomList
   },
+  computed: {
+    loading() {
+      return !this.$matrix.ready;
+    }
+  },
   methods: {
     logout() {
       //TODO - For guest accounts, show warning about not being able to rejoin.

src/components/Profile.vue

@@ -28,6 +28,7 @@
           </v-col>
           <v-col class="flex-shrink-1 flex-grow-1">
             <div class="h1">{{ displayName }}</div>
+            <div class="text-center">{{ $matrix.currentUser.user_id }}</div>
             <div v-if="$matrix.currentUser.is_guest">
               This identity is temporary. Set a password to use it again.
             </div>

src/components/RoomList.vue

@@ -1,8 +1,26 @@
 <template>
   <v-list dense class="room-list">
+    <div v-if="showInvites" class="h4">{{invitesTitle}}</div>
+    <v-list-item-group v-if="showInvites" v-model="currentRoomId" color="primary">
+      <v-slide-y-transition group>
+      <v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in $matrix.invites" :key="room.roomId" :value="room.roomId">
+        <v-list-item-avatar size="40" color="#e0e0e0">
+          <v-img :src="room.avatar" />
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title>{{ room.name || room.summary.info.title }}</v-list-item-title>
+          <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
+        </v-list-item-content>
+        <v-list-item-action>
+          <v-btn @click.stop="acceptInvitation(room)" icon><v-icon>check_circle</v-icon></v-btn>
+          <v-btn @click.stop="rejectInvitation(room)" icon><v-icon>cancel</v-icon></v-btn>
+        </v-list-item-action>
+      </v-list-item>
+      </v-slide-y-transition>
+    </v-list-item-group>
     <div class="h4">{{title}}</div>
     <v-list-item-group v-model="currentRoomId" color="primary">
-      <v-list-item v-for="room in $matrix.rooms" :key="room.roomId" :value="room.roomId">
+      <v-list-item v-for="room in $matrix.joinedRooms" :key="room.roomId" :value="room.roomId">
         <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
@@ -18,6 +36,7 @@
 
 <script>
 import util from "../plugins/utils";
+import Vue from 'vue';
 
 export default {
   name: "RoomList",
@@ -26,17 +45,60 @@ export default {
     title: {
       type: String,
       default: "Rooms"
+    },
+    invitesTitle: {
+      type: String,
+      default: "Invites"
+    },
+    showInvites: {
+      type: Boolean,
+      default: false
     }
   },
 
   data: () => ({
     currentRoomId: null,
+    /** A list of rooms currently processing some operation, like "join" or "reject" */
+    roomsProcessing: {},
   }),
 
   methods: {
     notificationCount(room) {
       return room.getUnreadNotificationCount('total') || 0;
-    }
+    },
+
+    acceptInvitation(room) {
+      Vue.set(this.roomsProcessing, room.roomId, true);
+      this.$matrix.matrixClient.joinRoom(room.roomId)
+        .then((ignoredRoom) => {
+          this.$nextTick(() => {
+            this.$navigation.push(
+              {
+                name: "Chat",
+                params: { roomId: util.sanitizeRoomId(room.getCanonicalAlias() || room.roomId) },
+              },
+              -1
+            );
+          });
+        })
+        .catch((err) => {
+          console.error("Failed to accept invite: ", err);
+        })
+        .finally(() => {
+          Vue.delete(this.roomsProcessing, room.roomId);
+        });
+    },
+
+    rejectInvitation(room) {
+      Vue.set(this.roomsProcessing, room.roomId, true);
+      this.$matrix.leaveRoom(room.roomId)
+        .catch((err) => {
+          console.error("Failed to reject invite: ", err);
+        })
+        .finally(() => {
+          Vue.delete(this.roomsProcessing, room.roomId);
+        });
+    },
   },
 
   watch: {
@@ -51,3 +113,10 @@ export default {
 <style lang="scss">
 @import "@/assets/css/chat.scss";
 </style>
+
+<style lang="scss" scoped>
+/** Align action buttons side to side */
+.v-list-item__action--stack {
+  flex-direction: row !important;
+}
+</style>

src/services/matrix.service.js

@@ -67,6 +67,12 @@ export default {
                         return room._selfMembership === 'join'
                     });
                 },
+
+                invites() {
+                    return this.rooms.filter(room => {
+                        return room._selfMembership === 'invite'
+                    });
+                }
             },
 
             watch: {
@@ -264,6 +270,7 @@ export default {
                         client.on("event", this.onEvent);
                         client.on("Room", this.onRoom);
                         client.on("Session.logged_out", this.onSessionLoggedOut);
+                        client.on("Room.myMembership", this.onRoomMyMembership);
                     }
                 },
 
@@ -272,6 +279,7 @@ export default {
                         client.off("event", this.onEvent);
                         client.off("Room", this.onRoom);
                         client.off("Session.logged_out", this.onSessionLoggedOut);
+                        client.off("Room.myMembership", this.onRoomMyMembership);
                     }
                 },
 
@@ -302,6 +310,15 @@ export default {
                     this.updateNotificationCount();
                 },
 
+                onRoomMyMembership(room) {
+                    if (room._selfMembership === "invite") {
+                        // Invitation. Need to call "recalculate" to pick
+                        // up room name, not sure why exactly.
+                        room.recalculate();
+                        this.reloadRooms();
+                    }
+                },
+
                 onSessionLoggedOut() {
                     console.log("Logged out!");
                     if (this.matrixClient) {