react-graph-grid 0.1.9 → 0.1.12

package/README.md

@@ -4,16 +4,15 @@ A React package containing a grid that can communicate with other grids through
 
 For all questions, please contact rmb@mail.ru
 
-Installation
+## Installation
 
     npm install react-grpah-grid
 
 
-Example
-
-	import { GridCD } from '../../node_modules/react-graph-grid/src/GridCD';
-	import TestData from '../../node_modules/react-graph-grid/src/Tests/TestData';
+## Example
 
+	import { GridCD, TestData } from 'react-grpah-grid';
+	
 	...
 
 	/*
@@ -23,7 +22,7 @@ Example
 	*         Id: 1,
 	*         Name: 'Mikle',
 	*		  SecondName: 'Razumtsev',
-	*		  Date: '26/01/1979'
+	*		  Date: '26/01/1979',
 	*		  Comment: 'Me',
 	*		  Hometown: 'Voronezh',
 	*		  HometownId: 1,
@@ -32,7 +31,7 @@ Example
 	*         Id: 2,
 	*         Name: 'Boris',
 	*		  SecondName: 'Razumtsev',
-	*		  Date: '14/06/1953'
+	*		  Date: '14/06/1953',
 	*		  Comment: 'Father',
 	*		  Hometown: 'Grafskaya',
 	*		  HometownId: 2,
@@ -41,7 +40,7 @@ Example
 	*         Id: 3,
 	*         Name: 'Ilia',
 	*		  SecondName: 'Razumtsev',
-	*		  Date: '16/09/1980'
+	*		  Date: '16/09/1980',
 	*		  Comment: 'Brother',
 	*		  Hometown: 'Pskov',
 	*		  HometownId: 4,
@@ -56,6 +55,7 @@ Example
 	*
 	*/
 
