@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
125 lines (124 loc) • 9.17 kB
JavaScript
import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Box, Flex } from 'rebass';
import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
import SimpleButton from '../../../components/SimpleButton';
import join from '../../../components/utils/join';
import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
import { useAdaptable } from '../../AdaptableContext';
import { ButtonDelete } from '../Buttons/ButtonDelete';
import { ButtonEdit } from '../Buttons/ButtonEdit';
import { ButtonShare } from '../Buttons/ButtonShare';
import { SuspendToggleButton } from '../Buttons/SuspendToggleButton/SuspendToggleButton';
import { ValueOptionsTags } from '../ValueSelector';
const ICON_SIZE = 26;
const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
export const AdaptableObjectListItemView = (props) => {
const baseClassName = ITEM_BASE_CLASS_NAME;
const dispatch = useDispatch();
const deleteActionProps = {
disabled: props.deleteDisabled,
tooltip: props.deleteTooltip,
iconSize: ICON_SIZE,
ConfirmationMsg: `Are you sure you want to delete this ${props.entityType}?`,
ConfirmationTitle: `Delete ${props.entityType}`,
ConfirmAction: props.deleteAction,
accessLevel: props.accessLevel,
};
if (props.disableDeleteConfirmation) {
deleteActionProps.ConfirmAction = null;
deleteActionProps.onClickAction = () => {
dispatch(props.deleteAction);
};
}
const deleteActionButton = React.createElement(ButtonDelete, { ...deleteActionProps });
return (React.createElement(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", mb: 3, className: join(props.className, baseClassName), style: props.style },
React.createElement(Box, { flex: 1, className: `${baseClassName}__rows` }, props.items.filter?.(Boolean)?.map((tag, index) => {
const labelElement = typeof tag.label === 'function'
? React.createElement(tag.label, { key: index, data: props.abObject })
: tag.label ?? tag.name;
return (React.createElement(Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
!tag.isLabelInline && (React.createElement(Box, { className: `${baseClassName}__label`, mr: 3 },
labelElement,
props.showEditButton && (React.createElement(SimpleButton, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
props.handleOnEdit(tag.name);
} })))),
React.createElement(Box, { flex: 1, className: `${baseClassName}__values` },
typeof tag.view === 'function'
? React.createElement(tag.view, {
data: props.abObject,
module: props.module,
})
: tag.view,
Boolean(tag?.values && tag?.values?.length) && (React.createElement(ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })),
typeof tag.viewAfter === 'function'
? React.createElement(tag.viewAfter, {
data: props.abObject,
module: props.module,
})
: tag.viewAfter)));
})),
props.showActions && (React.createElement(Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
React.createElement(Flex, { justifyContent: "end" },
props.actions,
props.teamSharingActivated && (React.createElement(ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
props.onDelete && (React.createElement(SimpleButton, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })),
props.deleteAction && deleteActionButton,
props.showEditButton && (React.createElement(ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
React.createElement(Box, { flex: 1 }),
props.suspendedEnabled && (React.createElement(Flex, { justifyContent: "end" },
React.createElement(SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })))))));
};
export const AdaptableObjectListItem = (props) => {
const adaptable = useAdaptable();
const dispatch = useDispatch();
const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
const [wizardStepName, setWizardStepName] = React.useState(null);
const viewOptions = props.module?.getViewProperties?.() ?? {};
const EditWizard = viewOptions.getEditWizard?.(props.data.abObject);
const deleteAction = viewOptions?.getDeleteAction?.(props.data.abObject);
const isObjectShareable = props.module.isModuleObjectsShareable();
const teamSharingActivated = isObjectShareable &&
adaptable.api.teamSharingApi.isTeamSharingAvailable() &&
adaptable.api.teamSharingApi.hasTeamSharingFullRights();
const entityType = props.module.moduleInfo.FriendlyName;
const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
const accessLevel = AdaptableHelper.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
const itemClassName = join(props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
`${ITEM_BASE_CLASS_NAME}--is-suspended`);
const handleCloseWizard = React.useCallback(() => {
setIsEditWizardVisible(false);
setWizardStepName(null);
}, []);
const handleOnEdit = React.useCallback((sectionName) => {
if (EditWizard) {
setIsEditWizardVisible(true);
if (sectionName) {
setWizardStepName(sectionName);
}
}
viewOptions?.onOpenEditPopup?.(props.data.abObject);
}, []);
const hasSuspend = Boolean(viewOptions.getSuspendAction);
const actions = viewOptions?.actions?.map?.((component, index) => {
return React.createElement(component, {
data: props.data.abObject,
key: index,
accessLevel,
});
});
const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
const showActions = !props.hideControls;
const showEditButton = Boolean(EditWizard);
const adaptableOpttions = adaptable.api.optionsApi.getAdaptableOptions();
const disableDeleteConfirmationState = useSelector((adaptableState) => InternalRedux.DisableDeleteConfirmationSelector(adaptableState.Internal));
const disableDeleteConfirmation = disableDeleteConfirmationState ||
adaptableOpttions?.userInterfaceOptions?.disableDeleteConfirmation;
return (React.createElement(React.Fragment, null,
React.createElement(AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
isEditWizardVisible && EditWizard && (React.createElement(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))));
};
export const AdaptableObjectList = (props) => {
return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, props?.items?.map((item, index) => (React.createElement(AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
};