@hed-hog/lms 0.0.314 → 0.0.316

package/hedhog/frontend/app/courses/[id]/structure/_components/course-tree-dnd.tsx.ejs

@@ -1,362 +1,362 @@
-'use client';
-
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type DragStartEvent,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { useCallback, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-
-import { Button } from '@/components/ui/button';
-import { Layers, Loader2, Plus, SearchX } from 'lucide-react';
-import {
-  useCreateSessionMutation,
-  useMoveLessonMutation,
-  useReorderLessonsMutation,
-  useReorderSessionsMutation,
-} from '../_data/use-course-structure-mutations';
-import { TreeDragOverlay } from './drag-overlay';
-import { SortableTreeRow } from './sortable-tree-row';
-import { useStructureStore } from './store';
-import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
-import type { FlatItem } from './types';
-
-const ROW_HEIGHT: Record<FlatItem['type'], number> = {
-  course: 34,
-  session: 32,
-  lesson: 28,
-};
-
-/**
- * DnD-aware tree that wraps the virtualised list with dnd-kit context.
- * NOTE: Because dnd-kit and react-virtual don't share a single scroll ref,
- * we use a standard overflow list here (the virtual approach is kept intact
- * in the non-DnD path inside CourseTree).
- * For typical course sizes (< 500 items) this renders fine.
- */
-export function CourseTreeDnd() {
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-  const expandedIds = useStructureStore((s) => s.expandedIds);
-  const filterQuery = useStructureStore((s) => s.filterQuery);
-  const activeItemId = useStructureStore((s) => s.activeItemId);
-  const activeItemType = useStructureStore((s) => s.activeItemType);
-  const selectedIds = useStructureStore((s) => s.selectedIds);
-
-  const reorderSessions = useStructureStore((s) => s.reorderSessions);
-  const moveLesson = useStructureStore((s) => s.moveLesson);
-
-  const reorderSessionsMutation = useReorderSessionsMutation();
-  const reorderLessonsMutation = useReorderLessonsMutation();
-  const moveLessonMutation = useMoveLessonMutation();
-  const createSession = useCreateSessionMutation();
-
-  const [draggingItem, setDraggingItem] = useState<FlatItem | null>(null);
-
-  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
-    () =>
-      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
-    [course, sessions, lessons, expandedIds, filterQuery]
-  );
-
-  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
-
-  const sortedSessions = useMemo(
-    () => [...sessions].sort((a, b) => a.order - b.order),
-    [sessions]
-  );
-
-  const isSearchActive = filterQuery.trim().length > 0;
-  const dragDisabled = isSearchActive;
-
-  // ── Sensors ──────────────────────────────────────────────────────────────
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 6 },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  // ── Drag handlers ────────────────────────────────────────────────────────
-  const handleDragStart = useCallback(
-    (event: DragStartEvent) => {
-      const item = items.find(
-        (i) => `${i.type}:${i.id}` === String(event.active.id)
-      );
-      setDraggingItem(item ?? null);
-    },
-    [items]
-  );
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      setDraggingItem(null);
-      const { active, over } = event;
-      if (!over || active.id === over.id) return;
-
-      const activeItem = items.find(
-        (i) => `${i.type}:${i.id}` === String(active.id)
-      );
-      const overItem = items.find(
-        (i) => `${i.type}:${i.id}` === String(over.id)
-      );
-      if (!activeItem || !overItem) return;
-
-      // ── Session reorder ───────────────────────────────────────────────────
-      if (activeItem.type === 'session' && overItem.type === 'session') {
-        const fromIdx = sortedSessions.findIndex(
-          (s) => s.id === activeItem.data.id
-        );
-        const toIdx = sortedSessions.findIndex(
-          (s) => s.id === overItem.data.id
-        );
-        if (fromIdx === -1 || toIdx === -1) return;
-
-        // Snapshot before store mutation (optimistic)
-        const previousSessions = [...sessions];
-
-        // Compute new order locally to pass as API payload
-        const reorderedIds = arrayMove(sortedSessions, fromIdx, toIdx).map(
-          (s) => String(s.id)
-        );
-
-        // Optimistic store update
-        reorderSessions(fromIdx, toIdx);
-
-        // Persist in background; onError rolls back
-        reorderSessionsMutation.mutate({
-          orderedIds: reorderedIds,
-          previousSessions,
-        });
-        toast.success(
-          `Sessão "${activeItem.data.title}" movida para posição ${toIdx + 1}`
-        );
-        return;
-      }
-
-      // ── Lesson reorder / move ────────────────────────────────────────────
-      if (activeItem.type === 'lesson') {
-        const lessonData = activeItem.data;
-
-        // Determine target session and index
-        let toSessionId: string;
-        let toIndex: number;
-
-        if (overItem.type === 'lesson') {
-          toSessionId = overItem.data.sessionId;
-          // Position relative to lessons in the target session (visible order)
-          const destLessons = items.filter(
-            (i) =>
-              i.type === 'lesson' &&
-              i.data.sessionId === toSessionId &&
-              i.id !== active.id
-          );
-          toIndex = destLessons.findIndex((i) => i.id === over.id);
-          if (toIndex === -1) toIndex = destLessons.length;
-        } else if (overItem.type === 'session') {
-          // Dropped directly onto a session header → append to that session
-          toSessionId = overItem.data.id as string;
-          const destLessons = lessons.filter(
-            (l) => l.sessionId === toSessionId && l.id !== active.id
-          );
-          toIndex = destLessons.length;
-        } else {
-          return;
-        }
-
-        const didChangeSession = lessonData.sessionId !== toSessionId;
-
-        // Snapshot before store mutation (optimistic)
-        const previousLessons = [...lessons];
-
-        // Optimistic store update
-        moveLesson(String(activeItem.data.id), toSessionId, toIndex);
-
-        if (didChangeSession) {
-          // Cross-session move
-          const targetSession = sessions.find((s) => s.id === toSessionId);
-          moveLessonMutation.mutate({
-            lessonId: String(activeItem.data.id),
-            fromSessionId: lessonData.sessionId,
-            toSessionId,
-            toIndex,
-            previousLessons,
-          });
-          toast.success(
-            `Aula "${lessonData.title}" movida para "${targetSession?.title ?? toSessionId}"`
-          );
-        } else {
-          // Reorder within same session — compute new ordered IDs
-          const sessionLessons = lessons
-            .filter((l) => l.sessionId === toSessionId)
-            .sort((a, b) => a.order - b.order);
-          const fromLessonIdx = sessionLessons.findIndex(
-            (l) => l.id === String(activeItem.data.id)
-          );
-          const orderedIds = arrayMove(
-            sessionLessons,
-            fromLessonIdx,
-            toIndex
-          ).map((l) => l.id);
-
-          reorderLessonsMutation.mutate({
-            sessionId: toSessionId,
-            orderedIds,
-            previousLessons,
-          });
-          toast(`Aula "${lessonData.title}" reordenada`);
-        }
-      }
-    },
-    [
-      items,
-      sortedSessions,
-      lessons,
-      sessions,
-      reorderSessions,
-      moveLesson,
-      reorderSessionsMutation,
-      reorderLessonsMutation,
-      moveLessonMutation,
-    ]
-  );
-
-  const isEmpty = items.length === 0;
-
-  const isSavingOrder =
-    reorderSessionsMutation.isPending ||
-    reorderLessonsMutation.isPending ||
-    moveLessonMutation.isPending;
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <SortableContext
-        items={items.map((i) => `${i.type}:${i.id}`)}
-        strategy={verticalListSortingStrategy}
-      >
-        <div className="flex flex-col h-full min-h-0">
-          {/* Saving-order progress indicator */}
-          {isSavingOrder && (
-            <div className="flex items-center gap-1.5 px-3 py-1 shrink-0 border-b bg-primary/5">
-              <Loader2 className="size-3 animate-spin text-primary/60 shrink-0" />
-              <span className="text-[0.65rem] text-primary/70">
-                Salvando ordem…
-              </span>
-            </div>
-          )}
-
-          {/* Search result count */}
-          {isSearchActive && !isEmpty && (
-            <div className="px-3 py-1 shrink-0 border-b">
-              <span className="text-[0.65rem] text-muted-foreground">
-                {resultCount === 1
-                  ? '1 resultado'
-                  : `${resultCount} resultados`}
-              </span>
-            </div>
-          )}
-
-          {/* Search disabled-drag notice */}
-          {isSearchActive && (
-            <div className="px-3 py-1 shrink-0 border-b bg-amber-50 dark:bg-amber-950/30">
-              <span className="text-[0.65rem] text-amber-700 dark:text-amber-400">
-                Limpe a busca para reordenar itens
-              </span>
-            </div>
-          )}
-
-          {/* Empty state */}
-          {isEmpty && !isSearchActive && (
-            <div className="flex flex-col items-center justify-center gap-3 py-12 px-4 text-center">
-              <div className="flex size-12 items-center justify-center rounded-xl bg-muted/50">
-                <Layers className="size-5 text-muted-foreground/40" />
-              </div>
-              <div className="space-y-1">
-                <p className="text-sm font-medium text-foreground/70">
-                  Nenhuma sessão
-                </p>
-                <p className="text-xs text-muted-foreground leading-relaxed max-w-[180px]">
-                  Adicione a primeira sessão para começar a organizar o conteúdo
-                  do curso.
-                </p>
-              </div>
-              <Button
-                size="sm"
-                variant="outline"
-                className="h-7 text-xs gap-1.5 mt-1"
-                disabled={createSession.isPending}
-                onClick={() => createSession.mutate()}
-              >
-                {createSession.isPending ? (
-                  <Loader2 className="size-3 animate-spin" />
-                ) : (
-                  <Plus className="size-3" />
-                )}
-                Nova sessão
-              </Button>
-            </div>
-          )}
-
-          {isEmpty && isSearchActive && (
-            <div className="flex flex-col items-center justify-center gap-2 py-12 px-4 text-center">
-              <SearchX className="size-8 text-muted-foreground/40" />
-              <p className="text-sm text-muted-foreground">
-                Nenhum resultado para &ldquo;{filterQuery.trim()}&rdquo;
-              </p>
-            </div>
-          )}
-
-          {/* Scrollable flat list */}
-          {!isEmpty && (
-            <div className="overflow-y-auto flex-1 min-h-0 px-1 py-1 space-y-px">
-              {items.map((item) => (
-                <div
-                  key={`${item.type}:${item.id}`}
-                  style={{ height: `${ROW_HEIGHT[item.type]}px` }}
-                >
-                  <SortableTreeRow
-                    item={item}
-                    isActive={
-                      activeItemId === item.id && activeItemType === item.type
-                    }
-                    isSelected={selectedIds.has(`${item.type}:${item.id}`)}
-                    query={filterQuery}
-                    isMatched={matchedIds.has(item.id)}
-                    isEffectivelyExpanded={
-                      expandedIds.has(item.id) || expandedBySearch.has(item.id)
-                    }
-                    lessonCountMap={lessonCountMap}
-                    visibleItems={items}
-                    dragDisabled={dragDisabled}
-                  />
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </SortableContext>
-
-      <TreeDragOverlay activeItem={draggingItem} />
-    </DndContext>
-  );
-}
+'use client';
+
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Layers, Loader2, Plus, SearchX } from 'lucide-react';
+import {
+  useCreateSessionMutation,
+  useMoveLessonMutation,
+  useReorderLessonsMutation,
+  useReorderSessionsMutation,
+} from '../_data/use-course-structure-mutations';
+import { TreeDragOverlay } from './drag-overlay';
+import { SortableTreeRow } from './sortable-tree-row';
+import { useStructureStore } from './store';
+import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
+import type { FlatItem } from './types';
+
+const ROW_HEIGHT: Record<FlatItem['type'], number> = {
+  course: 34,
+  session: 32,
+  lesson: 28,
+};
+
+/**
+ * DnD-aware tree that wraps the virtualised list with dnd-kit context.
+ * NOTE: Because dnd-kit and react-virtual don't share a single scroll ref,
+ * we use a standard overflow list here (the virtual approach is kept intact
+ * in the non-DnD path inside CourseTree).
+ * For typical course sizes (< 500 items) this renders fine.
+ */
+export function CourseTreeDnd() {
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+  const expandedIds = useStructureStore((s) => s.expandedIds);
+  const filterQuery = useStructureStore((s) => s.filterQuery);
+  const activeItemId = useStructureStore((s) => s.activeItemId);
+  const activeItemType = useStructureStore((s) => s.activeItemType);
+  const selectedIds = useStructureStore((s) => s.selectedIds);
+
+  const reorderSessions = useStructureStore((s) => s.reorderSessions);
+  const moveLesson = useStructureStore((s) => s.moveLesson);
+
+  const reorderSessionsMutation = useReorderSessionsMutation();
+  const reorderLessonsMutation = useReorderLessonsMutation();
+  const moveLessonMutation = useMoveLessonMutation();
+  const createSession = useCreateSessionMutation();
+
+  const [draggingItem, setDraggingItem] = useState<FlatItem | null>(null);
+
+  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
+    () =>
+      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
+    [course, sessions, lessons, expandedIds, filterQuery]
+  );
+
+  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
+
+  const sortedSessions = useMemo(
+    () => [...sessions].sort((a, b) => a.order - b.order),
+    [sessions]
+  );
+
+  const isSearchActive = filterQuery.trim().length > 0;
+  const dragDisabled = isSearchActive;
+
+  // ── Sensors ──────────────────────────────────────────────────────────────
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 6 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // ── Drag handlers ────────────────────────────────────────────────────────
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const item = items.find(
+        (i) => `${i.type}:${i.id}` === String(event.active.id)
+      );
+      setDraggingItem(item ?? null);
+    },
+    [items]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setDraggingItem(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const activeItem = items.find(
+        (i) => `${i.type}:${i.id}` === String(active.id)
+      );
+      const overItem = items.find(
+        (i) => `${i.type}:${i.id}` === String(over.id)
+      );
+      if (!activeItem || !overItem) return;
+
+      // ── Session reorder ───────────────────────────────────────────────────
+      if (activeItem.type === 'session' && overItem.type === 'session') {
+        const fromIdx = sortedSessions.findIndex(
+          (s) => s.id === activeItem.data.id
+        );
+        const toIdx = sortedSessions.findIndex(
+          (s) => s.id === overItem.data.id
+        );
+        if (fromIdx === -1 || toIdx === -1) return;
+
+        // Snapshot before store mutation (optimistic)
+        const previousSessions = [...sessions];
+
+        // Compute new order locally to pass as API payload
+        const reorderedIds = arrayMove(sortedSessions, fromIdx, toIdx).map(
+          (s) => String(s.id)
+        );
+
+        // Optimistic store update
+        reorderSessions(fromIdx, toIdx);
+
+        // Persist in background; onError rolls back
+        reorderSessionsMutation.mutate({
+          orderedIds: reorderedIds,
+          previousSessions,
+        });
+        toast.success(
+          `Sessão "${activeItem.data.title}" movida para posição ${toIdx + 1}`
+        );
+        return;
+      }
+
+      // ── Lesson reorder / move ────────────────────────────────────────────
+      if (activeItem.type === 'lesson') {
+        const lessonData = activeItem.data;
+
+        // Determine target session and index
+        let toSessionId: string;
+        let toIndex: number;
+
+        if (overItem.type === 'lesson') {
+          toSessionId = overItem.data.sessionId;
+          // Position relative to lessons in the target session (visible order)
+          const destLessons = items.filter(
+            (i) =>
+              i.type === 'lesson' &&
+              i.data.sessionId === toSessionId &&
+              i.id !== active.id
+          );
+          toIndex = destLessons.findIndex((i) => i.id === over.id);
+          if (toIndex === -1) toIndex = destLessons.length;
+        } else if (overItem.type === 'session') {
+          // Dropped directly onto a session header → append to that session
+          toSessionId = overItem.data.id as string;
+          const destLessons = lessons.filter(
+            (l) => l.sessionId === toSessionId && l.id !== active.id
+          );
+          toIndex = destLessons.length;
+        } else {
+          return;
+        }
+
+        const didChangeSession = lessonData.sessionId !== toSessionId;
+
+        // Snapshot before store mutation (optimistic)
+        const previousLessons = [...lessons];
+
+        // Optimistic store update
+        moveLesson(String(activeItem.data.id), toSessionId, toIndex);
+
+        if (didChangeSession) {
+          // Cross-session move
+          const targetSession = sessions.find((s) => s.id === toSessionId);
+          moveLessonMutation.mutate({
+            lessonId: String(activeItem.data.id),
+            fromSessionId: lessonData.sessionId,
+            toSessionId,
+            toIndex,
+            previousLessons,
+          });
+          toast.success(
+            `Aula "${lessonData.title}" movida para "${targetSession?.title ?? toSessionId}"`
+          );
+        } else {
+          // Reorder within same session — compute new ordered IDs
+          const sessionLessons = lessons
+            .filter((l) => l.sessionId === toSessionId)
+            .sort((a, b) => a.order - b.order);
+          const fromLessonIdx = sessionLessons.findIndex(
+            (l) => l.id === String(activeItem.data.id)
+          );
+          const orderedIds = arrayMove(
+            sessionLessons,
+            fromLessonIdx,
+            toIndex
+          ).map((l) => l.id);
+
+          reorderLessonsMutation.mutate({
+            sessionId: toSessionId,
+            orderedIds,
+            previousLessons,
+          });
+          toast(`Aula "${lessonData.title}" reordenada`);
+        }
+      }
+    },
+    [
+      items,
+      sortedSessions,
+      lessons,
+      sessions,
+      reorderSessions,
+      moveLesson,
+      reorderSessionsMutation,
+      reorderLessonsMutation,
+      moveLessonMutation,
+    ]
+  );
+
+  const isEmpty = items.length === 0;
+
+  const isSavingOrder =
+    reorderSessionsMutation.isPending ||
+    reorderLessonsMutation.isPending ||
+    moveLessonMutation.isPending;
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={items.map((i) => `${i.type}:${i.id}`)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className="flex flex-col h-full min-h-0">
+          {/* Saving-order progress indicator */}
+          {isSavingOrder && (
+            <div className="flex items-center gap-1.5 px-3 py-1 shrink-0 border-b bg-primary/5">
+              <Loader2 className="size-3 animate-spin text-primary/60 shrink-0" />
+              <span className="text-[0.65rem] text-primary/70">
+                Salvando ordem…
+              </span>
+            </div>
+          )}
+
+          {/* Search result count */}
+          {isSearchActive && !isEmpty && (
+            <div className="px-3 py-1 shrink-0 border-b">
+              <span className="text-[0.65rem] text-muted-foreground">
+                {resultCount === 1
+                  ? '1 resultado'
+                  : `${resultCount} resultados`}
+              </span>
+            </div>
+          )}
+
+          {/* Search disabled-drag notice */}
+          {isSearchActive && (
+            <div className="px-3 py-1 shrink-0 border-b bg-amber-50 dark:bg-amber-950/30">
+              <span className="text-[0.65rem] text-amber-700 dark:text-amber-400">
+                Limpe a busca para reordenar itens
+              </span>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {isEmpty && !isSearchActive && (
+            <div className="flex flex-col items-center justify-center gap-3 py-12 px-4 text-center">
+              <div className="flex size-12 items-center justify-center rounded-xl bg-muted/50">
+                <Layers className="size-5 text-muted-foreground/40" />
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-foreground/70">
+                  Nenhuma sessão
+                </p>
+                <p className="text-xs text-muted-foreground leading-relaxed max-w-[180px]">
+                  Adicione a primeira sessão para começar a organizar o conteúdo
+                  do curso.
+                </p>
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 text-xs gap-1.5 mt-1"
+                disabled={createSession.isPending}
+                onClick={() => createSession.mutate()}
+              >
+                {createSession.isPending ? (
+                  <Loader2 className="size-3 animate-spin" />
+                ) : (
+                  <Plus className="size-3" />
+                )}
+                Nova sessão
+              </Button>
+            </div>
+          )}
+
+          {isEmpty && isSearchActive && (
+            <div className="flex flex-col items-center justify-center gap-2 py-12 px-4 text-center">
+              <SearchX className="size-8 text-muted-foreground/40" />
+              <p className="text-sm text-muted-foreground">
+                Nenhum resultado para &ldquo;{filterQuery.trim()}&rdquo;
+              </p>
+            </div>
+          )}
+
+          {/* Scrollable flat list */}
+          {!isEmpty && (
+            <div className="overflow-y-auto flex-1 min-h-0 px-1 py-1 space-y-px">
+              {items.map((item) => (
+                <div
+                  key={`${item.type}:${item.id}`}
+                  style={{ height: `${ROW_HEIGHT[item.type]}px` }}
+                >
+                  <SortableTreeRow
+                    item={item}
+                    isActive={
+                      activeItemId === item.id && activeItemType === item.type
+                    }
+                    isSelected={selectedIds.has(`${item.type}:${item.id}`)}
+                    query={filterQuery}
+                    isMatched={matchedIds.has(item.id)}
+                    isEffectivelyExpanded={
+                      expandedIds.has(item.id) || expandedBySearch.has(item.id)
+                    }
+                    lessonCountMap={lessonCountMap}
+                    visibleItems={items}
+                    dragDisabled={dragDisabled}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </SortableContext>
+
+      <TreeDragOverlay activeItem={draggingItem} />
+    </DndContext>
+  );
+}