fix: List view D&D

vriteio · Oct 12, 2023 · 0492a8a · 0492a8a
1 parent 2d24d00
commit 0492a8a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/apps/web/src/layout/toolbar/breadcrumb.tsx b/apps/web/src/layout/toolbar/breadcrumb.tsx
@@ -9,7 +9,7 @@ import { Component, createSignal, createEffect, on, Show, For, createMemo, JSX }
 import Sortable from "sortablejs";
 import { IconButton } from "#components/primitives";
 import { useContentGroups } from "#lib/composables";
-import { App, useClient, useCache } from "#context";
+import { App, useClient, useCache, useLocalStorage } from "#context";
 
 const Breadcrumb: Component<{
   ancestor?: App.ContentGroup | null;
@@ -19,19 +19,26 @@ const Breadcrumb: Component<{
 }> = (props) => {
   const client = useClient();
   const cache = useCache();
-  const { contentGroups, setContentGroups } = cache("contentGroups", () => useContentGroups());
+  const { storage } = useLocalStorage();
+  const ancestor = (): App.ContentGroup | null => {
+    return storage().dashboardViewAncestor || null;
+  };
+  const { contentGroups, setContentGroups } = cache("contentGroups", () => {
+    return useContentGroups(ancestor()?.id);
+  });
   const [highlightedAncestor, setHighlightedAncestor] = createSignal("");
   const [ancestors, setAncestors] = createSignal<App.ContentGroup[]>([]);
   const highlightDropzoneHandlers = (
-    ancestorId: string
+    ancestorId: string,
+    acceptContentPieces?: boolean
   ): JSX.CustomEventHandlersCamelCase<HTMLElement> => {
     const draggableActive = (): boolean => {
       const groupActive =
         props.activeDraggableGroup && props.activeDraggableGroup.ancestors.at(-1) !== ancestorId;
       const pieceActive =
         props.activeDraggablePiece && props.activeDraggablePiece.contentGroupId !== ancestorId;
 
-      return Boolean(groupActive || pieceActive);
+      return Boolean(groupActive || (acceptContentPieces ? pieceActive : false));
     };
 
     return {
@@ -115,7 +122,12 @@ const Breadcrumb: Component<{
         <div
           ref={(el) => {
             Sortable.create(el, {
-              group: "shared",
+              group: {
+                name: "shared",
+                put: (_to, _from, dragEl) => {
+                  return Boolean(dragEl.dataset.contentGroupId);
+                }
+              },
               ghostClass: "!hidden",
               filter: ".locked",
               delayOnTouchOnly: true,

diff --git a/apps/web/src/views/dashboard/index.tsx b/apps/web/src/views/dashboard/index.tsx
@@ -16,7 +16,7 @@ const DashboardView: Component = () => {
     return storage().dashboardViewAncestor || null;
   };
   const { contentGroups, setContentGroups, refetch, loading } = cache("contentGroups", () => {
-    return useContentGroups();
+    return useContentGroups(ancestor()?.id);
   });
   const ydoc = new Y.Doc();
   const handleReload = async (): Promise<void> => {

diff --git a/apps/web/src/views/dashboard/views/list/content-group-row.tsx b/apps/web/src/views/dashboard/views/list/content-group-row.tsx
@@ -138,8 +138,9 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
               name: "shared",
               put: (_to, _from, dragEl) => {
                 return (
-                  Boolean(dragEl.dataset.contentGroupId) &&
-                  dragEl.dataset.contentGroupId !== props.contentGroup?.id
+                  (Boolean(dragEl.dataset.contentGroupId) &&
+                    dragEl.dataset.contentGroupId !== props.contentGroup?.id) ||
+                  Boolean(dragEl.dataset.contentPieceId && props.contentGroup)
                 );
               }
             },
@@ -192,6 +193,7 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
           onDragOver={(event) => event.preventDefault()}
           onDragEnter={(event) => {
             if (
+              ((activeDraggablePiece() && props.contentGroup) || activeDraggableGroup()) &&
               event.relatedTarget instanceof HTMLElement &&
               !event.target.contains(event.relatedTarget)
             ) {
@@ -200,24 +202,25 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
           }}
           onDragLeave={(event) => {
             if (
+              ((activeDraggablePiece() && props.contentGroup) || activeDraggableGroup()) &&
               event.relatedTarget instanceof HTMLElement &&
               !event.target.contains(event.relatedTarget)
             ) {
               setHighlight(false);
             }
           }}
           onMouseEnter={() => {
-            if (activeDraggableGroup()) {
+            if ((activeDraggablePiece() && props.contentGroup) || activeDraggableGroup()) {
               setHighlight(true);
             }
           }}
           onMouseLeave={() => {
-            if (activeDraggableGroup()) {
+            if ((activeDraggablePiece() && props.contentGroup) || activeDraggableGroup()) {
               setHighlight(false);
             }
           }}
           onTouchMove={(event) => {
-            if (activeDraggableGroup()) {
+            if ((activeDraggablePiece() && props.contentGroup) || activeDraggableGroup()) {
               const x = event.touches[0].clientX;
               const y = event.touches[0].clientY;
               const elementAtTouchPoint = document.elementFromPoint(x, y);

diff --git a/apps/web/src/views/dashboard/views/list/index.tsx b/apps/web/src/views/dashboard/views/list/index.tsx
@@ -216,7 +216,7 @@ const DashboardListView: Component<DashboardListViewProps> = (props) => {
             />
           </Show>
           <For each={props.contentGroups}>
-            {(contentGroup, index) => {
+            {(contentGroup) => {
               return (
                 <ContentGroupRow
                   contentGroup={contentGroup}