@hed-hog/core 0.0.386 → 0.0.390

package/hedhog/frontend/app/pages/_components/page-delete-dialog.tsx.ejs

@@ -0,0 +1,343 @@
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+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 { ScrollArea } from '@/components/ui/scroll-area';
+import type { DeletionFile } from '@/lib/scaffold/delete-page';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertTriangle, Loader2, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import type { SystemPage } from './system-page-types';
+
+export type MenuRemoval = {
+  id: number;
+  slug: string;
+  labelPt: string;
+};
+
+type PageDeleteDialogProps = {
+  page: SystemPage | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Menu a remover do banco; nulo quando não há menu ou o menu tem submenus. */
+  menuRemoval: MenuRemoval | null;
+  /** Página tem menu, mas ele tem filhos — não removemos o menu, só avisamos. */
+  menuHasChildrenWarning: boolean;
+  onDeleted: () => void;
+};
+
+type PreviewResponse = {
+  files: DeletionFile[];
+  steps: string[];
+};
+
+const CATEGORY_ORDER: DeletionFile['category'][] = [
+  'page',
+  'mirror',
+  'i18n',
+  'menu',
+  'migration',
+];
+
+export function PageDeleteDialog({
+  page,
+  open,
+  onOpenChange,
+  menuRemoval,
+  menuHasChildrenWarning,
+  onDeleted,
+}: PageDeleteDialogProps) {
+  const t = useTranslations('core.SystemPagesPage');
+  const { request } = useApp();
+
+  const [preview, setPreview] = useState<PreviewResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+  const [doneSteps, setDoneSteps] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    if (!open || !page) {
+      setPreview(null);
+      setConfirmText('');
+      setDoneSteps(null);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    fetch('/api/dev/pages', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        mode: 'preview',
+        route: page.route,
+        menuSlug: menuRemoval?.slug ?? null,
+        menuLabelPt: menuRemoval?.labelPt ?? null,
+      }),
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error('preview failed');
+        }
+        const data = (await response.json()) as PreviewResponse;
+        if (!cancelled) {
+          setPreview(data);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          toast.error(t('deletePreviewError'));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, page, menuRemoval, t]);
+
+  if (!page) {
+    return null;
+  }
+
+  const confirmMatches = confirmText.trim() === page.route;
+
+  const handleDelete = async () => {
+    if (!confirmMatches) {
+      return;
+    }
+
+    setIsDeleting(true);
+
+    try {
+      const response = await fetch('/api/dev/pages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          mode: 'apply',
+          route: page.route,
+          menuSlug: menuRemoval?.slug ?? null,
+          menuLabelPt: menuRemoval?.labelPt ?? null,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = (await response.json().catch(() => null)) as {
+          message?: string;
+        } | null;
+        toast.error(data?.message ?? t('deleteError'));
+        return;
+      }
+
+      const data = (await response.json()) as { steps: string[] };
+
+      // O menu sai do banco pelo frontend: o route handler do Next não carrega o
+      // token da API Nest. Só depois de os arquivos terem sido removidos.
+      if (menuRemoval) {
+        try {
+          await request({
+            url: '/menu',
+            method: 'DELETE',
+            data: { ids: [menuRemoval.id] },
+          });
+        } catch {
+          toast.error(t('deleteMenuError'));
+        }
+      }
+
+      toast.success(t('deleteSuccess'));
+      setDoneSteps(data.steps);
+      onDeleted();
+    } catch {
+      toast.error(t('deleteError'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const filesByCategory = CATEGORY_ORDER.map((category) => ({
+    category,
+    files: (preview?.files ?? []).filter((file) => file.category === category),
+  })).filter((group) => group.files.length > 0);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[85vh] max-w-2xl overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="h-5 w-5 text-red-600" />
+            {t('deleteTitle')}
+          </DialogTitle>
+          <DialogDescription className="font-mono">
+            {page.route}
+          </DialogDescription>
+        </DialogHeader>
+
+        {doneSteps ? (
+          <div className="space-y-3">
+            <Alert>
+              <AlertTitle>{t('deleteDoneTitle')}</AlertTitle>
+              <AlertDescription>{t('deleteDoneDescription')}</AlertDescription>
+            </Alert>
+
+            {doneSteps.length > 0 ? (
+              <div className="space-y-1">
+                <p className="text-xs font-medium text-muted-foreground">
+                  {t('deleteDoneSteps')}
+                </p>
+                {doneSteps.map((command) => (
+                  <div
+                    key={command}
+                    className="flex items-center gap-2 rounded-lg border bg-muted/30 p-2"
+                  >
+                    <code className="min-w-0 flex-1 truncate text-xs">
+                      {command}
+                    </code>
+                    <CopyButton value={command} />
+                  </div>
+                ))}
+              </div>
+            ) : null}
+
+            <DialogFooter>
+              <Button onClick={() => onOpenChange(false)}>
+                {t('deleteClose')}
+              </Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <>
+            <ScrollArea className="max-h-[45vh]">
+              <div className="space-y-3 pr-3">
+                {page.referencedBy.length > 0 ? (
+                  <Alert variant="destructive">
+                    <AlertTriangle className="h-4 w-4" />
+                    <AlertTitle>{t('deleteReferencedTitle')}</AlertTitle>
+                    <AlertDescription>
+                      <p>
+                        {t('deleteReferencedDescription', {
+                          count: page.referencedBy.length,
+                        })}
+                      </p>
+                      <ul className="mt-1 list-disc pl-4">
+                        {page.referencedBy.map((file) => (
+                          <li key={file} className="font-mono text-xs">
+                            {file}
+                          </li>
+                        ))}
+                      </ul>
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                {menuHasChildrenWarning ? (
+                  <Alert>
+                    <AlertTitle>{t('deleteMenuChildrenTitle')}</AlertTitle>
+                    <AlertDescription>
+                      {t('deleteMenuChildrenDescription')}
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                {isLoading ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {t('deletePreviewLoading')}
+                  </div>
+                ) : (
+                  filesByCategory.map((group) => (
+                    <div key={group.category}>
+                      <p className="text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
+                        {t(`deleteCategory_${group.category}` as never)}
+                      </p>
+                      <div className="mt-1 space-y-1">
+                        {group.files.map((file) => (
+                          <div
+                            key={`${file.category}-${file.path}`}
+                            className="flex items-center gap-2 rounded-lg border bg-background/80 p-2"
+                          >
+                            <Badge
+                              variant="outline"
+                              className={cn(
+                                'rounded-full px-2 py-0 text-[10px]',
+                                file.action === 'delete'
+                                  ? 'border-red-500/30 bg-red-500/10 text-red-600'
+                                  : 'border-blue-500/30 bg-blue-500/10 text-blue-600'
+                              )}
+                            >
+                              {t(`deleteAction_${file.action}` as never)}
+                            </Badge>
+                            <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                              {file.path}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="confirm-route" className="text-xs">
+                {t('deleteConfirmLabel')}
+              </Label>
+              <Input
+                id="confirm-route"
+                value={confirmText}
+                onChange={(event) => setConfirmText(event.target.value)}
+                placeholder={page.route}
+                autoComplete="off"
+                className="font-mono"
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isDeleting}
+              >
+                {t('cancel')}
+              </Button>
+              <Button
+                className="bg-red-600 hover:bg-red-700"
+                disabled={!confirmMatches || isDeleting || isLoading}
+                onClick={handleDelete}
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+                {t('deleteConfirm')}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}