@bit.rhplus/ui.grid-layout 0.0.2 → 0.0.4

package/ColumnEditorModal.jsx

@@ -1,370 +1,427 @@
-/* eslint-disable */
-import React, { useState, useCallback, useMemo } from 'react';
-import { default as Button } from 'antd/es/button';
-import { default as Input } from 'antd/es/input';
-import { default as InputNumber } from 'antd/es/input-number';
-import { default as Space } from 'antd/es/space';
-import { default as Typography } from 'antd/es/typography';
-import { default as Divider } from 'antd/es/divider';
-import { 
-  HolderOutlined,
-  EyeOutlined,
-  EyeInvisibleOutlined,
-  SettingOutlined
-} from '@ant-design/icons';
-import DraggableModal from '@bit.rhplus/draggable-modal';
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable,
-} from '@dnd-kit/sortable';
-import {
-  CSS,
-} from '@dnd-kit/utilities';
-
-const { Text, Title } = Typography;
-
-/**
- * Sortable řádek pro jeden sloupec
- */
-const SortableColumnRow = ({ column, onVisibilityChange, onWidthChange, onHeaderNameChange }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: column.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    backgroundColor: isDragging ? '#f0f0f0' : 'white',
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="column-row"
-    >
-      <div className="column-row-content">
-        {/* Drag Handle */}
-        <div className="drag-handle" {...attributes} {...listeners}>
-          <HolderOutlined style={{ color: '#999', cursor: 'grab' }} />
-        </div>
-
-        {/* Column Name */}
-        <div className="column-name">
-          <Input
-            value={column.headerName}
-            onChange={(e) => onHeaderNameChange(column.id, e.target.value)}
-            placeholder="Název sloupce"
-            size="small"
-            style={{ fontWeight: 'bold', marginBottom: '4px' }}
-          />
-          <div style={{ fontSize: '11px', color: '#999', lineHeight: '1.2' }}>
-            {column.originalHeaderName}
-          </div>
-        </div>
-
-        {/* Width Input */}
-        <div className="column-width">
-          <InputNumber
-            min={50}
-            max={1000}
-            value={column.width}
-            onChange={(value) => onWidthChange(column.id, value)}
-            addonAfter="px"
-            size="small"
-            style={{ width: '100px', marginBottom: '4px' }}
-          />
-          <div style={{ fontSize: '11px', color: '#999', lineHeight: '1.2', textAlign: 'center' }}>
-            {column.originalWidth}px
-          </div>
-        </div>
-
-        {/* Visibility Toggle */}
-        <div className="column-visibility">
-          <Button
-            type="text"
-            icon={column.visible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
-            onClick={() => onVisibilityChange(column.id, !column.visible)}
-            style={{ 
-              color: column.visible ? '#52c41a' : '#999',
-              cursor: 'pointer'
-            }}
-            title={column.visible ? 'Skrýt sloupec' : 'Zobrazit sloupec'}
-          >
-            {column.visible ? 'Zobrazit' : 'Skrýt'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Modal pro editaci sloupců AG-Grid gridu
- * @param {Object} props
- * @param {boolean} props.open - Zda je modal otevřený
- * @param {Function} props.onCancel - Callback pro zavření modalu
- * @param {Function} props.onSave - Callback pro uložení změn
- * @param {Array} props.columns - Pole sloupců k editaci
- * @param {Function} props.getContainer - Container pro modal
- */
-export default function ColumnEditorModal({
-  open,
-  onCancel,
-  onSave,
-  columns = [],
-  getContainer
-}) {
-  // Lokální stav pro editaci sloupců
-  const [editingColumns, setEditingColumns] = useState([]);
-
-  // Inicializace editovacího stavu při otevření modalu
-  React.useEffect(() => {
-    if (open && columns.length > 0) {
-      console.log("📝 ColumnEditorModal initializing with columns:", columns.map(c => ({
-        field: c.field,
-        headerName: c.headerName,
-        width: c.width,
-        visible: c.visible
-      })));
-      
-      const initialColumns = columns.map((col, index) => ({
-        id: col.field,
-        field: col.field,
-        headerName: col.headerName || col.field,
-        originalHeaderName: col.originalHeaderName || col.headerName || col.field, // Původní název
-        width: col.width || 100,
-        originalWidth: col.originalWidth || col.width || 100, // Původní šířka
-        visible: col.visible !== undefined ? col.visible : !col.hide,
-        order: index
-      }));
-      
-      console.log("📝 ColumnEditorModal initialized editingColumns:", initialColumns.map(c => ({
-        field: c.field,
-        headerName: c.headerName,
-        width: c.width,
-        visible: c.visible
-      })));
-      
-      setEditingColumns(initialColumns);
-    }
-  }, [open, columns]);
-
-  // Sensor pro drag&drop
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  // Handler pro ukončení drag operace
-  const handleDragEnd = useCallback((event) => {
-    const { active, over } = event;
-
-    if (active.id !== over?.id) {
-      setEditingColumns((items) => {
-        const oldIndex = items.findIndex((item) => item.id === active.id);
-        const newIndex = items.findIndex((item) => item.id === over.id);
-
-        return arrayMove(items, oldIndex, newIndex);
-      });
-    }
-  }, []);
-
-  // Handler pro změnu viditelnosti sloupce
-  const handleVisibilityChange = useCallback((columnId, visible) => {
-    setEditingColumns((prev) =>
-      prev.map((col) =>
-        col.id === columnId ? { ...col, visible } : col
-      )
-    );
-  }, []);
-
-  // Handler pro změnu šířky sloupce
-  const handleWidthChange = useCallback((columnId, width) => {
-    if (width && width >= 50) {
-      setEditingColumns((prev) =>
-        prev.map((col) =>
-          col.id === columnId ? { ...col, width } : col
-        )
-      );
-    }
-  }, []);
-
-  // Handler pro změnu názvu sloupce
-  const handleHeaderNameChange = useCallback((columnId, headerName) => {
-    setEditingColumns((prev) =>
-      prev.map((col) =>
-        col.id === columnId ? { ...col, headerName } : col
-      )
-    );
-  }, []);
-
-  // Handler pro uložení změn
-  const handleSave = useCallback(() => {
-    if (onSave) {
-      onSave(editingColumns);
-    }
-    onCancel();
-  }, [editingColumns, onSave, onCancel]);
-
-  // Handler pro reset na původní stav
-  const handleReset = useCallback(() => {
-    const resetColumns = columns.map((col, index) => ({
-      id: col.field,
-      field: col.field,
-      headerName: col.headerName || col.field,
-      originalHeaderName: col.headerName || col.field,
-      width: col.width || 100,
-      originalWidth: col.width || 100,
-      visible: !col.hide,
-      order: index
-    }));
-    setEditingColumns(resetColumns);
-  }, [columns]);
-
-  const columnIds = useMemo(() => editingColumns.map((col) => col.id), [editingColumns]);
-  
-  // Dynamická výška podle velikosti obrazovky
-  const modalHeight = useMemo(() => {
-    if (typeof window !== 'undefined') {
-      const screenHeight = window.innerHeight;
-      // 80% výšky obrazovky (65% + 25%), minimálně 600px, maximálně 900px
-      // Odečteme 80px pro margin/padding aby se modál vždy vešel
-      return Math.min(Math.max((screenHeight - 80) * 0.80, 600), 900);
-    }
-    return 700;
-  }, []);
-
-  return (
-    <DraggableModal
-      width="650px"
-      height={`${modalHeight}px`}
-      open={open}
-      getContainer={getContainer}
-      onCancel={onCancel}
-      maskClosable={false}
-      zIndex={10000}
-      title={
-        <Space>
-          <SettingOutlined />
-          Nastavení sloupců
-        </Space>
-      }
-      footer={
-        <Space>
-          <Button onClick={handleReset}>
-            Obnovit původní
-          </Button>
-          <Button onClick={onCancel}>
-            Storno
-          </Button>
-          <Button type="primary" onClick={handleSave}>
-            Uložit změny
-          </Button>
-        </Space>
-      }
-    >
-      <div className="column-editor-content">
-        <div className="column-list">
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-          >
-            <SortableContext items={columnIds} strategy={verticalListSortingStrategy}>
-              {editingColumns.map((column) => (
-                <SortableColumnRow
-                  key={column.id}
-                  column={column}
-                  onVisibilityChange={handleVisibilityChange}
-                  onWidthChange={handleWidthChange}
-                  onHeaderNameChange={handleHeaderNameChange}
-                />
-              ))}
-            </SortableContext>
-          </DndContext>
-        </div>
-
-      </div>
-
-      <style jsx>{`
-        .column-editor-content {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-
-        .column-list {
-          flex: 1;
-          overflow-y: auto;
-          border: 1px solid #f0f0f0;
-          border-radius: 6px;
-          min-height: 300px;
-        }
-
-        .column-row {
-          border-bottom: 1px solid #f0f0f0;
-          transition: background-color 0.2s;
-        }
-
-        .column-row:hover {
-          background-color: #fafafa;
-        }
-
-        .column-row:last-child {
-          border-bottom: none;
-        }
-
-        .column-row-content {
-          display: flex;
-          align-items: center;
-          padding: 12px 16px;
-          gap: 16px;
-        }
-
-        .drag-handle {
-          flex-shrink: 0;
-          width: 20px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .column-name {
-          flex: 1;
-          min-width: 150px;
-        }
-
-        .column-width {
-          flex-shrink: 0;
-        }
-
-        .column-visibility {
-          flex-shrink: 0;
-          width: 120px;
-        }
-
-      `}</style>
-    </DraggableModal>
-  );
+/* eslint-disable */
+import React, { useState, useCallback, useMemo } from 'react';
+import { default as Button } from 'antd/es/button';
+import { default as Input } from 'antd/es/input';
+import { default as InputNumber } from 'antd/es/input-number';
+import { default as Space } from 'antd/es/space';
+import { default as Typography } from 'antd/es/typography';
+import { default as Divider } from 'antd/es/divider';
+import { 
+  HolderOutlined,
+  SettingOutlined,
+  HistoryOutlined
+} from '@ant-design/icons';
+import { default as Checkbox } from 'antd/es/checkbox';
+import { default as Tooltip } from 'antd/es/tooltip';
+import DraggableModal from '@bit.rhplus/draggable-modal';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import {
+  CSS,
+} from '@dnd-kit/utilities';
+
+const { Text, Title } = Typography;
+
+/**
+ * Sortable řádek pro jeden sloupec
+ */
+const SortableColumnRow = ({ column, onVisibilityChange, onWidthChange, onHeaderNameChange, onResetColumn }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: column.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    backgroundColor: isDragging ? '#f0f0f0' : 'white',
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="column-row"
+    >
+      <div className="column-row-content">
+        {/* Drag Handle */}
+        <div className="drag-handle" {...attributes} {...listeners}>
+          <HolderOutlined style={{ color: '#999', cursor: 'grab' }} />
+        </div>
+
+        {/* Visibility Checkbox */}
+        <div className="column-checkbox">
+          <Checkbox
+            checked={column.visible}
+            onChange={(e) => onVisibilityChange(column.id, e.target.checked)}
+          />
+        </div>
+
+        {/* Column Name */}
+        <div className="column-name">
+          <div className="column-name-wrapper">
+            <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center' }}>
+              <Input
+                value={column.headerName}
+                onChange={(e) => onHeaderNameChange(column.id, e.target.value)}
+                placeholder="Název sloupce"
+                size="small"
+                variant="borderless"
+                style={{ 
+                  fontWeight: '500',
+                  // Modrá barva, pokud se aktuální text liší od původního textu v columnDefs (ne od uložených preferencí)
+                  color: column.headerName !== column.originalHeaderName ? '#1890ff' : undefined,
+                  width: '100%',
+                  paddingRight: column.headerName !== column.originalHeaderName ? '24px' : '0'
+                }}
+                title={column.headerName !== column.originalHeaderName ? `Původní text v definici sloupce: ${column.originalHeaderName}` : undefined}
+              />
+              {/* Ikona pro obnovení původního textu - zobrazí se pouze při hover a pokud se text liší */}
+              {column.headerName !== column.originalHeaderName && (
+                <Tooltip title={`Obnovit původní název: "${column.originalHeaderName}"`}>
+                  <HistoryOutlined
+                    className="reset-icon"
+                    onClick={() => onResetColumn(column.id)}
+                    style={{
+                      position: 'absolute',
+                      right: '4px',
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      color: '#999',
+                      cursor: 'pointer',
+                      fontSize: '14px',
+                      opacity: 0,
+                      transition: 'opacity 0.2s, color 0.2s'
+                    }}
+                  />
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Width Input */}
+        <div className="column-width">
+          <InputNumber
+            min={50}
+            max={1000}
+            value={column.width}
+            onChange={(value) => onWidthChange(column.id, value)}
+            addonAfter="px"
+            size="small"
+            style={{ width: '100px' }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Modal pro editaci sloupců AG-Grid gridu
+ * @param {Object} props
+ * @param {boolean} props.open - Zda je modal otevřený
+ * @param {Function} props.onCancel - Callback pro zavření modalu
+ * @param {Function} props.onSave - Callback pro uložení změn
+ * @param {Array} props.columns - Pole sloupců k editaci
+ * @param {Function} props.getContainer - Container pro modal
+ */
+export default function ColumnEditorModal({
+  open,
+  onCancel,
+  onSave,
+  columns = [],
+  getContainer
+}) {
+  // Lokální stav pro editaci sloupců
+  const [editingColumns, setEditingColumns] = useState([]);
+
+  // Inicializace editovacího stavu při otevření modalu
+  React.useEffect(() => {
+    if (open && columns.length > 0) {
+      // Removed console.log for production
+      
+      const initialColumns = columns.map((col, index) => ({
+        id: col.field,
+        field: col.field,
+        // Prioritně použij aktuální headerName
+        headerName: col.headerName || col.field,
+        // Zachovej původní originalHeaderName z columnDefs
+        originalHeaderName: col.originalHeaderName || col.headerName || col.field,
+        // Prioritně použij aktuální šířku
+        width: col.width || 100,
+        // Zachovej původní originalWidth z columnDefs
+        originalWidth: col.originalWidth || col.width || 100,
+        // Prioritně použij aktuální viditelnost
+        visible: col.visible !== undefined ? col.visible : !col.hide,
+        // Zachovej původní originalVisible
+        originalVisible: col.originalVisible !== undefined ? col.originalVisible : !col.hide,
+        order: index
+      }));
+      
+      // Removed console.log for production
+      
+      setEditingColumns(initialColumns);
+    }
+  }, [open]); // Odstraněna závislost na 'columns' - inicializace jen při otevření
+
+  // Sensor pro drag&drop
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Handler pro ukončení drag operace
+  const handleDragEnd = useCallback((event) => {
+    const { active, over } = event;
+
+    if (active.id !== over?.id) {
+      setEditingColumns((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  }, []);
+
+  // Handler pro změnu viditelnosti sloupce
+  const handleVisibilityChange = useCallback((columnId, visible) => {
+    setEditingColumns((prev) =>
+      prev.map((col) =>
+        col.id === columnId ? { ...col, visible } : col
+      )
+    );
+  }, []);
+
+  // Handler pro změnu šířky sloupce
+  const handleWidthChange = useCallback((columnId, width) => {
+    // Akceptujeme všechny hodnoty včetně null/undefined pro reset
+    // Minimální validace proběhne při ukládání
+    if (width === null || width === undefined || (width && width >= 50)) {
+      setEditingColumns((prev) =>
+        prev.map((col) =>
+          col.id === columnId ? { ...col, width } : col
+        )
+      );
+    }
+  }, []);
+
+  // Handler pro změnu názvu sloupce
+  const handleHeaderNameChange = useCallback((columnId, headerName) => {
+    setEditingColumns((prev) =>
+      prev.map((col) =>
+        col.id === columnId ? { ...col, headerName } : col
+      )
+    );
+  }, []);
+
+  // Handler pro reset jednotlivého sloupce na původní hodnotu
+  const handleResetColumn = useCallback((columnId) => {
+    setEditingColumns((prev) =>
+      prev.map((col) =>
+        col.id === columnId 
+          ? { ...col, headerName: col.originalHeaderName }
+          : col
+      )
+    );
+  }, []);
+
+  // Handler pro uložení změn
+  const handleSave = useCallback(() => {
+    if (onSave) {
+      onSave(editingColumns);
+    }
+    onCancel();
+  }, [editingColumns, onSave, onCancel]);
+
+  // Handler pro reset na původní stav
+  const handleReset = useCallback(() => {
+    const resetColumns = columns.map((col) => ({
+      id: col.field,
+      field: col.field,
+      // Prioritně použij originalHeaderName, pokud existuje
+      headerName: col.originalHeaderName || col.headerName || col.field,
+      // Zachovej původní originalHeaderName
+      originalHeaderName: col.originalHeaderName || col.headerName || col.field,
+      // Prioritně použij originalWidth, pokud existuje
+      width: col.originalWidth || col.width || 100,
+      // Zachovej původní originalWidth
+      originalWidth: col.originalWidth || col.width || 100,
+      // Použij původní viditelnost z columnDefs
+      visible: col.originalVisible !== undefined ? col.originalVisible : !col.hide,
+      // Zachovej původní originalVisible
+      originalVisible: col.originalVisible !== undefined ? col.originalVisible : !col.hide,
+      // Použij původní pořadí z columnDefs
+      order: col.originalOrder !== undefined ? col.originalOrder : col.order
+    }));
+    
+    // Seřadíme podle původního pořadí
+    const sortedResetColumns = resetColumns.sort((a, b) => a.order - b.order);
+    setEditingColumns(sortedResetColumns);
+  }, [columns]);
+
+  const columnIds = useMemo(() => editingColumns.map((col) => col.id), [editingColumns]);
+  
+  // Dynamická výška podle velikosti obrazovky
+  const modalHeight = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      const screenHeight = window.innerHeight;
+      // 80% výšky obrazovky (65% + 25%), minimálně 600px, maximálně 900px
+      // Odečteme 80px pro margin/padding aby se modál vždy vešel
+      return Math.min(Math.max((screenHeight - 80) * 0.80, 600), 900);
+    }
+    return 700;
+  }, []);
+
+  return (
+    <DraggableModal
+      width="650px"
+      height={`${modalHeight}px`}
+      open={open}
+      getContainer={getContainer}
+      onCancel={onCancel}
+      maskClosable={false}
+      zIndex={10000}
+      title={
+        <Space>
+          <SettingOutlined />
+          Nastavení sloupců
+        </Space>
+      }
+      footer={
+        <Space>
+          <Button onClick={handleReset}>
+            Obnovit původní
+          </Button>
+          <Button onClick={onCancel}>
+            Storno
+          </Button>
+          <Button type="primary" onClick={handleSave}>
+            Uložit změny
+          </Button>
+        </Space>
+      }
+    >
+      <div className="column-editor-content">
+        <div className="column-list">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext items={columnIds} strategy={verticalListSortingStrategy}>
+              {editingColumns.map((column) => (
+                <SortableColumnRow
+                  key={column.id}
+                  column={column}
+                  onVisibilityChange={handleVisibilityChange}
+                  onWidthChange={handleWidthChange}
+                  onHeaderNameChange={handleHeaderNameChange}
+                  onResetColumn={handleResetColumn}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+        </div>
+
+      </div>
+
+      <style jsx>{`
+        .column-editor-content {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        .column-list {
+          flex: 1;
+          overflow-y: auto;
+          border: 1px solid #f0f0f0;
+          border-radius: 6px;
+          min-height: 300px;
+        }
+
+        .column-row {
+          transition: background-color 0.2s, box-shadow 0.2s;
+          border-radius: 6px;
+          margin: 2px 4px;
+        }
+
+        .column-row:hover {
+          background-color: #fafafa;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        }
+
+        .column-row:hover .reset-icon {
+          opacity: 1 !important;
+        }
+
+        .column-row-content {
+          display: flex;
+          align-items: center;
+          padding: 12px 16px;
+          gap: 12px;
+        }
+
+        .column-checkbox {
+          flex-shrink: 0;
+          width: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .column-name {
+          flex: 1;
+          min-width: 150px;
+        }
+
+        .column-name-wrapper {
+          display: flex;
+          align-items: center;
+          width: 100%;
+        }
+
+        .reset-icon:hover {
+          color: #1890ff !important;
+          transform: scale(1.1);
+        }
+
+        .column-width {
+          flex-shrink: 0;
+        }
+
+        .drag-handle {
+          flex-shrink: 0;
+          width: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+      `}</style>
+    </DraggableModal>
+  );
 }