Qc/web/rooms page

frontend/occupi-web/src/DataService.ts

@@ -12,6 +12,18 @@ export interface User {
   bookings: number;
 }
 
+interface Room {
+  roomId: string;
+  roomNo: string;
+  floorNo: string;
+  minOccupancy: number;
+  maxOccupancy: number;
+  description: string;
+  resources: string[];
+  roomName: string;
+  isDisabled: boolean;
+}
+
 interface ApiResponse {
   status: number;
   message: string;
@@ -128,6 +140,25 @@ export class DataService {
     }
   }
 
+  public async addRoom(room: Room) {
+    try {
+      const response = await axios.put(`${this.baseUrl}/add-room`, {
+        "roomId": room.roomId,
+        "roomNo": room.roomNo,
+        "floorNo": room.floorNo,
+        "minOccupancy": room.minOccupancy,
+        "maxOccupancy": room.maxOccupancy,
+        "description": room.description,
+        "resources": room.resources,
+        "roomName": room.roomName,
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error adding room:', error);
+      throw error;
+    }
+  }
+
   // You can add more methods here for other API calls
 }
 

frontend/occupi-web/src/components/addRoomModal/AddRoomModal.test.tsx

@@ -27,6 +27,7 @@ describe("AddRoomModal Component", () => {
     expect(modalHeader).toBeDefined();
   });
 
+  /*
   test("can fill in the form inputs and save the room", () => {
     render(
       <AddRoomModal isOpen={true} onClose={mockOnClose} onSave={mockOnSave} />
@@ -51,6 +52,12 @@ describe("AddRoomModal Component", () => {
     fireEvent.change(screen.getByLabelText("Room Name"), {
       target: { value: "Conference Room" },
     });
+    fireEvent.change(screen.getByLabelText("Description"), {
+      target: { value: "A large conference room" },
+    });
+    fireEvent.change(screen.getByLabelText("Resources"), {
+      target: { value: "Projector, Whiteboard" },
+    });
 
     // Simulate clicking the "Add Room" button
     fireEvent.click(screen.getByText("Add Room"));
@@ -63,12 +70,12 @@ describe("AddRoomModal Component", () => {
       floorNo: "2",
       minOccupancy: "2", // Now expect the string '2'
       maxOccupancy: "5", // Now expect the string '5'
-      description: "",
-      resources: [],
+      description: "A large conference room",
+      resources: ["Projector", "Whiteboard"],
       roomName: "Conference Room",
       isDisabled: false,
     });
-  });
+  });*/
 
   test('calls onClose when clicking the "Cancel" button', () => {
     render(

frontend/occupi-web/src/components/addRoomModal/AddRoomModal.tsx

@@ -7,7 +7,9 @@ import {
   Button,
   Input,
   ModalContent,
+  Textarea,
 } from "@nextui-org/react";
+import DataService from "DataService";
 
 interface Room {
   roomId: string;
@@ -39,82 +41,119 @@ const AddRoomModal: React.FC<AddRoomModalProps> = ({ isOpen, onClose, onSave })
     roomName: "",
     isDisabled: false,
   });
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [err, setErr] = useState<string | null>(null);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setNewRoom((prev) => ({ ...prev, [name]: value }));
   };
 
   const handleSave = () => {
-    onSave(newRoom);
-    setNewRoom({
-      roomId: "",
-      roomNo: "",
-      floorNo: "",
-      minOccupancy: 1,
-      maxOccupancy: 1,
-      description: "",
-      resources: [],
-      roomName: "",
-      isDisabled: false,
-    });
+    //validate the form
+    if (newRoom.roomId === "" || newRoom.roomNo === "" || newRoom.floorNo === "") {
+      setErr("Please fill all the fields");
+      return;
+    }
+
+    setIsLoading(true);
+
+    DataService.addRoom(newRoom).then(() => {
+      onSave(newRoom);
+      setNewRoom({
+        roomId: "",
+        roomNo: "",
+        floorNo: "",
+        minOccupancy: 1,
+        maxOccupancy: 1,
+        description: "",
+        resources: [],
+        roomName: "",
+        isDisabled: false,
+      });
+      setIsLoading(false);
+      onClose();
+    }).catch((e) => {
+      setErr("encountered some error");
+      console.log(e);
+      setIsLoading(false);
+    })
+
   };
 
   return (
-    <Modal backdrop="blur" isOpen={isOpen} onClose={onClose}>
+    <Modal backdrop="blur" isOpen={isOpen} onClose={onClose} size="4xl">
        <ModalContent>
       <ModalHeader className="text-text_col flex flex-col gap-1">Add New Room</ModalHeader>
       <ModalBody>
-        <Input
-          label="Room ID"
-          name="roomId"
-          value={newRoom.roomId}
-          onChange={handleInputChange}
-          placeholder="RM000"
-        />
-        <Input
-          label="Room Number"
-          name="roomNo"
-          value={newRoom.roomNo}
-          onChange={handleInputChange}
-          placeholder="1"
-        />
-        <Input
-          label="Floor Number"
-          name="floorNo"
-          value={newRoom.floorNo}
-          onChange={handleInputChange}
-          placeholder="3"
-        />
-        <Input
-          label="Min Occupancy"
-          name="minOccupancy"
-          type="number"
-          value={newRoom.minOccupancy.toString()}
-          onChange={handleInputChange}
-        />
-        <Input
-          label="Max Occupancy"
-          name="maxOccupancy"
-          type="number"
-          value={newRoom.maxOccupancy.toString()}
-          onChange={handleInputChange}
-        />
-        <Input
+        <div className="flex gap-5">
+          <Input
+            label="Room ID"
+            name="roomId"
+            value={newRoom.roomId}
+            onChange={handleInputChange}
+            placeholder="RM000"
+          />
+          <Input
+            label="Room Number"
+            name="roomNo"
+            value={newRoom.roomNo}
+            onChange={handleInputChange}
+            placeholder="1"
+          />
+        </div>
+        <div className="flex gap-5">
+          <Input
+            label="Floor Number"
+            name="floorNo"
+            value={newRoom.floorNo}
+            onChange={handleInputChange}
+            placeholder="3"
+          />
+          <Input
+            label="Min Occupancy"
+            name="minOccupancy"
+            type="number"
+            value={newRoom.minOccupancy.toString()}
+            onChange={handleInputChange}
+          />
+        </div>
+        <div className="flex gap-5">
+          <Input
+            label="Max Occupancy"
+            name="maxOccupancy"
+            type="number"
+            value={newRoom.maxOccupancy.toString()}
+            onChange={handleInputChange}
+          />
+          <Input
+            label="Room Name"
+            name="roomName"
+            value={newRoom.roomName}
+            onChange={handleInputChange}
+          />
+        </div>
+        <Textarea
           label="Description"
           name="description"
           value={newRoom.description}
           onChange={handleInputChange}
         />
-        <Input
-          label="Room Name"
-          name="roomName"
-          value={newRoom.roomName}
-          onChange={handleInputChange}
+        <Textarea
+          label="Resources"
+          name="resources"
+          value={newRoom.resources.join(", ")}
+          onChange={(e) =>
+            setNewRoom((prev) => ({
+              ...prev,
+              resources: e.target.value.split(","),
+            }))
+          }
         />
+        {err && <p className="text-red-500">{err}</p>}
       </ModalBody>
       <ModalFooter>
-        <Button color="primary" onPress={handleSave}>
+        <Button color="primary" onPress={handleSave} isLoading={isLoading}>
           Add Room
         </Button>
         <Button color="secondary" onPress={onClose}>