@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
108 lines (107 loc) • 9.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
import SimpleButton from '../../../components/SimpleButton';
import { cn } from '../../../lib/utils';
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 { Box, Flex } from '../../../components/Flex';
import { TagList } from '../../../components/Tag/Tag';
import { objectListActionButtonClassName } from './objectListActionButtonStyles';
const ICON_SIZE = 24;
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 ?? 'Delete',
iconSize: ICON_SIZE,
ConfirmationMsg: props.deleteConfirmationMsg ?? `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 = (_jsx(ButtonDelete, { ...deleteActionProps, className: cn(objectListActionButtonClassName('delete'), deleteActionProps.className) }));
return (_jsxs(Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: cn(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [_jsx(Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: 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 (_jsxs(Flex, { "data-name": tag.name, className: `${baseClassName}__row twa:gap-3`, children: [!tag.isLabelInline && (_jsxs(Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap`, children: [labelElement, props.showEditButton && (_jsx(SimpleButton, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property twa:ml-1`, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
props.handleOnEdit(tag.name);
} }))] })), _jsxs(Box, { className: `twa:flex-1 ${baseClassName}__values`, children: [typeof tag.view === 'function'
? React.createElement(tag.view, {
data: props.abObject,
module: props.module,
})
: tag.view, Boolean(tag?.values && tag?.values?.length) ? (_jsx(TagList, { tags: tag.values, variant: tag.tagVariant })) : null, typeof tag.viewAfter === 'function'
? React.createElement(tag.viewAfter, {
data: props.abObject,
module: props.module,
})
: tag.viewAfter] })] }, `${index}-${tag.name}`));
}) }), props.showActions && (_jsx(Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]`, children: _jsxs(Flex, { className: "twa:justify-end twa:items-center twa:gap-1", children: [props.actions, props.teamSharingActivated && (_jsx(ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare, className: objectListActionButtonClassName('share') })), props.showEditButton && (_jsx(ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, className: objectListActionButtonClassName('edit'), onClick: () => props.handleOnEdit() })), props.suspendedEnabled && (_jsx(SuspendToggleButton, { iconSize: ICON_SIZE, className: objectListActionButtonClassName('suspend'), onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })), props.onDelete && (_jsx(SimpleButton, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text", className: objectListActionButtonClassName('delete') })), props.deleteAction ? deleteActionButton : null] }) }))] }));
};
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 deleteConfirmationMsg = viewOptions?.getDeleteConfirmationMsg?.(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 = cn(props.className, 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 (_jsxs(_Fragment, { children: [_jsx(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, deleteConfirmationMsg: deleteConfirmationMsg, 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 && (_jsx(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))] }));
};
export const AdaptableObjectList = (props) => {
return (_jsx("ul", { className: cn(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className), children: props?.items?.map((item, index) => (_jsx(AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
};