@hed-hog/lms 0.0.357 → 0.0.361

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

@@ -8,6 +8,7 @@ import {
   GripVertical,
   ImageIcon,
   Minus,
+  QrCode,
   RectangleHorizontal,
   Type,
   UploadCloud,
@@ -60,8 +61,8 @@ export default function LeftPanel() {
   );
 
   return (
-    <aside className="flex w-68 shrink-0 flex-col border-r border-border bg-background">
-      <Tabs defaultValue="elements" className="flex flex-1 flex-col">
+    <aside className="flex h-full min-h-0 w-full flex-col border-r border-border bg-background">
+      <Tabs defaultValue="elements" className="flex min-h-0 flex-1 flex-col">
         <TabsList className="mx-3 mt-3 w-auto">
           <TabsTrigger value="elements" className="flex-1">
             {t('leftPanel.tabs.elements')}
@@ -72,18 +73,21 @@ export default function LeftPanel() {
         </TabsList>
 
         {/* ── ELEMENTS ── */}
-        <TabsContent value="elements" className="flex-1 overflow-hidden">
-          <ScrollArea className="h-full">
-            <div className="flex flex-col gap-2 p-3">
+        <TabsContent
+          value="elements"
+          className="min-h-0 flex-1 overflow-hidden"
+        >
+          <ScrollArea className="h-full min-h-0">
+            <div className="flex flex-col gap-1.5 p-2.5">
               {/* fields */}
               <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 {t('leftPanel.sections.fields')}
               </p>
-              <div className="grid grid-cols-2 gap-2">
-                {FIELD_KEYS.map((k) => (
+              <div className="grid grid-cols-1 gap-1.5">
+                {FIELD_KEYS.filter((k) => k !== 'qrCode').map((k) => (
                   <ElementCard
                     key={k}
-                    icon={<FileText className="size-4" />}
+                    icon={<FileText className="size-3.5" />}
                     label={FIELD_LABELS[k as FieldKey]}
                     onClick={() => add('field', { key: k })}
                     dragPayload={{ type: 'field', key: k }}
@@ -92,29 +96,29 @@ export default function LeftPanel() {
               </div>
 
               {/* static text */}
-              <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              <p className="mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 {t('leftPanel.sections.text')}
               </p>
               <ElementCard
-                icon={<Type className="size-4" />}
+                icon={<Type className="size-3.5" />}
                 label={t('leftPanel.elements.staticText')}
                 onClick={() => add('staticText')}
                 dragPayload={{ type: 'staticText' }}
               />
 
               {/* shapes */}
-              <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              <p className="mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 {t('leftPanel.sections.shapes')}
               </p>
-              <div className="grid grid-cols-2 gap-2">
+              <div className="grid grid-cols-2 gap-1.5">
                 <ElementCard
-                  icon={<RectangleHorizontal className="size-4" />}
+                  icon={<RectangleHorizontal className="size-3.5" />}
                   label={t('leftPanel.elements.rectangle')}
                   onClick={() => add('shape', { shape: 'rect' })}
                   dragPayload={{ type: 'shape', shape: 'rect' }}
                 />
                 <ElementCard
-                  icon={<Minus className="size-4" />}
+                  icon={<Minus className="size-3.5" />}
                   label={t('leftPanel.elements.line')}
                   onClick={() => add('shape', { shape: 'line' })}
                   dragPayload={{ type: 'shape', shape: 'line' }}
@@ -122,25 +126,31 @@ export default function LeftPanel() {
               </div>
 
               {/* image */}
-              <p className="mt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              <p className="mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 {t('leftPanel.sections.image')}
               </p>
-              <div className="grid grid-cols-1 gap-2">
+              <div className="grid grid-cols-1 gap-1.5">
                 <ElementCard
-                  icon={<ImageIcon className="size-4" />}
+                  icon={<ImageIcon className="size-3.5" />}
                   label="Logo do Curso"
                   onClick={() => add('image', { key: 'courseLogo' })}
                   dragPayload={{ type: 'image', key: 'courseLogo' }}
                 />
                 <ElementCard
-                  icon={<ImageIcon className="size-4" />}
+                  icon={<ImageIcon className="size-3.5" />}
                   label="Banner do Curso"
                   onClick={() => add('image', { key: 'courseBanner' })}
                   dragPayload={{ type: 'image', key: 'courseBanner' }}
                 />
+                <ElementCard
+                  icon={<QrCode className="size-3.5" />}
+                  label={FIELD_LABELS.qrCode}
+                  onClick={() => add('field', { key: 'qrCode' })}
+                  dragPayload={{ type: 'field', key: 'qrCode' }}
+                />
               </div>
               <ElementCard
-                icon={<ImageIcon className="size-4" />}
+                icon={<ImageIcon className="size-3.5" />}
                 label={t('leftPanel.elements.image')}
                 onClick={() => add('image')}
                 dragPayload={{ type: 'image' }}
@@ -150,32 +160,34 @@ export default function LeftPanel() {
         </TabsContent>
 
         {/* ── ASSETS ── */}
-        <TabsContent value="assets" className="flex-1 overflow-hidden">
-          <div className="flex flex-col gap-4 p-3">
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              {t('leftPanel.background.title')}
-            </p>
-            <Button
-              variant="outline"
-              className="h-24 w-full flex-col gap-2"
-              onClick={() => fileInputRef.current?.click()}
-            >
-              <UploadCloud className="size-6 text-muted-foreground" />
-              <span className="text-xs text-muted-foreground">
-                {t('leftPanel.background.upload')}
-              </span>
-            </Button>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={handleBgUpload}
-            />
-            <p className="text-[11px] leading-relaxed text-muted-foreground">
-              {t('leftPanel.background.description')}
-            </p>
-          </div>
+        <TabsContent value="assets" className="min-h-0 flex-1 overflow-hidden">
+          <ScrollArea className="h-full min-h-0">
+            <div className="flex flex-col gap-4 p-3">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                {t('leftPanel.background.title')}
+              </p>
+              <Button
+                variant="outline"
+                className="h-24 w-full flex-col gap-2"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <UploadCloud className="size-6 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
+                  {t('leftPanel.background.upload')}
+                </span>
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleBgUpload}
+              />
+              <p className="text-[11px] leading-relaxed text-muted-foreground">
+                {t('leftPanel.background.description')}
+              </p>
+            </div>
+          </ScrollArea>
         </TabsContent>
       </Tabs>
     </aside>
@@ -205,9 +217,9 @@ function ElementCard({
       draggable
       onDragStart={handleDragStart}
       onClick={onClick}
-      className="group flex items-center gap-2 rounded-md border border-border bg-background p-2.5 text-left text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground active:cursor-grabbing"
+      className="group flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-left text-[11px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground active:cursor-grabbing"
     >
-      <GripVertical className="size-3 shrink-0 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" />
+      <GripVertical className="size-2.5 shrink-0 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" />
       {icon}
       <span className="truncate">{label}</span>
     </button>

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

@@ -13,7 +13,6 @@ import {
 import { Slider } from '@/components/ui/slider';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
   ChevronDown,
@@ -28,7 +27,7 @@ import {
   Unlock,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { getCanvasAPI } from '../../_lib/editor/canvasInstance';
 import { fromPctH, fromPctW } from '../../_lib/editor/pctHelpers';
@@ -39,10 +38,10 @@ import { useTemplateStore } from '../../_lib/store/useTemplateStore';
 export default function RightPanel() {
   const t = useTranslations('lms.CertificateTemplateEditor');
   return (
-    <aside className="flex w-75 shrink-0 flex-col border-l border-border bg-background">
+    <aside className="flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden border-l border-border bg-background">
       <Tabs
         defaultValue="props"
-        className="flex flex-1 flex-col overflow-hidden"
+        className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
         <TabsList className="mx-3 mt-3 w-auto">
           <TabsTrigger value="props" className="flex-1">
@@ -56,20 +55,20 @@ export default function RightPanel() {
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="props" className="flex-1 overflow-hidden">
-          <ScrollArea className="h-full">
+        <TabsContent value="props" className="min-w-0 flex-1 overflow-hidden">
+          <ScrollArea className="h-full min-w-0">
             <PropertiesInspector />
           </ScrollArea>
         </TabsContent>
 
-        <TabsContent value="layers" className="flex-1 overflow-hidden">
-          <ScrollArea className="h-full">
+        <TabsContent value="layers" className="min-w-0 flex-1 overflow-hidden">
+          <ScrollArea className="h-full min-w-0">
             <LayersList />
           </ScrollArea>
         </TabsContent>
 
-        <TabsContent value="data" className="flex-1 overflow-hidden">
-          <ScrollArea className="h-full">
+        <TabsContent value="data" className="min-w-0 flex-1 overflow-hidden">
+          <ScrollArea className="h-full min-w-0">
             <DataView />
           </ScrollArea>
         </TabsContent>
@@ -105,7 +104,9 @@ function PropertiesInspector() {
     );
   }
 
-  const isText = obj.type === 'field' || obj.type === 'staticText';
+  const isQrPlaceholder = obj.type === 'field' && obj.key === 'qrCode';
+  const isText =
+    (obj.type === 'field' || obj.type === 'staticText') && !isQrPlaceholder;
   const isShape = obj.type === 'shape';
   const isImage = obj.type === 'image';
 
@@ -498,6 +499,8 @@ function ImageProperties({
   const isCoursePlaceholder =
     obj.key === 'courseLogo' || obj.key === 'courseBanner';
   const [isUploading, setIsUploading] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const currentFileId =
     typeof obj.image?.file_id === 'number' && Number.isFinite(obj.image.file_id)
@@ -509,7 +512,50 @@ function ImageProperties({
     obj.image?.resizeMode === 'center'
       ? obj.image.resizeMode
       : 'contain';
-  const previewUrl = currentFileId ? `/file/open/${currentFileId}` : null;
+
+  useEffect(() => {
+    if (!currentFileId) {
+      setPreviewUrl(null);
+      return;
+    }
+
+    let canceled = false;
+    (async () => {
+      try {
+        const openResponse = await request<{ url?: string }>({
+          url: `/file/open/${currentFileId}`,
+          method: 'PUT',
+        });
+        if (canceled) return;
+        setPreviewUrl(openResponse?.data?.url || `/file/open/${currentFileId}`);
+      } catch {
+        if (canceled) return;
+        setPreviewUrl(`/file/open/${currentFileId}`);
+      }
+    })();
+
+    return () => {
+      canceled = true;
+    };
+  }, [currentFileId, request]);
+
+  useEffect(() => {
+    if (isCoursePlaceholder) return;
+
+    const handler = (event: Event) => {
+      const customEvent = event as CustomEvent<{ objectId?: string }>;
+      if (customEvent.detail?.objectId !== obj.id) return;
+      fileInputRef.current?.click();
+    };
+
+    window.addEventListener('lms-certificate:auto-open-image-upload', handler);
+    return () => {
+      window.removeEventListener(
+        'lms-certificate:auto-open-image-upload',
+        handler
+      );
+    };
+  }, [isCoursePlaceholder, obj.id]);
 
   async function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
@@ -530,9 +576,10 @@ function ImageProperties({
         id: number;
         url: string;
       }>({
-        url: '/lms/certificates/templates/background-image',
+        url: '/file',
         method: 'POST',
         data: formData,
+        headers: { 'Content-Type': 'multipart/form-data' },
       });
 
       const newFileId = response?.data?.id;
@@ -540,10 +587,44 @@ function ImageProperties({
         throw new Error('Invalid uploaded file id');
       }
 
+      const openResponse = await request<{ url?: string }>({
+        url: `/file/open/${newFileId}`,
+        method: 'PUT',
+      });
+
+      const openedUrl = openResponse?.data?.url || `/file/open/${newFileId}`;
+
+      const imageSize = await new Promise<{ width: number; height: number }>(
+        (resolve, reject) => {
+          const localUrl = URL.createObjectURL(file);
+          const image = new Image();
+          image.onload = () => {
+            const width = image.naturalWidth || image.width || 1;
+            const height = image.naturalHeight || image.height || 1;
+            URL.revokeObjectURL(localUrl);
+            resolve({ width, height });
+          };
+          image.onerror = () => {
+            URL.revokeObjectURL(localUrl);
+            reject(new Error('invalid image dimensions'));
+          };
+          image.src = localUrl;
+        }
+      );
+
+      const currentWidth = Math.max(fromPctW(obj.wPct), 80);
+      const proportionalHeight = Math.max(
+        Math.round((currentWidth * imageSize.height) / imageSize.width),
+        40
+      );
+
       setProp({
         _tplImageFileId: newFileId,
-        _tplImageSrc: response.data.url ?? `/file/open/${newFileId}`,
+        _tplImageSrc: openedUrl,
+        width: currentWidth,
+        height: proportionalHeight,
       });
+      setPreviewUrl(openedUrl);
 
       if (
         typeof currentFileId === 'number' &&
@@ -586,6 +667,76 @@ function ImageProperties({
     }
   }
 
+  async function getNaturalImageSize(src: string) {
+    return await new Promise<{ width: number; height: number }>(
+      (resolve, reject) => {
+        const image = new Image();
+        image.onload = () => {
+          resolve({
+            width: image.naturalWidth || image.width || 1,
+            height: image.naturalHeight || image.height || 1,
+          });
+        };
+        image.onerror = () => reject(new Error('invalid image dimensions'));
+        image.src = src;
+      }
+    );
+  }
+
+  async function handleResizeModeChange(value: string) {
+    if (
+      value !== 'contain' &&
+      value !== 'cover' &&
+      value !== 'stretch' &&
+      value !== 'center'
+    ) {
+      return;
+    }
+
+    const currentWidth = Math.max(fromPctW(obj.wPct), 1);
+    const currentHeight = Math.max(fromPctH(obj.hPct), 1);
+
+    if (value !== 'center') {
+      setProp({
+        _tplImageResizeMode: value,
+        width: currentWidth,
+        height: currentHeight,
+        scaleX: 1,
+        scaleY: 1,
+      });
+      return;
+    }
+
+    if (!currentFileId) {
+      setProp({ _tplImageResizeMode: 'center' });
+      return;
+    }
+
+    try {
+      let sourceUrl = previewUrl;
+      if (!sourceUrl) {
+        const openResponse = await request<{ url?: string }>({
+          url: `/file/open/${currentFileId}`,
+          method: 'PUT',
+        });
+        sourceUrl = openResponse?.data?.url || `/file/open/${currentFileId}`;
+        setPreviewUrl(sourceUrl);
+      }
+
+      const natural = await getNaturalImageSize(sourceUrl);
+      setProp({
+        _tplImageResizeMode: 'center',
+        width: natural.width,
+        height: natural.height,
+        scaleX: 1,
+        scaleY: 1,
+      });
+    } catch {
+      setProp({ _tplImageResizeMode: 'center' });
+      toast.error('Nao foi possivel obter o tamanho original da imagem.');
+    }
+  }
+
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-1.5">
@@ -605,6 +756,7 @@ function ImageProperties({
         <div className="flex flex-col gap-1.5">
           <Label className="text-xs">Imagem personalizada</Label>
           <input
+            ref={fileInputRef}
             type="file"
             accept="image/*"
             onChange={handleImageUpload}
@@ -635,10 +787,7 @@ function ImageProperties({
 
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs">Modo de redimensionamento</Label>
-            <Select
-              value={resizeMode}
-              onValueChange={(value) => setProp({ _tplImageResizeMode: value })}
-            >
+            <Select value={resizeMode} onValueChange={handleResizeModeChange}>
               <SelectTrigger className="w-full">
                 <SelectValue />
               </SelectTrigger>
@@ -664,15 +813,7 @@ function ImageProperties({
               <img
                 src={previewUrl}
                 alt="Preview da imagem do certificado"
-                className={`h-32 w-full ${
-                  resizeMode === 'cover'
-                    ? 'object-cover'
-                    : resizeMode === 'stretch'
-                      ? 'object-fill'
-                      : resizeMode === 'center'
-                        ? 'object-none object-center'
-                        : 'object-contain'
-                }`}
+                className="h-32 w-full object-contain"
                 loading="lazy"
               />
             </div>
@@ -956,7 +1097,33 @@ function LayerItem({
 
 function DataView() {
   const template = useTemplateStore((s) => s.template);
-  const json = JSON.stringify(template, null, 2);
+  const json = useMemo(() => JSON.stringify(template, null, 2), [template]);
+
+  const highlightedJson = useMemo(() => {
+    const escaped = json
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+
+    return escaped.replace(
+      /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)/g,
+      (match) => {
+        let className = 'text-violet-600 dark:text-violet-300';
+
+        if (match.startsWith('"')) {
+          className = match.endsWith(':')
+            ? 'text-sky-600 dark:text-sky-300'
+            : 'text-emerald-600 dark:text-emerald-300';
+        } else if (match === 'true' || match === 'false') {
+          className = 'text-amber-600 dark:text-amber-300';
+        } else if (match === 'null') {
+          className = 'text-rose-600 dark:text-rose-300';
+        }
+
+        return `<span class="${className}">${match}</span>`;
+      }
+    );
+  }, [json]);
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(json).then(() => {
@@ -965,7 +1132,7 @@ function DataView() {
   }, [json]);
 
   return (
-    <div className="flex flex-col gap-3 p-3">
+    <div className="flex min-w-0 flex-col gap-3 p-3">
       <div className="flex items-center justify-between">
         <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
           Template JSON
@@ -980,12 +1147,11 @@ function DataView() {
           Copiar
         </Button>
       </div>
-      <Textarea
-        readOnly
-        value={json}
-        rows={24}
-        className="font-mono text-[11px] leading-relaxed"
-      />
+      <div className="min-w-0 overflow-hidden rounded-md border border-input bg-transparent">
+        <pre className="max-h-[65vh] min-w-0 overflow-auto p-3 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all">
+          <code dangerouslySetInnerHTML={{ __html: highlightedJson }} />
+        </pre>
+      </div>
     </div>
   );
 }

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

@@ -1,5 +1,10 @@
 'use client';
 
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
 import { useApp } from '@hed-hog/next-app-provider';
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
@@ -96,11 +101,37 @@ export default function TemplateEditorPage() {
             : null
         }
       />
-      <div className="flex flex-1 overflow-hidden">
-        <LeftPanel />
-        <CanvasStage isLoading={isLoadingTemplate} />
-        <RightPanel />
-      </div>
+      <ResizablePanelGroup
+        direction="horizontal"
+        autoSaveId="lms-certificate-template-editor-layout"
+        className="min-h-0 flex-1"
+      >
+        <ResizablePanel
+          defaultSize={20}
+          minSize={14}
+          maxSize={32}
+          className="min-w-0"
+        >
+          <LeftPanel />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        <ResizablePanel defaultSize={60} minSize={36} className="min-w-0">
+          <CanvasStage isLoading={isLoadingTemplate} />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        <ResizablePanel
+          defaultSize={20}
+          minSize={14}
+          maxSize={36}
+          className="min-w-0"
+        >
+          <RightPanel />
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   );
 }