import React, { useState, useEffect } from 'react'; import { Access, Room, Permission, RoomShare, api } from './Api'; import Dialog from './Dialog'; import ShareWith from './ShareWith'; import { SubmitInput } from './SubmitInput'; const descriptions: { [key: string]: string } = { name: t('bbb', 'Descriptive name of this room.'), welcome: t('bbb', 'This message is shown to all users in the chat area after they joined.'), maxParticipants: t('bbb', 'Sets a limit on the number of participants for this room. Zero means there is no limit.'), recording: t('bbb', 'If enabled, the moderator is able to start the recording.'), access: t('bbb', 'Public: Everyone knowing the link is able to join. Password: Guests have to provide a password. Waiting room: A moderator has to accept every guest before they can join. Internal: Only Nextcloud users can join.'), }; type Props = { room: Room; updateProperty: (key: string, value: string | boolean | number) => Promise; open: boolean; setOpen: (open: boolean) => void; } const EditRoomDialog: React.FC = ({ room, updateProperty, open, setOpen }) => { const [shares, setShares] = useState(); useEffect(() => { if (!open) { return; } api.getRoomShares(room.id).then(roomShares => { console.log(room.name, roomShares); setShares(roomShares); }).catch(err => { console.warn('Could not load room shares.', err); setShares([]); }); }, [room.id, open]); function inputElement(label: string, field: string, type: 'text' | 'number' = 'text') { return (
updateProperty(field, value)} /> {descriptions[field] && {descriptions[field]}}
); } function selectElement(label: string, field: string, value: string, options: { [key: string]: string }, onChange: (value: string) => void) { return (
{(value === Access.Password && room.password) && } {descriptions[field] && {descriptions[field]}}
); } return ( setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}> {inputElement(t('bbb', 'Name'), 'name')} {inputElement(t('bbb', 'Welcome'), 'welcome')} {inputElement(t('bbb', 'Participant limit'), 'maxParticipants', 'number')} {selectElement(t('bbb', 'Access'), 'access', room.access, { [Access.Public]: t('bbb', 'Public'), [Access.Password]: t('bbb', 'Internal + Password protection for guests'), [Access.WaitingRoom]: t('bbb', 'Internal + Waiting room for guests'), [Access.Internal]: t('bbb', 'Internal'), [Access.InternalRestricted]: t('bbb', 'Internal restricted'), }, (value) => { console.log('access', value); updateProperty('access', value); })} {room.access === Access.InternalRestricted &&
}

{t('bbb', 'Miscellaneous')}

updateProperty('record', event.target.checked)} />
{descriptions.recording}
); }; export default EditRoomDialog;