Add tabs to RoomEditDialog

app/client/components/rooms/RoomsBar.tsx

@@ -5,7 +5,7 @@ import { BasicListbox } from "../forms/widgets/BasicListbox";
 
 import { ArrowUpTrayIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { reverse } from "@reactivated";
-import { RoomPropertiesDialog } from "./admin/RoomPropertiesDialog";
+import { RoomAddDialog } from "./admin/RoomAddDialog";
 
 interface RoomsBarProps {
   searchText: string;
@@ -85,7 +85,7 @@ export const RoomsBar = ({
             <ArrowUpTrayIcon className="size-6" />
             Import rooms
           </a>
-          <RoomPropertiesDialog
+          <RoomAddDialog
             dialogOpen={addRoomDialogOpen}
             closeDialog={() => setAddRoomDialogOpen(false)}
           />

app/client/components/rooms/admin/RoomAddDialog.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CustomDialog } from "../../CustomDialog";
+import { RoomPropertiesForm } from "./RoomPropertiesForm";
+
+interface RoomAddDialogProps {
+  dialogOpen: boolean;
+  closeDialog: () => void;
+}
+
+export const RoomAddDialog = ({
+  dialogOpen,
+  closeDialog,
+}: RoomAddDialogProps) => {
+  const title = "Add room";
+
+  return (
+    <CustomDialog dialogOpen={dialogOpen} onClose={closeDialog} title={title}>
+      <RoomPropertiesForm closeDialog={closeDialog} submitButtonLabel={title} />
+    </CustomDialog>
+  );
+};

app/client/components/rooms/admin/RoomEditDialog.tsx

@@ -0,0 +1,40 @@
+import { RoomData } from "@client/utils/roomData";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import React from "react";
+import { CustomDialog } from "../../CustomDialog";
+import { RoomPropertiesForm } from "./RoomPropertiesForm";
+
+interface RoomEditDialogProps {
+  roomData: RoomData;
+  dialogOpen: boolean;
+  closeDialog: () => void;
+}
+
+export const RoomEditDialog = ({
+  roomData,
+  dialogOpen,
+  closeDialog,
+}: RoomEditDialogProps) => {
+  const title = "Edit room";
+
+  return (
+    <CustomDialog dialogOpen={dialogOpen} onClose={closeDialog} title={title}>
+      <TabGroup>
+        <TabList className="tabs tabs-bordered mb-4">
+          <Tab className="tab">Room properties</Tab>
+          <Tab className="tab">Members</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <RoomPropertiesForm
+              roomData={roomData}
+              closeDialog={closeDialog}
+              submitButtonLabel={title}
+            />
+          </TabPanel>
+          <TabPanel>Members</TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </CustomDialog>
+  );
+};

app/client/components/rooms/admin/RoomPropertiesDialog.tsx → app/client/components/rooms/admin/RoomPropertiesForm.tsx

@@ -1,22 +1,21 @@
 import { LoadingContentSpinner } from "@client/components/LoadingContentSpinner";
 import { RoomData } from "@client/utils/roomData";
 import React, { useState } from "react";
-import { CustomDialog } from "../../CustomDialog";
 import { useRoomMutations } from "../api/RoomMutations";
 import { RoomPropertiesFormFieldCheckbox } from "./RoomPropertiesFormFieldCheckbox";
 import { RoomPropertiesFormFieldInput } from "./RoomPropertiesFormFieldInput";
 
-interface RoomPropertiesDialogProps {
+interface RoomPropertiesFormProps {
   roomData?: RoomData;
-  dialogOpen: boolean;
   closeDialog: () => void;
+  submitButtonLabel: string;
 }
 
-export const RoomPropertiesDialog = ({
+export const RoomPropertiesForm = ({
   roomData,
-  dialogOpen,
   closeDialog,
-}: RoomPropertiesDialogProps) => {
+  submitButtonLabel,
+}: RoomPropertiesFormProps) => {
   const [roomName, setRoomName] = useState(roomData ? roomData.name : "");
   const [roomDescription, setRoomDescription] = useState(
     roomData ? roomData.description : "",
@@ -44,9 +43,6 @@ export const RoomPropertiesDialog = ({
     roomName,
   );
 
-  const isInEditMode = roomData !== undefined;
-  const title = isInEditMode ? "Edit room" : "Add room";
-
   const resetFormState = () => {
     setRoomName("");
     setRoomDescription("");
@@ -64,7 +60,7 @@ export const RoomPropertiesDialog = ({
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (isInEditMode) {
+    if (roomData) {
       editRoomMutation.mutate(
         {
           id: roomData.id,
@@ -95,60 +91,58 @@ export const RoomPropertiesDialog = ({
   };
 
   return (
-    <CustomDialog dialogOpen={dialogOpen} onClose={closeDialog} title={title}>
-      <form onSubmit={handleSubmit}>
-        <RoomPropertiesFormFieldInput
-          label="Room name"
-          type="text"
-          value={roomName}
-          onChange={setRoomName}
-          required
-        />
-        <RoomPropertiesFormFieldInput
-          label="Room description"
-          type="text"
-          value={roomDescription}
-          onChange={setRoomDescription}
-        />
-        <RoomPropertiesFormFieldInput
-          label="Available single beds"
-          type="number"
-          value={availableBedsSingle.toString()}
-          onChange={(newValue) => setAvailableBedsSingle(parseInt(newValue))}
-        />
-        <RoomPropertiesFormFieldInput
-          label="Available double beds"
-          type="number"
-          value={availableBedsDouble.toString()}
-          onChange={(newValue) => setAvailableBedsDouble(parseInt(newValue))}
-        />
-        <RoomPropertiesFormFieldInput
-          label="Single beds"
-          type="number"
-          value={bedsSingle.toString()}
-          onChange={(newValue) => setBedsSingle(parseInt(newValue))}
-        />
-        <RoomPropertiesFormFieldInput
-          label="Double beds"
-          type="number"
-          value={bedsDouble.toString()}
-          onChange={(newValue) => setBedsDouble(parseInt(newValue))}
-        />
-        <RoomPropertiesFormFieldCheckbox
-          label="Hidden"
-          checked={roomHidden}
-          onChange={setRoomHidden}
-        />
-        <button
-          type="submit"
-          className="btn btn-success btn-lg btn-block"
-          disabled={createRoomMutation.isPending}
-        >
-          <LoadingContentSpinner isLoading={createRoomMutation.isPending}>
-            {title}
-          </LoadingContentSpinner>
-        </button>
-      </form>
-    </CustomDialog>
+    <form onSubmit={handleSubmit}>
+      <RoomPropertiesFormFieldInput
+        label="Room name"
+        type="text"
+        value={roomName}
+        onChange={setRoomName}
+        required
+      />
+      <RoomPropertiesFormFieldInput
+        label="Room description"
+        type="text"
+        value={roomDescription}
+        onChange={setRoomDescription}
+      />
+      <RoomPropertiesFormFieldInput
+        label="Available single beds"
+        type="number"
+        value={availableBedsSingle.toString()}
+        onChange={(newValue) => setAvailableBedsSingle(parseInt(newValue))}
+      />
+      <RoomPropertiesFormFieldInput
+        label="Available double beds"
+        type="number"
+        value={availableBedsDouble.toString()}
+        onChange={(newValue) => setAvailableBedsDouble(parseInt(newValue))}
+      />
+      <RoomPropertiesFormFieldInput
+        label="Single beds"
+        type="number"
+        value={bedsSingle.toString()}
+        onChange={(newValue) => setBedsSingle(parseInt(newValue))}
+      />
+      <RoomPropertiesFormFieldInput
+        label="Double beds"
+        type="number"
+        value={bedsDouble.toString()}
+        onChange={(newValue) => setBedsDouble(parseInt(newValue))}
+      />
+      <RoomPropertiesFormFieldCheckbox
+        label="Hidden"
+        checked={roomHidden}
+        onChange={setRoomHidden}
+      />
+      <button
+        type="submit"
+        className="btn btn-success btn-lg btn-block"
+        disabled={createRoomMutation.isPending}
+      >
+        <LoadingContentSpinner isLoading={createRoomMutation.isPending}>
+          {submitButtonLabel}
+        </LoadingContentSpinner>
+      </button>
+    </form>
   );
 };

app/client/components/rooms/card/RoomCard.tsx

@@ -6,7 +6,7 @@ import { Context } from "@reactivated";
 import clsx from "clsx";
 import React, { useContext, useState } from "react";
 import { RoomDeleteConfirmationDialog } from "../admin/RoomDeleteConfirmationDialog";
-import { RoomPropertiesDialog } from "../admin/RoomPropertiesDialog";
+import { RoomEditDialog } from "../admin/RoomEditDialog";
 import { useRoomMutations } from "../api/RoomMutations";
 import { JoinLockedRoomDialog } from "../JoinLockedRoomDialog";
 import { RoomActions } from "./RoomActions";
@@ -152,7 +152,7 @@ export const RoomCard = ({
       />
       {roomEditDialogOpen && (
         // We remount the dialog every time it's opened to reset the form state
-        <RoomPropertiesDialog
+        <RoomEditDialog
           roomData={roomData}
           dialogOpen={roomEditDialogOpen}
           closeDialog={() => setRoomEditDialogOpen(false)}