leumas-private-shared/src/GridBuilder/GridBuilderChecklist.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import { useState } from 'react';
import { saveAs } from 'file-saver';
import React from 'react';
const ColumnBuilder = () => {
  const [columns, setColumns] = useState(['Column 1']);
  const [rows, setRows] = useState(['Row 1']);
  const [grid, setGrid] = useState([[false]]);
  const [showJsonModal, setShowJsonModal] = useState(false);

  const handleCheckboxChange = (rowIdx, colIdx) => {
    const newGrid = [...grid];
    newGrid[rowIdx][colIdx] = !newGrid[rowIdx][colIdx];
    setGrid(newGrid);
  };

  const addColumn = () => {
    setColumns([...columns, `Column ${columns.length + 1}`]);
    setGrid(grid.map(row => [...row, false]));
  };

  const addRow = () => {
    setRows([...rows, `Row ${rows.length + 1}`]);
    setGrid([...grid, Array(columns.length).fill(false)]);
  };

  const handleColumnTitleChange = (index, newTitle) => {
    const newColumns = [...columns];
    newColumns[index] = newTitle;
    setColumns(newColumns);
  };

  const handleRowTitleChange = (index, newTitle) => {
    const newRows = [...rows];
    newRows[index] = newTitle;
    setRows(newRows);
  };

  const exportJson = () => {
    const data = {
      columns,
      rows,
      grid,
    };
    const jsonString = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonString], { type: 'application/json' });
    saveAs(blob, 'grid-data.json');
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl mb-4">Column Builder</h1>
      <div className="flex justify-between mb-4">
        <button onClick={addColumn} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Add Column
        </button>
        <button onClick={addRow} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Add Row
        </button>
        <button onClick={() => setShowJsonModal(true)} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Show JSON
        </button>
        <button onClick={exportJson} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Export JSON
        </button>
      </div>
      <div className="overflow-auto max-w-full">
        <div className="inline-block min-w-full align-middle">
          <div className="shadow overflow-auto border-b border-gray-200 sm:rounded-lg">
            <table className="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th className="bg-gray-50 min-w-[100px]"></th>
                  {columns.map((col, colIdx) => (
                    <th key={colIdx} className="px-6 py-3 text-center bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">
                      <input
                        type="text"
                        value={col}
                        onChange={(e) => handleColumnTitleChange(colIdx, e.target.value)}
                        className="w-full border p-1 text-center"
                      />
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {rows.map((row, rowIdx) => (
                  <tr key={rowIdx}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 min-w-[100px]">
                      <input
                        type="text"
                        value={row}
                        onChange={(e) => handleRowTitleChange(rowIdx, e.target.value)}
                        className="w-full border p-1 text-center"
                      />
                    </td>
                    {columns.map((col, colIdx) => (
                      <td key={colIdx} className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center min-w-[100px] min-h-[50px]">
                        <input
                          type="checkbox"
                          checked={grid[rowIdx][colIdx]}
                          onChange={() => handleCheckboxChange(rowIdx, colIdx)}
                          className="form-checkbox h-5 w-5 text-blue-600"
                        />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {showJsonModal && (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white p-4 rounded shadow-lg w-3/4">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl">Grid JSON</h2>
              <button onClick={() => setShowJsonModal(false)} className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                Close
              </button>
            </div>
            <pre className="bg-gray-200 p-4 rounded overflow-x-auto">
              {JSON.stringify({ columns, rows, grid }, null, 2)}
            </pre>
          </div>
        </div>
      )}
    </div>
  );
};

export default ColumnBuilder;

// Usage example:
// import React from 'react';
// import ReactDOM from 'react-dom';
// import ColumnBuilder from './ColumnBuilder';
// ReactDOM.render(<ColumnBuilder />, document.getElementById('root'));