+
 	function loadRows(e) {
 		return new Promise(function (resolve, reject) {
             const fetchParams = {
@@ -117,7 +117,7 @@ Example
 		allowEdit={true}
 	/>
 
-Some grid properties
+## Some grid properties
 
 	uid - grid uid
 	keyField - primary key
@@ -152,12 +152,12 @@ Some grid properties
 						}
 
 
-For more examples see DebugApp.jsx
+## For more examples see DebugApp.jsx
 
 	Your App.jsx should look like this
 
-	import DebugApp from 'react-graph-grid'
-	import 'default.css'
+	import { DebugApp } from 'react-graph-grid';
+	import 'react-graph-grid/src/css/default.css';
 
 	function App() {
 	  return (
@@ -170,7 +170,11 @@ For more examples see DebugApp.jsx
 	export default App
 
 
-0.1.4 - 0.1.9 version
+0.1.12 version
+		
+		readme and css changes
+
+0.1.4 - 0.1.11 version
 
 		package.json changes
 		
@@ -200,5 +204,4 @@ For more examples see DebugApp.jsx
 
 0.0.5 version
 
-		"Adjust column visibility" option added to GridFE.jsx module
-
+		"Adjust column visibility" option added to GridFE.jsx module

package/index.js

@@ -0,0 +1,20 @@
+import './src/css/default.css';
+export { BaseComponent, NodeStatus, FilterType, log } from './src/Base';
+export { Overlay, OverlayClass } from './src/Overlay';
+export { Modal, ModalClass } from './src/Modal';
+export { Dropdown, DropdownClass } from './src/Dropdown';
+export { GraphClass, WaveType, MoveType } from './src/Graph';
+export { Grid, GridClass } from './src/Grid';
+export { GridGR, GridGRClass } from './src/GridGR';
+export { GridPK, GridPKClass } from './src/GridPK';
+export { GridDB, GridDBClass } from './src/GridDB';
+export { GridFL, GridFLClass } from './src/GridFL';
+export { GridFE, GridFEClass } from './src/GridFE';
+export { GridCD, GridCDClass } from './src/GridCD';
+export { Card, CardClass } from './src/Card';
+export { FieldEdit, FieldEditClass } from './src/FieldEdit';
+export { Images } from './src/Themes/Images';
+export { Translate } from './src/Themes/Translate';
+export { DefaultGridTheme } from './src/Themes/DefaultGridTheme';
+export { DebugApp } from './src/Tests/DebugApp';
+export { TestData } from './src/Tests/TestData';

package/package.json

@@ -1,21 +1,13 @@
 {
   "name": "react-graph-grid",
   "author": "Mikhail Razumtsev",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "private": false,
   "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "keywords": [
     "react-graph-grid"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js"
-    },
-    "./default.css": "./dist/default.css"
-  },
+  "main": "index.js",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -29,7 +21,8 @@
     "react-dom": "^19.2.4"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package/src/Base.jsx

@@ -0,0 +1,81 @@
+import { DefaultGridTheme as Theme } from './Themes/DefaultGridTheme';
+export class BaseComponent {
+
+    constructor(props) {
+
+        this.level = props.level || 0;
+
+        //window._logEnabled = true;
+        if (!BaseComponent.theme) {
+            BaseComponent.theme = new Theme();
+
+            if (BaseComponent.useBootstrap) {
+                BaseComponent.changeTheme(true);
+            }
+        }
+    }
+
+    translate(text, context) {
+        return BaseComponent.translate(text, context);
+    }
+
+    static translate(text/*, context*/) {
+        return text;
+    }
+
+    Spinner(id = -1, minW = -1, maxW = -1) {
+        return BaseComponent.Spinner ? BaseComponent.Spinner(id, minW, maxW) : <></>;
+    }
+
+    static Spinner(id = -1, minW = -1, maxW = -1) {
+        return (
+            <div key={`loader_${id}_`}
+                className='grid-loader'
+                style={{ minWidth: minW ? minW + "px" : "", maxWidth: maxW ? maxW + "px" : "" }}
+            >
+                <div>{BaseComponent.translate('Loading') + '...'}</div>
+            </div>
+        )
+    }
+
+    formatDate(text, dateFormat) {
+        return BaseComponent.formatDate(text, dateFormat);
+    }
+
+    static formatDate(text) {
+        return text;
+    }
+
+    static dateFormat = 'dd.MM.yyyy';
+    static dateTimeFormat = 'dd.MM.yyyy HH:mm:ss';
+
+    static theme = null;
+    static useBootstrap = false;
+    static changeTheme = () => {
+        return new Promise(function (resolve) {
+            BaseComponent.theme = new Theme();
+            resolve();
+        })
+    };
+}
+
+export function log(message) {
+    if (!window._logEnabled) return;
+
+    console.log(message);
+}
+
+export class NodeStatus {
+    static grid = 0;
+    static hidden = 1;
+    static filter = 2;
+    static lookup = 3;
+    static custom = 4;
+};
+
+export class FilterType {
+    static combobox = 0;
+    static date = 1;
+    static input = 2;
+    static custom = 3;
+};

package/src/Card.jsx

@@ -0,0 +1,333 @@
+import { useState, useEffect } from 'react';
+import { Images } from './Themes/Images';
+import { FieldEdit } from './FieldEdit';
+import { GridFEClass } from './GridFE';
+// =================================================================================================================================================================
+export function Card(props) {
+    let card = null;
+
+    const [gridState, setState] = useState({ grid: card, ind: 0 });
+
+    card = gridState.grid;
+    let needGetRows = false;
+    if (!card || card.uid !== props.uid && props.uid != null) {
+        card = null;
+        if (props.findGrid) {
+            card = props.findGrid(props);
+        }
+        card = card || new CardClass(props);
+        needGetRows = !card.changedRow;
+    }
+
+    if (props.init) {
+        props.init(card);
+    }
+
+    card.refreshState = function () {
+        setState({ grid: card, ind: card.stateind++ });
+    }
+
+    useEffect(() => {
+        card.setupEvents();
+
+        if (needGetRows && card.selectedRow() == null) {
+
+            card.getRows().then(
+                rows => {
+                    card.rows = rows;
+                    card.afterGetRows();
+                    card.refreshState();
+                }
+            );
+        }
+        else if (card.columns.length <= 0 && card.getColumns) {
+            card.prepareColumns().then(() => card.refreshState());
+        }
+
+        return () => {
+            card.clearEvents();
+
+            if (card.graph && card.graph.nodeCount) {
+                card.graph.nodeCount--;
+            }
+        }
+    }, [card, needGetRows])
+
+    return (card.render());
+}
+// =================================================================================================================================================================
+export class CardClass extends GridFEClass {
+
+    constructor(props) {
+        super(props);
+
+        const card = this;
+
+        card.visible = true;
+
+        card.allowEdit = props.allowEdit;
+        card.isVisible = props.isVisible || card.isVisible;
+        card.activeRow = props.activeRow || '';
+        card.refreshState = card.refreshState || (() => { });
+
+        card.reqInd = 0;
+        card.changedRow = {};
+        card.initialRow = props.cardRow;
+        Object.assign(card.changedRow, card.initialRow);
+
+        if (props.isNewRecord) {
+            card.isNewRecord = true;
+            card.setEditing(true);
+        }
+
+        card.cardButtons = [];
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    render() {
+        const card = this;
+
+        card.addCardButtons();
+        card.buttons = card.cardButtons;
+
+        return (
+            <>
+                <div className='graph-card-toolbar'
+                    key={`cardToolbarDiv_${card.id}_`}
+                    style={{ margin: '0 1em' }}
+                >
+                    {super.renderToolbar()}
+                </div>
+                <div className="graph-card-div"
+                    key={`cardBodyDiv_${card.id}_`}
+                >
+                    {
+                        card.columns.map((col) => { return card.renderField(col) })
+                    }
+                </div>
+                {super.renderPopup()}
+            </>
+        )
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderField(col) {
+        const card = this;
+
+        if (col.visible == false) return <></>;
+
+        const isLookup = col.type === 'lookup';
+        let row = card.changedRow;
+        let value = isLookup ? row[col.keyField] : row[col.name];
+        value = value != null ? value : '';
+        if (col.type == null) {
+            col.type = '';
+        }
+        else if (isLookup) {
+            col.grid = card;
+        }
+
+        return (
+            <div className="graph-card-field"
+                key={`cardLookupDiv_${card.id}_${col.id}_`}
+                style={{ margin: '0 1em 0.5em 1em' }}
+            >
+                <span
+                    key={`cardLookupTitle_${card.id}_${col.id}_`}
+                    style={{ gridColumn: 'span 3', width: 'calc(100% - 4px)' }}
+                >
+                    {col.title || col.name}
+                </span>
+                <FieldEdit
+                    keyPref={card.id + '_card_'}
+                    column={col}
+                    value={value}
+                    text={row[col.name]}
+                    findFieldEdit={() => { return col._fieldEditObj; }}
+                    large={true}
+                    level={card.level}
+                    disabled={card.allowEdit == null || card.allowEdit != true}
+                    init={
+                        (fe) => {
+                            if (card.isEditing() && !card.changedRow) {
+                                card.changedRow = {};
+                                Object.assign(card.changedRow, card.selectedRow());
+                            }
+
+                            row = !card.isEditing() ? card.selectedRow() : card.changedRow;
+
+                            col._fieldEditObj = fe;
+                            fe.value = isLookup ? row[col.keyField] : row[col.name];
+                            fe.value = fe.value != null ? fe.value : '';
+
+                            fe.text = row[col.name];
+                        }
+                    }
+                    onChange={(e) => {
+                        if (!card.changedRow) {
+                            card.changedRow = {};
+                            Object.assign(card.changedRow, card.selectedRow());
+                        }
+
+                        if (isLookup) {
+                            card.changedRow[col.keyField] = e.value;
+                            card.changedRow[col.name] = e.text;
+                            if (!card.isEditing()) {
+                                card.setEditing(true);
+                            }
+                            card.refreshState();
+                        }
+                        else {
+                            card.changedRow[col.name] = e.value;
+                            card.setEditing(true);
+                            card.refreshState();
+                        }
+                    }}
+                >
+                </FieldEdit>
+            </div>
+        )
+
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    addCardButtons() {
+        const card = this;
+
+        if (card._cardButtonsAdded) return;
+
+        card._cardButtonsAdded = true;
+
+        //card.cardButtons.push({
+        //    id: card.cardButtons.length,
+        //    name: 'edit',
+        //    title: card.translate('Start edit'),
+        //    label: images.edit ? '' : card.translate('Start edit'),
+        //    click: (e) => card.startEditNode(e),
+        //    img: images.edit
+        //});
+
+        card.cardButtons.push({
+            id: card.cardButtons.length,
+            name: 'commit',
+            title: card.translate('Commit changes'),
+            label: card.translate('Commit'),
+            img: Images.images.commit,
+            click: (e) => card.commitChangesNode(e),
+            getDisabled: (e) => card.commitChangesNodeDisabled(e),
+        });
+
+        card.cardButtons.push({
+            id: card.cardButtons.length,
+            name: 'rollback',
+            title: card.translate('Rollback changes'),
+            label: card.translate('Rollback'),
+            img: Images.images.rollback,
+            click: (e) => {
+                card.rollbackChangesNode(e);
+                if (card.isNewRecord && card.close) card.close(e);
+            },
+            getDisabled: (e) => card.rollbackChangesNodeDisabled(e),
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    commitChangesNodeDisabled() {
+        const card = this;
+        if (!card.isEditing()) return true;
+
+        let requiredColumnsFilled = true;
+
+        for (let col of card.columns) {
+            if (!col.required || col.readonly) continue;
+
+            let val = card.changedRow[col.name];
+            if (col.required && (val == null || val === '')) {
+                requiredColumnsFilled = false;
+                break;
+            }
+        }
+
+        return !requiredColumnsFilled;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    rollbackChangesNodeDisabled() {
+        const card = this;
+        return !card.isEditing();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    saveRow(e) {
+        const card = this;
+
+        if (!card.isRowChanged(e.row, card.changedRow)) return new Promise(function (resolve) { resolve(true); });
+
+        return new Promise(function (resolve) {
+            //e.row = card.initialRow = e.changedRow;
+            Object.assign(card.initialRow, card.changedRow);
+            resolve(true);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    commitChangesNode() {
+        const card = this;
+        card.saveRow({ row: card.initialRow, changedRow: card.changedRow }).then(
+            () => {
+                if (card.isNewRecord || !card.keyField) {
+                    card.setEditing(false);
+                    Object.assign(card.initialRow, card.changedRow);
+                    card.refreshState();
+                }
+                else {
+                    card.getRows().then(
+                        rows => {
+                            card.rows = rows;
+                            card.changedRow = rows[0];
+                            Object.assign(card.initialRow, card.changedRow);
+                            card.setEditing(false);
+                            card.afterGetRows();
+                            card.refreshState();
+                        }
+                    );
+                }
+            }
+        ).catch((message) => {
+            Object.assign(card.changedRow, card.initialRow);
+            card.refreshState();
+            alert(message || 'Error!');
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    rollbackChangesNode() {
+        const card = this;
+        if (card.isNewRecord || !card.keyField) {
+            card.changedRow = {};
+            Object.assign(card.changedRow, card.initialRow);
+            card.setEditing(false);
+            card.refreshState();
+        }
+        else {
+            card.getRows().then(
+                rows => {
+                    card.rows = rows;
+                    card.changedRow = rows[0];
+                    Object.assign(card.initialRow, card.changedRow);
+                    card.setEditing(false);
+                    card.afterGetRows();
+                    card.refreshState();
+                }
+            );
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    selectedRow() {
+        const card = this;
+        return card.changedRow;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getRows() {
+        const card = this;
+
+        return new Promise(function (resolve) {
+            const res = [card.initialRow];
+            card.totalRows = 1;
+            resolve(res);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+}