Add margins and table support in the invitation letter system

Author: marcoacierno

backend/api/visa/mutations/update_invitation_letter_document.py

@@ -15,10 +15,23 @@ class UpdateInvitationLetterDocumentPageInput:
     content: str
 
 
+@strawberry.input
+class UpdateInvitationLetterDocumentRunningPartInput:
+    content: str
+    align: str
+    margin: str
+
+
+@strawberry.input
+class UpdateInvitationLetterDocumentPageLayoutInput:
+    margin: str
+
+
 @strawberry.input
 class UpdateInvitationLetterDocumentStructureInput:
-    header: str
-    footer: str
+    header: UpdateInvitationLetterDocumentRunningPartInput
+    footer: UpdateInvitationLetterDocumentRunningPartInput
+    page_layout: UpdateInvitationLetterDocumentPageLayoutInput
     pages: list[UpdateInvitationLetterDocumentPageInput]
 
 
@@ -29,12 +42,12 @@ class UpdateInvitationLetterDocumentInput:
 
 
 @strawberry.type
-class InvitationLetterNotEditable:
+class InvitationLetterDocumentNotEditable:
     message: str = "Invitation letter document is not editable"
 
 
 UpdateInvitationLetterDocumentResult = Annotated[
-    InvitationLetterDocument | InvitationLetterNotEditable | NotFound,
+    InvitationLetterDocument | InvitationLetterDocumentNotEditable | NotFound,
     strawberry.union(name="UpdateInvitationLetterDocumentResult"),
 ]
 
