added other settings views

src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss

@@ -4,4 +4,16 @@
     .content-area {
         height: 350px;
     }
+
+    .list-container {
+        max-height: 150px;
+        overflow-y: scroll;
+
+        .list-item {
+            &.selected {
+                background-color: cadetblue;
+            }
+        }
+    }
+    
 }

src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx

@@ -1,4 +1,4 @@
-import { RoomSettingsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
+import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
@@ -6,6 +6,8 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
 import RoomSettingsData from '../../common/RoomSettingsData';
 import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView';
 import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView';
+import { NavigatorRoomSettingsModTabView } from './views/tab-mod/NavigatorRoomSettingsModTabView';
+import { NavigatorRoomSettingsRightsTabView } from './views/tab-rights/NavigatorRoomSettingsRightsTabView';
 import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView';
 
 const TABS: string[] = [
@@ -23,7 +25,6 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
 
     const updateSettings = useCallback((roomSettings: RoomSettingsData) =>
     {
-        console.log('update', roomSettings);
         setRoomSettingsData(roomSettings);
     }, [ setRoomSettingsData ]);
 
@@ -34,9 +35,43 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
         if(!parser) return;
 
         setRoomSettingsData(new RoomSettingsData(parser));
+        SendMessageHook(new RoomUsersWithRightsComposer(parser.roomId));
+        SendMessageHook(new RoomBannedUsersComposer(parser.roomId));
     }, []);
 
+    const onRoomUsersWithRightsEvent = useCallback((event: RoomUsersWithRightsEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || !roomSettingsData) return;
+
+        if(roomSettingsData.roomId !== parser.roomId) return;
+
+        const data = Object.assign({}, roomSettingsData);
+
+        data.usersWithRights = new Map(parser.users);
+
+        setRoomSettingsData(data);
+    }, [roomSettingsData]);
+
+    const onRoomBannedUsersEvent = useCallback((event: RoomBannedUsersEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!parser || !roomSettingsData) return;
+
+        if(roomSettingsData.roomId !== parser.roomId) return;
+
+        const data = Object.assign({}, roomSettingsData);
+
+        data.bannedUsers = new Map(parser.users);
+
+        setRoomSettingsData(data);
+    }, [roomSettingsData]);
+
     CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
+    CreateMessageHook(RoomUsersWithRightsEvent, onRoomUsersWithRightsEvent);
+    CreateMessageHook(RoomBannedUsersEvent, onRoomBannedUsersEvent);
 
     const save = useCallback((data: RoomSettingsData) =>
     {
@@ -94,7 +129,9 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
             <NitroCardContentView className="text-black px-4">
                 { currentTab === TABS[0] && <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
                 { currentTab === TABS[1] && <NavigatorRoomSettingsAccessTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[2] && <NavigatorRoomSettingsRightsTabView roomSettingsData= {roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
                 { currentTab === TABS[3] && <NavigatorRoomSettingsVipChatTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[4] && <NavigatorRoomSettingsModTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx

@@ -0,0 +1,107 @@
+import { RoomUnbanUserComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../../../../api';
+import { SendMessageHook } from '../../../../../../hooks';
+import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
+
+export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
+    const [selectedUserId, setSelectedUserId] = useState<number>(-1);
+
+    const handleChange = useCallback((field: string, value: string | number | boolean) =>
+    {
+        const clone = Object.assign({}, roomSettingsData);
+        let save = true;
+
+        switch(field)
+        {
+            case 'moderation_mute':
+                clone.muteState = Number(value);
+                break;
+            case 'moderation_kick':
+                clone.kickState = Number(value);
+                break;
+            case 'moderation_ban':
+                clone.banState = Number(value);
+                break;
+        }
+
+        setRoomSettingsData(clone);
+
+        if(save) onSave(clone);
+    }, [roomSettingsData, setRoomSettingsData, onSave]);
+
+    const unBanUser = useCallback((userId: number) =>
+    {
+        const clone = Object.assign({}, roomSettingsData);
+
+        clone.bannedUsers.delete(userId);
+        setRoomSettingsData(clone);
+
+        SendMessageHook(new RoomUnbanUserComposer(userId, roomSettingsData.roomId));
+        setSelectedUserId(-1);
+    }, [roomSettingsData, setRoomSettingsData]);
+
+    return (
+        <>
+            <div className="mb-3">{LocalizeText('navigator.roomsettings.moderation.header')}</div>
+            <div className="form-group mb-1" >
+                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.mute.header')}</div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_mute" checked={roomSettingsData.muteState === 0} onChange={(e) => handleChange('moderation_mute', 0)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_mute" checked={roomSettingsData.muteState === 1} onChange={(e) => handleChange('moderation_mute', 1)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
+                </div>
+            </div>
+            <div className="form-group mb-1" >
+                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.kick.header')}</div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 0} onChange={(e) => handleChange('moderation_kick', 0)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.all')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 1} onChange={(e) => handleChange('moderation_kick', 1)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 2} onChange={(e) => handleChange('moderation_kick', 2)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
+                </div>
+            </div>
+            <div className="form-group mb-1" >
+                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.ban.header')}</div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_ban" checked={roomSettingsData.banState === 0} onChange={(e) => handleChange('moderation_ban', 0)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
+                </div>
+                <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="moderation_ban" checked={roomSettingsData.banState === 1} onChange={(e) => handleChange('moderation_ban', 1)} />
+                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
+                </div>
+            </div>
+            <div className="fw-bold mt-3 mb-1">{LocalizeText('navigator.roomsettings.moderation.banned.users')} ({roomSettingsData.bannedUsers.size})</div>
+            <div className="row">
+                <div className="col-6">
+                    <div className="list-container">
+                        {
+                            Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) =>
+                            {
+                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                    {name}
+                                </div>
+                            })
+                        }
+                    </div>
+                </div>
+                <div className="col-6">
+                    <button className={'btn btn-primary btn-sm w-100' + ((selectedUserId < 1) ? ' disabled' : '')} onClick={ e => unBanUser(selectedUserId) }>{LocalizeText('navigator.roomsettings.moderation.unban')} {selectedUserId > 0 && roomSettingsData.bannedUsers.get(selectedUserId)}
+                    </button>
+                </div>
+            </div>
+        </>
+    );
+}

src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx

@@ -0,0 +1,48 @@
+import { FC, useState } from 'react';
+import { LocalizeText } from '../../../../../../api';
+import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
+
+export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
+    const [selectedUserId, setSelectedUserId] = useState<number>(-1);
+
+    return (
+        <>
+            <div className="row">
+                <div className="col-6">
+                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
+                </div>
+                <div className="col-6">
+                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [roomSettingsData.friendsWithoutRights.size.toString(), roomSettingsData.friendsWithoutRights.size.toString()])}</div>
+                </div>
+            </div>
+            <div className="row">
+                <div className="col-6">
+                    <div className="list-container">
+                        {
+                            Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
+                            {
+                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                    {name}
+                                </div>
+                            })
+                        }
+                    </div>
+                </div>
+                <div className="col-6">
+                    <div className="list-container">
+                        {
+                            Array.from(roomSettingsData.friendsWithoutRights.entries()).map(([id, name], index) =>
+                            {
+                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                    {name}
+                                </div>
+                            })
+                        }
+                    </div>
+                </div >
+            </div >
+        </>
+    );
+}