Sort member list in room info

This commit is contained in:
N Pex 2023-01-23 12:09:15 +00:00
parent f5c75e3232
commit b6dfe2298e

View file

@ -168,12 +168,12 @@
<v-card class="members ma-3" flat> <v-card class="members ma-3" flat>
<v-card-title class="h2" <v-card-title class="h2"
>{{ $t("room_info.members") }}<v-spacer></v-spacer> >{{ $t("room_info.members") }}<v-spacer></v-spacer>
<div>{{ memberCount }}</div></v-card-title <div>{{ members.length }}</div></v-card-title
> >
<v-card-text> <v-card-text>
<div <div
class="member ma-2" class="member ma-2"
v-for="(member, index) in joinedMembers" v-for="(member, index) in members"
:key="member.userId" :key="member.userId"
v-show="showAllMembers || index < SHOW_MEMBER_LIMIT" v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
@click="toggleMemberExpanded(member)" @click="toggleMemberExpanded(member)"
@ -216,7 +216,7 @@
:member="member" :member="member"
/> />
</div> </div>
<div class="show-all" @click="showAllMembers = !showAllMembers" v-if="joinedMembers.length > SHOW_MEMBER_LIMIT"> <div class="show-all" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
{{ {{
showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all")
}} }}
@ -294,7 +294,7 @@ export default {
}, },
data() { data() {
return { return {
memberCount: null, members: [],
user: null, user: null,
displayName: "", displayName: "",
showAllMembers: false, showAllMembers: false,
@ -323,7 +323,7 @@ export default {
}, },
mounted() { mounted() {
this.$matrix.on("Room.timeline", this.onEvent); this.$matrix.on("Room.timeline", this.onEvent);
this.updateMemberCount(); this.updateMembers();
this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId); this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
this.displayName = this.user.displayName; this.displayName = this.user.displayName;
@ -362,30 +362,13 @@ export default {
} }
return ""; return "";
}, },
joinedMembers() {
if (!this.room) {
return [];
}
const myUserId = this.$matrix.currentUserId;
return this.room.getJoinedMembers().sort((a, b) => {
if (a.userId == myUserId) {
return -1;
} else if (b.userId == myUserId) {
return 1;
}
const aName = a.user ? a.user.displayName : a.name;
const bName = b.user ? b.user.displayName : b.name;
return aName.localeCompare(bName);
});
},
}, },
watch: { watch: {
room: { room: {
handler(ignoredNewVal, ignoredOldVal) { handler(ignoredNewVal, ignoredOldVal) {
console.log("RoomInfo: Current room changed"); console.log("RoomInfo: Current room changed");
this.updateMemberCount(); this.updateMembers();
this.updateQRCode(); this.updateQRCode();
}, },
}, },
@ -393,19 +376,39 @@ export default {
methods: { methods: {
onEvent(event) { onEvent(event) {
if (event.getRoomId() !== this.roomId) { if (this.room && this.room.roomId == event.getRoomId()) {
return; // Not for this room // For this room
if (event.getType() == "m.room.member") {
this.updateMembers();
} }
if (event.getType() == "m.room.member") {
this.updateMemberCount();
} }
}, },
updateMemberCount() { updateMembers() {
if (this.room) { if (this.room) {
this.memberCount = this.room.getJoinedMemberCount(); const myUserId = this.$matrix.currentUserId;
this.members = this.room.getJoinedMembers().sort((a, b) => {
// Place ourselves at the top!
if (a.userId == myUserId) {
return -1;
} else if (b.userId == myUserId) {
return 1;
}
// Then sort by power level
if (a.powerLevel > b.powerLevel) {
return -1;
} else if (b.powerLevel > a.powerLevel) {
return 1;
}
// Then by name
const aName = a.user ? a.user.displayName : a.name;
const bName = b.user ? b.user.displayName : b.name;
return aName.localeCompare(bName);
});
} else { } else {
this.memberCount = null; this.members = [];
} }
}, },