@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/certificates/models/TemplateEditorPage.tsx.ejs

@@ -0,0 +1,104 @@
+'use client';
+
+import { useApp } from '@hed-hog/next-app-provider';
+import dynamic from 'next/dynamic';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { createDefaultTemplate } from '../../_lib/editor/types';
+import {
+  isValidTemplate,
+  useTemplateStore,
+} from '../../_lib/store/useTemplateStore';
+import LeftPanel from './LeftPanel';
+import RightPanel from './RightPanel';
+import Topbar from './TopBar';
+
+const CanvasStage = dynamic(() => import('./CanvasStage'), { ssr: false });
+
+type CertificateTemplateResponse = {
+  id: number;
+  name: string;
+  slug: string;
+  description: string | null;
+  templateContent: string;
+  status: 'draft' | 'active' | 'inactive';
+};
+
+export default function TemplateEditorPage() {
+  const { request } = useApp();
+  const searchParams = useSearchParams();
+  const templateId = useMemo(() => {
+    const rawValue = searchParams.get('templateId');
+    if (!rawValue) {
+      return null;
+    }
+
+    const parsed = Number(rawValue);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+  }, [searchParams]);
+  const [loadedTemplate, setLoadedTemplate] =
+    useState<CertificateTemplateResponse | null>(null);
+  const [isLoadingTemplate, setIsLoadingTemplate] = useState(false);
+  const setTemplate = useTemplateStore((state) => state.setTemplate);
+
+  useEffect(() => {
+    async function loadTemplateById() {
+      if (!templateId) {
+        setLoadedTemplate(null);
+        return;
+      }
+
+      try {
+        setIsLoadingTemplate(true);
+
+        const response = await request<CertificateTemplateResponse>({
+          url: `/lms/certificates/templates/${templateId}`,
+          method: 'GET',
+        });
+
+        const templateRecord = response.data;
+        setLoadedTemplate(templateRecord);
+
+        const parsedContent = JSON.parse(templateRecord.templateContent);
+        if (!isValidTemplate(parsedContent)) {
+          const fallback = createDefaultTemplate();
+          fallback.name = templateRecord.name;
+          setTemplate(fallback);
+          toast.error('Template invalido, carregado com configuracao padrao.');
+          return;
+        }
+
+        parsedContent.name = templateRecord.name;
+        setTemplate(parsedContent);
+      } catch {
+        toast.error('Nao foi possivel carregar o template selecionado.');
+      } finally {
+        setIsLoadingTemplate(false);
+      }
+    }
+
+    loadTemplateById();
+  }, [request, setTemplate, templateId]);
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden">
+      <Topbar
+        templateContext={
+          loadedTemplate
+            ? {
+                id: loadedTemplate.id,
+                slug: loadedTemplate.slug,
+                status: loadedTemplate.status,
+              }
+            : null
+        }
+      />
+      <div className="flex flex-1 overflow-hidden">
+        <LeftPanel />
+        <CanvasStage isLoading={isLoadingTemplate} />
+        <RightPanel />
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/certificates/models/TopBar.tsx.ejs

@@ -0,0 +1,354 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  Download,
+  FilePlus,
+  Grid3X3,
+  Magnet,
+  RotateCcw,
+  Save,
+  Square,
+  Upload,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-react';
+import { useCallback, useRef } from 'react';
+import { toast } from 'sonner';
+import { getCanvasAPI } from '../../_lib/editor/canvasInstance';
+import {
+  isValidTemplate,
+  useTemplateStore,
+} from '../../_lib/store/useTemplateStore';
+
+const LS_KEY = 'certificate_template_draft';
+
+type CertificateTemplateStatus = 'draft' | 'active' | 'inactive';
+
+type TopbarTemplateContext = {
+  id: number;
+  slug: string;
+  status: CertificateTemplateStatus;
+} | null;
+
+type TopbarProps = {
+  templateContext: TopbarTemplateContext;
+};
+
+export default function Topbar({ templateContext }: TopbarProps) {
+  const { request } = useApp();
+  const name = useTemplateStore((s) => s.template.name);
+  const setName = useTemplateStore((s) => s.setName);
+  const zoom = useTemplateStore((s) => s.effectiveZoom);
+  const manualZoom = useTemplateStore((s) => s.zoom);
+  const setZoom = useTemplateStore((s) => s.setZoom);
+  const templateState = useTemplateStore((s) => s.template);
+  const resetTemplate = useTemplateStore((s) => s.resetTemplate);
+  const setTemplate = useTemplateStore((s) => s.setTemplate);
+
+  const snapEnabled = useTemplateStore((s) => s.snapEnabled);
+  const gridEnabled = useTemplateStore((s) => s.gridEnabled);
+  const marginsEnabled = useTemplateStore((s) => s.marginsEnabled);
+  const toggleSnap = useTemplateStore((s) => s.toggleSnap);
+  const toggleGrid = useTemplateStore((s) => s.toggleGrid);
+  const toggleMargins = useTemplateStore((s) => s.toggleMargins);
+
+  const importRef = useRef<HTMLInputElement>(null);
+
+  const handleNew = useCallback(() => {
+    resetTemplate();
+    getCanvasAPI()?.loadTemplate(useTemplateStore.getState().template);
+    toast.success('Novo template criado');
+  }, [resetTemplate]);
+
+  const handleSave = useCallback(() => {
+    const run = async () => {
+      if (!templateContext) {
+        localStorage.setItem(LS_KEY, JSON.stringify(templateState));
+        toast.success('Template salvo no localStorage');
+        return;
+      }
+
+      await request({
+        url: `/lms/certificates/templates/${templateContext.id}`,
+        method: 'PATCH',
+        data: {
+          name: templateState.name,
+          slug: templateContext.slug,
+          status: templateContext.status,
+          templateContent: JSON.stringify(templateState),
+        },
+      });
+
+      localStorage.setItem(LS_KEY, JSON.stringify(templateState));
+      toast.success('Template salvo');
+    };
+
+    run().catch(() => {
+      toast.error('Falha ao salvar template');
+    });
+  }, [request, templateContext, templateState]);
+
+  const handleExport = useCallback(() => {
+    const blob = new Blob([JSON.stringify(templateState, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${templateState.name.replace(/\s+/g, '_')}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('JSON exportado');
+  }, [templateState]);
+
+  const handleImport = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        try {
+          const parsed = JSON.parse(ev.target?.result as string);
+          if (!isValidTemplate(parsed)) {
+            toast.error('JSON invalido: schema ou version incorretos');
+            return;
+          }
+          setTemplate(parsed);
+          getCanvasAPI()?.loadTemplate(parsed);
+          toast.success('Template importado com sucesso');
+        } catch {
+          toast.error('Erro ao ler JSON');
+        }
+      };
+      reader.readAsText(file);
+      e.target.value = '';
+    },
+    [setTemplate]
+  );
+
+  const zoomIn = useCallback(
+    () => setZoom(Math.min(3.0, manualZoom + 0.1)),
+    [manualZoom, setZoom]
+  );
+  const zoomOut = useCallback(
+    () => setZoom(Math.max(0.2, manualZoom - 0.1)),
+    [manualZoom, setZoom]
+  );
+  const zoomReset = useCallback(() => {
+    setZoom(0.5);
+    getCanvasAPI()?.loadTemplate(useTemplateStore.getState().template);
+  }, [setZoom]);
+
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-3">
+      <Input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        className="h-8 w-52 text-sm font-medium"
+        aria-label="Nome do template"
+      />
+
+      <div className="mx-1 h-5 w-px bg-border" />
+
+      {/* ── file actions ── */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={handleNew}
+          >
+            <FilePlus className="size-4" />
+            <span className="sr-only">Novo</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Novo Template</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={handleSave}
+          >
+            <Save className="size-4" />
+            <span className="sr-only">Salvar</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {templateContext ? 'Salvar no banco' : 'Salvar (localStorage)'}
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={handleExport}
+          >
+            <Download className="size-4" />
+            <span className="sr-only">Exportar JSON</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Exportar JSON</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={() => importRef.current?.click()}
+          >
+            <Upload className="size-4" />
+            <span className="sr-only">Importar JSON</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Importar JSON</TooltipContent>
+      </Tooltip>
+      <input
+        ref={importRef}
+        type="file"
+        accept=".json,application/json"
+        className="hidden"
+        onChange={handleImport}
+      />
+
+      <div className="mx-1 h-5 w-px bg-border" />
+
+      {/* ── toggles: snap, grid, margins ── */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={snapEnabled ? 'secondary' : 'ghost'}
+            size="icon"
+            className="size-8"
+            onClick={toggleSnap}
+          >
+            <Magnet className="size-4" />
+            <span className="sr-only">Snap</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {snapEnabled ? 'Desativar Snap' : 'Ativar Snap'}
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={gridEnabled ? 'secondary' : 'ghost'}
+            size="icon"
+            className="size-8"
+            onClick={toggleGrid}
+          >
+            <Grid3X3 className="size-4" />
+            <span className="sr-only">Grid</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {gridEnabled ? 'Ocultar Grade' : 'Mostrar Grade'}
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={marginsEnabled ? 'secondary' : 'ghost'}
+            size="icon"
+            className="size-8"
+            onClick={toggleMargins}
+          >
+            <Square className="size-4" />
+            <span className="sr-only">Margens</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {marginsEnabled ? 'Ocultar Margens' : 'Mostrar Margens Seguras'}
+        </TooltipContent>
+      </Tooltip>
+
+      <div className="flex-1" />
+
+      {/* ── shortcuts hint ── */}
+      <div className="hidden items-center gap-2 text-[10px] text-muted-foreground lg:flex">
+        <span>Ctrl+Scroll: zoom</span>
+        <span className="text-border">|</span>
+        <span>Space+Drag: pan</span>
+        <span className="text-border">|</span>
+        <span>Del: excluir</span>
+        <span className="text-border">|</span>
+        <span>Ctrl+D: duplicar</span>
+      </div>
+
+      <div className="mx-1 h-5 w-px bg-border" />
+
+      {/* ── zoom ── */}
+      <div className="flex items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              onClick={zoomOut}
+            >
+              <ZoomOut className="size-4" />
+              <span className="sr-only">Zoom Out</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Zoom -</TooltipContent>
+        </Tooltip>
+
+        <span className="w-14 text-center text-xs font-medium tabular-nums text-muted-foreground">
+          {Math.round(zoom * 100)}%
+        </span>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              onClick={zoomIn}
+            >
+              <ZoomIn className="size-4" />
+              <span className="sr-only">Zoom In</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Zoom +</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              onClick={zoomReset}
+            >
+              <RotateCcw className="size-4" />
+              <span className="sr-only">Reset Zoom</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reset Zoom + Pan (50%)</TooltipContent>
+        </Tooltip>
+      </div>
+    </header>
+  );
+}

package/hedhog/frontend/app/certificates/models/editor/page.tsx.ejs

@@ -0,0 +1,5 @@
+import TemplateEditorPage from '../TemplateEditorPage';
+
+export default function CertificateTemplateEditorRoutePage() {
+  return <TemplateEditorPage />;
+}