@hed-hog/lms 0.0.364 → 0.0.366

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

@@ -0,0 +1,308 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import {
+  CheckCircle2,
+  Clock,
+  Download,
+  FileArchive,
+  Loader2,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { getPhotoUrl } from '@/lib/get-photo-url';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  CourseExportRecord,
+  useDeleteCourseExportMutation,
+  useCourseExportsQuery,
+} from '../_data/use-course-exports';
+
+function formatDate(value: string | null | undefined): string {
+  if (!value) return '—';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '—';
+  return date.toLocaleString('pt-BR');
+}
+
+function formatDuration(seconds: number | null | undefined): string {
+  if (seconds == null) return '—';
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m < 60) return s > 0 ? `${m}m ${s}s` : `${m}m`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return `${h}h ${rm}m`;
+}
+
+function StatusBadge({ status }: { status: CourseExportRecord['status'] }) {
+  switch (status) {
+    case 'completed':
+      return (
+        <Badge
+          variant="outline"
+          className="gap-1 text-emerald-600 border-emerald-200 bg-emerald-50"
+        >
+          <CheckCircle2 className="size-3" />
+          Concluído
+        </Badge>
+      );
+    case 'processing':
+      return (
+        <Badge
+          variant="outline"
+          className="gap-1 text-blue-600 border-blue-200 bg-blue-50"
+        >
+          <Loader2 className="size-3 animate-spin" />
+          Processando
+        </Badge>
+      );
+    case 'failed':
+      return (
+        <Badge
+          variant="outline"
+          className="gap-1 text-red-600 border-red-200 bg-red-50"
+        >
+          <XCircle className="size-3" />
+          Falhou
+        </Badge>
+      );
+    default:
+      return (
+        <Badge variant="outline" className="gap-1 text-muted-foreground">
+          <Clock className="size-3" />
+          Aguardando
+        </Badge>
+      );
+  }
+}
+
+function FormatBadge({ format }: { format: string }) {
+  if (format === 'scorm_1_2') {
+    return (
+      <Badge variant="secondary" className="gap-1">
+        <FileArchive className="size-3" />
+        SCORM 1.2
+      </Badge>
+    );
+  }
+  return <Badge variant="outline">{format}</Badge>;
+}
+
+interface CourseExportsTabProps {
+  courseId: string;
+}
+
+export function CourseExportsTab({ courseId }: CourseExportsTabProps) {
+  const { request } = useApp();
+  const { data: exports, isLoading } = useCourseExportsQuery(courseId);
+  const [downloadingIds, setDownloadingIds] = useState<Set<number>>(new Set());
+  const [confirmDeleteRecord, setConfirmDeleteRecord] =
+    useState<CourseExportRecord | null>(null);
+
+  const deleteMutation = useDeleteCourseExportMutation(courseId);
+
+  const handleDownload = async (exportRecord: CourseExportRecord) => {
+    if (!exportRecord.file_id) return;
+
+    setDownloadingIds((prev) => new Set(prev).add(exportRecord.id));
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/download/${exportRecord.file_id}`,
+        method: 'PUT',
+      });
+      const url = response?.data?.url;
+      if (!url) {
+        toast.error('Não foi possível gerar o link de download.');
+        return;
+      }
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = exportRecord.file?.filename ?? `export_${exportRecord.id}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } catch {
+      toast.error('Erro ao baixar o arquivo. Tente novamente.');
+    } finally {
+      setDownloadingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(exportRecord.id);
+        return next;
+      });
+    }
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!confirmDeleteRecord) return;
+    const id = confirmDeleteRecord.id;
+    setConfirmDeleteRecord(null);
+    try {
+      await deleteMutation.mutateAsync(id);
+      toast.success('Exportação excluída com sucesso.');
+    } catch {
+      toast.error('Erro ao excluir a exportação. Tente novamente.');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!exports || exports.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+        <FileArchive className="size-8 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">
+          Nenhuma exportação realizada ainda.
+        </p>
+        <p className="text-xs text-muted-foreground/70">
+          Use o menu de Jobs para iniciar uma exportação SCORM 1.2.
+        </p>
+      </div>
+    );
+  }
+
+  const canDelete = (exp: CourseExportRecord) =>
+    exp.status === 'completed' || exp.status === 'failed';
+
+  return (
+    <>
+      <div className="rounded-md border overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Usuário</TableHead>
+              <TableHead>Formato</TableHead>
+              <TableHead>Data</TableHead>
+              <TableHead>Duração</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Ações</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {exports.map((exp) => (
+              <TableRow key={exp.id}>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Avatar className="size-7">
+                      <AvatarImage src={getPhotoUrl(exp.user.photo_id)} />
+                      <AvatarFallback className="text-xs">
+                        {exp.user.name?.charAt(0)?.toUpperCase() ?? '?'}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="text-sm truncate max-w-30">
+                      {exp.user.name}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <FormatBadge format={exp.format} />
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground whitespace-nowrap">
+                  {formatDate(exp.created_at)}
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground">
+                  {formatDuration(exp.duration_seconds)}
+                </TableCell>
+                <TableCell>
+                  <StatusBadge status={exp.status} />
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex items-center justify-end gap-1">
+                    {exp.status === 'completed' && exp.file_id ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="gap-1 h-7 text-xs"
+                        disabled={downloadingIds.has(exp.id)}
+                        onClick={() => handleDownload(exp)}
+                      >
+                        {downloadingIds.has(exp.id) ? (
+                          <Loader2 className="size-3 animate-spin" />
+                        ) : (
+                          <Download className="size-3" />
+                        )}
+                        Baixar
+                      </Button>
+                    ) : null}
+                    {canDelete(exp) ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="gap-1 h-7 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
+                        disabled={deleteMutation.isPending}
+                        onClick={() => setConfirmDeleteRecord(exp)}
+                      >
+                        <Trash2 className="size-3" />
+                        Excluir
+                      </Button>
+                    ) : (
+                      !exp.file_id && exp.status !== 'completed' && (
+                        <span className="text-xs text-muted-foreground">—</span>
+                      )
+                    )}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <AlertDialog
+        open={confirmDeleteRecord !== null}
+        onOpenChange={(open) => {
+          if (!open) setConfirmDeleteRecord(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir exportação?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta ação irá excluir permanentemente o registro e o arquivo ZIP
+              gerado pela exportação. Não será possível recuperar o arquivo após
+              a exclusão.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-red-600 text-white hover:bg-red-700"
+              onClick={handleConfirmDelete}
+            >
+              Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}