Merge pull request #22 from ksiuwr/bartacc/admin_panel_rooms

Add admin rooms view

app/client/components/Layout.tsx

@@ -70,7 +70,7 @@ export const Layout = ({
       <Toaster position="top-center" />
       <QueryClientProvider client={queryClient}>
         {showAdminSidebar && (
-          <div className="fixed z-50 hidden h-screen w-80 overflow-scroll lg:block">
+          <div className="fixed hidden h-screen w-80 overflow-scroll lg:block">
             <AdminNavBar showAsSidebar />
           </div>
         )}

app/client/components/admin/AdminNavBar.tsx

@@ -1,7 +1,7 @@
 import { ArrowDownTrayIcon } from "@heroicons/react/24/solid";
 import { Context, reverse } from "@reactivated";
 import clsx from "clsx";
-import React, { useContext, useEffect, useRef } from "react";
+import React, { useContext } from "react";
 
 interface AdminNavBarProps {
   showAsSidebar?: boolean;
@@ -64,7 +64,10 @@ const navbarSections: AdminNavBarSection[] = [
   },
   {
     sectionTitle: "Rooms",
-    links: [{ linkTitle: "Upload rooms", href: reverse("rooms_import") }],
+    links: [
+      { linkTitle: "List rooms", href: reverse("admin_rooms_list") },
+      { linkTitle: "Import rooms", href: reverse("rooms_import") },
+    ],
   },
   {
     sectionTitle: "Boardgames",
@@ -147,17 +150,6 @@ const navbarSections: AdminNavBarSection[] = [
 export const AdminNavBar = ({ showAsSidebar }: AdminNavBarProps) => {
   const { request } = useContext(Context);
 
-  const currentPathLinkRef = useRef<HTMLAnchorElement>(null);
-
-  useEffect(() => {
-    if (currentPathLinkRef.current) {
-      currentPathLinkRef.current.scrollIntoView({
-        behavior: "instant",
-        block: "center",
-      });
-    }
-  }, []);
-
   return (
     <nav
       className={clsx(
@@ -195,7 +187,6 @@ export const AdminNavBar = ({ showAsSidebar }: AdminNavBarProps) => {
                       request.path === href &&
                         "bg-base-content text-base-100 hover:bg-base-content hover:text-base-100",
                     )}
-                    ref={request.path === href ? currentPathLinkRef : undefined}
                   >
                     {sectionTitle === "Downloads" && (
                       <ArrowDownTrayIcon

app/client/components/forms/BasicFormWithCustomFields.tsx

@@ -17,7 +17,7 @@ export const BasicFormWithCustomFields = <T extends FieldMap>({
   children,
 }: PropsWithChildren<BasicFormWithCustomFieldsProps<T>>) => {
   return (
-    <form method="POST" onSubmit={onFormSubmit}>
+    <form method="POST" onSubmit={onFormSubmit} encType="multipart/form-data">
       <CSRFToken />
       {form.nonFieldErrors?.map((error) => (
         <Alert key={error} type="error">

app/client/components/forms/BasicWidget.tsx

@@ -1,5 +1,6 @@
 import { Checkbox, Input, Textarea } from "@headlessui/react";
 import { FieldHandler, Widget } from "@reactivated";
+import clsx from "clsx";
 import React from "react";
 import { WidgetHandler } from "reactivated/dist/forms";
 import { DjangoFormsWidgetsCheckboxInput } from "reactivated/dist/generated";
@@ -27,6 +28,7 @@ export const BasicWidget = ({
     case "django.forms.widgets.URLInput":
     case "django.forms.widgets.DateInput":
     case "django.forms.widgets.DateTimeInput":
+    case "django.forms.widgets.ClearableFileInput":
       return (
         <Input
           type={
@@ -37,7 +39,12 @@ export const BasicWidget = ({
                 : field.widget.type
           }
           name={field.name}
-          className="input input-bordered w-full"
+          className={clsx(
+            "w-full",
+            field.widget.type === "file"
+              ? "file-input file-input-bordered"
+              : "input input-bordered",
+          )}
           required={field.widget.required}
           value={field.value ?? ""}
           onChange={(e) => field.handler(e.target.value)}

app/client/components/forms/widgets/BasicListbox.tsx

@@ -70,10 +70,10 @@ export const BasicListbox = ({
             <ListboxOption
               key={optgroupValue}
               value={optgroupValue}
-              className="group btn no-animation btn-block justify-start rounded-none font-normal data-[selected]:btn-success data-[focus]:btn-active"
+              className="group btn no-animation btn-block flex flex-nowrap justify-start rounded-none text-start font-normal data-[selected]:btn-success data-[focus]:btn-active"
             >
               {currentOption.label}
-              <CheckIcon className="invisible size-6 group-data-[selected]:visible" />
+              <CheckIcon className="hidden size-6 group-data-[selected]:inline-block" />
             </ListboxOption>
           );
         })}

app/client/components/homePage/conferenceInfo/ConferenceInfo.tsx

@@ -68,7 +68,7 @@ export const ConferenceInfo = ({
               >
                 {placeName}
               </a>
-              <p>{placeAddress}</p>
+              <p className="whitespace-pre-wrap">{placeAddress}</p>
             </div>
           </div>
         </div>

app/client/components/homePage/conferenceInfo/EventDates.tsx

@@ -9,7 +9,7 @@ interface EventDatesProps {
 
 export const EventDates = ({ startDate, endDate, title }: EventDatesProps) => {
   return (
-    <div className="text-start">
+    <div className="mx-auto text-start">
       <h3 className="text-center">{`${title}:`}</h3>
       <span>{`Start: ${getLocalDateTime(startDate)}`}</span>
       <br />

app/client/components/rooms/JoinLockedRoomDialog.tsx

@@ -1,17 +1,18 @@
 import { Input } from "@headlessui/react";
+import { Context } from "@reactivated";
 import { UseMutationResult } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
-import React from "react";
+import React, { useContext } from "react";
 import { CustomDialog } from "../CustomDialog";
 import { LoadingContentSpinner } from "../LoadingContentSpinner";
-import { ApiErrorMessage } from "./ApiErrorMessage";
+import { ApiErrorMessage } from "./api/ApiErrorMessage";
 
 interface JoinLockedRoomDialogProps {
   roomName: string;
   joinRoomMutation: UseMutationResult<
     AxiosResponse<unknown, unknown>,
     Error,
-    string | undefined,
+    { userId: number; password?: string | undefined },
     unknown
   >;
   dialogOpen: boolean;
@@ -24,13 +25,17 @@ export const JoinLockedRoomDialog = ({
   dialogOpen,
   closeDialog,
 }: JoinLockedRoomDialogProps) => {
+  const { user } = useContext(Context);
   const [typedPassword, setTypedPassword] = React.useState("");
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     if (typedPassword !== "") {
-      joinRoomMutation.mutate(typedPassword, { onSuccess: closeDialog });
+      joinRoomMutation.mutate(
+        { userId: user.id, password: typedPassword },
+        { onSuccess: closeDialog },
+      );
     }
   };
 

app/client/components/rooms/RoomCards.tsx

@@ -9,8 +9,8 @@ import { Context } from "@reactivated";
 import { useQuery } from "@tanstack/react-query";
 import React, { useContext } from "react";
 import { Alert } from "../alert/Alert";
-import { ApiErrorMessage } from "./ApiErrorMessage";
-import { RoomCard } from "./RoomCard";
+import { ApiErrorMessage } from "./api/ApiErrorMessage";
+import { RoomCard } from "./card/RoomCard";
 import { RoomsSortBy } from "./RoomsBar";
 
 interface RoomCardsProps {
@@ -20,13 +20,16 @@ interface RoomCardsProps {
   searchText: string;
   hideFullRooms: boolean;
   sortRoomsBy: RoomsSortBy;
+
+  isAdmin?: boolean;
 }
 
 export const RoomCards = ({
   initialRoomData,
   searchText,
   hideFullRooms,
   sortRoomsBy,
+  isAdmin,
 }: RoomCardsProps) => {
   const { user } = useContext(Context);
 
@@ -115,9 +118,10 @@ export const RoomCards = ({
     <div className="mb-6 flex flex-col gap-5 lg:grid lg:grid-cols-2">
       {sortedResults.map((room) => (
         <RoomCard
-          key={room.name}
+          key={room.id}
           roomData={room}
           userIsInSomeRoomAlready={userRoom !== undefined}
+          isAdmin={isAdmin}
         ></RoomCard>
       ))}
     </div>