@adaptabletools/adaptable/src/View/Note/NotePopup.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import { useSelector } from 'react-redux';
import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
import { GetAllNotesSelector } from '../../Redux/ActionsReducers/NoteRedux';
import { useAdaptable } from '../AdaptableContext';
import { AdaptableButtonComponent } from '../Components/AdaptableButton';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
import FormatHelper from '../../Utilities/Helpers/FormatHelper';
const tableDOMProps = {
    style: {
        height: '100%',
        minWidth: '10rem',
        // minHeight: 600,
    },
};
const columnTypes = {
    default: {
        align: 'start',
        defaultFlex: 1,
        defaultSortable: false,
        style: { fontSize: 'var(--ab-font-size-3)' },
    },
};
const headerOptions = {
    alwaysReserveSpaceForSortIcon: false,
};
export const NotePopup = (props) => {
    const adaptable = useAdaptable();
    const primaryKeyHeader = adaptable.api.columnApi.getPrimaryKeyColumn()
        ? adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId)
        : StringExtensions.Humanize(adaptable.adaptableOptions.primaryKey);
    const allNotes = useSelector((state) => GetAllNotesSelector(state.Note));
    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
    const formatDate = (date, format) => {
        return FormatHelper.DateFormatter(date, { Pattern: format });
    };
    const columnsMap = React.useMemo(() => {
        const columns = {
            primaryKey: {
                field: 'PrimaryKeyValue',
                header: primaryKeyHeader,
            },
            column: {
                field: 'ColumnId',
                header: 'Column',
                valueGetter: (params) => {
                    return adaptable.api.columnApi.getFriendlyNameForColumnId(params.data.ColumnId);
                },
            },
            text: {
                field: 'Text',
                header: 'Text',
                defaultEditable: !isReadOnlyModule,
                defaultFlex: 3,
            },
            timestamp: {
                field: 'Timestamp',
                valueGetter: (params) => {
                    return formatDate(params.data.Timestamp, adaptable.api.noteApi.internalApi.getNotesDateFormat());
                },
            },
            delete: {
                defaultWidth: 50,
                render: (params) => {
                    return (React.createElement(AdaptableButtonComponent, { disabled: isReadOnlyModule, variant: "text", icon: "delete", onClick: () => {
                            const note = adaptable.api.noteApi.getNoteByUuid(params.data.Uuid);
                            adaptable.api.noteApi.deleteNote(note);
                        } }));
                },
            },
        };
        return columns;
    }, []);
    return (React.createElement(PopupPanel, { headerText: 'Notes', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
        React.createElement(DataSource, { data: allNotes, primaryKey: "Uuid", onDataMutations: (params) => {
                for (const mutation of params.mutations) {
                    const [uuid, changes] = mutation;
                    for (const change of changes) {
                        if (change.type === 'update') {
                            const data = change.data;
                            const prevNote = allNotes.find((x) => x.Uuid === uuid);
                            if (prevNote.Text !== data.Text) {
                                adaptable.api.noteApi.updateNoteText(data.Text, prevNote);
                            }
                        }
                    }
                }
            } },
            React.createElement(InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
};