Create memberlist view from rightpanel

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-06-17 15:17:02 +05:30
parent f3c7ab337d
commit a765d7fc7d
2 changed files with 25 additions and 2 deletions

View file

@ -1,5 +1,6 @@
import {ViewModel} from "../../ViewModel.js"; import {ViewModel} from "../../ViewModel.js";
import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js"; import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
import {MemberListViewModel} from "./MemberListViewModel.js";
export class RightPanelViewModel extends ViewModel { export class RightPanelViewModel extends ViewModel {
constructor(options) { constructor(options) {
@ -9,11 +10,16 @@ export class RightPanelViewModel extends ViewModel {
} }
get roomDetailsViewModel() { return this._roomDetailsViewModel; } get roomDetailsViewModel() { return this._roomDetailsViewModel; }
get memberListViewModel() { return this._memberListViewModel; }
_setupNavigation() { _setupNavigation() {
const details = this.navigation.observe("details"); const details = this.navigation.observe("details");
this.track(details.subscribe(() => this._toggleRoomDetailsPanel())); this.track(details.subscribe(() => this._toggleRoomDetailsPanel()));
this._toggleRoomDetailsPanel(); this._toggleRoomDetailsPanel();
const members = this.navigation.observe("members");
this.track(members.subscribe(() => this._toggleMemberListPanel()));
this._toggleMemberListPanel();
} }
_toggleRoomDetailsPanel() { _toggleRoomDetailsPanel() {
@ -25,4 +31,17 @@ export class RightPanelViewModel extends ViewModel {
} }
this.emitChange("roomDetailsViewModel"); 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");
}
} }

View file

@ -1,10 +1,14 @@
import {TemplateView} from "../../general/TemplateView.js"; import {TemplateView} from "../../general/TemplateView.js";
import {RoomDetailsView} from "./RoomDetailsView.js"; import {RoomDetailsView} from "./RoomDetailsView.js";
import {MemberListView} from "./MemberListView.js";
export class RightPanelView extends TemplateView { export class RightPanelView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({className: "RightPanelView"}, return t.div({className: "RightPanelView"},
t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null) [
t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null),
t.mapView(vm => vm.memberListViewModel, memberListViewModel => memberListViewModel ? new MemberListView(memberListViewModel) : null)
]
); );
} }
} }