feat: show access mode in table

pull/82/head
sualko 2020-09-08 17:13:21 +02:00
parent 4203ee3987
commit 256c505f43
2 changed files with 26 additions and 4 deletions

View File

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

View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard'; 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 EditRoom from './EditRoom';
import RecordingRow from './RecordingRow'; import RecordingRow from './RecordingRow';
import EditableValue from './EditableValue'; import EditableValue from './EditableValue';
@ -34,8 +34,6 @@ const RecordingsNumber: React.FC<RecordingsNumberProps> = ({ recordings, showRec
return <span>0</span>; return <span>0</span>;
}; };
const RoomRow: React.FC<Props> = (props) => { const RoomRow: React.FC<Props> = (props) => {
const [recordings, setRecordings] = useState<Recording[] | null>(null); const [recordings, setRecordings] = useState<Recording[] | null>(null);
const [showRecordings, setShowRecordings] = useState<boolean>(false); 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?) { function edit(field: string, type: 'text' | 'number' = 'text', options?) {
return <EditableValue field={field} value={room[field]} setValue={updateRoom} type={type} options={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 && <img src={avatarUrl} alt="Avatar" className="bbb-avatar" />}
{(room.userId === OC.currentUser && room.shared) && <span className="icon icon-shared icon-visible"/>} {(room.userId === OC.currentUser && room.shared) && <span className="icon icon-shared icon-visible"/>}
</td> </td>
<td>
{accessToIcon(room.access)}
</td>
<td className="max-participants bbb-shrink"> <td className="max-participants bbb-shrink">
{edit('maxParticipants', 'number', {min: minParticipantsLimit, max: maxParticipantsLimit < 0 ? undefined : maxParticipantsLimit})} {edit('maxParticipants', 'number', {min: minParticipantsLimit, max: maxParticipantsLimit < 0 ? undefined : maxParticipantsLimit})}
</td> </td>