Minor changes

pythonitalia · Feb 6, 2024 · 3e52000 · 3e52000
1 parent 429600e
commit 3e52000
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/backend/custom_admin/src/components/schedule-builder/calendar.tsx b/backend/custom_admin/src/components/schedule-builder/calendar.tsx
@@ -19,7 +19,7 @@ export const Calendar = ({ day: { day, rooms, slots } }: Props) => {
       <div
         className="grid gap-1"
         style={{
-          gridTemplateColumns: `50px repeat(${numOfRooms}, 1fr)`,
+          gridTemplateColumns: `50px repeat(${numOfRooms}, minmax(150px, 1fr))`,
         }}
       >
         <div></div>
@@ -51,6 +51,7 @@ export const Calendar = ({ day: { day, rooms, slots } }: Props) => {
 
               {rooms.map((_, index) => (
                 <Placeholder
+                  key={`placeholder-${slot.id}-${index}`}
                   rowStart={rowStart}
                   rowEnd={rowEnd}
                   index={index}

diff --git a/backend/custom_admin/src/components/schedule-builder/editor-iframe.tsx b/backend/custom_admin/src/components/schedule-builder/editor-iframe.tsx
@@ -1,7 +1,30 @@
+import { useEffect } from "react";
+
+import { getApolloClient } from "../shared/base";
 import { useIframeEditor } from "./context";
 
 export const EditorIframe = () => {
-  const { visibleScheduleItemId } = useIframeEditor();
+  const { visibleScheduleItemId, close } = useIframeEditor();
+  const apolloClient = getApolloClient();
+
+  const onClose = () => {
+    close();
+    apolloClient.refetchQueries({
+      include: ["ConferenceSchedule"],
+    });
+  };
+
+  useEffect(() => {
+    if (visibleScheduleItemId) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [visibleScheduleItemId]);
 
   if (!visibleScheduleItemId) {
     return null;
@@ -13,9 +36,12 @@ export const EditorIframe = () => {
 
   return (
     <div>
-      <div className="fixed top-0 left-0 w-full h-full bg-black/50 z-[500]" />
+      <div
+        className="fixed top-0 left-0 w-full h-full bg-black/50 z-[500]"
+        onClick={onClose}
+      />
       <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] bg-white">
-        <iframe src={itemUrl} className="w-[90vw] h-[90vh]" />
+        <iframe src={itemUrl} className="w-[90vw] h-[90vh] z-[100]" />
       </div>
     </div>
   );

diff --git a/backend/custom_admin/src/components/schedule-builder/item.tsx b/backend/custom_admin/src/components/schedule-builder/item.tsx
@@ -48,21 +48,22 @@ export const Item = ({ slots, slot, item, rooms, rowStart }) => {
       className="bg-slate-200 p-3 z-50"
     >
       <ul>
-        <li>[{item.type}]</li>
-        <li>{item.title}</li>
         <li>
-          <strong>Duration</strong>:{" "}
-          <span>{item.submission?.duration} mins</span>
+          [{item.type} - {duration} mins]
         </li>
         <li>
-          <strong>Speakers</strong>:{" "}
-          <span>
-            {item.speakers.map((speaker) => speaker.fullname).join(",")}
-          </span>
+          <strong>{item.title}</strong>
         </li>
+        {item.speakers.length > 0 && (
+          <li>
+            <span>
+              {item.speakers.map((speaker) => speaker.fullname).join(",")}
+            </span>
+          </li>
+        )}
         <li>
           <a className="underline" href="#" onClick={openEditLink}>
-            Edit schedule item!!
+            Edit schedule item
           </a>
         </li>
       </ul>

diff --git a/backend/custom_admin/src/components/shared/base.tsx b/backend/custom_admin/src/components/shared/base.tsx
@@ -9,6 +9,10 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
+export const getApolloClient = () => {
+  return client;
+};
+
 export const Base = ({ children }: Props) => {
   console.log("client", client);
   return <ApolloProvider client={client}>{children}</ApolloProvider>;