keanu-weblite/src/components/RoomList.vue

<template>
  <v-list dense class="room-list">
    <div v-if="showInvites && $matrix.invites.length > 0" 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-if="showCreate" @click.stop="$emit('newroom')">
        <v-list-item-content>
          <v-list-item-title class="new-room">{{
            $t("menu.new_room")
          }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-list-item
        v-for="room in $matrix.joinedRooms"
        :key="room.roomId"
        :value="room.roomId"
        style="position: relative"
      >
        <v-list-item-avatar size="40" color="#e0e0e0">
          <v-img :src="room.avatar" />
        </v-list-item-avatar>
        <div class="room-list-notification-count">
          {{ notificationCount(room) }}
        </div>
        <v-list-item-content>
          <v-list-item-title>{{ 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>
    </v-list-item-group>
  </v-list>
</template>

<script>
import util from "../plugins/utils";
import Vue from "vue";

export default {
  name: "RoomList",

  props: {
    title: {
      type: String,
      default: "Rooms",
    },
    invitesTitle: {
      type: String,
      default: "Invites",
    },
    showInvites: {
      type: Boolean,
      default: false,
    },
    showCreate: {
      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: {
    currentRoomId() {
      if (this.currentRoomId == null) {
        // Ignore, this is caused by "new room" etc.
        return;
      }
      this.$emit("close");
      this.$navigation.push(
        {
          name: "Chat",
          params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
        },
        -1
      );
    },
  },
};
</script>

<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>