@nice2dev/ui-printing 1.0.28

package/src/template-editor/NiceTemplateEditor.tsx.tmp

@@ -0,0 +1,392 @@
+// ─── Main component ───────────────────────────────────────────────────────────
+
+// ── Toolbar ───────────────────────────────────────────────────────────────────
+interface ToolbarProps {
+  template: PrintTemplate;
+  onPaperChange: (size: PaperSize, orientation: PaperOrientation) => void;
+  onSave?: () => void;
+  onInsert: (type: string) => void;
+  readOnly: boolean;
+  zoom: number;
+  onZoomChange: (z: number) => void;
+}
+const Toolbar: React.FC<ToolbarProps> = ({ template, onPaperChange, onSave, onInsert, readOnly, zoom, onZoomChange }) => (
+  <div className={styles.toolbar}>
+    <div className={styles.toolbarGroup}>
+      <select className={styles.toolbarSelect} value={template.paperSize}
+        onChange={e => onPaperChange(e.target.value as PaperSize, template.orientation)}>
+        {(['A4', 'A5', 'A3', 'Letter', 'Legal', 'custom'] as PaperSize[]).map(s => (
+          <option key={s} value={s}>{s}</option>
+        ))}
+      </select>
+      <button className={`${styles.toolbarBtn} ${template.orientation === 'portrait' ? styles.toolbarBtnActive : ''}`}
+        onClick={() => onPaperChange(template.paperSize, 'portrait')} title="Pion">⬜</button>
+      <button className={`${styles.toolbarBtn} ${template.orientation === 'landscape' ? styles.toolbarBtnActive : ''}`}
+        onClick={() => onPaperChange(template.paperSize, 'landscape')} title="Poziom">▭</button>
+    </div>
+
+    {!readOnly && (
+      <div className={styles.toolbarGroup}>
+        <span className={styles.toolbarLabel}>Wstaw:</span>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('text')} title="Pole danych">📝 Pole</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('static_text')} title="Tekst stały">T Tekst</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('image')} title="Obraz">🖼 Obraz</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('barcode')} title="Kod kreskowy">▮▌▮ Kod</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('qr')} title="QR">⬛ QR</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('watermark')} title="Znak wodny">💧 Znak</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('signature')} title="Podpis">✍ Podpis</button>
+        <button className={styles.toolbarBtn} onClick={() => onInsert('line')} title="Linia">─ Linia</button>
+      </div>
+    )}
+
+    <div className={styles.toolbarGroup}>
+      <button className={styles.toolbarBtn} onClick={() => onZoomChange(Math.max(0.3, zoom - 0.1))}>−</button>
+      <span className={styles.zoomLabel}>{Math.round(zoom * 100)}%</span>
+      <button className={styles.toolbarBtn} onClick={() => onZoomChange(Math.min(3, zoom + 0.1))}>+</button>
+    </div>
+
+    {!readOnly && onSave && (
+      <button className={styles.saveBtn} onClick={onSave}>💾 Zapisz</button>
+    )}
+  </div>
+);
+
+// ── Field palette ─────────────────────────────────────────────────────────────
+interface FieldPaletteProps {
+  schema?: { fields: DataSourceField[] };
+  onInsertField: (field: DataSourceField) => void;
+}
+const FieldPalette: React.FC<FieldPaletteProps> = ({ schema, onInsertField }) => (
+  <div className={styles.fieldPalette}>
+    <div className={styles.paletteTitle}>Pola danych</div>
+    {schema ? (
+      <div className={styles.paletteList}>
+        {schema.fields.map(f => (
+          <div key={f.path} className={styles.paletteField}
+            draggable
+            onDragStart={e => e.dataTransfer.setData('fieldPath', f.path)}
+            onClick={() => onInsertField(f)}>
+            <span className={styles.paletteFieldIcon}>{f.type === 'image' ? '🖼' : f.type === 'date' ? '📅' : '📝'}</span>
+            <div className={styles.paletteFieldInfo}>
+              <span className={styles.paletteFieldLabel}>{f.label}</span>
+              <span className={styles.paletteFieldPath}>{f.path}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    ) : (
+      <div className={styles.paletteEmpty}>Brak schematu danych. Przypisz encję do szablonu.</div>
+    )}
+  </div>
+);
+
+// ── Properties panel ──────────────────────────────────────────────────────────
+interface PropertiesPanelProps {
+  field: PrintDataField | null;
+  onChange: (patch: Partial<PrintDataField>) => void;
+}
+const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ field, onChange }) => {
+  if (!field) return <div className={styles.propsPanel}><div className={styles.propsEmpty}>Zaznacz element</div></div>;
+  return (
+    <div className={styles.propsPanel}>
+      <div className={styles.propsTitle}>Właściwości</div>
+
+      <div className={styles.propsSection}>
+        <div className={styles.propsSectionTitle}>Pozycja</div>
+        {(['x', 'y', 'width', 'height'] as const).map(k => (
+          <div key={k} className={styles.propsRow}>
+            <span className={styles.propsLabel}>{k}</span>
+            <input type="number" step={1} className={styles.propsInput}
+              value={field.position[k]}
+              onChange={e => onChange({ position: { ...field.position, [k]: +e.target.value } })} />
+            <span className={styles.propsUnit}>mm</span>
+          </div>
+        ))}
+        <div className={styles.propsRow}>
+          <span className={styles.propsLabel}>Obrót</span>
+          <input type="number" step={5} className={styles.propsInput}
+            value={field.style.rotation ?? 0}
+            onChange={e => onChange({ style: { ...field.style, rotation: +e.target.value } })} />
+          <span className={styles.propsUnit}>°</span>
+        </div>
+      </div>
+
+      <div className={styles.propsSection}>
+        <div className={styles.propsSectionTitle}>Czcionka</div>
+        <div className={styles.propsRow}>
+          <span className={styles.propsLabel}>Rozmiar</span>
+          <input type="number" step={1} min={4} max={96} className={styles.propsInput}
+            value={field.style.fontSize ?? 12}
+            onChange={e => onChange({ style: { ...field.style, fontSize: +e.target.value } })} />
+          <span className={styles.propsUnit}>pt</span>
+        </div>
+        <div className={styles.propsRow}>
+          <span className={styles.propsLabel}>Grubość</span>
+          <select className={styles.propsSelect} value={field.style.fontWeight ?? 'normal'}
+            onChange={e => onChange({ style: { ...field.style, fontWeight: e.target.value as 'normal' | 'bold' } })}>
+            <option value="normal">Normalna</option>
+            <option value="bold">Pogrubiona</option>
+          </select>
+        </div>
+        <div className={styles.propsRow}>
+          <span className={styles.propsLabel}>Kolor</span>
+          <input type="color" className={styles.propsColor}
+            value={field.style.color ?? '#000000'}
+            onChange={e => onChange({ style: { ...field.style, color: e.target.value } })} />
+        </div>
+        <div className={styles.propsRow}>
+          <span className={styles.propsLabel}>Wyrówn.</span>
+          <select className={styles.propsSelect} value={field.style.textAlign ?? 'left'}
+            onChange={e => onChange({ style: { ...field.style, textAlign: e.target.value as any } })}>
+            <option value="left">Lewo</option>
+            <option value="center">Centrum</option>
+            <option value="right">Prawo</option>
+          </select>
+        </div>
+      </div>
+
+      {field.dataPath && (
+        <div className={styles.propsSection}>
+          <div className={styles.propsSectionTitle}>Dane</div>
+          <div className={styles.propsRow}>
+            <span className={styles.propsLabel}>Ścieżka</span>
+            <input className={styles.propsInputFull}
+              value={field.dataPath}
+              onChange={e => onChange({ dataPath: e.target.value })} />
+          </div>
+          <div className={styles.propsRow}>
+            <span className={styles.propsLabel}>Format</span>
+            <input className={styles.propsInputFull}
+              value={field.format ?? ''}
+              placeholder="DD.MM.YYYY / #,##0.00"
+              onChange={e => onChange({ format: e.target.value })} />
+          </div>
+          <div className={styles.propsRow}>
+            <span className={styles.propsLabel}>Domyślny</span>
+            <input className={styles.propsInputFull}
+              value={field.fallback ?? ''}
+              onChange={e => onChange({ fallback: e.target.value })} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ── Template section canvas ───────────────────────────────────────────────────
+interface SectionCanvasProps {
+  section: PrintSection;
+  zoom: number;
+  selectedFieldId: string | null;
+  onSelectField: (id: string | null) => void;
+  readOnly: boolean;
+}
+const SectionCanvas: React.FC<SectionCanvasProps> = ({ section, zoom, selectedFieldId, onSelectField, readOnly }) => (
+  <div className={`${styles.sectionCanvas} ${styles[`section_${section.type}`]}`}>
+    <div className={styles.sectionLabel}>{section.type}</div>
+    {section.fields.map(field => (
+      <div
+        key={field.id}
+        className={`${styles.fieldEl} ${selectedFieldId === field.id ? styles.fieldElSelected : ''}`}
+        style={{
+          left: field.position.x * zoom * 3.78,
+          top: field.position.y * zoom * 3.78,
+          width: field.position.width * zoom * 3.78,
+          height: field.position.height * zoom * 3.78,
+          fontSize: (field.style.fontSize ?? 12) * zoom,
+          fontWeight: field.style.fontWeight ?? 'normal',
+          fontStyle: field.style.fontStyle ?? 'normal',
+          color: field.style.color ?? '#000',
+          textAlign: field.style.textAlign ?? 'left',
+          backgroundColor: field.style.backgroundColor,
+          transform: field.style.rotation ? `rotate(${field.style.rotation}deg)` : undefined,
+          zIndex: field.position.zIndex ?? 1,
+        } as React.CSSProperties}
+        onClick={e => { e.stopPropagation(); if (!readOnly) onSelectField(field.id); }}
+      >
+        {field.type === 'static_text' ? field.fallback ?? '' : `{${field.dataPath}}`}
+      </div>
+    ))}
+  </div>
+);
+
+// ── Main component ────────────────────────────────────────────────────────────
+const defaultMargins = { top: 20, right: 15, bottom: 20, left: 15 };
+const defaultTemplate = (): PrintTemplate => ({
+  id: `tpl-${Date.now()}`, name: 'Bez nazwy', paperSize: 'A4',
+  orientation: 'portrait', margins: defaultMargins,
+  sections: [
+    { id: 'header', type: 'header', heightMm: 30, fields: [] },
+    { id: 'body', type: 'body', fields: [] },
+    { id: 'footer', type: 'footer', heightMm: 20, fields: [] },
+  ],
+});
+
+export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
+  template: initialTemplate,
+  dataSchema,
+  sampleData = [],
+  onChange,
+  onSave,
+  readOnly = false,
+  className,
+  style,
+  theme = 'light',
+}) => {
+  const [tpl, setTpl] = useState<PrintTemplate>(initialTemplate ?? defaultTemplate());
+  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+  const [activeSection, setActiveSection] = useState<SectionType>('body');
+  const [zoom, setZoom] = useState(1);
+  const [testDataIdx, setTestDataIdx] = useState(0);
+
+  const update = useCallback((patch: Partial<PrintTemplate>) => {
+    const next = { ...tpl, ...patch };
+    setTpl(next);
+    onChange?.(next);
+  }, [tpl, onChange]);
+
+  const getDim = (): [number, number] => {
+    const [w, h] = PAPER_DIM[tpl.paperSize] ?? PAPER_DIM.A4;
+    return tpl.orientation === 'landscape' ? [h, w] : [w, h];
+  };
+  const [paperW, paperH] = getDim();
+
+  const insertField = useCallback((schemaField: DataSourceField) => {
+    const section = tpl.sections.find(s => s.type === activeSection);
+    if (!section) return;
+    const newField: PrintDataField = {
+      id: `field-${Date.now()}`,
+      name: schemaField.label,
+      label: schemaField.label,
+      type: schemaField.type === 'image' ? 'image' : 'text',
+      dataPath: schemaField.path,
+      format: schemaField.type === 'date' ? 'DD.MM.YYYY' : undefined,
+      position: { x: 10, y: 10, width: 60, height: 8 },
+      style: { fontSize: 10, color: '#000' },
+    };
+    update({
+      sections: tpl.sections.map(s =>
+        s.id === section.id ? { ...s, fields: [...s.fields, newField] } : s
+      ),
+    });
+    setSelectedFieldId(newField.id);
+  }, [tpl, activeSection, update]);
+
+  const insertStaticField = useCallback((type: string) => {
+    const section = tpl.sections.find(s => s.type === activeSection);
+    if (!section) return;
+    const newField: PrintDataField = {
+      id: `field-${Date.now()}`,
+      name: type,
+      label: type,
+      type: type as any,
+      dataPath: '',
+      fallback: type === 'static_text' ? 'Tekst statyczny' : undefined,
+      position: { x: 10, y: 10, width: 40, height: 8 },
+      style: { fontSize: 10, color: '#000' },
+    };
+    update({
+      sections: tpl.sections.map(s =>
+        s.id === section.id ? { ...s, fields: [...s.fields, newField] } : s
+      ),
+    });
+    setSelectedFieldId(newField.id);
+  }, [tpl, activeSection, update]);
+
+  const selectedField = tpl.sections.flatMap(s => s.fields).find(f => f.id === selectedFieldId) ?? null;
+
+  const updateField = useCallback((patch: Partial<PrintDataField>) => {
+    update({
+      sections: tpl.sections.map(s => ({
+        ...s,
+        fields: s.fields.map(f => f.id === selectedFieldId ? { ...f, ...patch } : f),
+      })),
+    });
+  }, [tpl, selectedFieldId, update]);
+
+  return (
+    <div className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`} style={style}>
+      <Toolbar
+        template={tpl}
+        onPaperChange={(size, orientation) => update({ paperSize: size, orientation })}
+        onSave={onSave ? () => onSave(tpl) : undefined}
+        onInsert={type => type === 'watermark'
+          ? update({ watermarks: [...(tpl.watermarks ?? []), { id: `wm-${Date.now()}`, type: 'text', text: 'KOPIA', opacity: 0.15, angle: -45 }] })
+          : type === 'signature'
+            ? update({ signatures: [...(tpl.signatures ?? []), { id: `sig-${Date.now()}`, label: 'Podpis', position: { x: 10, y: 10, width: 60, height: 20 } }] })
+            : insertStaticField(type)
+        }
+        readOnly={readOnly}
+        zoom={zoom}
+        onZoomChange={setZoom}
+      />
+
+      <div className={styles.body}>
+        {/* Field palette */}
+        {!readOnly && (
+          <FieldPalette schema={dataSchema} onInsertField={insertField} />
+        )}
+
+        {/* Paper canvas wrapper */}
+        <div className={styles.canvasArea} onClick={() => setSelectedFieldId(null)}>
+          {/* Test data selector */}
+          {sampleData.length > 0 && (
+            <div className={styles.testDataBar}>
+              <span className={styles.testDataLabel}>Podgląd</span>
+              <select className={styles.testDataSelect} value={testDataIdx}
+                onChange={e => setTestDataIdx(+e.target.value)}>
+                {sampleData.map((d, i) => (
+                  <option key={i} value={i}>{d.label ?? d.entityName}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {/* Section tab selector */}
+          <div className={styles.sectionTabs}>
+            {tpl.sections.map(s => (
+              <button key={s.id}
+                className={`${styles.sectionTab} ${activeSection === s.type ? styles.sectionTabActive : ''}`}
+                onClick={() => setActiveSection(s.type)}>
+                {s.type}
+              </button>
+            ))}
+          </div>
+
+          {/* Paper */}
+          <div
+            className={styles.paper}
+            style={{
+              width: paperW * zoom * 3.78,
+              minHeight: paperH * zoom * 3.78,
+              padding: `${tpl.margins.top * zoom * 3.78}px ${tpl.margins.right * zoom * 3.78}px ${tpl.margins.bottom * zoom * 3.78}px ${tpl.margins.left * zoom * 3.78}px`,
+            } as React.CSSProperties}
+          >
+            {tpl.sections.map(section => (
+              <SectionCanvas
+                key={section.id}
+                section={section}
+                zoom={zoom}
+                selectedFieldId={selectedFieldId}
+                onSelectField={setSelectedFieldId}
+                readOnly={readOnly}
+              />
+            ))}
+
+            {/* Watermarks */}
+            {tpl.watermarks?.map(wm => (
+              <div key={wm.id} className={styles.watermark}
+                style={{ opacity: wm.opacity, transform: `rotate(${wm.angle}deg)` } as React.CSSProperties}>
+                {wm.type === 'text' ? <span style={{ fontSize: (wm.fontSize ?? 48) * zoom } as React.CSSProperties}>{wm.text}</span>
+                  : <img src={wm.imageUrl} alt="watermark" className={styles.watermarkImg} />}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Properties panel */}
+        <PropertiesPanel field={selectedField} onChange={updateField} />
+      </div>
+    </div>
+  );
+};