From 9236073e19a84216aea4d5975900f2701a6d2342 Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Wed, 29 Nov 2023 11:26:53 +0700
Subject: [PATCH] wip fix popup

---
 app/srv/api/site-export.ts                    |   1 -
 app/srv/ws/sync/editor/load-page.ts           |   4 -
 .../nova/ed/panel/popup/comp/comp-popup.tsx   | 125 +++++++++++-------
 .../nova/ed/panel/popup/comp/comp-preview.tsx |  77 ++++++++---
 .../nova/ed/panel/popup/comp/comp-reload.ts   |   2 +
 .../nova/ed/panel/popup/comp/comp-tree.tsx    |  75 +++++++++--
 6 files changed, 200 insertions(+), 84 deletions(-)

diff --git a/app/srv/api/site-export.ts b/app/srv/api/site-export.ts
index 493c1a4d..f46e8798 100644
--- a/app/srv/api/site-export.ts
+++ b/app/srv/api/site-export.ts
@@ -128,7 +128,6 @@ function readDirectoryRecursively(
       result[[...(baseDir || []), item].join("/")] = content;
     } else if (stats.isDirectory()) {
       if (item !== "node_modules") {
-        console.log(itemPath);
         const subdirResult = readDirectoryRecursively(itemPath, [
           ...(baseDir || []),
           item,
diff --git a/app/srv/ws/sync/editor/load-page.ts b/app/srv/ws/sync/editor/load-page.ts
index f7141d01..6e42f99a 100644
--- a/app/srv/ws/sync/editor/load-page.ts
+++ b/app/srv/ws/sync/editor/load-page.ts
@@ -260,10 +260,6 @@ export const serverWalkMap = (
     let id = item.originalId || item.id;
     const pcomp = p.scope_comps[arg.parent_mcomp.id];
 
-    if (!pcomp) {
-      console.log(arg.parent_mcomp.id);
-    }
-
     if (pcomp) {
       pcomp.scope[id] = {
         p: arg.parent_mcomp.parent_ids,
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx b/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx
index ef50a265..fe980f0f 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx
@@ -18,13 +18,14 @@ export const EdPopComp = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({
     tree: null as TreeMethods | null,
+    tab: "Components",
   });
   const TypedTree = DNDTree<CompItem>;
   compPicker.render = local.render;
 
   useEffect(() => {
     local.tree?.openAll();
-  }, [p.ui.popup.comp.open, compPicker.site_id]);
+  }, [p.ui.popup.comp.open, compPicker.site_id, local.tab]);
 
   if (!p.ui.popup.comp.open) return null;
 
@@ -37,6 +38,11 @@ export const EdPopComp = () => {
     reloadCompPicker(p);
   }
 
+  let tree = compPicker.tree;
+  if (local.tab === "Trash") {
+    tree = compPicker.trash;
+  }
+
   return (
     <>
       <Modal
@@ -64,50 +70,79 @@ export const EdPopComp = () => {
             )}
             {compPicker.status !== "loading" && (
               <>
-                <div className="flex flex-1 relative overflow-auto">
-                  <div
-                    className={cx(
-                      "absolute inset-0",
-                      css`
-                        > .tree-root > .listitem > .container {
-                          display: flex;
-                          flex-direction: row;
-                          flex-wrap: wrap;
-                          position: relative;
-                        }
-                      `
-                    )}
-                  >
-                    {compPicker.ref && compPicker.status === "ready" && (
-                      <DndProvider
-                        backend={HTML5Backend}
-                        options={getBackendOptions({
-                          html5: {
-                            rootElement: compPicker.ref,
-                          },
-                        })}
-                      >
-                        <TypedTree
-                          ref={(ref) => {
-                            if (local.tree !== ref) {
-                              local.tree = ref;
-                            }
-                          }}
-                          tree={compPicker.tree}
-                          initialOpen={true}
-                          rootId={"comp-root"}
-                          onDrop={() => {}}
-                          dragPreviewRender={() => <></>}
-                          canDrag={() => true}
-                          classes={{
-                            root: "tree-root flex-1",
-                            listItem: "listitem",
-                            container: "container",
-                          }}
-                          render={edPageTreeRender}
-                        />
-                      </DndProvider>
-                    )}
+                <div className="flex flex-1 flex-col">
+                  <div className="flex h-[30px] border-b items-stretch mb-2 bg-slate-100">
+                    <div className="flex items-end pl-1 space-x-1">
+                      {["Components", "Trash"].map((e) => {
+                        return (
+                          <div
+                            key={e}
+                            className={cx(
+                              "border cursor-pointer  -mb-[1px] px-2  hover:text-blue-500 hover:border-blue-500 hover:border-b-transparent select-none",
+                              local.tab === e &&
+                                "bg-white border-b-transparent",
+                              local.tab !== e &&
+                                "text-slate-400 border-b-slate-200 border-transparent bg-transparent"
+                            )}
+                            onClick={() => {
+                              local.tab = e;
+                              p.render();
+                            }}
+                          >
+                            {e}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                  <div className="relative flex-1 overflow-auto flex">
+                    <div
+                      className={cx(
+                        "absolute inset-0",
+                        css`
+                          > .tree-root > .listitem:first-child > div {
+                            border-top: 0;
+                          }
+                          > .tree-root > .listitem > .container {
+                            display: flex;
+                            flex-direction: row;
+                            flex-wrap: wrap;
+                            position: relative;
+                          }
+                        `
+                      )}
+                    >
+                      {compPicker.ref && compPicker.status === "ready" && (
+                        <DndProvider
+                          backend={HTML5Backend}
+                          options={getBackendOptions({
+                            html5: {
+                              rootElement: compPicker.ref,
+                            },
+                          })}
+                        >
+                          <TypedTree
+                            ref={(ref) => {
+                              if (local.tree !== ref) {
+                                local.tree = ref;
+                              }
+                            }}
+                            tree={tree}
+                            initialOpen={true}
+                            rootId={"comp-root"}
+                            onDrop={() => {}}
+                            dragPreviewRender={() => <></>}
+                            canDrag={() => true}
+                            classes={{
+                              root: "tree-root flex-1",
+                              listItem: "listitem",
+                              container: "container",
+                            }}
+                            render={edPageTreeRender}
+                          />
+                        </DndProvider>
+                      )}
+                    </div>
                   </div>
                 </div>
                 <EdCompPreview />
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx b/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx
index 076560e0..ceff1456 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx
@@ -6,7 +6,7 @@ import { IText } from "../../../../../utils/types/text";
 import { EDGlobal, PG, active } from "../../../logic/ed-global";
 import { loadComponent } from "../../../logic/tree/sync-walk";
 import { EdCompPreviewTree } from "./comp-preview-tree";
-import { compPicker } from "./comp-reload";
+import { compPicker, reloadCompPicker } from "./comp-reload";
 
 export const EdCompPreview = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -25,10 +25,12 @@ export const EdCompPreview = () => {
     }
   }, [comp_id]);
 
+  const isTrashed = !!compPicker.trash.find((e) => e.id === comp_id);
+
   return (
     <div className="flex flex-1 flex-col items-stretch overflow-auto border-l">
       {comp_id && item && (
-        <div className="flex px-1 py-1 border-b">
+        <div className="flex px-1 py-1 border-b h-[30px]">
           <div className="flex flex-1 items-center">
             <div>Preview</div>
             <div className="text-[8px] font-mono text-slate-500 mx-1">
@@ -37,41 +39,72 @@ export const EdCompPreview = () => {
           </div>
           <div className="flex flex-1 justify-end">
             <div
-              className="cursor-pointer transition-all  flex items-center border px-1 border-green-700 bg-green-700 text-white hover:opacity-50 mr-1"
+              className={cx(
+                "cursor-pointer transition-all  flex items-center border px-1  text-white hover:opacity-50 mr-1",
+                !isTrashed
+                  ? "border-green-700 bg-green-700"
+                  : "border-purple-700 bg-purple-700"
+              )}
               onClick={async (e) => {
                 e.stopPropagation();
 
-                if (p.ui.popup.comp.open) {
-                  p.ui.popup.comp.open(item.id);
-                }
-                p.ui.popup.comp.open = null;
+                if (isTrashed) {
+                  p.ui.popup.comp_group = {
+                    mouse_event: e,
+                    async on_pick(group_id) {
+                      await db.component.update({
+                        where: { id: comp_id },
+                        data: { id_component_group: group_id },
+                      });
+                      await reloadCompPicker(p);
+                      p.render();
+                    },
+                  };
+                } else {
+                  if (p.ui.popup.comp.open) {
+                    p.ui.popup.comp.open(item.id);
+                  }
+                  p.ui.popup.comp.open = null;
 
-                active.item_id = compPicker.active_id;
-                compPicker.active_id = "";
+                  active.item_id = compPicker.active_id;
+                  compPicker.active_id = "";
+                }
 
                 p.render();
               }}
             >
-              Select Component
+              {isTrashed ? "Restore Component" : "Select Component"}
             </div>
             <div
               className="cursor-pointer transition-all bg-white flex items-center border px-1 hover:border-red-300 hover:bg-red-100"
               onClick={async (e) => {
                 e.stopPropagation();
-                if (confirm("Are you sure to delete this component?")) {
-                  await db.component.delete({
-                    where: { id: p.ui.popup.comp.preview_id },
-                  });
-                  const idx =
-                    compPicker.tree.findIndex((e) => e.id === comp_id) + 1;
+                if (isTrashed) {
+                  if (confirm("Permanently delete this component?")) {
+                    await db.component.delete({
+                      where: { id: p.ui.popup.comp.preview_id },
+                    });
+                    const idx =
+                      compPicker.tree.findIndex((e) => e.id === comp_id) + 1;
 
-                  if (idx >= 0 && compPicker.tree[idx])
-                    p.ui.popup.comp.preview_id = compPicker.tree[idx].id as any;
+                    if (idx >= 0 && compPicker.tree[idx])
+                      p.ui.popup.comp.preview_id = compPicker.tree[idx]
+                        .id as any;
 
-                  compPicker.tree = compPicker.tree.filter(
-                    (e) => e.id !== comp_id
-                  );
-                  p.render();
+                    compPicker.tree = compPicker.tree.filter(
+                      (e) => e.id !== comp_id
+                    );
+                    p.render();
+                  }
+                } else {
+                  if (confirm("Move component to trash?")) {
+                    await db.component.update({
+                      where: { id: comp_id },
+                      data: { id_component_group: compPicker.trash_id },
+                    });
+                    await reloadCompPicker(p);
+                    p.render();
+                  }
                 }
               }}
             >
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts b/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
index 28e0d421..bc087909 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
@@ -9,6 +9,7 @@ export const compPicker = {
   tab: "all" as "all" | "trash",
   tree: [] as NodeModel<CompItem>[],
   trash: [] as NodeModel<CompItem>[],
+  trash_id: "",
   status: "ready" as "loading" | "ready",
   active_id: "",
   render: () => {},
@@ -32,6 +33,7 @@ export const reloadCompPicker = async (p: PG) => {
 
     if (v.name === "__TRASH__") {
       trash_id = k;
+      compPicker.trash_id = k;
     }
     tree.push({
       id: k,
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx b/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx
index 0478d905..2c5c05e6 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx
@@ -18,6 +18,8 @@ export const edPageTreeRender: NodeRender<CompItem> = (
   const item = node.data;
   if (!item) return <></>;
 
+  const isTrashed = !!compPicker.trash.find((e) => e.id === item.id);
+
   return (
     <div
       className={cx(
@@ -112,23 +114,54 @@ export const edPageTreeRender: NodeRender<CompItem> = (
 
       {item.type === "component" && (
         <div
-          className="transition-all bg-white flex items-center px-1 hover:border-blue-300 hover:bg-blue-100 opacity-20 hover:opacity-100"
+          className={cx(
+            "transition-all bg-white flex items-center px-1 hover:border-blue-300 hover:bg-blue-100 opacity-20 hover:opacity-100",
+            css`
+              &:hover {
+                .normal {
+                  display: none;
+                }
+                .over {
+                  display: block;
+                }
+              }
+            `
+          )}
           onClick={async (e) => {
             e.stopPropagation();
 
-            if (p.ui.popup.comp.open) {
-              p.ui.popup.comp.open(item.id);
+            if (isTrashed) {
+              p.ui.popup.comp.preview_id = item.id;
+              p.ui.popup.comp_group = {
+                mouse_event: e,
+                async on_pick(group_id) {
+                  await db.component.update({
+                    where: { id: item.id },
+                    data: { id_component_group: group_id },
+                  });
+                  await reloadCompPicker(p);
+                  p.render();
+                },
+              };
+              p.render();
+            } else {
+              if (p.ui.popup.comp.open) {
+                p.ui.popup.comp.open(item.id);
+              }
+              p.ui.popup.comp.open = null;
+              active.item_id = compPicker.active_id;
+              compPicker.active_id = "";
+
+              p.page.render();
             }
-            p.ui.popup.comp.open = null;
-
-            console.log(active.item_id, compPicker.active_id);
-            active.item_id = compPicker.active_id; 
-            compPicker.active_id = "";
-
-            p.page.render();
           }}
         >
-          <ImageIcon />
+          <div className="normal">
+            <PlayIcon />
+          </div>
+          <div className="over hidden">
+            {isTrashed ? <ResetIcon /> : <CheckIcon />}
+          </div>
         </div>
       )}
     </div>
@@ -149,13 +182,31 @@ const Name: FC<{ name: string }> = ({ name }) => {
 
   return <div>{name}</div>;
 };
-const ImageIcon = () => (
+
+const CheckIcon = () => (
+  <div
+    dangerouslySetInnerHTML={{
+      __html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+    }}
+  ></div>
+);
+
+const ResetIcon = () => (
+  <div
+    dangerouslySetInnerHTML={{
+      __html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+    }}
+  ></div>
+);
+
+const PlayIcon = () => (
   <div
     dangerouslySetInnerHTML={{
       __html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.24182 2.32181C3.3919 2.23132 3.5784 2.22601 3.73338 2.30781L12.7334 7.05781C12.8974 7.14436 13 7.31457 13 7.5C13 7.68543 12.8974 7.85564 12.7334 7.94219L3.73338 12.6922C3.5784 12.774 3.3919 12.7687 3.24182 12.6782C3.09175 12.5877 3 12.4252 3 12.25V2.75C3 2.57476 3.09175 2.4123 3.24182 2.32181ZM4 3.57925V11.4207L11.4288 7.5L4 3.57925Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
     }}
   ></div>
 );
+
 const DeleteIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"