From a765d7fc7dd732478d245a624d27b9de3ddc1643 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Thu, 17 Jun 2021 15:17:02 +0530
Subject: [PATCH] Create memberlist view from rightpanel

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 .../session/rightpanel/RightPanelViewModel.js | 19 +++++++++++++++++++
 .../ui/session/rightpanel/RightPanelView.js   |  8 ++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

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)
+            ]
         );
     }
 }