react-graph-grid 0.0.2 → 0.0.4

package/README.md

@@ -1,3 +1,132 @@
 # react-graph-grid
 
-A React package containing a grid that can communicate with other grids through a connection graph
+A React package containing a grid that can communicate with other grids through a connection graph
+
+For all questions, please contact rmb@mail.ru
+
+Installation
+
+	npm install react-grpah-grid
+
+
+Example
+
+	import { GridFE } from '../../node_modules/react-graph-grid/src/GridFE';
+	import TestData from '../../node_modules/react-graph-grid/src/Tests/TestData';
+
+	...
+
+	/*
+	* assuming the API returns something like this:
+	*   const rows = [
+	*       {
+	*         Id: 1,
+	*         Name: 'Mikle',
+	*		  SecondName: 'Razumtsev',
+	*		  Date: '26/01/1979'
+	*		  Comment: 'Me',
+	*		  Hometown: 'Voronezh',
+	*		  HometownId: 1,
+	*       },
+	*       {
+	*         Id: 2,
+	*         Name: 'Boris',
+	*		  SecondName: 'Razumtsev',
+	*		  Date: '14/06/1953'
+	*		  Comment: 'Father',
+	*		  Hometown: 'Grafskaya',
+	*		  HometownId: 2,
+	*       },
+	*       {
+	*         Id: 3,
+	*         Name: 'Ilia',
+	*		  SecondName: 'Razumtsev',
+	*		  Date: '16/09/1980'
+	*		  Comment: 'Brother',
+	*		  Hometown: 'Pskov',
+	*		  HometownId: 4,
+	*       },
+	*     ]
+	*
+	*
+	*	e.params = [
+	*		{ key: 'pageSize', value: 10 },
+	*		{ key: 'pageNumber', value: 1 }
+	*   ]
+	*
+	*/
+
+	    function loadRows(e) {
+			return new Promise(function (resolve, reject) {
+                const fetchParams = {
+                    mode: 'cors',
+                    method: 'post',
+                    headers: {
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify(e.params)
+                };
+
+				fetch(`/awesome-api-url/`, fetchParams).then(
+					(response) => {
+						resolve(response.json());
+					}
+				)
+				.catch(error => {
+					reject(error);
+				});
+		    });
+		};
+
+		function loadColumns() {
+			return [
+				{ name: 'Id', sortable: true, filtrable: true },
+				{ name: 'Name', sortable: true, filtrable: true },
+				{ name: 'SecondName', sortable: true, filtrable: true },
+				{ name: 'Date', sortable: true },
+				{ name: 'Comment', sortable: true, filtrable: true },
+				{ name: 'HometownId', visible: false },
+				{
+					name: 'Hometown', 
+					sortable: true, 
+					filtrable: true, 
+					type: 'lookup', 
+					keyField: 'HometownId', 
+					refKeyField: 'Id', 
+					refNameField: 'City', 
+					getRows: (e) => {
+						return new Promise(function (resolve, reject) {
+
+							const rows = new TestData().getCity(e);
+
+							if (rows != null) {
+								resolve(rows);
+							} else {
+								reject(Error("Error getting rows"));
+							}
+						});
+					}
+				},
+			]
+		};
+
+
+		<GridFE 
+			getRows={loadRows} 
+			getColumns={loadColumns} 
+			allowEditGrid={true}
+		/>
+
+
+		Some grid properties
+
+			uid - grid uid
+			parentGrids - parent grids uids
+			buttons - buttons array [{ id: 1, name: 'commit', title: 'Commit changes', label: 'Commit', img: Images.commit, click: (e) => grid.commitChanges(e), getDisabled: (e) => grid.commitChangesDisabled(e) }, ... ]
+			multi - rows multiselect through a pocket
+			renderCell - custom render grid cell
+			getDefaultLinkContent - returns an object containing a data using when child grid responds to the parent grid active record
+			pageSize - grid page size
+
+
+		For more examples see DebugApp.jsx

package/package.json

@@ -3,7 +3,7 @@
   "author": "Mikhail Razumtsev",
   "description": "A React package containing a grid that can communicate with other grids through a connection graph",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite --port 4000",

package/src/Grid.jsx

@@ -90,7 +90,7 @@ export class GridClass extends BaseComponent {
             grid.renderCell = props.renderCell;
         }
 
-        grid.dateFormat = props.dateFormat || 'dd.MM.yyyy';//'DD.MM.YYYY';
+        grid.dateFormat = props.dateFormat || 'dd.MM.yyyy';
         grid.dateTimeFormat = props.dateTimeFormat || 'dd.MM.yyyy HH:mm:ss';
 
         grid.rows = [];
@@ -289,6 +289,7 @@ export class GridClass extends BaseComponent {
                                                 gridTemplateRows: '1.5em auto',
                                                 gridAutoFlow: 'row',
                                                 width: 'calc(100% + 8px)',
+                                                justifyContent: 'space-between',
                                             }}
                                         >
                                             {grid.renderHeaderCell(col, context)}