@@ -51,7 +64,7 @@ def update_invitation_letter_document(
         return NotFound()
 
     if invitation_letter_document.document:
-        return InvitationLetterNotEditable()
+        return InvitationLetterDocumentNotEditable()
 
     invitation_letter_document.dynamic_document = strawberry.asdict(
         input.dynamic_document

backend/api/visa/tests/mutations/test_update_invitation_letter_document.py

@@ -118,7 +118,7 @@ def test_cannot_update_invitation_letter_document_with_static_doc(
 
     assert (
         response["data"]["updateInvitationLetterDocument"]["__typename"]
-        == "InvitationLetterNotEditable"
+        == "InvitationLetterDocumentNotEditable"
     )
     document.refresh_from_db()
     assert document.dynamic_document is None

backend/api/visa/types.py

@@ -54,17 +54,51 @@ def from_object(cls, obj: dict):
         )
 
 
+@strawberry.type
+class InvitationLetterDocumentRunningPart:
+    content: str
+    align: str
+    margin: str
+
+    @classmethod
+    def from_object(cls, obj: dict):
+        return cls(
+            content=obj.get("content", ""),
+            align=obj.get("align", ""),
+            margin=obj.get("margin", ""),
+        )
+
+
+@strawberry.type
+class InvitationLetterDocumentPageLayout:
+    margin: str
+
+    @classmethod
+    def from_object(cls, obj: dict):
+        return cls(
+            margin=obj.get("margin", ""),
+        )
+
+
 @strawberry.type
 class InvitationLetterDocumentStructure:
-    header: str
-    footer: str
+    header: InvitationLetterDocumentRunningPart
+    footer: InvitationLetterDocumentRunningPart
+    page_layout: InvitationLetterDocumentPageLayout
     pages: list[InvitationLetterDocumentPage]
 
     @classmethod
     def from_object(cls, obj: dict):
         return cls(
-            header=obj.get("header", ""),
-            footer=obj.get("footer", ""),
+            header=InvitationLetterDocumentRunningPart.from_object(
+                obj.get("header", {})
+            ),
+            footer=InvitationLetterDocumentRunningPart.from_object(
+                obj.get("footer", {})
+            ),
+            page_layout=InvitationLetterDocumentPageLayout.from_object(
+                obj.get("page_layout", {})
+            ),
             pages=[
                 InvitationLetterDocumentPage.from_object(page)
                 for page in obj.get("pages", [])

backend/custom_admin/package.json

@@ -31,6 +31,10 @@
     "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-list-item": "^2.10.3",
     "@tiptap/extension-placeholder": "^2.10.4",
+    "@tiptap/extension-table": "^2.11.0",
+    "@tiptap/extension-table-cell": "^2.11.0",
+    "@tiptap/extension-table-header": "^2.11.0",
+    "@tiptap/extension-table-row": "^2.11.0",
     "@tiptap/extension-text-align": "^2.10.3",
     "@tiptap/extension-text-style": "^2.10.3",
     "@tiptap/extension-underline": "^2.10.4",

backend/custom_admin/pnpm-lock.yaml

@@ -5,6 +5,7 @@ import { Fragment, useEffect } from "react";
 
 import { EditorSection } from "./editor-section";
 import { useLocalData } from "./local-state";
+import { PageLayoutOptions } from "./page-layout-option";
 
 export const InvitationLetterBuilder = () => {
   const { isDirty, localData, saveChanges, isSaving, addPage } = useLocalData();
@@ -37,33 +38,25 @@ export const InvitationLetterBuilder = () => {
 
         <Box height="var(--space-5)" />
 
-        <EditorSection
-          title="Header"
-          content={localData.header}
-          pageId="header"
-        />
+        <EditorSection title="Header" pageId="header" />
         <Box height="var(--space-5)" />
 
-        <EditorSection
-          title="Footer"
-          content={localData.footer}
-          pageId="footer"
-        />
+        <EditorSection title="Footer" pageId="footer" />
       </Card>
 
       <Box height="var(--space-5)" />
 
       <Card>
         <Heading>Pages</Heading>
+        <Box height="var(--space-1)" />
+
+        <PageLayoutOptions />
+
         <Box height="var(--space-5)" />
 
         {localData.pages.map((page) => (
           <Fragment key={page.id}>
-            <EditorSection
-              title={page.title}
-              content={page.content}
-              pageId={page.id}
-            />
+            <EditorSection title={page.title} pageId={page.id} />
             <Box height="var(--space-3)" />
           </Fragment>
         ))}

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

@@ -3,7 +3,9 @@ import {
   Button,
   Dialog,
   Flex,
+  Grid,
   Heading,
+  RadioGroup,
   Text,
   TextField,
   Theme,
@@ -13,18 +15,23 @@ import { MoveDown, MoveUp, Pencil, Trash } from "lucide-react";
 import { RichEditor } from "../shared/rich-editor";
 import { HideNode } from "../shared/rich-editor/menu-bar";
 import { useLocalData } from "./local-state";
+import { RunningElementsOptions } from "./running-elements-options";
 
 export const EditorSection = ({
   title,
-  content,
   pageId,
 }: {
   title: string;
-  content: string;
   pageId: string;
 }) => {
-  const { movePageUp, movePageDown, removePage, renamePage, setContent } =
-    useLocalData();
+  const {
+    movePageUp,
+    movePageDown,
+    removePage,
+    renamePage,
+    setContent,
+    getContent,
+  } = useLocalData();
   const isPage = pageId !== "header" && pageId !== "footer";
 
   const onMoveUp = () => movePageUp(pageId);
@@ -33,6 +40,8 @@ export const EditorSection = ({
   const onRename = (value: string) => renamePage(pageId, value);
   const onUpdate = (content: string) => setContent(pageId, content);
 
+  const content = getContent(pageId);
+
   return (
     <Box>
       <Flex align="center" gap="3">
@@ -50,6 +59,7 @@ export const EditorSection = ({
         )}
         {isPage && <RemovePage onRemove={onRemove} />}
       </Flex>
+      {!isPage && <RunningElementsOptions pageId={pageId} />}
       <Box height="var(--space-3)" />
       <RichEditor
         hide={[HideNode.buttonNode, HideNode.link]}

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

@@ -2,8 +2,19 @@ query InvitationLetterDocument($id: ID!) {
   invitationLetterDocument(id: $id) {
     id
     dynamicDocument {
-      header
-      footer
+      header {
+        content
+        align
+        margin
+      }
+      footer {
+        content
+        align
+        margin
+      }
+      pageLayout {
+        margin
+      }
       pages {
         id
         title