react-graph-grid 0.1.8 → 0.1.11

package/src/GridFE.jsx

@@ -0,0 +1,753 @@
+/* eslint-disable no-mixed-operators */
+import { useState, useEffect } from 'react';
+import { GridFLClass } from './GridFL';
+import { FieldEdit } from './FieldEdit';
+import { Images } from './Themes/Images';
+import { Modal } from './Modal';
+// ==================================================================================================================================================================
+export function GridFE(props) {
+    let grid = null;
+
+    const [gridState, setState] = useState({ grid: grid, ind: 0 });
+
+    grid = gridState.grid;
+    let needGetRows = false;
+    if (!grid || grid.uid !== props.uid && props.uid != null) {
+        grid = null;
+        if (props.findGrid) {
+            grid = props.findGrid(props);
+        }
+        grid = grid || new GridFEClass(props);
+        needGetRows = !props.noAutoRefresh && !grid.hasVisibleParentGrids();
+    }
+
+    if (props.init) {
+        props.init(grid);
+    }
+
+    grid.refreshState = function () {
+        setState({ grid: grid, ind: grid.stateind++ });
+    }
+
+    useEffect(() => {
+        grid.setupEvents();
+
+        if (needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0) || grid._forceRefresh) {
+
+            grid._forceRefresh = false;
+
+            grid._waitingRows = true;
+            grid.getRows({ filters: grid.collectFilters(), grid: grid }).then(
+                rows => {
+                    grid.rows = rows;
+                    grid.afterGetRows();
+                    grid.refreshState();
+                }
+            ).finally(() => {
+                grid._waitingRows = false;
+                grid.refreshState();
+            });
+        }
+        else if (grid.columns.length <= 0 && grid.getColumns) {
+            grid.prepareColumns().then(() => grid.refreshState());;
+        }
+
+        return () => {
+            grid.clearEvents();
+        }
+    }, [grid, needGetRows])
+
+    return (grid.render());
+}
+
+// ==================================================================================================================================================================
+export class GridFEClass extends GridFLClass {
+
+    constructor(props) {
+        super(props);
+
+        const grid = this;
+
+        grid.allowEdit = props.allowEdit;
+
+        grid.allowView = false;
+        grid.allowAdd = true;
+        grid.allowCopy = true; 
+        grid.allowDelete = true;
+
+        grid.closeSelfWnd = grid.closeSelfWnd || (() => { });
+
+        grid.onSelectValue = props.onSelectValue || (() => { });
+
+        const shift = (grid.level + 1) * 20;
+        grid.popupPos = { x: 100 + shift, y: 100 + shift, w: 800, h: 600 };
+
+        grid.addToolbarButtons();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    render() {
+        const grid = this;
+        return (
+            <>
+                {super.render()}
+                {grid.renderPopup()}
+            </>
+        )
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    isVisible() {
+        return this.visible;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderPopup() {
+        const grid = this;
+        return (
+            grid.popupIsShowing ?
+                <Modal
+                    title={grid.popupTitle}
+                    level={grid.level + 1}
+                    renderContent={(wnd) => { return grid.renderPopupContent(wnd) }}
+                    dimensionsByContent={grid.popupDimensionsByContent}
+                    pos={grid.popupPos}
+                    closeWhenEscape={grid.popupCloseWhenEscape}
+                    onClose={(e) => {
+                        grid.onClosePopup(e);
+                        grid.refreshState();
+                    }}
+                    footerButtons={grid._popupButtons ? grid._popupButtons : null}
+                >
+                </Modal>
+                :
+                <></>
+        );
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onClosePopup() {
+        const grid = this;
+        grid.popupIsShowing = false;
+        grid.popupCloseWhenEscape = false;
+        grid.popupTitle = '';
+        delete grid._popupButtons;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderPopupContent(wnd) {
+        const grid = this;
+        return grid.columnsSettingsIsShowing ? grid.renderColumnsSettings(wnd) : <></>;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    renderCell(grid, col, row, selected) {
+        if (!grid.allowEdit && !col.allowVerticalResize || !selected || grid.isDisabled()) return super.renderCell(grid, col, row);
+
+        row = !grid.isEditing() || !grid.changedRow ? row : grid.changedRow;
+
+        return <FieldEdit
+            keyPref={grid.id + '_' + row[grid.keyField]}
+            column={col}
+            value={col.type === 'lookup' ? row[col.keyField] : row[col.name]}
+            text={row[col.name]}
+            findFieldEdit={() => { return col._fieldEditObj; }}
+            selectH={'1.4em'}
+            level={grid.level}
+            init={
+                (fe) => {
+                    if (grid.isEditing() && !grid.changedRow) {
+                        grid.changedRow = {};
+                        Object.assign(grid.changedRow, grid.selectedRow());
+                    }
+
+                    fe.ownerGrid = grid;
+
+                    const lrow = !grid.isEditing() ? grid.selectedRow() : grid.changedRow;
+
+                    col._fieldEditObj = fe;
+                    fe.value = col.type === 'lookup' ? lrow[col.keyField] : lrow[col.name];
+                    fe.text = lrow[col.name];
+                }
+            }
+            onChange={(e) => {
+                if (!grid.changedRow) {
+                    grid.changedRow = {};
+                    Object.assign(grid.changedRow, grid.selectedRow());
+                }
+
+                if (col.type === 'lookup') {
+                    grid.changedRow[col.keyField] = e.value;
+                    grid.changedRow[col.name] = e.text;
+                    if (!grid.isEditing()) {
+                        grid.setEditing(true);
+                        grid.refreshState();
+                    }
+                    e.fe.refreshState();
+                }
+                else {
+                    grid.changedRow[col.name] = e.value;
+                    if (!grid.isEditing()) {
+                        grid.setEditing(true);
+                        grid.refreshState();
+                    }
+                    else {
+                        e.fe.refreshState();
+                    }
+                }
+            }}
+        >
+        </FieldEdit>
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    addToolbarButtons() {
+        const grid = this;
+
+        //node.buttons.push({
+        //    id: node.buttons.length,
+        //    name: 'edit',
+        //    title: node.translate('Start edit'),
+        //    label: node.images.edit ? '' : node.translate('Start edit'),
+        //    click: (e) => node.startEdit(e),
+        //    img: node.images.edit
+        //});
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'commit',
+            title: grid.translate('Commit changes'),
+            label: grid.translate('Commit'),
+            img: Images.images.commit,
+            click: (e) => grid.commitChanges(e),
+            getDisabled: (e) => grid.commitChangesDisabled(e),
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'rollback',
+            title: grid.translate('Rollback changes'),
+            label: grid.translate('Rollback'),
+            img: Images.images.rollback,
+            click: (e) => grid.rollbackChanges(e),
+            getDisabled: (e) => grid.rollbackChangesDisabled(e),
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'add',
+            title: grid.translate('Add new record'),
+            label: grid.translate('Add'),
+            img: Images.images.addRecord,
+            click: (e) => grid.addRecord(e),
+            getDisabled: (e) => grid.addRecordDisabled(e),
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'copy',
+            title: grid.translate('Copy record'),
+            label: grid.translate('Copy'),
+            img: Images.images.copyRecord,
+            click: (e) => grid.copyRecord(e),
+            getDisabled: (e) => grid.copyRecordDisabled(e),
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'delete',
+            title: grid.translate('Delete record'),
+            label: grid.translate('Delete'),
+            img: Images.images.deleteRecord,
+            click: (e) => grid.deleteRecord(e),
+            getDisabled: (e) => grid.deleteRecordDisabled(e),
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'view',
+            title: grid.translate('View record'),
+            label: grid.translate('View'),
+            img: Images.images.viewRecord,
+            click: (e) => grid.viewRecord(e),
+            getDisabled: (e) => grid.viewRecordDisabled(e),
+            getVisible: () => { return false; },
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'selectValue',
+            title: grid.translate('Select value'),
+            label: grid.translate('Select'),
+            click: (e) => grid.selectRecord(e),
+            img: Images.images.selectFilterValue,
+            getDisabled: (e) => grid.selectRecordDisabled(e),
+            getVisible: () => { return grid.isSelecting },
+        });
+
+        grid.buttons.push({
+            id: grid.buttons.length,
+            name: 'exit',
+            title: grid.translate('Exit'),
+            label: grid.translate('Exit'),
+            click: (e) => grid.closeSelfWnd(e),
+            img: Images.images.exit,
+            getDisabled: (e) => grid.exitDisabled(e),
+            getVisible: () => { return grid.isSelecting },
+        });
+
+        grid._buttonsDict = {};
+        for (let btn of grid.buttons) {
+            grid._buttonsDict[btn.name] = btn;
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    selectRecord(e) {
+        const grid = this;
+        const row = grid.selectedRow();
+        delete grid._selectedRows;
+
+        if (!grid.multi || !grid.pocketOpened) {
+            e.value = row[grid.keyField];
+            e.text = row[grid.nameField];
+            e.values = [{ value: e.value, label: e.text }];
+        }
+        else {
+            e.multi = true;
+            if (Object.keys(grid._selectedRowsDict).length === 0) {
+                grid._selectedRowsDict[row[grid.keyField]] = row;
+            }
+
+            const texts = [];
+            e.value = grid.selectedValue();
+            e.values = grid.selectedValues(texts);
+            e.text = texts.join(', ');
+        }
+
+        grid.onSelectValue(e);
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onRowDblClick(e, row) {
+        const grid = this;
+        super.onRowDblClick(e, row);
+
+        if (grid.isSelecting && !grid.multi && grid.onSelectValue) {
+            const row = grid.selectedRow();
+            e.value = row[grid.keyField];
+            e.text = row[grid.nameField];
+            grid.onSelectValue(e);
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    commitChanges(e) {
+        const grid = this;
+
+        const row = grid.selectedRow();
+
+        grid.saveRow({ row: row, changedRow: grid.changedRow }).then(
+            () => {
+                grid.setEditing(false);
+                Object.assign(row, grid.changedRow);
+                delete grid.changedRow;
+                grid.refreshState();
+            }
+        ).catch((message) => {
+            Object.assign(grid.changedRow, row);
+            grid.refreshState();
+            alert(message || 'Error!');
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    commitChangesDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.isEditing() || grid.isDisabled();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    rollbackChanges(e) {
+        const grid = this;
+
+        delete grid.changedRow;
+        grid.setEditing(false);
+        grid.refreshState();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    rollbackChangesDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.isEditing() || grid.isDisabled();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    addRecord(e) {
+        const grid = this;
+
+        grid.getNewRow().then((newRow) => {
+            grid.rows.unshift(newRow);
+            grid.selectedRowIndex = 0;
+            grid.refreshState();
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    addRecordDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.allowAdd || grid.isEditing() || grid.isDisabled();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    copyRecord(e) {
+        const grid = this;
+
+        const newRow = {};
+        Object.assign(newRow, grid.selectedRow());
+        grid.rows.unshift(newRow);
+        grid.selectedRowIndex = 0;
+
+        grid.refreshState();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    copyRecordDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.allowCopy || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    deleteRecord(e) {
+        const grid = this;
+
+        if (window.confirm(grid.translate('Delete  record') + '?')) {
+            grid.deleteRow(e).then(() => grid.refreshState());
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    deleteRecordDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.allowDelete || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    viewRecord(e) {
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    viewRecordDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.allowView || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    selectRecordDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.isSelecting || grid.isEditing() || grid.isDisabled() || grid.selectedRowIndex == null || grid.selectedRowIndex < 0 || !grid.rows || grid.rows.length <= 0;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    exitDisabled(e) {
+        const grid = this;
+        return grid._waitingRows || !grid.isSelecting || grid.isEditing() || grid.isDisabled();
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onSelectedRowChanged(e) {
+        const grid = this;
+        super.onSelectedRowChanged(e);
+
+        if (grid.allowEdit && grid.refreshState) {
+            grid.refreshState();
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getSelectedRowIndex() {
+        const grid = this;
+        if (grid.value == null || grid.value === '') return;
+
+        let i = 0;
+        for (let row of grid.rows) {
+            if (row[grid.keyField] === grid.value) {
+                grid.selectedRowIndex = i;
+                break;
+            }
+            i++;
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getGridMaxHeight() {
+        const grid = this;
+        return grid.frozenHeader ? grid.children && grid.children.length > 0 || grid.parents && grid.parents.length > 0 ? '40vh' : '80vh' : '';
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    async canLeaveRow(rowIndex) {
+        const grid = this;
+        let res;
+
+        return (!grid.allowEdit || !grid.isEditing()) && !grid.isDisabled();
+
+        const row = grid.rows[rowIndex];
+        await grid.saveRow({ row: row, changedRow: grid.changedRow }).then(
+            () => {
+                grid.setEditing(false);
+                Object.assign(row, grid.changedRow);
+                delete grid.changedRow;
+                grid.refreshState();
+                res = true;
+            }
+        ).catch((message) => {
+            Object.assign(grid.changedRow, row);
+            grid.refreshState();
+            res = false;
+            alert(message || 'Error!');
+        });
+
+        return res;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    keyCellAdd(selected) {
+        const grid = this;
+        return selected ? '1' : grid.stateind;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    isRowChanged(row, secondRow) {
+        const grid = this;
+        secondRow = secondRow || grid.changedRow;
+
+        if (!secondRow) return false;
+
+        let res = false;
+        for (let col of grid.columns) {
+            if (secondRow[col.name] !== row[col.name]) return true;
+        }
+
+        return res;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getNewRow() {
+        const grid = this;
+
+        return new Promise(function (resolve, reject) {
+            const newRow = {};
+            for (let col of grid.columns) {
+                newRow[col.name] = '';
+            }
+            newRow[grid.keyField] = -1;
+            resolve(newRow);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    saveRow(e) {
+        const grid = this;
+
+        if (!grid.isRowChanged(e.row)) return new Promise(function (resolve) { resolve(true); });
+
+        return new Promise(function (resolve, reject) {
+            e.row = e.changedRow;
+            resolve(true);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    deleteRow(e) {
+        const grid = this;
+        e.row = e.row || grid.selectedRow();
+
+        return new Promise(function (resolve, reject) {
+            grid.rows = grid.rows.filter(item => item != e.row);
+            resolve(true);
+        });
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    getGridSettingsList() {
+        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: 5, text: grid.translate('Export to CSV', 'grid-menu') });
+        }
+
+        return res;
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    onSettingsItemClick(itemId) {
+        super.onSettingsItemClick(itemId);
+        const grid = this;
+
+        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;
+
+        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);
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+}