more

Author: marcoacierno

backend/conferences/admin/conference.py

@@ -132,10 +132,13 @@ class ConferenceAdmin(
                     "name",
                     "code",
                     "logo",
+                    "location",
                     "introduction",
                     "timezone",
-                    "latitude",
-                    "longitude",
+                    (
+                        "latitude",
+                        "longitude",
+                    ),
                     "map_link",
                 )
             },

backend/conferences/migrations/0051_conference_location.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.4 on 2024-12-20 19:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('conferences', '0050_alter_deadline_type'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='conference',
+            name='location',
+            field=models.TextField(blank=True, max_length=1024, verbose_name='location'),
+        ),
+    ]

backend/conferences/models/conference.py

@@ -28,6 +28,7 @@ class Conference(GeoLocalizedModel, TimeFramedModel, TimeStampedModel):
     code = models.CharField(_("code"), max_length=100, unique=True)
     timezone = TimeZoneField()
     logo = models.ImageField(_("logo"), upload_to=get_upload_to, blank=True)
+    location = models.TextField(_("location"), max_length=1024, blank=True)
 
     topics = models.ManyToManyField(
         "conferences.Topic", verbose_name=_("topics"), blank=True

backend/custom_admin/astro.config.mjs

@@ -19,4 +19,7 @@ export default defineConfig({
     format: "file",
     assetsPrefix: "/django-static/",
   },
+  devToolbar: {
+    enabled: false,
+  },
 });

backend/custom_admin/package.json

@@ -36,6 +36,7 @@
     "astro": "^5.0.5",
     "clsx": "^2.1.1",
     "fabric": "^6.5.3",
+    "fast-deep-equal": "^3.1.3",
     "graphql": "^16.10.0",
     "lucide-react": "^0.468.0",
     "pdfjs-dist": "^4.9.155",

backend/custom_admin/pnpm-lock.yaml

@@ -1,19 +1,30 @@
-import * as Toast from "@radix-ui/react-toast";
 import { Button, Heading, Text } from "@radix-ui/themes";
 import { Box } from "@radix-ui/themes";
 import { Plus } from "lucide-react";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 
 import { EditorSection } from "./editor-section";
 import { useLocalData } from "./local-state";
 
 export const InvitationLetterBuilder = () => {
-  const { localData, saveChanges, isSaving, saveFailed, addPage } =
-    useLocalData();
+  const { isDirty, localData, saveChanges, isSaving, addPage } = useLocalData();
 
-  if (!localData) {
-    return <Text>Loading...</Text>;
-  }
+  useEffect(() => {
+    const listener = (e) => {
+      if (isDirty) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+
+      return "";
+    };
+
+    window.addEventListener("beforeunload", listener);
+
+    return () => {
+      window.removeEventListener("beforeunload", listener);
+    };
+  }, [isDirty]);
 
   return (
     <>

backend/custom_admin/src/components/invitation-letter-document-builder/builder.tsx

@@ -1,11 +1,32 @@
-import { useContext, useEffect, useReducer } from "react";
-import { useInvitationLetterDocumentQuery } from "./invitation-letter-document.generated";
+import equal from "fast-deep-equal";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
+import {
+  useInvitationLetterDocumentQuery,
+  useInvitationLetterDocumentSuspenseQuery,
+} from "./invitation-letter-document.generated";
 import { useUpdateInvitationLetterDocumentMutation } from "./update-invitation-letter-document.generated";
 
 import { createContext } from "react";
 
+type State = {
+  header: string;
+  footer: string;
+  pages: {
+    id: string;
+    title: string;
+    content: string;
+  }[];
+};
+
 export const LocalStateContext = createContext<{
-  localData: any;
+  localData: State;
   saveChanges: () => void;
   isSaving: boolean;
   saveFailed: boolean;
@@ -14,6 +35,7 @@ export const LocalStateContext = createContext<{
   removePage: (pageId: string) => void;
   movePageUp: (pageId: string) => void;
   movePageDown: (pageId: string) => void;
+  isDirty: boolean;
 }>({
   localData: null,
   saveChanges: () => {},
@@ -24,6 +46,7 @@ export const LocalStateContext = createContext<{
   removePage: () => {},
   movePageUp: () => {},
   movePageDown: () => {},
+  isDirty: false,
 });
 
 enum ActionType {
@@ -35,15 +58,13 @@ enum ActionType {
   MovePageDown = "MOVE_PAGE_DOWN",
 }
 
-const reducer = (state, action) => {
+const reducer = (state: State, action) => {
   switch (action.type) {
     case ActionType.LoadData: {
       return {
         ...action.payload,
-        __typename: undefined,
         pages: action.payload.pages.map((page) => ({
           ...page,
-          __typename: undefined,
         })),
       };
     }
@@ -129,14 +150,47 @@ export const useLocalData = () => {
   return useContext(LocalStateContext);
 };
 
-const useLoadRemoteData = () => {
+const removeTypenames = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(removeTypenames);
+  }
+
+  if (obj !== null && typeof obj === "object") {
+    const newObj = {};
+    for (const key in obj) {
+      if (key !== "__typename") {
+        newObj[key] = removeTypenames(obj[key]);
+      }
+    }
+
+    return newObj;
+  }
+
+  return obj;
+};
+
+const useLoadRemoteData = (dispatch) => {
   const documentId = (window as any).documentId;
-  const { data: remoteData } = useInvitationLetterDocumentQuery({
+
+  const { data } = useInvitationLetterDocumentSuspenseQuery({
     variables: {
       id: documentId,
     },
   });
-  return remoteData?.invitationLetterDocument?.dynamicDocument;
+
+  useEffect(() => {
+    const dynamicDocument = data?.invitationLetterDocument.dynamicDocument;
+    dispatch({
+      type: ActionType.LoadData,
+      payload: removeTypenames(dynamicDocument),
+    });
+  }, [data]);
+
+  const remoteData = useMemo(() => {
+    return removeTypenames(data?.invitationLetterDocument.dynamicDocument);
+  }, [data]);
+
+  return remoteData;
 };
 
 const useSaveRemoteData = (): [(newData) => void, boolean, boolean] => {
@@ -160,30 +214,21 @@ const useSaveRemoteData = (): [(newData) => void, boolean, boolean] => {
 };
 
 export const LocalStateProvider = ({ children }) => {
-  const [localData, dispatch] = useReducer(reducer, null);
-  const remoteData = useLoadRemoteData();
+  const [localData, dispatch] = useReducer<State, any>(reducer, null);
+  const remoteData = useLoadRemoteData(dispatch);
   const [saveChanges, isSaving, saveFailed] = useSaveRemoteData();
 
-  useEffect(() => {
-    if (!remoteData) {
-      return;
-    }
-
-    dispatch({ type: ActionType.LoadData, payload: remoteData });
-  }, [remoteData]);
+  const isDirty = !equal(remoteData, localData);
 
   return (
     <LocalStateContext.Provider
       value={{
-        localData,
-        saveChanges: () => {
-          saveChanges(localData);
-        },
+        localData: localData || remoteData,
+        isDirty,
+        saveChanges: () => saveChanges(localData),
         isSaving,
         saveFailed,
-        addPage: () => {
-          dispatch({ type: ActionType.AddPage });
-        },
+        addPage: () => dispatch({ type: ActionType.AddPage }),
         setContent: (pageId, content) => {
           dispatch({
             type: ActionType.SetContent,

backend/custom_admin/src/components/invitation-letter-document-builder/local-state.tsx

@@ -6,7 +6,6 @@ import {
   AlignLeft,
   AlignRight,
   Bold,
-  Braces,
   Italic,
 } from "lucide-react";
 
@@ -68,17 +67,6 @@ export const MenuBar = ({ editor }) => {
       >
         <AlignJustify size={16} />
       </Toolbar.Button>
-
-      <Toolbar.Separator className="w-px bg-gray-300 mx-1" />
-
-      <Toolbar.Button
-        onClick={() => editor.chain().focus().setTextAlign("justify").run()}
-        className={clsx("p-2 rounded hover:bg-gray-200", {
-          "bg-gray-200": editor.isActive({ textAlign: "justify" }),
-        })}
-      >
-        <Braces size={16} />
-      </Toolbar.Button>
     </Toolbar.Root>
   );
 };

backend/custom_admin/src/components/invitation-letter-document-builder/menu-bar.tsx

@@ -1,3 +1,5 @@
+import { Flex, Spinner } from "@radix-ui/themes";
+import { Suspense } from "react";
 import { Base } from "../shared/base";
 import { DjangoAdminLayout } from "../shared/django-admin-layout";
 import { InvitationLetterBuilder } from "./builder";
@@ -7,9 +9,25 @@ export const InvitationLetterDocumentBuilderRoot = () => {
   return (
     <Base>
       <DjangoAdminLayout>
-        <LocalStateProvider>
-          <InvitationLetterBuilder />
-        </LocalStateProvider>
+        <Suspense
+          fallback={
+            <Flex
+              align="center"
+              justify="center"
+              width="100%"
+              height="100%"
+              position="absolute"
+              top="0"
+              left="0"
+            >
+              <Spinner size="3" />
+            </Flex>
+          }
+        >
+          <LocalStateProvider>
+            <InvitationLetterBuilder />
+          </LocalStateProvider>
+        </Suspense>
       </DjangoAdminLayout>
     </Base>
   );