META-INF.resources.js.components.ModelBuilder.LeftSidebar.LeftSidebarTreeView.tsx Maven / Gradle / Ivy
The newest version!
/**
* SPDX-FileCopyrightText: (c) 2023 Liferay, Inc. https://liferay.com
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
*/
import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import {Text, TreeView} from '@clayui/core';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import Icon from '@clayui/icon';
import {ClayTooltipProvider} from '@clayui/tooltip';
import {API, stringUtils} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import {openToast} from 'frontend-js-components-web';
import {sub} from 'frontend-js-web';
import React from 'react';
import {Node, useStoreState, useZoomPanHelper} from 'react-flow-renderer';
import {getUpdatedModelBuilderStructurePayload} from '../../ViewObjectDefinitions/objectDefinitionUtil';
import {useObjectFolderContext} from '../ModelBuilderContext/objectFolderContext';
import {TYPES} from '../ModelBuilderContext/typesEnum';
import {LeftSidebarItem, LeftSidebarObjectDefinitionItem} from '../types';
import './LeftSidebar.scss';
const TYPES_TO_SYMBOLS = {
dummyObjectDefinition: 'exclamation-circle',
linkedObjectDefinition: 'link',
objectDefinition: 'catalog',
objectFolder: 'folder',
};
export default function LeftSidebarTreeView({
expandedKeys,
leftSidebarOtherObjectFoldersItems,
leftSidebarSelectedObjectFolderItem,
setExpandedKeys,
showActions,
}: {
expandedKeys: Set;
leftSidebarOtherObjectFoldersItems: LeftSidebarItem[];
leftSidebarSelectedObjectFolderItem: LeftSidebarItem;
setExpandedKeys: React.Dispatch>>;
showActions?: boolean;
}) {
const [{baseResourceURL, selectedObjectFolder}, dispatch] =
useObjectFolderContext();
const {setCenter} = useZoomPanHelper();
const {edges, nodes} = useStoreState((state) => state);
const handleMove = async ({
objectDefinitionId,
objectFolderName,
}: {
objectDefinitionId: number;
objectFolderName: string;
}) => {
const allObjectFolders = await API.getAllObjectFolders();
if (allObjectFolders) {
const {items: objectFolders} = allObjectFolders;
const currentObjectFolder = objectFolders.find(
(objectFolder) => objectFolder.name === objectFolderName
);
const currentObjectFolderObjectDefinitions =
await API.getObjectDefinitions(
`filter=objectFolderExternalReferenceCode eq '${currentObjectFolder?.externalReferenceCode}'`
);
let objectDefinitionToBeMoved =
currentObjectFolderObjectDefinitions.find(
(currentObjectFolderObjectDefinition) =>
currentObjectFolderObjectDefinition.id ===
objectDefinitionId
);
if (objectDefinitionToBeMoved) {
objectDefinitionToBeMoved = {
...objectDefinitionToBeMoved,
objectFolderExternalReferenceCode:
selectedObjectFolder.externalReferenceCode,
};
try {
(await API.save({
item: objectDefinitionToBeMoved,
method: 'PATCH',
returnValue: true,
url: `/o/object-admin/v1.0/object-definitions/${objectDefinitionToBeMoved?.id}`,
})) as ObjectDefinition;
setTimeout(async () => {
const payload =
await getUpdatedModelBuilderStructurePayload(
baseResourceURL,
selectedObjectFolder.name
);
dispatch({
payload: {...payload, dispatch},
type: TYPES.UPDATE_MODEL_BUILDER_STRUCTURE,
});
}, 200);
openToast({
message: sub(
Liferay.Language.get('x-was-moved-successfully'),
`${Liferay.Util.escapeHTML(
stringUtils.getLocalizableLabel({
fallbackLanguageId:
objectDefinitionToBeMoved.defaultLanguageId,
labels: objectDefinitionToBeMoved.label,
})
)}`
),
type: 'success',
});
}
catch (error) {}
}
}
};
const onClickGoToFolder = (selectedObjectFolderName: string) => {
dispatch({
payload: {
objectFolderName: selectedObjectFolderName,
},
type: TYPES.SET_OBJECT_FOLDER_NAME,
});
};
const linkedObjectDefinitions =
leftSidebarSelectedObjectFolderItem.leftSidebarObjectDefinitionItems?.filter(
(leftSidebarObjectDefinitionItem) =>
leftSidebarObjectDefinitionItem.type ===
'linkedObjectDefinition'
);
const newLeftSidebarOtherObjectFolderItems =
leftSidebarOtherObjectFoldersItems.map(
(leftSidebarObjectFolderItem) => {
const newLeftSidebarObjectDefinitionItems =
leftSidebarObjectFolderItem.leftSidebarObjectDefinitionItems?.map(
(leftSidebarObjectDefinitionItem) => {
const linkedObjectDefinition =
linkedObjectDefinitions?.find(
(linkedObjectDefinition) =>
linkedObjectDefinition.id ===
leftSidebarObjectDefinitionItem.id
);
if (linkedObjectDefinition) {
return {
...leftSidebarObjectDefinitionItem,
linked: true,
};
}
return leftSidebarObjectDefinitionItem;
}
);
return {
...leftSidebarObjectFolderItem,
leftSidebarObjectDefinitionItems:
newLeftSidebarObjectDefinitionItems,
};
}
);
return (
expandedKeys={expandedKeys}
items={
showActions
? newLeftSidebarOtherObjectFolderItems
: [leftSidebarSelectedObjectFolderItem]
}
nestedKey="leftSidebarObjectDefinitionItems"
onExpandedChange={setExpandedKeys}
onSelect={(item) => {
if (
!showActions &&
selectedObjectFolder.objectFolderItems?.find(
(objectFolderItem) =>
objectFolderItem.objectDefinitionExternalReferenceCode ===
(item as LeftSidebarObjectDefinitionItem)
.externalReferenceCode
)
) {
dispatch({
payload: {
objectDefinitionNodes: nodes,
objectRelationshipEdges: edges,
selectedObjectDefinitionId: (
item as LeftSidebarObjectDefinitionItem
).id.toString(),
},
type: TYPES.SET_SELECTED_OBJECT_DEFINITION_NODE,
});
const selectedObjectDefinitionNode = (
nodes as Node[]
).find(
(objectDefinitionNode) =>
objectDefinitionNode.data?.name ===
(item as LeftSidebarObjectDefinitionItem).name
);
if (selectedObjectDefinitionNode) {
const x =
selectedObjectDefinitionNode.__rf.position.x +
selectedObjectDefinitionNode.__rf.width / 2;
const y =
selectedObjectDefinitionNode.__rf.position.y +
selectedObjectDefinitionNode.__rf.height / 2;
setCenter(x, y, 1.2);
}
}
}}
showExpanderOnHover={false}
>
{
// @ts-ignore
(leftSidebarItem: LeftSidebarItem) => (
{leftSidebarItem.name}
{leftSidebarItem.objectFolderName !==
selectedObjectFolder.name && (
onClickGoToFolder(
leftSidebarItem.objectFolderName
)
}
size="sm"
title={Liferay.Language.get(
'go-to-folder'
)}
>
)}
{!showActions && (
{
event.stopPropagation();
dispatch({
payload: {
hiddenObjectFolderObjectDefinitionNodes:
leftSidebarItem.hiddenObjectFolderObjectDefinitionNodes,
leftSidebarItem,
objectDefinitionNodes:
nodes,
objectRelationshipEdges:
edges,
},
type: TYPES.BULK_CHANGE_NODE_VIEW,
});
}}
symbol={
leftSidebarItem.hiddenObjectFolderObjectDefinitionNodes
? 'hidden'
: 'view'
}
/>
)}
{({
hiddenObjectDefinitionNode,
id,
kebabOptions,
label,
linked,
name,
selected,
type,
}) => (
) : (
<>
handleMove(
{
objectDefinitionId:
id,
objectFolderName:
leftSidebarItem.objectFolderName,
}
),
symbolLeft:
'move-folder',
},
]}
trigger={
}
/>
)
) : (
{
event.stopPropagation();
dispatch({
payload: {
hiddenObjectDefinitionNode,
objectDefinitionId:
id,
objectDefinitionName:
name,
objectDefinitionNodes:
nodes,
objectRelationshipEdges:
edges,
selectedSidebarItem:
leftSidebarItem,
},
type: TYPES.CHANGE_NODE_VIEW,
});
}}
symbol={
hiddenObjectDefinitionNode
? 'hidden'
: 'view'
}
/>
)
}
active={selected}
className={classNames({
'lfr-objects__model-builder-left-sidebar-item':
selected,
'lfr-objects__model-builder-left-sidebar-item--danger':
type ===
'dummyObjectDefinition',
'lfr-objects__model-builder-left-sidebar-item-linked':
linked,
})}
disabled={hiddenObjectDefinitionNode}
>
)}
)
}
);
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy