@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/loop/Loop.tsx

@@ -0,0 +1,650 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	DataTypeEntityOption,
+	EntityId,
+	EntityType,
+	ProjectState,
+	resolveEntityName,
+	LoopState,
+	ActionDescriptorState,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	toSentenceCase,
+	StateMutationAction,
+	DataTypeState,
+	getRecursiveParentsIds,
+	translateLogicErrorCodeShort
+} from '@elyx-code/project-logic-tree';
+import {
+	Alert,
+	Autocomplete,
+	TextField,
+	Tooltip as MuiTooltip,
+	Box,
+	Stack,
+	Collapse
+} from '@mui/material';
+import { EditorService } from '../../../services/editor';
+import DataTypeBuilder, {
+	AllowedDataTypeListTypes,
+	ILiteralValueOption
+} from '../../data-type/DataTypeBuilder';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import Button from '../../../lib/button/Button';
+import { useParams } from 'react-router-dom';
+import EntityIcon from '../../entity-icon/EntityIcon';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { DataTypeBuilderOption } from '../../../services/editor/utils';
+import DataTypeIcon from '../../draggable-entity-card/DataTypeIcon';
+
+export interface ILoopProps {
+	project: EditorService;
+	entity?: LoopState;
+	onClose?: (e: any) => void;
+}
+
+export enum LoopError {
+	DeclarationRequired = 'declaration-required',
+	IncompleteDataType = 'incomplete-data-type'
+}
+
+export function fromLoopErrorToReadableMessage(
+	error: LoopError | string
+): string {
+	switch (error) {
+		case LoopError.DeclarationRequired:
+			return 'Declaration is required';
+		case LoopError.IncompleteDataType:
+			return 'The composition of the data type is incomplete. Please fill in all required fields on each data type element.';
+		default:
+			return toSentenceCase(error);
+	}
+}
+
+function calculateLoopCreationFormErrors(
+	entity: LoopState
+): (LoopError | string)[] {
+	const errors: (LoopError | string)[] = [];
+
+	if (!entity.declaration) {
+		errors.push(LoopError.DeclarationRequired);
+	}
+
+	if (!!entity.dataType) {
+		if (!entity.dataType.isResolved) {
+			errors.push(LoopError.IncompleteDataType);
+		}
+
+		const flatErrors = (
+			entity.dataType.toFlat().filter((child) => {
+				if (child.type === EntityType.DataType) {
+					if (child.id === entity.dataType.id) {
+						// This is the root data type, skip
+						return true;
+					}
+
+					const allParentsOfNestedDT = getRecursiveParentsIds(child);
+
+					if (allParentsOfNestedDT.includes(entity.dataType.id)) {
+						// This is a nested data type that creates a circular reference
+						return true;
+					} else {
+						return false;
+					}
+				}
+
+				return false;
+			}) as DataTypeState[]
+		).flatMap((dt) => dt.getShallowErrors());
+
+		if (flatErrors.length > 0) {
+			errors.push(
+				...flatErrors.map((err) => translateLogicErrorCodeShort(err))
+			);
+		}
+	}
+
+	return errors;
+}
+
+// Not all entity types can have inputs with any data type
+// Sometimes, like in the case of a search, the data type of its inputs can only be a primitive type or a list of primitives
+// This function, given an option, will return some metadata that will help it render the option in the data type builder
+export function resolveDataTypeOptionConfigForLoop(
+	option: DataTypeBuilderOption | ILiteralValueOption,
+	input: LoopState
+): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null
+	};
+}
+
+export function resolveDataTypeAsTypeConfigForLoop(input: LoopState): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null
+	};
+}
+
+export function resolveDataTypeLikeConfigForLoop(input: LoopState): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null
+	};
+}
+
+export function resolveDataTypeAsListConfigForLoop(input: LoopState): {
+	allowed: AllowedDataTypeListTypes;
+	tooltip: React.ReactNode;
+} {
+	return {
+		allowed: AllowedDataTypeListTypes.All,
+		tooltip: null
+	};
+}
+
+const Loop: React.FC<ILoopProps> = ({ project, entity: _entity, onClose }) => {
+	const [updateKey, setUpdateKey] = useState(0);
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: LoopState | null =
+		_entity || (project?.logic?.get(entityId) as LoopState | null) || null;
+
+	const [declarationValue, setDeclarationValue] =
+		useState<ActionDescriptorState | null>(entity.declaration || null);
+
+	const [baseFunctionalitySectionOpen, setBaseFunctionalitySectionOpen] =
+		useState(true);
+	const [dataTypeSectionOpen, setDataTypeSectionOpen] = useState(false);
+	const [dataType, _setDataType] = useState<DataTypeState | null>(
+		entity?.dataType || null
+	);
+
+	const [errors, setErrors] = useState<(LoopError | string)[]>(
+		calculateLoopCreationFormErrors(entity)
+	);
+
+	const setDataType = (
+		newDataTypeEntity: DataTypeState | null,
+		changeSet: ChangeSet | null
+	) => {
+		newDataTypeEntity?.setParent(entity, changeSet);
+		entity?.setDataType(newDataTypeEntity, changeSet);
+
+		changeSet?.add(entity, ChangeSetEntityChangeType.Affected);
+
+		_setDataType(newDataTypeEntity);
+		setUpdateKey((prev) => prev + 1);
+
+		project.renderAndCloseChangeSet(changeSet);
+	};
+
+	useEffect(() => {
+		const newErrors = calculateLoopCreationFormErrors(entity);
+		setErrors(newErrors);
+		project.emit(entity.id, {});
+	}, [updateKey, declarationValue]);
+
+	const declarationsOptions = useMemo(() => {
+		const options = project.logic.loopDeclarations;
+
+		return options;
+	}, [entity.parent]);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexGrow: 1,
+				height: '100%',
+				overflowY: 'scroll'
+			}}
+		>
+			{/* We need the 'span' for the react ref */}
+			<span
+				style={{
+					maxHeight: '100%',
+					maxWidth: '100%',
+					flexGrow: 1,
+					height: '100%'
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						height: '100%',
+						gap: '4px',
+						justifyContent: 'space-between'
+					}}
+				>
+					<span
+						style={{
+							maxWidth: '100%',
+							maxHeight: '100%',
+							overflowY: 'scroll',
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%'
+						}}
+					>
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: baseFunctionalitySectionOpen
+									? 20
+									: 0
+							}}
+						>
+							<EntityDialogSectionHeader
+								title="Base functionality"
+								subtitle="Link this loop to built-in functionality"
+								hideShowSuffix="the base functionality section"
+								open={baseFunctionalitySectionOpen}
+								onToggle={() =>
+									setBaseFunctionalitySectionOpen(
+										!baseFunctionalitySectionOpen
+									)
+								}
+							/>
+
+							<Collapse in={baseFunctionalitySectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40
+									}}
+								>
+									<Autocomplete
+										id="declaration"
+										options={declarationsOptions}
+										disabled={!entity.editable}
+										getOptionLabel={(option) =>
+											resolveEntityName(
+												option,
+												project.logic
+											)
+										}
+										isOptionEqualToValue={(option, value) =>
+											option.id === value.id
+										}
+										value={declarationValue}
+										// getOptionDisabled={(option) => {
+										// 	const alreadyImplemented = !!entity.parent.inputs.find(
+										// 		(p) =>
+										// 			p.id !== entity.id && p.implements?.id === option.id
+										// 	);
+
+										// 	return alreadyImplemented;
+										// }}
+										renderOption={(
+											props,
+											option,
+											{ selected }
+										) => {
+											const { key, ...optionProps } =
+												props;
+											return (
+												<MuiTooltip
+													key={key}
+													title={(() => {
+														return '';
+														// const alreadyImplemented =
+														// 	!!entity.parent.inputs.find(
+														// 		(p) =>
+														// 			p.id !== entity.id &&
+														// 			p.implements?.id === option.id
+														// 	);
+
+														// if (alreadyImplemented) {
+														// 	return 'This base input is already implemented by another input in the current node';
+														// }
+													})()}
+													placement="bottom"
+													arrow
+													enterDelay={
+														false ? 100 : 400
+													}
+													leaveDelay={200}
+												>
+													<Box
+														component="li"
+														sx={{
+															'& > img': {
+																mr: 2,
+																flexShrink: 0
+															}
+														}}
+														{...optionProps}
+													>
+														<Stack
+															direction="row"
+															gap={1}
+															alignItems="center"
+														>
+															<EntityIcon
+																entity={option}
+																project={
+																	project
+																}
+															/>
+															{resolveEntityName(
+																option,
+																project.logic
+															)}
+														</Stack>
+													</Box>
+												</MuiTooltip>
+											);
+										}}
+										onChange={(e, newValue) => {
+											const changeSet =
+												project.logic.addChangeSet(
+													new ChangeSet(
+														project.logic,
+														ProjectState.sessionAuthor,
+														new Date().toISOString(),
+														entity,
+														false,
+														StateMutationAction.ChangeLoopType
+													)
+												);
+
+											entity.setDeclaration(newValue);
+											changeSet.add(
+												entity,
+												ChangeSetEntityChangeType.Updated
+											);
+
+											entity.afterAllChildrenInitialized(
+												changeSet
+											);
+
+											setDeclarationValue(newValue);
+
+											project.renderAndCloseChangeSet(
+												changeSet
+											);
+										}}
+										renderInput={(params) => (
+											<TextField
+												{...params}
+												label="Declaration"
+												variant="outlined"
+												size="small"
+											/>
+										)}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)'
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: dataTypeSectionOpen ? 20 : 0
+							}}
+						>
+							<EntityDialogSectionHeader
+								title="Returned Data type"
+								subtitle="Select the type of data that this loop returns"
+								hideShowSuffix="the data type section"
+								open={dataTypeSectionOpen}
+								onToggle={() =>
+									setDataTypeSectionOpen(!dataTypeSectionOpen)
+								}
+								headerStartIcon={
+									<DataTypeIcon
+										entity={entity}
+										project={project}
+									/>
+								}
+							/>
+
+							<Collapse in={dataTypeSectionOpen}>
+								<div
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40
+									}}
+								>
+									<DataTypeBuilder
+										project={project}
+										topParent={entity}
+										dataType={dataType}
+										readOnly={!entity.editable}
+										onChangeSet={() => {
+											const newChangeSet =
+												project.logic.addChangeSet(
+													new ChangeSet(
+														project.logic,
+														ProjectState.sessionAuthor,
+														new Date().toISOString(),
+														entity,
+														false,
+														StateMutationAction.ChangeLoopOutputDataType
+													)
+												);
+
+											return newChangeSet;
+										}}
+										onChange={(
+											newDataTypeEntity,
+											changeSet
+										) => {
+											setDataType(
+												newDataTypeEntity,
+												changeSet
+											);
+										}}
+										lists={
+											resolveDataTypeAsListConfigForLoop(
+												entity
+											).allowed
+										}
+										getOptionDisabled={(option) =>
+											resolveDataTypeOptionConfigForLoop(
+												option,
+												entity
+											).disabled
+										}
+										getListDisabledTooltip={(option) =>
+											resolveDataTypeAsListConfigForLoop(
+												entity
+											).tooltip
+										}
+										getOptionTooltip={(option) =>
+											resolveDataTypeOptionConfigForLoop(
+												option,
+												entity
+											).tooltip
+										}
+										disallowAsType={
+											resolveDataTypeAsTypeConfigForLoop(
+												entity
+											).disabled
+										}
+										getAsTypeDisabledTooltip={() =>
+											resolveDataTypeAsTypeConfigForLoop(
+												entity
+											).tooltip
+										}
+										disallowLike={
+											resolveDataTypeLikeConfigForLoop(
+												entity
+											).disabled
+										}
+										getLikeDisabledTooltip={() =>
+											resolveDataTypeLikeConfigForLoop(
+												entity
+											).tooltip
+										}
+									/>
+								</div>
+							</Collapse>
+						</section>
+					</span>
+
+					{errors.length > 0 && (
+						<div
+							style={{
+								marginTop: 20,
+								marginRight: 40,
+								marginLeft: 80
+							}}
+						>
+							<Alert severity="error">
+								{errors.length === 1 ? (
+									<span
+										style={{
+											display: 'flex',
+											alignItems: 'center',
+											gap: 6
+										}}
+									>
+										<h4
+											style={{
+												margin: 0,
+												display: 'flex'
+											}}
+										>
+											Error:
+										</h4>
+										<p
+											style={{
+												margin: 0,
+												display: 'flex'
+											}}
+										>
+											{fromLoopErrorToReadableMessage(
+												errors[0]
+											)}
+										</p>
+									</span>
+								) : (
+									<>
+										<h4
+											style={{
+												margin: 0
+											}}
+										>
+											Errors
+										</h4>
+										<br className="quarter-space" />
+										<ul
+											style={{
+												listStyleType: 'none',
+												padding: 0
+											}}
+										>
+											{errors.map((error, index) => (
+												<li
+													key={index}
+													style={{
+														display: 'flex',
+														alignItems: 'center'
+													}}
+												>
+													{/* Circle */}
+													<span
+														style={{
+															fontSize: 10,
+															marginRight: 5
+														}}
+													>
+														&#9679;
+													</span>
+													<p
+														style={{
+															margin: 0
+															// fontSize: 10,
+														}}
+													>
+														{fromLoopErrorToReadableMessage(
+															error
+														)}
+													</p>
+												</li>
+											))}
+										</ul>
+									</>
+								)}
+							</Alert>
+						</div>
+					)}
+
+					<div
+						style={{
+							alignSelf: 'flex-start',
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'flex-end',
+							width: '100%',
+							gap: '16px',
+							padding: '0 40px'
+						}}
+					>
+						<Button
+							id="loop-builder--done-button"
+							onClick={(e: any) => {
+								onClose?.(e);
+							}}
+							color="primary"
+							disabled={errors.length > 0}
+						>
+							Done
+						</Button>
+						<Tooltip
+							anchorQuerySelector="#loop-builder--done-button"
+							placement="bottom"
+							openDelay={100}
+						>
+							{errors.length > 0
+								? `Resolve the errors to save the ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[entity.type]
+											.singular
+									)}`
+								: `Save the ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[entity.type]
+											.singular
+									)}`}
+						</Tooltip>
+					</div>
+				</div>
+			</span>
+		</div>
+	);
+};
+
+export default Loop;