@hed-hog/lms 0.0.361 → 0.0.365

package/hedhog/frontend/app/courses/_components/CourseDeleteDialog.tsx.ejs

@@ -0,0 +1,223 @@
+'use client';
+
+import { useId } from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { AlertTriangle, Archive, Loader2, Trash2 } from 'lucide-react';
+
+type CourseDeleteDialogCourse = {
+  title: string;
+  status: 'publicado' | 'rascunho' | 'arquivado';
+  enrollmentCount?: number;
+};
+
+type CourseDeleteDialogImpact = {
+  fileCount: number;
+  formattedSize: string;
+  enrollmentCount?: number;
+};
+
+type CourseDeleteDialogTranslateValues = Record<string, string | number | Date>;
+
+type CourseDeleteDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  course: CourseDeleteDialogCourse | null;
+  impact: CourseDeleteDialogImpact | null;
+  loadingImpact: boolean;
+  confirmationInput: string;
+  onConfirmationInputChange: (value: string) => void;
+  archiving: boolean;
+  queuingDelete: boolean;
+  canDelete: boolean;
+  onArchive: () => void | Promise<void>;
+  onDelete: () => void | Promise<void>;
+  t: (key: string, values?: CourseDeleteDialogTranslateValues) => string;
+};
+
+function getStatusKey(status?: CourseDeleteDialogCourse['status']) {
+  if (status === 'publicado') return 'published';
+  if (status === 'arquivado') return 'archived';
+  return 'draft';
+}
+
+export function CourseDeleteDialog({
+  open,
+  onOpenChange,
+  course,
+  impact,
+  loadingImpact,
+  confirmationInput,
+  onConfirmationInputChange,
+  archiving,
+  queuingDelete,
+  canDelete,
+  onArchive,
+  onDelete,
+  t,
+}: CourseDeleteDialogProps) {
+  const confirmationInputId = useId();
+  const requiresArchive = course?.status !== 'arquivado';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="size-5 text-destructive" />
+            {t('deleteDialog.title')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('deleteDialog.description')} <strong>{course?.title}</strong>?
+            {(course?.enrollmentCount ?? 0) > 0 && (
+              <span className="mt-2 block rounded-md bg-destructive/10 p-2 text-destructive text-sm">
+                {t('deleteDialog.warning', {
+                  count: course?.enrollmentCount ?? 0,
+                })}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 px-4">
+          <div className="rounded-lg border border-border/60 bg-muted/20 p-3 text-sm">
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant="outline">
+                {t(`status.${getStatusKey(course?.status)}`)}
+              </Badge>
+              {requiresArchive ? (
+                <span className="text-amber-700">
+                  {t('deleteDialog.archiveFirst')}
+                </span>
+              ) : (
+                <span className="text-emerald-700">
+                  {t('deleteDialog.archiveReady')}
+                </span>
+              )}
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground">
+              {t('deleteDialog.relatedContentWarning')}
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-border/60 p-3">
+            <div className="mb-2 flex items-center justify-between gap-2">
+              <p className="text-sm font-medium">
+                {t('deleteDialog.impactTitle')}
+              </p>
+              {loadingImpact && (
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
+              )}
+            </div>
+
+            {impact ? (
+              <div className="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
+                <div className="rounded-md bg-muted/40 px-3 py-2">
+                  <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                    {t('deleteDialog.impact.files')}
+                  </p>
+                  <p className="font-semibold">{impact.fileCount}</p>
+                </div>
+                <div className="rounded-md bg-muted/40 px-3 py-2">
+                  <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                    {t('deleteDialog.impact.storage')}
+                  </p>
+                  <p className="font-semibold">{impact.formattedSize}</p>
+                </div>
+                <div className="rounded-md bg-muted/40 px-3 py-2">
+                  <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                    {t('deleteDialog.impact.students')}
+                  </p>
+                  <p className="font-semibold">
+                    {impact.enrollmentCount ?? course?.enrollmentCount ?? 0}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {t('deleteDialog.impactLoading')}
+              </p>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-dashed border-border/70 bg-muted/20 p-3">
+            <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              {t('deleteDialog.expectedNameLabel')}
+            </p>
+            <p className="mt-1 break-all font-mono text-sm font-semibold text-foreground">
+              {course?.title || '-'}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor={confirmationInputId}>
+              {t('deleteDialog.confirmationLabel')}
+            </Label>
+            <Input
+              id={confirmationInputId}
+              placeholder={t('deleteDialog.confirmationPlaceholder')}
+              value={confirmationInput}
+              onChange={(event) =>
+                onConfirmationInputChange(event.target.value)
+              }
+              autoFocus
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('deleteDialog.confirmationHint')}
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('deleteDialog.actions.cancel')}
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => void onArchive()}
+            disabled={
+              !course ||
+              course.status === 'arquivado' ||
+              archiving ||
+              queuingDelete
+            }
+            className="gap-2"
+          >
+            {archiving ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Archive className="size-4" />
+            )}
+            {course?.status === 'arquivado'
+              ? t('deleteDialog.actions.archived')
+              : t('deleteDialog.actions.archive')}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => void onDelete()}
+            disabled={!canDelete}
+            className="gap-2"
+          >
+            {queuingDelete ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Trash2 className="size-4" />
+            )}
+            {t('deleteDialog.actions.delete')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/courses/_components/CourseRowActions.tsx.ejs

@@ -0,0 +1,89 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { Eye, Pencil, Trash2 } from 'lucide-react';
+import type { MouseEvent } from 'react';
+
+type CourseRowActionsProps = {
+  className?: string;
+  onView: () => void;
+  onEdit: () => void;
+  onDelete: (event: MouseEvent<HTMLButtonElement>) => void;
+  viewLabel: string;
+  editLabel: string;
+  deleteLabel: string;
+};
+
+export function CourseRowActions({
+  className,
+  onView,
+  onEdit,
+  onDelete,
+  viewLabel,
+  editLabel,
+  deleteLabel,
+}: CourseRowActionsProps) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className={cn('flex items-center gap-1', className)}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onView}
+              aria-label={viewLabel}
+            >
+              <Eye className="size-4" />
+              <span className="sr-only">{viewLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{viewLabel}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onEdit}
+              aria-label={editLabel}
+            >
+              <Pencil className="size-4" />
+              <span className="sr-only">{editLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{editLabel}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-destructive hover:text-destructive"
+              onClick={onDelete}
+              aria-label={deleteLabel}
+            >
+              <Trash2 className="size-4" />
+              <span className="sr-only">{deleteLabel}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{deleteLabel}</TooltipContent>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  );
+}