react-graph-grid 0.0.4 → 0.0.6

package/README.md

@@ -117,8 +117,7 @@ Example
 			allowEditGrid={true}
 		/>
 
-
-		Some grid properties
+Some grid properties
 
 			uid - grid uid
 			parentGrids - parent grids uids
@@ -129,4 +128,12 @@ Example
 			pageSize - grid page size
 
 
-		For more examples see DebugApp.jsx
+For more examples see DebugApp.jsx
+
+0.0.5 version
+
+		"Adjust column visibility" option added to GridFE.jsx module
+
+0.0.6 version
+
+		Fixed GridFE.showColumnsSettings() function

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.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite --port 4000",

package/src/GridFE.jsx

@@ -111,6 +111,7 @@ export class GridFEClass extends GridFLClass {
                         grid.onClosePopup(e);
                         grid.refreshState();
                     }}
+                    footerButtons={grid._popupButtons ? grid._popupButtons : null}
                 >
                 </Modal>
                 :
@@ -123,10 +124,12 @@ export class GridFEClass extends GridFLClass {
         grid.popupIsShowing = false;
         grid.popupCloseWhenEscape = false;
         grid.popupTitle = '';
+        delete grid._popupButtons;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderPopupContent() {
-        return <></>;
+        const grid = this;
+        return grid.columnsSettingsIsShowing ? grid.renderColumnsSettings() : <></>;
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     renderCell(grid, col, row, selected) {
@@ -510,8 +513,11 @@ export class GridFEClass extends GridFLClass {
         const res = super.getGridSettingsList();
 
         const grid = this;
+
+        res.push({ id: 4, text: grid.translate('Adjust column visibility', 'grid-menu') });
+
         if (!grid.exportDisabled) {
-            res.push({ id: 4, text: grid.translate('Export to CSV', 'grid-menu') });
+            res.push({ id: 5, text: grid.translate('Export to CSV', 'grid-menu') });
         }
 
         return res;
@@ -523,14 +529,150 @@ export class GridFEClass extends GridFLClass {
 
         switch (String(itemId)) {
             case '4':
+                grid.showColumnsSettings();
+                grid.refreshState();
+                break;
+            case '5':
                 grid.exportToCSV();
-
                 grid.refreshState();
                 break;
             default:
         }
     }
     // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    applyColumnsVisibility() {
+        const grid = this;
+        for (let col of grid.columns) {
+            col.visible = col._newVisible;
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    showColumnsSettings() {
+        const grid = this;
+        grid.popupIsShowing = true;
+        grid.columnsSettingsIsShowing = true;
+        grid.popupTitle = grid.translate('Adjust column visibility');
+
+        grid._visibleColumnsCount = 0;
+        for (let col of grid.columns) {
+            col._newVisible = col.visible;
+            if (col._newVisible != false) grid._visibleColumnsCount++;
+        }
+
+        grid._popupButtons = [
+            {
+                title: grid.translate('OK'),
+                onClick: (e) => {
+                    grid.applyColumnsVisibility();
+                    grid.columnsSettingsIsShowing = false;
+                    grid.onClosePopup(e);
+                    grid.refreshState();
+                }
+            },
+            {
+                title: grid.translate('Cancel'),
+                onClick: (e) => {
+                    grid.columnsSettingsIsShowing = false;
+                    grid.onClosePopup(e);
+                    grid.refreshState();
+                }
+            },
+        ];
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    hideAllColumns(preview) {
+        const grid = this;
+        let first = true;
+        for (let col of grid.columns) {
+            if (col._newVisible == false || !preview && col.visible == false) continue;
+
+            if (first) {
+                first = false;
+                continue;
+            }
+
+            if (preview) {
+                col._newVisible = false;
+                grid._visibleColumnsCount--;
+            }
+            else {
+                col.visible = false;
+            }
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    showAllColumns(preview) {
+        const grid = this;
+        for (let col of grid.columns) {
+            if (col._newVisible != false || !preview && col.visible != false) continue;
+
+            if (preview) {
+                col._newVisible = true;
+                grid._visibleColumnsCount++;
+            }
+            else {
+                col.visible = true;
+            }
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderColumnsSettings() {
+        const grid = this;
+        return (
+            <div className='grid-columns-settings-div'>
+                <div>
+                    <ul className='dropdown-ul grid-columns-settings-div-ul'>
+                        <li className="dropdown-item" onClick={(e) => { grid.hideAllColumns(true); grid.refreshState(); }}>
+                            <div className="dropdown-item-div">
+                                <span className='grid-columns-settings-label'>{grid.translate('Visible columns')}</span>
+                                {Images.images.last()}
+                            </div>
+                        </li>
+                        {
+                            grid.columns.map((column) => {
+                                if (column._newVisible == false) return <></>;
+
+                                return (
+                                    <li className="dropdown-item" onClick={(e) => { if (grid._visibleColumnsCount > 1) { column._newVisible = false; grid._visibleColumnsCount--; grid.refreshState(); } }}>
+                                        <div className="dropdown-item-div">
+                                            <span>{column.title}</span>
+                                            {Images.images.next()}
+                                        </div>
+                                    </li>
+                                );
+                            })
+                        }
+                    </ul>
+                </div>
+                <div></div>
+                <div>
+                    <ul className='dropdown-ul grid-columns-settings-div-ul'>
+                        <li className="dropdown-item" onClick={(e) => { grid.showAllColumns(true); grid.refreshState(); }}>
+                            <div className="dropdown-item-div">
+                                {Images.images.first()}
+                                <span className='grid-columns-settings-label'>{grid.translate('Invisible columns')}</span>
+                            </div>
+                        </li>
+                        {
+                            grid.columns.map((column) => {
+                                if (column._newVisible != false) return <></>;
+
+                                return (
+                                    <li className="dropdown-item" onClick={(e) => { column._newVisible = true; grid._visibleColumnsCount++; grid.refreshState(); }}>
+                                        <div className="dropdown-item-div">
+                                            {Images.images.prev()}
+                                            <span>{column.title}</span>
+                                        </div>
+                                    </li>
+                                );
+                            })
+                        }
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
     exportToCSV(filename, delimeter) {
         const grid = this;
 
@@ -550,18 +692,18 @@ export class GridFEClass extends GridFLClass {
         // 1. Преобразование данных в CSV строку
         const csvContent = "\uFEFF" + // Добавляем BOM для корректного отображения кириллицы в Excel
             [
-            titles.join(delimeter), // Заголовки
-            ...grid.rows.map(item => {
+                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);
+                    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);
-            }) // Строки данных
+                    //return Object.values(item).join(delimeter);
+                }) // Строки данных
             ].join("\n");
 
         // 2. Создание Blob

package/src/Modal.jsx

@@ -236,7 +236,7 @@ export class ModalClass extends BaseComponent {
                             wnd-btn={`button_${wnd.id}_${btn._ind}_`}
                             className={wnd.opt.footerButtonClass}
                             title={btn.title}
-                            onClick={btn.onclick ? (e) => btn.onclick(e) : null}
+                            onClick={btn.onClick ? (e) => btn.onClick(e) : null}
                             disabled={btn.getDisabled ? btn.getDisabled() : false}
                         >
                             <i className={btn.imageClass}></i>

package/src/Tests/TestData.jsx

@@ -25,10 +25,10 @@ export default class TestData {
             { Id: 14, ParentId: [6, 31], Name: 'Tuyanka', SecondName: 'Batyreva', Date: '15/11/2010', Comment: 'Plemyannica 3', Hometown: 'Elista', HometownId: 5 },
             { Id: 15, ParentId: [0], Name: 'Shura', SecondName: 'Pelushskaya', Date: '22/04/1919', Comment: 'Dv. Babushka', Hometown: 'Ustyuzhna', HometownId: 9 },
             { Id: 16, ParentId: [15], Name: 'Ira', SecondName: 'Pelushskaya', Date: '11/06/1947', Comment: 'Dv. Tetya', Hometown: 'Pskov', HometownId: 4 },
-            { Id: 17, ParentId: [11, 23], Name: 'Sveta', SecondName: 'Dolginova', Date: '10/11/195?', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
-            { Id: 18, ParentId: [11, 23], Name: 'Rita', SecondName: 'Dolginova', Date: '23/10/195?', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
-            { 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: 17, ParentId: [11, 23], Name: 'Sveta', SecondName: 'Dolginova', Date: '10/11/1954', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 18, ParentId: [11, 23], Name: 'Rita', SecondName: 'Dolginova', Date: '23/10/1956', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 19, ParentId: [11, 23], Name: 'Nadya', SecondName: 'Shaula', Date: '11/11/1958', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 20, ParentId: [11, 23], Name: 'Vitia', SecondName: 'Dolginov', Date: '11/11/1958', 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: '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 },
@@ -38,7 +38,7 @@ export default class TestData {
             { Id: 26, ParentId: [19, 33], Name: 'Dima', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Energodar', HometownId: 14 },
             { Id: 27, ParentId: [20, 35], Name: 'Olga', SecondName: 'Dolginova', Date: '??/??/????', Comment: 'Dv. Sister', Hometown: 'Elista', HometownId: 5 },
             { 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: 29, ParentId: [20, 36], Name: 'Oleg', SecondName: 'Dolginov', Date: '10/11/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
 
             { 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 },

package/src/Themes/Translate.jsx

@@ -11,6 +11,7 @@
         const dict = {
             'ADD': 'Добавить',
             'ADD NEW RECORD': 'Добавить новую строку',
+            'ADJUST COLUMN VISIBILITY': 'Настроить видимость колонок',
             'BUTTONS SIZE': 'Размер кнопок',
             'CANCEL': 'Отмена',
             'COLLAPSE': 'Свернуть',
@@ -29,6 +30,7 @@
             'EXPAND': 'Развернуть',
             'EXIT': 'Выход',
             'FIRST': 'К началу',
+            'INVISIBLE COLUMNS': 'Невидимые колонки',
             'LARGE BUTTONS': 'Большие',
             'LAST': 'В конец',
             'LOAD MORE RECORDS': 'Загрузить еще строк',
@@ -62,6 +64,7 @@
             'VALUE': 'Значение',
             'VIEW': 'Просмотр',
             'VIEW RECORD': 'Карточка',
+            'VISIBLE COLUMNS': 'Видимые колонки',
             'USER': 'Пользователь',
         };
         return dict[text.toUpperCase()] || text;

package/src/css/default.css

@@ -423,6 +423,14 @@
             background-color: lightgray;
         }
 
+.dropdown-item-div {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+}
+
 .grid-header-content-grid {
     display: grid;
     grid-template-columns: auto 16px;
@@ -496,6 +504,21 @@
         background-color: lightgray;
     }
 
+.grid-columns-settings-div {
+    display: grid;
+    grid-template-columns: calc(50% - 4px) 8px calc(50% - 4px);
+    margin: 10px;
+}
+
+.grid-columns-settings-div-ul {
+    margin: 5px;
+}
+
+.grid-columns-settings-label {
+    font-weight: 600;
+    /*margin: 5px;*/
+}
+
 .graph-tabcontrol-buttons {
     margin: 0 1em;
     display: flex