2020-08-27 17:21:34 +02:00
import React , { useEffect , useState } from 'react' ;
import '../Manager/App.scss' ;
import { api , Restriction , ShareType } from '../Common/Api' ;
import RestrictionRow from './RestrictionRow' ;
2020-08-29 10:33:59 +02:00
import ShareSelection from '../Common/ShareSelection' ;
2020-08-27 17:21:34 +02:00
type Props = {
}
const App : React.FC < Props > = ( ) = > {
const [ areRestrictionsLoaded , setRestrictionsLoaded ] = useState ( false ) ;
const [ error , setError ] = useState < string > ( '' ) ;
const [ restrictions , setRestrictions ] = useState < Restriction [ ] > ( [ ] ) ;
const rows = restrictions . sort ( ( a , b ) = > a . groupId . localeCompare ( b . groupId ) ) . map ( restriction = > < RestrictionRow key = { restriction . id } restriction = { restriction } updateRestriction = { updateRestriction } deleteRestriction = { deleteRestriction } / > ) ;
useEffect ( ( ) = > {
api . getRestrictions ( ) . then ( restrictions = > {
setRestrictions ( restrictions ) ;
} ) . catch ( ( err ) = > {
console . warn ( 'Could not load restrictions' , err ) ;
setError ( t ( 'bbb' , 'Server error' ) ) ;
} ) . then ( ( ) = > {
setRestrictionsLoaded ( true ) ;
} ) ;
} , [ ] ) ;
function addRestriction ( groupId : string ) {
return api . createRestriction ( groupId ) . then ( restriction = > {
setRestrictions ( [ . . . restrictions , restriction ] ) ;
} ) ;
}
function updateRestriction ( restriction : Restriction ) {
return api . updateRestriction ( restriction ) . then ( updatedRestriction = > {
setRestrictions ( restrictions . map ( restriction = > {
if ( restriction . id === updatedRestriction . id || restriction . groupId === updatedRestriction . groupId ) {
return updatedRestriction ;
}
return restriction ;
} ) ) ;
} ) ;
}
function deleteRestriction ( id : number ) {
api . deleteRestriction ( id ) . then ( deletedRestriction = > {
setRestrictions ( restrictions . filter ( restriction = > restriction . id !== deletedRestriction . id ) ) ;
} ) ;
}
return (
2020-08-29 10:33:59 +02:00
< div id = "bbb-react-root" >
2020-08-27 17:21:34 +02:00
< table >
< thead >
< tr >
< th >
{ t ( 'bbb' , 'Group name' ) }
< / th >
< th >
{ t ( 'bbb' , 'Max. rooms' ) }
< / th >
< th >
2020-08-28 11:36:15 +02:00
{ t ( 'bbb' , 'Access options' ) }
2020-08-27 17:21:34 +02:00
< / th >
< th >
{ t ( 'bbb' , 'Max. participants' ) }
< / th >
< th >
{ t ( 'bbb' , 'Recording' ) }
< / th >
2022-03-16 18:43:44 +01:00
< th >
{ t ( 'bbb' , 'Custom redirect after meeting' ) }
< / th >
< th / >
2020-08-27 17:21:34 +02:00
< / tr >
< / thead >
< tbody >
{ rows }
< / tbody >
< tfoot >
< tr >
< td >
{ ! areRestrictionsLoaded
? < span className = "icon icon-loading-small icon-visible" > < / span >
: < ShareSelection
2020-10-26 15:57:38 +01:00
placeholder = { t ( 'bbb' , 'Group …' ) }
2020-08-27 17:21:34 +02:00
selectShare = { ( share ) = > addRestriction ( share . value . shareWith ) }
shareType = { [ ShareType . Group ] }
excluded = { { groupIds : restrictions.map ( restriction = > restriction . groupId ) } } / > }
{ error && < > < span className = "icon icon-error icon-visible" > < / span > { error } < / > }
< / td >
< td colSpan = { 4 } / >
< / tr >
< / tfoot >
< / table >
< p className = "text-muted" > { t ( 'bbb' , 'Restrictions do not affect existing rooms. Minus one means the value is unlimited. The least restrictive option is chosen for every user if multiple restrictions apply.' ) } < / p >
< / div >
) ;
} ;
export default App ;