@hed-hog/lms 0.0.365 → 0.0.370

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-bulk.tsx.ejs

@@ -1,15 +1,6 @@
 'use client';
 
-import {
-  Eye,
-  EyeOff,
-  FolderInput,
-  Layers,
-  Lock,
-  Save,
-  Video,
-  X,
-} from 'lucide-react';
+import { FolderInput, Layers, Loader2, Save, Video, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -28,19 +19,13 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 
+import {
+  useBulkUpdateMutation,
+  useMoveLessonsMutation,
+} from '../_data/use-course-structure-mutations';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
-import type { LessonStatus, Visibility } from './types';
-
-// ── Config ────────────────────────────────────────────────────────────────────
-
-const STATUS_LABELS: Record<LessonStatus, string> = {
-  preparada: 'Preparada',
-  gravada: 'Gravada',
-  editada: 'Editada',
-  finalizada: 'Finalizada',
-  publicada: 'Publicada',
-};
+import type { Lesson, LessonStatus } from './types';
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
@@ -51,6 +36,9 @@ export function EditorBulk() {
   const lessons = useStructureStore((s) => s.lessons);
   const clearSelection = useStructureStore((s) => s.clearSelection);
 
+  const bulkUpdate = useBulkUpdateMutation();
+  const moveLessonsMutation = useMoveLessonsMutation();
+
   const selectedArray = [...selectedIds];
   const lessonIds = selectedArray.filter((id) =>
     lessons.some((l) => l.id === id)
@@ -62,24 +50,68 @@ export function EditorBulk() {
   const allLessons = lessonIds.length === selectedArray.length;
   const allSessions = sessionIds.length === selectedArray.length;
 
-  // Local form state (mock — not wired to store actions yet)
+  // Local form state — empty means "keep current" (no change applied).
   const [status, setStatus] = useState<LessonStatus | ''>('');
-  const [visibility, setVisibility] = useState<Visibility | ''>('');
+  const [publish, setPublish] = useState<'publish' | 'unpublish' | ''>('');
   const [targetSession, setTargetSession] = useState<string>('');
 
+  const isPending = bulkUpdate.isPending || moveLessonsMutation.isPending;
+
+  function resetForm() {
+    setStatus('');
+    setPublish('');
+    setTargetSession('');
+  }
+
   function handleSave() {
-    const lines: string[] = [];
-    if (status) lines.push(`status → ${STATUS_LABELS[status as LessonStatus]}`);
-    if (visibility) lines.push(`visibilidade → ${visibility}`);
-    if (targetSession)
-      lines.push(
-        `mover para sessão ${sessions.find((s) => s.id === targetSession)?.title ?? targetSession}`
+    const changes: { published?: boolean; status?: LessonStatus } = {};
+    if (publish) changes.published = publish === 'publish';
+    // Production status only applies to lessons.
+    if (status && lessonIds.length > 0) changes.status = status;
+
+    const hasFieldChange =
+      changes.published !== undefined || changes.status !== undefined;
+    const hasMove = !!targetSession && lessonIds.length > 0;
+
+    if (!hasFieldChange && !hasMove) {
+      toast(t('toast.none'));
+      return;
+    }
+
+    if (hasFieldChange) {
+      bulkUpdate.mutate(
+        {
+          lessons: lessonIds.map((id) => ({
+            lessonId: id,
+            sessionId:
+              lessons.find((l) => l.id === id)?.sessionId ?? '',
+          })),
+          sessionIds: sessionIds.map((id) => ({ sessionId: id })),
+          changes,
+        },
+        { onSuccess: resetForm }
+      );
+    }
+
+    if (hasMove) {
+      const previousLessons = [...lessons];
+      const movingLessons = lessonIds
+        .map((id) => lessons.find((l) => l.id === id))
+        .filter(Boolean) as Lesson[];
+      const moves = movingLessons.map((l, i) => ({
+        lessonId: l.id,
+        fromSessionId: l.sessionId,
+        toSessionId: targetSession,
+        toIndex: i,
+      }));
+      // Optimistic store move (matches MultiSelectBar behaviour).
+      useStructureStore.getState().moveLessons(lessonIds, targetSession);
+      moveLessonsMutation.mutate(
+        { moves, previousLessons },
+        { onSuccess: () => setTargetSession('') }
       );
-    toast.success(
-      lines.length
-        ? t('toast.preview', { changes: lines.join(', ') })
-        : t('toast.none')
-    );
+      toast.success(t('toast.moving', { count: lessonIds.length }));
+    }
   }
 
   return (
@@ -89,8 +121,6 @@ export function EditorBulk() {
         <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 shrink-0">
           {allLessons ? (
             <Video className="size-4 text-primary" />
-          ) : allSessions ? (
-            <Layers className="size-4 text-primary" />
           ) : (
             <Layers className="size-4 text-primary" />
           )}
@@ -99,7 +129,11 @@ export function EditorBulk() {
           <p className="text-sm font-semibold">{t('title')}</p>
           <p className="text-[0.65rem] text-muted-foreground">
             {selectedIds.size}{' '}
-            {allLessons ? t('types.lessons') : allSessions ? t('types.sessions') : t('types.items')}{' '}
+            {allLessons
+              ? t('types.lessons')
+              : allSessions
+                ? t('types.sessions')
+                : t('types.items')}{' '}
             {t('types.selected')}
           </p>
         </div>
@@ -143,11 +177,36 @@ export function EditorBulk() {
             })}
             {selectedArray.length > 12 && (
               <Badge variant="outline" className="text-[0.65rem] h-5">
-                +{selectedArray.length - 12} mais
+                +{selectedArray.length - 12} {t('more')}
               </Badge>
             )}
           </div>
 
+          {/* Publicação — aplica a aulas e sessões */}
+          <Card>
+            <CardHeader className="px-3 pt-3 pb-2">
+              <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                {t('publishTitle')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-3 pb-3">
+              <Select
+                value={publish}
+                onValueChange={(v) =>
+                  setPublish(v as 'publish' | 'unpublish')
+                }
+              >
+                <SelectTrigger className="h-8 text-xs w-full">
+                  <SelectValue placeholder={t('keepCurrent')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="publish">{t('publish.on')}</SelectItem>
+                  <SelectItem value="unpublish">{t('publish.off')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+
           {/* Status — só mostra para aulas */}
           {(allLessons || (!allSessions && lessonIds.length > 0)) && (
             <Card>
@@ -165,55 +224,25 @@ export function EditorBulk() {
                     <SelectValue placeholder={t('keepCurrent')} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="preparada">{t('status.preparada')}</SelectItem>
+                    <SelectItem value="preparada">
+                      {t('status.preparada')}
+                    </SelectItem>
                     <SelectItem value="gravada">{t('status.gravada')}</SelectItem>
                     <SelectItem value="editada">{t('status.editada')}</SelectItem>
-                    <SelectItem value="finalizada">{t('status.finalizada')}</SelectItem>
-                    <SelectItem value="publicada">{t('status.publicada')}</SelectItem>
+                    <SelectItem value="finalizada">
+                      {t('status.finalizada')}
+                    </SelectItem>
+                    <SelectItem value="publicada">
+                      {t('status.publicada')}
+                    </SelectItem>
                   </SelectContent>
                 </Select>
               </CardContent>
             </Card>
           )}
 
-          {/* Visibilidade */}
-          <Card>
-            <CardHeader className="px-3 pt-3 pb-2">
-              <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t('visibilityTitle')}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="px-3 pb-3">
-              <Select
-                value={visibility}
-                onValueChange={(v) => setVisibility(v as Visibility)}
-              >
-                <SelectTrigger className="h-8 text-xs w-full">
-                  <SelectValue placeholder={t('keepCurrent')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="publico">
-                    <span className="flex items-center gap-1.5">
-                      <Eye className="size-3" /> {t('visibility.publico')}
-                    </span>
-                  </SelectItem>
-                  <SelectItem value="privado">
-                    <span className="flex items-center gap-1.5">
-                      <EyeOff className="size-3" /> {t('visibility.privado')}
-                    </span>
-                  </SelectItem>
-                  <SelectItem value="restrito">
-                    <span className="flex items-center gap-1.5">
-                      <Lock className="size-3" /> {t('visibility.restrito')}
-                    </span>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </CardContent>
-          </Card>
-
           {/* Mover para sessão — só para aulas */}
-          {(allLessons || lessonIds.length > 0) && (
+          {lessonIds.length > 0 && (
             <Card>
               <CardHeader className="px-3 pt-3 pb-2">
                 <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
@@ -240,12 +269,6 @@ export function EditorBulk() {
               </CardContent>
             </Card>
           )}
-
-          <div className="rounded-md border border-amber-200 bg-amber-50/60 dark:border-amber-800 dark:bg-amber-950/30 px-3 py-2">
-            <p className="text-[0.65rem] text-amber-700 dark:text-amber-400">
-              {t('apiNotice')}
-            </p>
-          </div>
         </div>
       </ScrollArea>
 
@@ -269,9 +292,14 @@ export function EditorBulk() {
             size="sm"
             className="h-7 text-xs"
             onClick={handleSave}
+            disabled={isPending}
           >
-            <Save className="size-3 mr-1" />
-            Aplicar (mock)
+            {isPending ? (
+              <Loader2 className="size-3 mr-1 animate-spin" />
+            ) : (
+              <Save className="size-3 mr-1" />
+            )}
+            {t('apply')}
           </Button>
         </div>
       </div>