@hed-hog/lms 0.0.314 → 0.0.315

package/hedhog/frontend/app/courses/[id]/structure/_components/multi-select-bar.tsx.ejs

@@ -1,264 +1,264 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
-import { Copy, FolderOpen, Loader2, Trash2, X } from 'lucide-react';
-import { toast } from 'sonner';
-import {
-  useBulkDeleteMutation,
-  useDuplicateLessonMutation,
-  useDuplicateSessionMutation,
-  useMoveLessonsMutation,
-} from '../_data/use-course-structure-mutations';
-import { useStructureStore } from './store';
-
-/**
- * Compact action bar shown when 2+ items are selected.
- * Fixed below the search toolbar inside CourseTreePanel.
- */
-export function MultiSelectBar() {
-  const selectedIds = useStructureStore((s) => s.selectedIds);
-  const lessons = useStructureStore((s) => s.lessons);
-  const sessions = useStructureStore((s) => s.sessions);
-  const clearSelection = useStructureStore((s) => s.clearSelection);
-  const copyItems = useStructureStore((s) => s.copyItems);
-  const showConfirm = useStructureStore((s) => s.showConfirm);
-  const showSessionPicker = useStructureStore((s) => s.showSessionPicker);
-
-  const bulkDelete = useBulkDeleteMutation();
-  const duplicateLessonMutation = useDuplicateLessonMutation();
-  const duplicateSessionMutation = useDuplicateSessionMutation();
-  const moveLessonsMutation = useMoveLessonsMutation();
-
-  const isDuplicating =
-    duplicateLessonMutation.isPending || duplicateSessionMutation.isPending;
-  const isMoving = moveLessonsMutation.isPending;
-
-  const count = selectedIds.size;
-  if (count <= 1) return null;
-
-  const selectedLessonIds = lessons
-    .filter((l) => selectedIds.has(`lesson:${l.id}`))
-    .map((l) => l.id);
-  const selectedSessionIds = sessions
-    .filter((ss) => selectedIds.has(`session:${ss.id}`))
-    .map((ss) => ss.id);
-
-  const allAreLessons = selectedLessonIds.length === count;
-  const allAreSessions = selectedSessionIds.length === count;
-
-  const label = allAreLessons
-    ? `${count} aulas`
-    : allAreSessions
-      ? `${count} sessões`
-      : `${count} itens`;
-
-  const canMove = allAreLessons && sessions.length > 1;
-
-  function handleCopy() {
-    if (allAreLessons) {
-      copyItems(selectedLessonIds, 'lesson');
-      toast.success(`${count} aulas copiadas`);
-    } else if (allAreSessions) {
-      copyItems(selectedSessionIds, 'session');
-      toast.success(`${count} sessões copiadas`);
-    } else {
-      toast('Selecione apenas aulas ou apenas sessões para copiar.');
-    }
-  }
-
-  function handleDuplicate() {
-    if (allAreLessons) {
-      // Duplicate each lesson sequentially
-      const duplicateNext = (index: number) => {
-        if (index >= selectedLessonIds.length) return;
-        const lessonId = selectedLessonIds[index]!;
-        const lesson = lessons.find((l) => l.id === lessonId);
-        if (!lesson) return;
-        duplicateLessonMutation.mutate(
-          { sessionId: lesson.sessionId, lessonId },
-          { onSettled: () => duplicateNext(index + 1) }
-        );
-      };
-      duplicateNext(0);
-      toast.success(`${count} aulas sendo duplicadas...`);
-    } else if (allAreSessions) {
-      const duplicateNext = (index: number) => {
-        if (index >= selectedSessionIds.length) return;
-        duplicateSessionMutation.mutate(
-          { sessionId: selectedSessionIds[index]! },
-          { onSettled: () => duplicateNext(index + 1) }
-        );
-      };
-      duplicateNext(0);
-      toast.success(`${count} sessões sendo duplicadas...`);
-    }
-  }
-
-  function handleMove() {
-    if (!allAreLessons) return;
-    const parentSessionIds = new Set(
-      lessons
-        .filter((l) => selectedLessonIds.includes(l.id))
-        .map((l) => l.sessionId)
-    );
-    const excludeSessionId =
-      parentSessionIds.size === 1 ? ([...parentSessionIds][0] ?? null) : null;
-
-    showSessionPicker({
-      title: `Mover ${count} aulas para`,
-      excludeSessionId,
-      onPick: (targetId) => {
-        const previousLessons = [...lessons];
-        const movingLessons = selectedLessonIds
-          .map((id) => lessons.find((l) => l.id === id))
-          .filter(Boolean) as import('./types').Lesson[];
-        const moves = movingLessons.map((l, i) => ({
-          lessonId: l.id,
-          fromSessionId: l.sessionId,
-          toSessionId: targetId,
-          toIndex: i,
-        }));
-        // Optimistic
-        useStructureStore.getState().moveLessons(selectedLessonIds, targetId);
-        moveLessonsMutation.mutate({ moves, previousLessons });
-        toast.success(`${count} aulas movidas`);
-      },
-    });
-  }
-
-  function handleDelete() {
-    // Compute the split: sessions + orphan lessons (lessons whose session is NOT deleted)
-    const sessionIdSet = new Set(selectedSessionIds);
-    const orphanLessons = lessons
-      .filter(
-        (l) =>
-          selectedIds.has(`lesson:${l.id}`) && !sessionIdSet.has(l.sessionId)
-      )
-      .map((l) => ({ lessonId: l.id, sessionId: l.sessionId }));
-
-    showConfirm({
-      title: `Excluir ${label}?`,
-      description: allAreSessions
-        ? 'As sessões e todas as suas aulas serão excluídas permanentemente.'
-        : 'Esta ação não pode ser desfeita.',
-      onConfirm: () =>
-        bulkDelete.mutate({
-          sessionIds: selectedSessionIds,
-          lessons: orphanLessons,
-        }),
-    });
-  }
-
-  return (
-    <div
-      role="toolbar"
-      aria-label={`${count} itens selecionados — ações`}
-      className={cn(
-        'flex items-center gap-0.5 px-2 py-1 shrink-0 border-b',
-        'bg-primary/5 dark:bg-primary/10'
-      )}
-    >
-      {/* Count chip */}
-      <span
-        className={cn(
-          'text-[0.65rem] font-semibold px-1.5 py-0.5 rounded-md mr-1 shrink-0',
-          'bg-primary/15 text-primary leading-none'
-        )}
-      >
-        {label}
-      </span>
-
-      <div className="flex-1" />
-
-      {/* Copy */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-muted-foreground hover:text-foreground"
-        title="Copiar selecionados (Ctrl+C)"
-        aria-label="Copiar selecionados"
-        onClick={handleCopy}
-      >
-        <Copy className="size-3" />
-      </Button>
-
-      {/* Duplicate */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-muted-foreground hover:text-foreground"
-        title="Duplicar selecionados (Ctrl+D)"
-        aria-label="Duplicar selecionados"
-        disabled={isDuplicating}
-        onClick={handleDuplicate}
-      >
-        {isDuplicating ? (
-          <Loader2 className="size-3 animate-spin" />
-        ) : (
-          <svg
-            viewBox="0 0 24 24"
-            className="size-3 fill-none stroke-current stroke-2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden
-          >
-            <rect x="9" y="9" width="13" height="13" rx="2" />
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-          </svg>
-        )}
-      </Button>
-
-      {/* Move (lessons only) */}
-      {canMove && (
-        <Button
-          variant="ghost"
-          size="icon"
-          className="size-6 text-muted-foreground hover:text-foreground"
-          title="Mover para outra sessão"
-          aria-label="Mover para outra sessão"
-          disabled={isMoving}
-          onClick={handleMove}
-        >
-          {isMoving ? (
-            <Loader2 className="size-3 animate-spin" />
-          ) : (
-            <FolderOpen className="size-3" />
-          )}
-        </Button>
-      )}
-
-      {/* Delete */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-destructive/60 hover:text-destructive"
-        title="Excluir selecionados (Delete)"
-        aria-label="Excluir selecionados"
-        disabled={bulkDelete.isPending}
-        onClick={handleDelete}
-      >
-        {bulkDelete.isPending ? (
-          <Loader2 className="size-3 animate-spin" />
-        ) : (
-          <Trash2 className="size-3" />
-        )}
-      </Button>
-
-      <Separator orientation="vertical" className="mx-0.5 h-3.5" />
-
-      {/* Deselect */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-muted-foreground hover:text-foreground"
-        title="Limpar seleção (Escape)"
-        aria-label="Limpar seleção"
-        onClick={clearSelection}
-      >
-        <X className="size-3" />
-      </Button>
-    </div>
-  );
-}
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { Copy, FolderOpen, Loader2, Trash2, X } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  useBulkDeleteMutation,
+  useDuplicateLessonMutation,
+  useDuplicateSessionMutation,
+  useMoveLessonsMutation,
+} from '../_data/use-course-structure-mutations';
+import { useStructureStore } from './store';
+
+/**
+ * Compact action bar shown when 2+ items are selected.
+ * Fixed below the search toolbar inside CourseTreePanel.
+ */
+export function MultiSelectBar() {
+  const selectedIds = useStructureStore((s) => s.selectedIds);
+  const lessons = useStructureStore((s) => s.lessons);
+  const sessions = useStructureStore((s) => s.sessions);
+  const clearSelection = useStructureStore((s) => s.clearSelection);
+  const copyItems = useStructureStore((s) => s.copyItems);
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+  const showSessionPicker = useStructureStore((s) => s.showSessionPicker);
+
+  const bulkDelete = useBulkDeleteMutation();
+  const duplicateLessonMutation = useDuplicateLessonMutation();
+  const duplicateSessionMutation = useDuplicateSessionMutation();
+  const moveLessonsMutation = useMoveLessonsMutation();
+
+  const isDuplicating =
+    duplicateLessonMutation.isPending || duplicateSessionMutation.isPending;
+  const isMoving = moveLessonsMutation.isPending;
+
+  const count = selectedIds.size;
+  if (count <= 1) return null;
+
+  const selectedLessonIds = lessons
+    .filter((l) => selectedIds.has(`lesson:${l.id}`))
+    .map((l) => l.id);
+  const selectedSessionIds = sessions
+    .filter((ss) => selectedIds.has(`session:${ss.id}`))
+    .map((ss) => ss.id);
+
+  const allAreLessons = selectedLessonIds.length === count;
+  const allAreSessions = selectedSessionIds.length === count;
+
+  const label = allAreLessons
+    ? `${count} aulas`
+    : allAreSessions
+      ? `${count} sessões`
+      : `${count} itens`;
+
+  const canMove = allAreLessons && sessions.length > 1;
+
+  function handleCopy() {
+    if (allAreLessons) {
+      copyItems(selectedLessonIds, 'lesson');
+      toast.success(`${count} aulas copiadas`);
+    } else if (allAreSessions) {
+      copyItems(selectedSessionIds, 'session');
+      toast.success(`${count} sessões copiadas`);
+    } else {
+      toast('Selecione apenas aulas ou apenas sessões para copiar.');
+    }
+  }
+
+  function handleDuplicate() {
+    if (allAreLessons) {
+      // Duplicate each lesson sequentially
+      const duplicateNext = (index: number) => {
+        if (index >= selectedLessonIds.length) return;
+        const lessonId = selectedLessonIds[index]!;
+        const lesson = lessons.find((l) => l.id === lessonId);
+        if (!lesson) return;
+        duplicateLessonMutation.mutate(
+          { sessionId: lesson.sessionId, lessonId },
+          { onSettled: () => duplicateNext(index + 1) }
+        );
+      };
+      duplicateNext(0);
+      toast.success(`${count} aulas sendo duplicadas...`);
+    } else if (allAreSessions) {
+      const duplicateNext = (index: number) => {
+        if (index >= selectedSessionIds.length) return;
+        duplicateSessionMutation.mutate(
+          { sessionId: selectedSessionIds[index]! },
+          { onSettled: () => duplicateNext(index + 1) }
+        );
+      };
+      duplicateNext(0);
+      toast.success(`${count} sessões sendo duplicadas...`);
+    }
+  }
+
+  function handleMove() {
+    if (!allAreLessons) return;
+    const parentSessionIds = new Set(
+      lessons
+        .filter((l) => selectedLessonIds.includes(l.id))
+        .map((l) => l.sessionId)
+    );
+    const excludeSessionId =
+      parentSessionIds.size === 1 ? ([...parentSessionIds][0] ?? null) : null;
+
+    showSessionPicker({
+      title: `Mover ${count} aulas para`,
+      excludeSessionId,
+      onPick: (targetId) => {
+        const previousLessons = [...lessons];
+        const movingLessons = selectedLessonIds
+          .map((id) => lessons.find((l) => l.id === id))
+          .filter(Boolean) as import('./types').Lesson[];
+        const moves = movingLessons.map((l, i) => ({
+          lessonId: l.id,
+          fromSessionId: l.sessionId,
+          toSessionId: targetId,
+          toIndex: i,
+        }));
+        // Optimistic
+        useStructureStore.getState().moveLessons(selectedLessonIds, targetId);
+        moveLessonsMutation.mutate({ moves, previousLessons });
+        toast.success(`${count} aulas movidas`);
+      },
+    });
+  }
+
+  function handleDelete() {
+    // Compute the split: sessions + orphan lessons (lessons whose session is NOT deleted)
+    const sessionIdSet = new Set(selectedSessionIds);
+    const orphanLessons = lessons
+      .filter(
+        (l) =>
+          selectedIds.has(`lesson:${l.id}`) && !sessionIdSet.has(l.sessionId)
+      )
+      .map((l) => ({ lessonId: l.id, sessionId: l.sessionId }));
+
+    showConfirm({
+      title: `Excluir ${label}?`,
+      description: allAreSessions
+        ? 'As sessões e todas as suas aulas serão excluídas permanentemente.'
+        : 'Esta ação não pode ser desfeita.',
+      onConfirm: () =>
+        bulkDelete.mutate({
+          sessionIds: selectedSessionIds,
+          lessons: orphanLessons,
+        }),
+    });
+  }
+
+  return (
+    <div
+      role="toolbar"
+      aria-label={`${count} itens selecionados — ações`}
+      className={cn(
+        'flex items-center gap-0.5 px-2 py-1 shrink-0 border-b',
+        'bg-primary/5 dark:bg-primary/10'
+      )}
+    >
+      {/* Count chip */}
+      <span
+        className={cn(
+          'text-[0.65rem] font-semibold px-1.5 py-0.5 rounded-md mr-1 shrink-0',
+          'bg-primary/15 text-primary leading-none'
+        )}
+      >
+        {label}
+      </span>
+
+      <div className="flex-1" />
+
+      {/* Copy */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-muted-foreground hover:text-foreground"
+        title="Copiar selecionados (Ctrl+C)"
+        aria-label="Copiar selecionados"
+        onClick={handleCopy}
+      >
+        <Copy className="size-3" />
+      </Button>
+
+      {/* Duplicate */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-muted-foreground hover:text-foreground"
+        title="Duplicar selecionados (Ctrl+D)"
+        aria-label="Duplicar selecionados"
+        disabled={isDuplicating}
+        onClick={handleDuplicate}
+      >
+        {isDuplicating ? (
+          <Loader2 className="size-3 animate-spin" />
+        ) : (
+          <svg
+            viewBox="0 0 24 24"
+            className="size-3 fill-none stroke-current stroke-2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden
+          >
+            <rect x="9" y="9" width="13" height="13" rx="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        )}
+      </Button>
+
+      {/* Move (lessons only) */}
+      {canMove && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 text-muted-foreground hover:text-foreground"
+          title="Mover para outra sessão"
+          aria-label="Mover para outra sessão"
+          disabled={isMoving}
+          onClick={handleMove}
+        >
+          {isMoving ? (
+            <Loader2 className="size-3 animate-spin" />
+          ) : (
+            <FolderOpen className="size-3" />
+          )}
+        </Button>
+      )}
+
+      {/* Delete */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-destructive/60 hover:text-destructive"
+        title="Excluir selecionados (Delete)"
+        aria-label="Excluir selecionados"
+        disabled={bulkDelete.isPending}
+        onClick={handleDelete}
+      >
+        {bulkDelete.isPending ? (
+          <Loader2 className="size-3 animate-spin" />
+        ) : (
+          <Trash2 className="size-3" />
+        )}
+      </Button>
+
+      <Separator orientation="vertical" className="mx-0.5 h-3.5" />
+
+      {/* Deselect */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-6 text-muted-foreground hover:text-foreground"
+        title="Limpar seleção (Escape)"
+        aria-label="Limpar seleção"
+        onClick={clearSelection}
+      >
+        <X className="size-3" />
+      </Button>
+    </div>
+  );
+}