diff --git a/src/domain/session/rightpanel/RightPanelViewModel.js b/src/domain/session/rightpanel/RightPanelViewModel.js index 2ab291bd..a9cdc23b 100644 --- a/src/domain/session/rightpanel/RightPanelViewModel.js +++ b/src/domain/session/rightpanel/RightPanelViewModel.js @@ -1,5 +1,6 @@ import {ViewModel} from "../../ViewModel.js"; import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js"; +import {MemberListViewModel} from "./MemberListViewModel.js"; export class RightPanelViewModel extends ViewModel { constructor(options) { @@ -9,11 +10,16 @@ export class RightPanelViewModel extends ViewModel { } get roomDetailsViewModel() { return this._roomDetailsViewModel; } + get memberListViewModel() { return this._memberListViewModel; } _setupNavigation() { const details = this.navigation.observe("details"); this.track(details.subscribe(() => this._toggleRoomDetailsPanel())); this._toggleRoomDetailsPanel(); + + const members = this.navigation.observe("members"); + this.track(members.subscribe(() => this._toggleMemberListPanel())); + this._toggleMemberListPanel(); } _toggleRoomDetailsPanel() { @@ -25,4 +31,17 @@ export class RightPanelViewModel extends ViewModel { } this.emitChange("roomDetailsViewModel"); } + + async _toggleMemberListPanel() { + this._memberListViewModel = this.disposeTracked(this._memberListViewModel); + const enable = !!this.navigation.path.get("members")?.value; + if (enable) { + const list = await this._room.loadMemberList(); + const members = list.members; + this._memberListViewModel = this.track( + new MemberListViewModel(this.childOptions({members})) + ); + } + this.emitChange("memberListViewModel"); + } } diff --git a/src/platform/web/ui/session/rightpanel/RightPanelView.js b/src/platform/web/ui/session/rightpanel/RightPanelView.js index 67a34012..c6bf3b70 100644 --- a/src/platform/web/ui/session/rightpanel/RightPanelView.js +++ b/src/platform/web/ui/session/rightpanel/RightPanelView.js @@ -1,10 +1,14 @@ import {TemplateView} from "../../general/TemplateView.js"; import {RoomDetailsView} from "./RoomDetailsView.js"; +import {MemberListView} from "./MemberListView.js"; export class RightPanelView extends TemplateView { render(t, vm) { - return t.div({ className: "RightPanelView"}, - t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null) + return t.div({className: "RightPanelView"}, + [ + t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null), + t.mapView(vm => vm.memberListViewModel, memberListViewModel => memberListViewModel ? new MemberListView(memberListViewModel) : null) + ] ); } }