Ibrahimalmalki/doo 96 ability to copy a canvas inherit a canvas from a template

client/src/components/lib/Board.tsx

@@ -3,6 +3,7 @@ import { TopBar } from '@/components/lib/TopBar';
 import { BoardScroll } from './BoardScroll';
 import { Settings } from './Settings';
 import { Canvas, useCanvasBoardStore } from '@/stores/CanavasBoardStore';
+import { TemplateScroll } from './TemplateScroll';
 
 /**
  * Define a react component that displays
@@ -19,7 +20,7 @@ export const Board = () => {
       <TopBar setSearchCanvases={setSearchCanvases} />
       {board === 'Folder' && <BoardScroll searchCanvases={searchCanvases} />}
       {board == 'Settings' && <Settings />}
-      {/** To be added template and setting page */}
+      {board == 'Templates' && <TemplateScroll />}
     </div>
   );
 };

client/src/components/lib/BoardScroll.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { CalendarIcon } from '@radix-ui/react-icons';
 import { Canvas, useCanvasBoardStore } from '@/stores/CanavasBoardStore';
 import { Thumbnail } from './Thumbnail';
@@ -67,12 +67,14 @@ export const BoardScroll = ({
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [state, setState] = useState<CanvasElementState>();
   const [thumbnailUrl, setThumbnailUrl] = useState('');
-  const { canvases, boardMeta, folder, setBoardMeta } = useCanvasBoardStore([
-    'canvases',
-    'boardMeta',
-    'folder',
-    'setBoardMeta',
-  ]);
+  const { canvases, boardMeta, board, folder, setBoardMeta } =
+    useCanvasBoardStore([
+      'canvases',
+      'boardMeta',
+      'board',
+      'folder',
+      'setBoardMeta',
+    ]);
   const { setCanvasElementState } = useCanvasElementStore([
     'setCanvasElementState',
   ]);
@@ -83,7 +85,9 @@ export const BoardScroll = ({
   };
 
   const { toast } = useToast();
-
+  useEffect(() => {
+    setBoardMeta({ title: '', id: '' });
+  }, [folder]);
   const sortedCavases = (
     searchCanvases.length === 0 ? canvases : searchCanvases
   )
@@ -213,7 +217,7 @@ export const BoardScroll = ({
           </div>
         ))}
       </div>
-      {boardMeta.id && (
+      {boardMeta.id && board === 'Folder' && (
         <Thumbnail
           setIsDeleteDialogOpen={setIsDeleteDialogOpen}
           setState={setCanvasState}

client/src/components/lib/DropDownMenu.tsx

@@ -8,6 +8,7 @@ import {
   InfoCircledIcon,
   Share1Icon,
   BlendingModeIcon,
+  RocketIcon,
 } from '@radix-ui/react-icons';
 import { useAppStore } from '@/stores/AppStore';
 import CanvasColorToolGroup, { canvasColourTypes } from './CanvasBackground';
@@ -46,10 +47,14 @@ const DropDownMenu = ({
   viewportRef,
   isEditDialogOpen,
   setIsEditDialogOpen,
+  isPubDialogOpen,
+  setIsPubDialogOpen,
 }: {
   viewportRef: React.RefObject<HTMLDivElement>;
   isEditDialogOpen: boolean;
   setIsEditDialogOpen: (value: boolean) => void;
+  isPubDialogOpen: boolean;
+  setIsPubDialogOpen: (value: boolean) => void;
 }) => {
   const { isFullscreen } = useAppStore(['isFullscreen']);
   //Handle button functionailities
@@ -120,6 +125,16 @@ const DropDownMenu = ({
           <ResetCanvasDropDownMenu />
           <DropdownMenu.Separator className="h-[1px] bg-neutral-200 m-[5px]" />
 
+          <DropdownMenu.Item
+            className="group text-[13px] indent-[10px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 hover:bg-indigo-200"
+            onClick={async () => {
+              setIsPubDialogOpen(!isPubDialogOpen);
+            }}
+          >
+            <RocketIcon /> Publish as Template
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator className="h-[1px] bg-neutral-200 m-[5px]" />
+
           <DropdownMenu.Item
             className="group text-[13px] indent-[10px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 hover:bg-indigo-200"
             disabled={true}

client/src/components/lib/PublishTemplateDialog.tsx

@@ -0,0 +1,146 @@
+import React, { useRef } from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Input } from '../ui/input';
+import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
+import axios from 'axios';
+import { REST } from '@/constants';
+import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
+import { useToast } from '../ui/use-toast';
+
+/**
+ * An alert dialog where user can edit board data
+ * @author Ibrahim Almalki
+ */
+
+export default function PublishTemplateDialog({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}) {
+  /* Controls visibility of the addition input. */
+  const titleRef = useRef<HTMLInputElement | null>(null);
+
+  const { boardMeta } = useCanvasBoardStore(['boardMeta']);
+  const { toast } = useToast();
+
+  const {
+    allIds,
+    types,
+    strokeColors,
+    fillColors,
+    fontFamilies,
+    fontSizes,
+    bowings,
+    roughnesses,
+    strokeWidths,
+    fillStyles,
+    strokeLineDashes,
+    opacities,
+    freehandPoints,
+    p1,
+    p2,
+    textStrings,
+    isImagePlaceds,
+    freehandBounds,
+    angles,
+    fileIds,
+  } = useCanvasElementStore([
+    'allIds',
+    'types',
+    'strokeColors',
+    'fillColors',
+    'fontFamilies',
+    'fontSizes',
+    'bowings',
+    'roughnesses',
+    'strokeWidths',
+    'fillStyles',
+    'strokeLineDashes',
+    'opacities',
+    'freehandPoints',
+    'p1',
+    'p2',
+    'textStrings',
+    'isImagePlaceds',
+    'freehandBounds',
+    'angles',
+    'fileIds',
+  ]);
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Publish Board</AlertDialogTitle>
+        </AlertDialogHeader>
+
+        <div className="flex items-center mb-1">
+          <label className="block text-sm font-medium text-gray-700 mr-1">
+            Title:
+          </label>
+          <Input
+            defaultValue={boardMeta.title}
+            className="mt-1 block w-full"
+            ref={titleRef}
+          />
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel className="text-[#818cf8] border-[#818cf8] hover:text-[#6c75c1] hover:border-[#6c75c1]">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-[#818cf8] hover:bg-[#6c75c1]"
+            onClick={async () => {
+              try {
+                const state = {
+                  allIds,
+                  types,
+                  strokeColors,
+                  fillColors,
+                  fontFamilies,
+                  fontSizes,
+                  bowings,
+                  roughnesses,
+                  strokeWidths,
+                  fillStyles,
+                  strokeLineDashes,
+                  opacities,
+                  freehandPoints,
+                  p1,
+                  p2,
+                  textStrings,
+                  isImagePlaceds,
+                  freehandBounds,
+                  angles,
+                  fileIds,
+                };
+
+                await axios.post(REST.template.create, {
+                  serialized: { serialized: state },
+                  title: titleRef.current?.value,
+                });
+                toast({
+                  title: 'Successfully Published',
+                });
+              } catch (error) {
+                console.error('Error creating template:', error);
+              }
+            }}
+          >
+            Publish
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}