wip page drag

app/web/src/nova/ed/panel/popup/page/page-popup.tsx

@@ -1,6 +1,7 @@
 import {
   Tree as DNDTree,
   DndProvider,
+  NodeModel,
   TreeMethods,
   getBackendOptions,
 } from "@minoru/react-dnd-treeview";
@@ -68,7 +69,14 @@ export const EdPopPage = () => {
               pagePicker.ref = ref;
             }
           }}
-          className={cx("absolute inset-[5%] bg-white flex")}
+          className={cx(
+            "absolute inset-[5%] bg-white flex",
+            css`
+              .dropping {
+                background: #efefff;
+              }
+            `
+          )}
         >
           <div className="relative flex flex-1 items-stretch text-[14px] overflow-auto">
             {pagePicker.status === "loading" && (
@@ -92,10 +100,49 @@ export const EdPopPage = () => {
                   }}
                   tree={pagePicker.tree}
                   rootId={"page-root"}
-                  onDrop={() => {}}
+                  onDrop={async (newTree: NodeModel<PageItem>[], opt) => {
+                    pagePicker.tree = newTree;
+                    p.render();
+
+                    if (!opt.dragSource?.droppable) {
+                      await db.page.update({
+                        where: {
+                          id: opt.dragSourceId as string,
+                        },
+                        data: {
+                          id_folder: (opt.dropTargetId === "root" ||
+                          !opt.dropTargetId
+                            ? null
+                            : opt.dropTargetId) as string,
+                        },
+                        select: { id: true },
+                      });
+                    } else {
+                      await db.page_folder.update({
+                        where: {
+                          id: opt.dragSourceId as string,
+                        },
+                        data: {
+                          parent_id: (opt.dropTargetId === "ROOT" ||
+                          !opt.dropTargetId
+                            ? null
+                            : opt.dropTargetId) as string,
+                        },
+                        select: {
+                          id: true,
+                        },
+                      });
+                    }
+                    reloadPagePicker(p);
+                  }}
                   dragPreviewRender={() => <></>}
                   canDrag={() => true}
-                  classes={{ root: "flex-1" }}
+                  canDrop={(tree, opt) => {
+                    if (opt.dropTarget?.data?.type === "page") return false;
+                    if (opt.dropTargetId === "page-root") return false;
+                    return true;
+                  }}
+                  classes={{ root: "flex-1", dropTarget: "dropping" }}
                   render={edPageTreeRender}
                 />
               </DndProvider>

app/web/src/nova/ed/panel/popup/page/page-reload.ts

@@ -37,6 +37,7 @@ export const reloadPagePicker = async (p: PG) => {
     id: "root",
     parent: "page-root",
     text: "pages",
+    droppable: true,
     data: { id: "root", name: "pages", type: "folder" },
   });
 
@@ -45,6 +46,7 @@ export const reloadPagePicker = async (p: PG) => {
       id: page.id,
       parent: page.id_folder || "root",
       text: page.name,
+      droppable: false,
       data: {
         id: page.id,
         name: page.name,

app/web/src/nova/ed/panel/popup/page/page-tree.tsx

@@ -205,13 +205,13 @@ export const edPageTreeRender: NodeRender<PageItem> = (
 };
 
 const Name: FC<{ name: string }> = ({ name }) => {
-  if (name.startsWith("layout::")) {
+  if (name.startsWith("layout:")) {
     return (
       <div className="flex items-center">
         <div className="border border-green-600 text-green-600 mr-1 font-mono text-[8px] px-1 bg-white ">
           LAYOUT
         </div>
-        <div>{name.substring("layout::".length)}</div>
+        <div>{name.substring("layout:".length)}</div>
       </div>
     );
   }