Sort member list in room info
This commit is contained in:
parent
f5c75e3232
commit
b6dfe2298e
1 changed files with 33 additions and 30 deletions
|
|
@ -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 = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue