@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
96 lines (95 loc) • 4.38 kB
JavaScript
import * as React from 'react';
import { useSelector } from 'react-redux';
import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
import Panel from '../../components/Panel';
import { Box, Flex } from 'rebass';
import { useAdaptable } from '../AdaptableContext';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { AdaptableButtonComponent } from '../Components/AdaptableButton';
import FormatHelper from '../../Utilities/Helpers/FormatHelper';
const tableDOMProps = {
style: {
minHeight: 160,
minWidth: '10rem',
},
};
const columnTypes = {
default: {
align: 'start',
defaultFlex: 1,
defaultSortable: false,
},
};
const headerOptions = {
alwaysReserveSpaceForSortIcon: false,
};
const CellComments = (props) => {
const adaptable = useAdaptable();
const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
const formatDate = (date, format) => {
return FormatHelper.DateFormatter(date, { Pattern: format });
};
const columnsMap = React.useMemo(() => {
const columns = {
author: {
field: 'Author',
maxWidth: 100,
valueGetter: (params) => params.data.Author.UserName,
},
timestamp: {
field: 'Timestamp',
maxWidth: 150,
valueGetter: (params) => {
return formatDate(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
},
},
text: {
header: 'Text',
field: 'Value',
defaultFlex: 3,
},
};
return columns;
}, []);
const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
const primaryKeyHeader = React.useMemo(() => {
const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
}, []);
const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
return (React.createElement(Panel, { mb: 2, header: React.createElement(Flex, { width: "100%", alignItems: "center" },
React.createElement(Box, { mr: 2 },
React.createElement("b", null, "Cell Value:"),
" ",
cellValue),
React.createElement(Box, { mr: 2 },
React.createElement("b", null,
primaryKeyHeader,
":"),
" ",
props.commentThread.PrimaryKeyValue),
React.createElement(Box, null,
React.createElement("b", null, "Column:"),
" ",
columnFriendlyName),
React.createElement(Box, { flex: 1 }),
React.createElement(AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
adaptable.api.internalApi.getAnnotationsService().showPopup({
ColumnId: props.commentThread.ColumnId,
PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
}, true);
} }),
React.createElement(AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
adaptable.api.commentApi.deleteCommentThread(props.commentThread);
} })) },
React.createElement(DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
React.createElement(InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
};
export const CommentsPopup = (props) => {
const commentThreads = useSelector((state) => {
return state.Comment.CommentThreads;
});
return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads ?? []).map((commentThread, index) => {
return React.createElement(CellComments, { key: commentThread?.Uuid ?? index, commentThread: commentThread });
})));
};