@@ -498,7 +499,8 @@ export class GridClass extends BaseComponent {
         for (let col of grid.columns) {
             col.id = id++;
             col.title = col.title || col.name;
-            col.w = col.initW = col.w || 100;
+            col.w = col.w || 100;
+            col.initW = col.initW || 100;
             col.minW = col.minW || 50;
             col.grid = grid;
             grid.colDict[col.id] = grid.colDict[col.name] = grid.colDict[col.name.toLowerCase()] = col;

package/src/GridDB.jsx

@@ -151,7 +151,12 @@ export class GridDBClass extends GridPKClass {
                 {grid.renderPager()}
                 {super.render()}
                 {grid.renderPager(true)}
-                <Dropdown init={(dd) => { grid.menuDropdown = dd; }} getItems={(e) => { return grid.getGridSettings(e); }} onItemClick={(e) => { grid.onSettingsItemClick(e.itemId); }}></Dropdown>
+                <Dropdown
+                    init={(dd) => { grid.menuDropdown = dd; }}
+                    closeWhenMiss={true}
+                    getItems={(e) => { return grid.getGridSettings(e); }}
+                    onItemClick={(e) => { grid.onSettingsItemClick(e.itemId); }}>
+                </Dropdown>
             </>
         )
     }
@@ -607,7 +612,7 @@ export class GridDBClass extends GridPKClass {
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getHeaderGridTemplateColumns(col) {
-        return col.sortInd == null ? 'auto 8px' : 'auto 22px';
+        return col.sortInd == null ? 'auto 12px' : 'auto 22px';
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderHeaderCell(col, context) {
@@ -774,12 +779,20 @@ export class GridDBClass extends GridPKClass {
     resetColumnsSort() {
         const grid = this;
         grid._sortString = '';
+        let needRefresh = false;
         for (let col of grid.columns) {
+            needRefresh = needRefresh || col.asc != false || col.desc != false;
+
             delete col.asc;
             delete col.desc;
             delete col.sortInd;
         }
-        grid.refresh();
+        if (needRefresh) {
+            grid.refresh();
+        }
+        else {
+            grid.refreshState();
+        }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     changeColumnSortOrder(column, e) {

package/src/GridFE.jsx

@@ -506,4 +506,78 @@ export class GridFEClass extends GridFLClass {
         });
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getGridSettingsList() {
+        const res = super.getGridSettingsList();
+
+        const grid = this;
+        if (!grid.exportDisabled) {
+            res.push({ id: 4, text: grid.translate('Export to CSV', 'grid-menu') });
+        }
+
+        return res;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onSettingsItemClick(itemId) {
+        super.onSettingsItemClick(itemId);
+        const grid = this;
+
+        switch (String(itemId)) {
+            case '4':
+                grid.exportToCSV();
+
+                grid.refreshState();
+                break;
+            default:
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    exportToCSV(filename, delimeter) {
+        const grid = this;
+
+        if (filename == null || filename == '') {
+            const date = new Date();
+            filename = `exportCSV_${date.getDate()}_${date.getMonth()}_${date.getFullYear()}_${date.getTime()}_`;
+        };
+
+        delimeter = delimeter || ';';
+
+        let titles = [];
+        for (let col of grid.columns) {
+            if (col.visible == false) continue;
+            titles.push(col.title || col.name);
+        }
+
+        // 1. Преобразование данных в CSV строку
+        const csvContent = "\uFEFF" + // Добавляем BOM для корректного отображения кириллицы в Excel
+            [
+            titles.join(delimeter), // Заголовки
+            ...grid.rows.map(item => {
+
+                let values = [];
+                for (let col of grid.columns) {
+                    if (col.visible == false) continue;
+                    values.push(item[col.name]);
+                }
+                return values.join(delimeter);
+
+                //return Object.values(item).join(delimeter);
+            }) // Строки данных
+            ].join("\n");
+
+        // 2. Создание Blob
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+
+        // 3. Создание ссылки и скачивание
+        const link = document.createElement("a");
+        if (link.download !== undefined) {
+            const url = URL.createObjectURL(blob);
+            link.setAttribute("href", url);
+            link.setAttribute("download", filename);
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
 }

package/src/GridFL.jsx

@@ -79,6 +79,7 @@ export class GridFLClass extends GridDBClass {
                 <Dropdown
                     getItems={(e) => { return grid.getAutocomleteItems(e); }}
                     onItemClick={(e) => { grid.onAutocomleteItemClick(e); }}
+                    closeWhenMiss={true}
                     init={(dd) => {
                         if (grid._autocompleteDropdown) {
                             dd.visible = grid._autocompleteDropdown.visible;
@@ -411,7 +412,7 @@ export class GridFLClass extends GridDBClass {
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getHeaderGridTemplateColumns(col) {
-        return col.sortInd == null /*&& (col.filter == null || col.filter === '')*/ ? 'auto 18px' : 'auto 22px';
+        return col.sortInd == null ? 'auto 12px' : 'auto 22px';
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     getGridSettingsList() {

package/src/Modal.jsx

@@ -54,7 +54,8 @@ export class ModalClass extends BaseComponent {
 
         wnd.opt.closeWhenClick = props.closeWhenClick;
         wnd.opt.closeWhenEscape = props.closeWhenEscape;
-        wnd.opt.closeWhenMiss = (props.closeWhenMiss || !props.closeWhenMouseLeave) && wnd.opt.isModal;
+        wnd.opt.closeWhenMiss = props.closeWhenMiss && wnd.opt.isModal;
+        //wnd.opt.closeWhenMiss = (props.closeWhenMiss || props.closeWhenMouseLeave == false) && wnd.opt.isModal;
         wnd.opt.closeWhenMouseLeave = props.closeWhenMouseLeave;
 
         wnd.opt.onMouseEnter = props.onMouseEnter;
@@ -306,12 +307,14 @@ export class ModalClass extends BaseComponent {
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     close() {
         const wnd = this;
-        wnd.visible = false;
 
         if (wnd.onClose) {
-            wnd.onClose();
+            const ev = {};
+            wnd.onClose(ev);
+            if (ev.cancel) return;
         }
 
+        wnd.visible = false;
         wnd.refreshState();
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------

package/src/Tests/TestData.jsx

@@ -10,7 +10,7 @@ export default class TestData {
 
         const family = [
             { Id: 1, ParentId: [3, 4], Name: 'Mikle', SecondName: 'Razumtsev', Date: '26/01/1979', Comment: 'Good boy', Hometown: 'Voronezh', HometownId: 1 },
-            { Id: 2, ParentId: [0], Name: 'Nataly', SecondName: 'Sche..', Date: '15/01/1999', Comment: 'Good girl', Hometown: 'Hanty-Mansiysk', HometownId: 12 },
+            { Id: 2, ParentId: [0], Name: 'Nataly', SecondName: 'Sche..', Date: '14/01/1999', Comment: 'Good girl', Hometown: 'Hanty-Mansiysk', HometownId: 12 },
             { Id: 3, ParentId: [11, 23], Name: 'Lyuda', SecondName: 'Razumtseva', Date: '03/07/1953', Comment: 'Mommy', Hometown: 'Novosibirsk', HometownId: 8 }, 
             { Id: 4, ParentId: [5, 22], Name: 'Borya', SecondName: 'Razumtsev', Date: '14/06/1953', Comment: 'Papa', Hometown: 'Grafskaya', HometownId: 2 }, 
             { Id: 5, ParentId: [0], Name: 'Nina', SecondName: 'Razumtseva', Date: '17/06/1917', Comment: 'Babushka', Hometown: 'Ustyuzhna', HometownId: 9 },
@@ -30,8 +30,8 @@ export default class TestData {
             { Id: 19, ParentId: [11, 23], Name: 'Nadya', SecondName: 'Shaula', Date: '11/11/196?', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
             { Id: 20, ParentId: [11, 23], Name: 'Vitia', SecondName: 'Dolginov', Date: '11/11/196?', Comment: 'Dadya', Hometown: 'Novosibirsk', HometownId: 8 },
             { Id: 21, ParentId: [11, 23], Name: 'Tanya', SecondName: 'Dolginova', Date: '07/01/1963', Comment: 'Tetya', Hometown: 'Elista', HometownId: 5 },
-            { Id: 22, ParentId: [0], Name: 'Misha', SecondName: 'Razumtsev', Date: '??/??/19??', Comment: 'Ded', Hometown: 'Grafskaya', HometownId: 2 },
-            { Id: 23, ParentId: [0], Name: 'Zambo', SecondName: 'Dolginov', Date: '??/??/19??', Comment: 'Ded 2', Hometown: 'Elista', HometownId: 5 },
+            { Id: 22, ParentId: [0], Name: 'Misha', SecondName: 'Razumtsev', Date: '05/11/1918', Comment: 'Ded', Hometown: 'Grafskaya', HometownId: 2 },
+            { Id: 23, ParentId: [0], Name: 'Zambo', SecondName: 'Dolginov', Date: '24/04/1926', Comment: 'Ded 2', Hometown: 'Elista', HometownId: 5 },
 
             { Id: 24, ParentId: [18, 34], Name: 'Alina', SecondName: 'Ushakova', Date: '??/??/????', Comment: 'Dv. Sister', Hometown: 'Elista', HometownId: 5 },
             { Id: 25, ParentId: [19, 33], Name: 'Igor', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Energodar', HometownId: 14 },
@@ -40,7 +40,7 @@ export default class TestData {
             { Id: 28, ParentId: [20, 35], Name: 'Venia', SecondName: 'Dolginov', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
             { Id: 29, ParentId: [20, 36], Name: 'Oleg', SecondName: 'Dolginov', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
 
-            { Id: 30, ParentId: [0], Name: 'Yura', SecondName: 'Pelushskiy', Date: '??/??/????', Comment: 'Dv. Ded', Hometown: 'Ustyuzhna', HometownId: 9 },
+            { Id: 30, ParentId: [0], Name: 'Yura', SecondName: 'Pelushskiy', Date: '??/??/1921', Comment: 'Dv. Ded', Hometown: 'Ustyuzhna', HometownId: 9 },
             { Id: 31, ParentId: [0], Name: 'Sanal', SecondName: 'Batyrev', Date: '11/06/????', Comment: 'Muzh Sestry 3', Hometown: 'Elista', HometownId: 5 },
             { Id: 32, ParentId: [0], Name: 'Dima', SecondName: 'Markelov', Date: '??/??/????', Comment: 'Muzh Sestry 2', Hometown: 'Elista', HometownId: 5 },
             { Id: 33, ParentId: [0], Name: 'Slava', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Muzh Teti', Hometown: 'Energodar', HometownId: 14 },