From 1a16728d47a780be4c58d5a59511c78d5485ad05 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 21 Aug 2023 17:12:39 +0530
Subject: [PATCH] Open panel when button is clicked

---
 src/domain/session/rightpanel/RightPanelViewModel.js     | 2 ++
 src/platform/web/ui/session/rightpanel/MemberListView.js | 8 +++++++-
 src/platform/web/ui/session/rightpanel/RightPanelView.js | 3 +++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/domain/session/rightpanel/RightPanelViewModel.js b/src/domain/session/rightpanel/RightPanelViewModel.js
index 5a8c2079..df06b88a 100644
--- a/src/domain/session/rightpanel/RightPanelViewModel.js
+++ b/src/domain/session/rightpanel/RightPanelViewModel.js
@@ -18,6 +18,7 @@ import {ViewModel} from "../../ViewModel";
 import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
 import {MemberListViewModel} from "./MemberListViewModel.js";
 import {MemberDetailsViewModel} from "./MemberDetailsViewModel.js";
+import {InvitePanelViewModel} from "./InvitePanelViewModel";
 import {DeviceVerificationViewModel} from "../verification/DeviceVerificationViewModel";
 
 export class RightPanelViewModel extends ViewModel {
@@ -61,6 +62,7 @@ export class RightPanelViewModel extends ViewModel {
 
     _setupNavigation() {
         this._hookUpdaterToSegment("details", RoomDetailsViewModel, () => { return {room: this._room}; });
+        this._hookUpdaterToSegment("invite", InvitePanelViewModel, () => { return {room: this._room}; });
         this._hookUpdaterToSegment("members", MemberListViewModel, () => this._getMemberListArguments());
         this._hookUpdaterToSegment("member", MemberDetailsViewModel, () => this._getMemberDetailsArguments(),
             () => {
diff --git a/src/platform/web/ui/session/rightpanel/MemberListView.js b/src/platform/web/ui/session/rightpanel/MemberListView.js
index fdb7001d..18355428 100644
--- a/src/platform/web/ui/session/rightpanel/MemberListView.js
+++ b/src/platform/web/ui/session/rightpanel/MemberListView.js
@@ -27,7 +27,13 @@ export class MemberListView extends TemplateView {
         }, tileViewModel => new MemberTileView(tileViewModel));
         return t.div({ className: "MemberListView" }, [
             t.div({ className: "MemberListView__invite-container" }, [
-                t.button({ className: "MemberListView__invite-btn button-action primary" }, vm.i18n`Invite to this room`),
+                t.button(
+                    {
+                        className: "MemberListView__invite-btn button-action primary",
+                        onClick: () => vm.openInvitePanel(),
+                    },
+                    vm.i18n`Invite to this room`
+                ),
             ]),
             t.view(list),
         ]);
diff --git a/src/platform/web/ui/session/rightpanel/RightPanelView.js b/src/platform/web/ui/session/rightpanel/RightPanelView.js
index 738f8cb6..6e4f5e25 100644
--- a/src/platform/web/ui/session/rightpanel/RightPanelView.js
+++ b/src/platform/web/ui/session/rightpanel/RightPanelView.js
@@ -20,6 +20,7 @@ import {MemberListView} from "./MemberListView.js";
 import {LoadingView} from "../../general/LoadingView.js";
 import {MemberDetailsView} from "./MemberDetailsView.js";
 import {DeviceVerificationView} from "../verification/DeviceVerificationView";
+import {InvitePanelView} from "./InvitePanelView";
 
 export class RightPanelView extends TemplateView {
     render(t) {
@@ -40,6 +41,8 @@ export class RightPanelView extends TemplateView {
                 return new MemberListView(vm);
             case "member-details":
                 return new MemberDetailsView(vm);
+            case "invite":
+                return new InvitePanelView(vm);
             case "verification":
                 return new DeviceVerificationView(vm);
             default: