From c69aa2fff8d9c254d00cb057a456b1be69beddff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mai=20G=C3=A1bor?= <remaigabor@gmail.com>
Date: Thu, 14 Nov 2024 12:25:08 +0100
Subject: [PATCH] add functionality to claim room.

---
 .../managementservice/rooms/CurrentRoom.tsx   | 217 ++++++++++--------
 .../settingsdialog/ManagementSettings.tsx     |  61 ++---
 src/store/actions/managementActions.tsx       |   4 +-
 3 files changed, 140 insertions(+), 142 deletions(-)

diff --git a/src/components/managementservice/rooms/CurrentRoom.tsx b/src/components/managementservice/rooms/CurrentRoom.tsx
index 9a7b4eb7..9e59c5ad 100644
--- a/src/components/managementservice/rooms/CurrentRoom.tsx
+++ b/src/components/managementservice/rooms/CurrentRoom.tsx
@@ -4,7 +4,7 @@ import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextFiel
 import React from 'react';
 import { Roles, Room, Tenant } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
-import { getRoles, getRoomByName, getTenants, modifyRoom } from '../../../store/actions/managementActions';
+import { createRoom, getRoles, getRoomByName, getTenants, modifyRoom } from '../../../store/actions/managementActions';
 
 const CurrentRoomModal = () => {
 	const dispatch = useAppDispatch();
@@ -15,6 +15,7 @@ const CurrentRoomModal = () => {
 
 	type RoleTypes = Array<Roles>
 
+	const [ roomExists, setRoomExists ] = useState(false);
 	const [ roles, setRoles ] = useState<RoleTypes>([ { 'description': 'Test', 'id': 1, 'name': 'Test', 'tenantId': 1, 'permissions': [] } ]);
 	const [ id, setId ] = useState(0);
 	const [ name, setName ] = useState('');
@@ -61,6 +62,7 @@ const CurrentRoomModal = () => {
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		dispatch(getRoomByName(window.location.pathname.substring(1))).then((tdata: any) => {
+			
 			// eslint-disable-next-line no-console
 			console.log('Rooms data', tdata);
 			const r = tdata.data[0] as Room;
@@ -171,10 +173,18 @@ const CurrentRoomModal = () => {
 
 	}
 
+	function checkRoomExists() {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		dispatch(getRoomByName(window.location.pathname.substring(1))).then((tdata: any) => {
+			setRoomExists(tdata.total===1);
+		});
+	}
+
 	useEffect(() => {
 		// fetchProduct();
+		checkRoomExists();
 	}, []);
-
+	
 	const [ open, setOpen ] = React.useState(false);
 
 	const handleNameChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
@@ -224,6 +234,11 @@ const CurrentRoomModal = () => {
 	const handleOpen = () => {
 		fetchProduct();
 	};
+	const handleCreateRoom = () => {
+		dispatch(createRoom(window.location.pathname.substring(1))).then(() => {
+			checkRoomExists();
+		});
+	};
 
 	const addTenant = async () => {
 
@@ -252,38 +267,37 @@ const CurrentRoomModal = () => {
 	};
 
 	return <>
-		<div>
-			<Dialog open={open} onClose={handleClose}>
-				<DialogTitle>Add/Edit</DialogTitle>
-				<DialogContent>
-					<DialogContentText>
+		<Dialog open={open} onClose={handleClose}>
+			<DialogTitle>Add/Edit</DialogTitle>
+			<DialogContent>
+				<DialogContentText>
 						These are the parameters that you can change.
-					</DialogContentText>
-					<input type="hidden" name="id" value={id} />
-					<TextField
-						autoFocus
-						margin="dense"
-						id="name"
-						label="name"
-						type="text"
-						required
-						fullWidth
-						onChange={handleNameChange}
-						value={name}
-						disabled={nameDisabled}
-					/>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="description"
-						label="description"
-						type="text"
-						required
-						fullWidth
-						onChange={handleDescriptionChange}
-						value={description}
-					/>
-					{/* <TextField
+				</DialogContentText>
+				<input type="hidden" name="id" value={id} />
+				<TextField
+					autoFocus
+					margin="dense"
+					id="name"
+					label="name"
+					type="text"
+					required
+					fullWidth
+					onChange={handleNameChange}
+					value={name}
+					disabled={nameDisabled}
+				/>
+				<TextField
+					autoFocus
+					margin="dense"
+					id="description"
+					label="description"
+					type="text"
+					required
+					fullWidth
+					onChange={handleDescriptionChange}
+					value={description}
+				/>
+				{/* <TextField
 						autoFocus
 						margin="dense"
 						id="tenantId"
@@ -295,76 +309,77 @@ const CurrentRoomModal = () => {
 						onChange={handleTenantIdChange}
 						value={tenantId}
 					/> */}
-					<Autocomplete
-						options={roles}
-						getOptionLabel={(option) => option.name}
-						fullWidth
-						disableClearable
-						onChange={handleDefaultRoleIdChange}
-						value={defaultRoleIdOption}
-						sx={{ marginTop: '8px' }}
-						renderInput={(params) => <TextField {...params} label="Default Role" />}
-					/>
-					<Autocomplete
-						options={tenants}
-						getOptionLabel={(option) => option.name}
-						fullWidth
-						disableClearable
-						readOnly
-						// onChange={handleTenantIdChange}
-						value={tenantIdOption}
-						sx={{ marginTop: '8px' }}
-						renderInput={(params) => <TextField {...params} label="Tenant" />}
-					/>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="logo"
-						label="logo"
-						type="text"
-						required
-						fullWidth
-						onChange={handleLogoChange}
-						value={logo}
-					/>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="background"
-						label="background"
-						type="text"
-						required
-						fullWidth
-						onChange={handleBackgroundChange}
-						value={background}
-					/>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="maxActiveVideos"
-						label="maxActiveVideos"
-						type="number"
-						required
-						fullWidth
-						onChange={handleMaxActiveVideosChange}
-						value={maxActiveVideos}
-					/>
-					<FormControlLabel control={<Checkbox checked={locked} onChange={handleLockedChange} />} label="locked" />
-					<FormControlLabel control={<Checkbox checked={chatEnabled} onChange={handleChatEnabledChange} />} label="chatEnabled" />
-					<FormControlLabel control={<Checkbox checked={raiseHandEnabled} onChange={handleRaiseHandEnabledChange} />} label="raiseHandEnabled" />
-					<FormControlLabel control={<Checkbox checked={filesharingEnabled} onChange={handleFilesharingEnabledChange} />} label="filesharingEnabled" />
-					<FormControlLabel control={<Checkbox checked={localRecordingEnabled} onChange={handleLocalRecordingEnabledChange} />} label="localRecordingEnabled" />
-					<FormControlLabel control={<Checkbox checked={breakoutsEnabled} onChange={handleBreakoutsEnabledChange} />} label="breakoutsEnabled" />
+				<Autocomplete
+					options={roles}
+					getOptionLabel={(option) => option.name}
+					fullWidth
+					disableClearable
+					onChange={handleDefaultRoleIdChange}
+					value={defaultRoleIdOption}
+					sx={{ marginTop: '8px' }}
+					renderInput={(params) => <TextField {...params} label="Default Role" />}
+				/>
+				<Autocomplete
+					options={tenants}
+					getOptionLabel={(option) => option.name}
+					fullWidth
+					disableClearable
+					readOnly
+					// onChange={handleTenantIdChange}
+					value={tenantIdOption}
+					sx={{ marginTop: '8px' }}
+					renderInput={(params) => <TextField {...params} label="Tenant" />}
+				/>
+				<TextField
+					autoFocus
+					margin="dense"
+					id="logo"
+					label="logo"
+					type="text"
+					required
+					fullWidth
+					onChange={handleLogoChange}
+					value={logo}
+				/>
+				<TextField
+					autoFocus
+					margin="dense"
+					id="background"
+					label="background"
+					type="text"
+					required
+					fullWidth
+					onChange={handleBackgroundChange}
+					value={background}
+				/>
+				<TextField
+					autoFocus
+					margin="dense"
+					id="maxActiveVideos"
+					label="maxActiveVideos"
+					type="number"
+					required
+					fullWidth
+					onChange={handleMaxActiveVideosChange}
+					value={maxActiveVideos}
+				/>
+				<FormControlLabel control={<Checkbox checked={locked} onChange={handleLockedChange} />} label="locked" />
+				<FormControlLabel control={<Checkbox checked={chatEnabled} onChange={handleChatEnabledChange} />} label="chatEnabled" />
+				<FormControlLabel control={<Checkbox checked={raiseHandEnabled} onChange={handleRaiseHandEnabledChange} />} label="raiseHandEnabled" />
+				<FormControlLabel control={<Checkbox checked={filesharingEnabled} onChange={handleFilesharingEnabledChange} />} label="filesharingEnabled" />
+				<FormControlLabel control={<Checkbox checked={localRecordingEnabled} onChange={handleLocalRecordingEnabledChange} />} label="localRecordingEnabled" />
+				<FormControlLabel control={<Checkbox checked={breakoutsEnabled} onChange={handleBreakoutsEnabledChange} />} label="breakoutsEnabled" />
 					
-				</DialogContent>
-				<DialogActions>
-					<Button onClick={handleClose}>Cancel</Button>
-					<Button onClick={addTenant} disabled={cantPatch}>OK</Button>
-				</DialogActions>
-			</Dialog>
-			<Button onClick={handleOpen}>Open Current Room settings</Button>
+			</DialogContent>
+			<DialogActions>
+				<Button onClick={handleClose}>Cancel</Button>
+				<Button onClick={addTenant} disabled={cantPatch}>OK</Button>
+			</DialogActions>
+		</Dialog>
+		<div style={{ margin: 'auto', textAlign: 'center' }}>
+				
 		</div>
-
+		<Button onClick={ roomExists ? handleOpen : handleCreateRoom}>{ roomExists ? 'Edit':'Claim '}  Current Room</Button>
 	</>;
 };
 
diff --git a/src/components/settingsdialog/ManagementSettings.tsx b/src/components/settingsdialog/ManagementSettings.tsx
index cd86cf6c..b67287b0 100644
--- a/src/components/settingsdialog/ManagementSettings.tsx
+++ b/src/components/settingsdialog/ManagementSettings.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { getUserData } from '../../store/actions/managementActions';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import CurrentRoomModal from '../managementservice/rooms/CurrentRoom';
@@ -7,7 +7,6 @@ import ListItemButton from '@mui/material/ListItemButton/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText/ListItemText';
 import InfoIcon from '@mui/icons-material/Info';
-import Box from '@mui/material/Box/Box';
 import SignIn from './managementsettings/ManagementAdminLoginSettings';
 import List from '@mui/material/List';
 
@@ -15,32 +14,40 @@ const ManagementSettings = (): JSX.Element => {
 	const dispatch = useAppDispatch();
 
 	useEffect(() => {
-		
 		dispatch(getUserData()).then((data) => {
 		// eslint-disable-next-line no-console
 			console.log('data', data);
 		});
 		
-	});
+	}, []);
 	const loggedIn = useAppSelector((state) => state.permissions.loggedIn);
 
 	useEffect(() => {
 	}, [ loggedIn ]);
-	
-	const [ selectedComponent, setSelectedComponent ] = useState('');
 
 	// Function to render the selected component in the placeholder
 	const renderComponent = () => {
 
 		if (loggedIn) {
-			switch (selectedComponent) {
-				case 'currentroom':
-					return <>
-						<CurrentRoomModal />
-					</>;
-				default:
-					return <Box sx={{ minWidth: '400px' }}></Box>;
-			}
+
+			return <>
+				<List>
+					<ListItem key={'Room settings'} disablePadding >
+						<ListItemButton>
+							<ListItemText primary={'Room settings'} />
+						</ListItemButton>
+					</ListItem>
+					<CurrentRoomModal />
+					<ListItem key={'Management settings'} disablePadding style={{ textDecoration: 'none' }} onClick={() => window.open('/mgmt-admin', 'edumeet-mgmt')}>
+						<ListItemButton>
+							<ListItemIcon>
+								<InfoIcon />
+							</ListItemIcon>
+							<ListItemText primary={'Advanced management settings'} />
+						</ListItemButton>
+					</ListItem>
+				</List>
+			</>;
 		} else {
 			return <SignIn />;
 		}
@@ -48,30 +55,8 @@ const ManagementSettings = (): JSX.Element => {
 
 	return (
 		<>
-			<List>
-				<ListItem key={'Room settings'} disablePadding onClick={() => setSelectedComponent('currentRoom')}>
-					<ListItemButton disabled>
-						<ListItemIcon>
-							<InfoIcon />
-						</ListItemIcon>
-						<ListItemText primary={'Room settings'} />
-					</ListItemButton>
-					<CurrentRoomModal />
-				</ListItem>
-			
-				<ListItem key={'Management settings'} disablePadding style={{ textDecoration: 'none' }} onClick={() => window.open('/mgmt-admin', 'edumeet-mgmt')}>
-					<ListItemButton>
-						<ListItemIcon>
-							<InfoIcon />
-						</ListItemIcon>
-						<ListItemText primary={'Advanced management settings'} />
-					</ListItemButton>
-				</ListItem>
-			</List>
-
-			<div style={{ background: 'white', padding: '2px', maxWidth: '100%', minWidth: '300px' }}>
-				{renderComponent()}
-			</div></>
+			{renderComponent()}
+		</>
 	);
 };
 
diff --git a/src/store/actions/managementActions.tsx b/src/store/actions/managementActions.tsx
index d6447259..2cc2f35e 100644
--- a/src/store/actions/managementActions.tsx
+++ b/src/store/actions/managementActions.tsx
@@ -705,9 +705,7 @@ export const getRoomByName = (name: string): AppThunk<Promise<object | undefined
 		data = await (await managementService).service(serviceName).find(
 			{
 				query: {
-					name: {
-						$in: [ name ]
-					},
+					name: name,
 					$sort: {
 						id: 1
 					}