feat: show access mode in table

ts/Manager/App.tsx

@@ -5,7 +5,7 @@ import { SortArrow } from './SortArrow';
 import { api, Room, Restriction, Access } from '../Common/Api';
 import NewRoomForm from './NewRoomForm';
 
-export type SortKey = 'name' | 'welcome' | 'maxParticipants' | 'record';
+export type SortKey = 'name' | 'welcome' | 'maxParticipants' | 'record' | 'access';
 
 enum SortOrder { DESC = -1, ASC = 1 }
 
@@ -14,6 +14,7 @@ function sortRooms(key: SortKey, orderBy: SortOrder) {
 		switch (key) {
 		case 'name':
 		case 'welcome':
+		case 'access':
 			return a[key].localeCompare(b[key]) * orderBy;
 		case 'maxParticipants':
 			return (a.maxParticipants - b.maxParticipants) * orderBy;
@@ -136,6 +137,9 @@ const App: React.FC<Props> = () => {
 							{t('bbb', 'Name')} <SortArrow name='name' value={orderBy} direction={sortOrder} />
 						</th>
 						<th />
+						<th onClick={() => onOrderBy('access')} className="bbb-shrink">
+							{t('bbb', 'Access')} <SortArrow name='access' value={orderBy} direction={sortOrder} />
+						</th>
 						<th onClick={() => onOrderBy('maxParticipants')} className="bbb-shrink">
 							{t('bbb', 'Max')} <SortArrow name='maxParticipants' value={orderBy} direction={sortOrder} />
 						</th>

ts/Manager/RoomRow.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { api, Recording, Room, Restriction } from '../Common/Api';
+import { api, Recording, Room, Restriction, Access } from '../Common/Api';
 import EditRoom from './EditRoom';
 import RecordingRow from './RecordingRow';
 import EditableValue from './EditableValue';
@@ -34,8 +34,6 @@ const RecordingsNumber: React.FC<RecordingsNumberProps> = ({ recordings, showRec
 	return <span>0</span>;
 };
 
-
-
 const RoomRow: React.FC<Props> = (props) => {
 	const [recordings, setRecordings] = useState<Recording[] | null>(null);
 	const [showRecordings, setShowRecordings] = useState<boolean>(false);
@@ -155,6 +153,23 @@ const RoomRow: React.FC<Props> = (props) => {
 		);
 	}
 
+	function accessToIcon(access: string) {
+		switch(access) {
+		case Access.Public:
+			return <span className="icon icon-visible icon-link" />;
+		case Access.Password:
+			return <span className="icon icon-visible icon-password" />;
+		case Access.Internal:
+			return <span className="icon icon-visible icon-group" />;
+		case Access.InternalRestricted:
+			return <span className="icon icon-visible icon-user" />;
+		case Access.WaitingRoom:
+			return <span className="icon icon-visible icon-timezone" />;
+		}
+
+		return <span></span>;
+	}
+
 	function edit(field: string, type: 'text' | 'number' = 'text', options?) {
 		return <EditableValue field={field} value={room[field]} setValue={updateRoom} type={type} options={options} />;
 	}
@@ -189,6 +204,9 @@ const RoomRow: React.FC<Props> = (props) => {
 					{room.userId !== OC.currentUser && <img src={avatarUrl} alt="Avatar" className="bbb-avatar" />}
 					{(room.userId === OC.currentUser && room.shared) && <span className="icon icon-shared icon-visible"/>}
 				</td>
+				<td>
+					{accessToIcon(room.access)}
+				</td>
 				<td className="max-participants bbb-shrink">
 					{edit('maxParticipants', 'number', {min: minParticipantsLimit, max: maxParticipantsLimit < 0 ? undefined : maxParticipantsLimit})}
 				</td>