@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
80 lines (79 loc) • 4.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useSelector } from 'react-redux';
import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
import Panel from '../../components/Panel';
import { useAdaptable } from '../AdaptableContext';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { AdaptableButtonComponent } from '../Components/AdaptableButton';
import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
import { Box, Flex } from '../../components/Flex';
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') ===
ACCESS_LEVEL_READ_ONLY;
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 (_jsx(Panel, { className: "twa:mb-2", header: _jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsxs(Box, { className: "twa:mr-2", children: [_jsx("b", { children: "Cell Value:" }), " ", cellValue] }), _jsxs(Box, { className: "twa:mr-2", children: [_jsxs("b", { children: [primaryKeyHeader, ":"] }), " ", props.commentThread.PrimaryKeyValue] }), _jsxs(Box, { children: [_jsx("b", { children: "Column:" }), " ", columnFriendlyName] }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
adaptable.api.internalApi.getAnnotationsService().showPopup({
ColumnId: props.commentThread.ColumnId,
PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
}, true);
} }), _jsx(AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
adaptable.api.commentApi.deleteCommentThread(props.commentThread);
} })] }), children: _jsx(DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }) }) }));
};
export const CommentsPopup = (props) => {
const commentThreads = useSelector((state) => {
return state.Comment.CommentThreads;
});
return (_jsx(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage, children: (commentThreads ?? []).map((commentThread, index) => {
return _jsx(CellComments, { commentThread: commentThread }, commentThread?.Uuid ?? index);
}) }));
};