@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/search-statement/ConditionBuilder.tsx

@@ -0,0 +1,750 @@
+import React from 'react';
+import {
+	InputMapState,
+	ProjectState,
+	searchStatementDefs,
+	searchStatementState as searchStatementStateLib,
+} from '@elyx-code/project-logic-tree';
+import {
+	Autocomplete,
+	Box,
+	IconButton,
+	TextField,
+	Tooltip as MuiTooltip,
+} from '@mui/material';
+import { useSearchStatementContext } from './search-statement-context';
+import DropdownMenuPopup from '../../../lib/dropdown/DropdownMenuPopup';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import { ValueSelector } from './ValueSelector';
+import WarningIcon from '../../../assets/warning-sign-24px.png';
+
+const { ColumnRef, WhereStatement } = searchStatementStateLib;
+const { SQLFunctionCategory, WhereStatementOperator } = searchStatementDefs;
+
+type ColumnRef = searchStatementStateLib.ColumnRef;
+type WhereStatement = searchStatementStateLib.WhereStatement;
+type WhereStatementOperator = searchStatementDefs.WhereStatementOperator;
+
+export function resolveOperatorName(operator: WhereStatementOperator): string {
+	switch (operator) {
+		case WhereStatementOperator.Equal:
+			return 'Equals';
+		case WhereStatementOperator.NotEqual:
+			return 'Not equal to';
+		case WhereStatementOperator.BiggerThan:
+			return 'Is greater than';
+		case WhereStatementOperator.BiggerThanOrEqualTo:
+			return 'Is greater than or equal';
+		case WhereStatementOperator.SmallerThan:
+			return 'Is less than';
+		case WhereStatementOperator.SmallerThanOrEqualTo:
+			return 'Is less than or equal';
+		case WhereStatementOperator.In:
+			return 'Is in';
+		case WhereStatementOperator.Like:
+			return 'Like pattern';
+		case WhereStatementOperator.NotLike:
+			return 'Not like pattern';
+		default: {
+			const operatorKey = Object.keys(WhereStatementOperator).find(
+				(key) => (WhereStatementOperator as any)[key] === operator,
+			);
+			return operatorKey?.replace(/_/g, ' ').toLowerCase() || '';
+		}
+	}
+}
+
+const ConditionBuilderRow = ({
+	index,
+	parent,
+	condition,
+	onChange,
+	options,
+}: {
+	index: number;
+	parent?: string;
+	condition: WhereStatement;
+	onChange: (value: WhereStatement) => void;
+	options: (InputMapState | ColumnRef)[];
+}) => {
+	const CLAUSE_ROW_ID =
+		'condition-builder--' +
+		(condition?.id || ProjectState.UUID.uuid()) +
+		'--row';
+	const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+	const disabledFunctionsInWhere = [
+		SQLFunctionCategory.Aggregate,
+		SQLFunctionCategory.TableValued,
+	];
+
+	return (
+		<>
+			<div style={{ display: 'flex', gap: 12, alignItems: 'stretch' }}>
+				{/* CHANGED FROM span TO div, removed height: 100% */}
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						// paddingTop: 3,
+					}}
+				>
+					{index === 0 ? (
+						<div
+							style={{
+								width: 1,
+								height: 16.5,
+								backgroundColor: 'transparent',
+								marginLeft: 5,
+							}}
+						/>
+					) : (
+						<div
+							style={{
+								width: 1,
+								height: 16.5,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: 5,
+							}}
+						/>
+					)}
+
+					{/* CHANGED FROM span TO div */}
+					<div style={{ display: 'flex', alignItems: 'center' }}>
+						{!!parent && (
+							<div
+								style={{
+									width: 2,
+									height: 1,
+									backgroundColor: 'rgba(0,0,0,0.54)',
+								}}
+							/>
+						)}
+						<div
+							style={{
+								width: 7,
+								height: 7,
+								borderRadius: 1,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: !!parent ? 0 : 2,
+							}}
+						/>
+					</div>
+
+					{/* RELY PURELY ON flexGrow: 1 */}
+					{condition.isValid ? (
+						<div
+							style={{
+								width: 1,
+								flexGrow: 1,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: 5,
+								minHeight: 16.5,
+							}}
+						/>
+					) : (
+						<div
+							style={{
+								width: 1,
+								flexGrow: 1,
+								backgroundColor: 'transparent',
+								marginLeft: 5,
+								minHeight: 16.5,
+							}}
+						/>
+					)}
+				</div>
+
+				<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+					<ValueSelector
+						value={condition.left as any}
+						side='left'
+						onChange={(newValue) => {
+							condition.left = newValue as any;
+							onChange(condition);
+						}}
+						options={options}
+						disabledFunctionCategories={disabledFunctionsInWhere}
+						horizontalSeparator={
+							condition.left?.type ===
+							searchStatementDefs.SearchStatementNodeType.FunctionCall
+						}
+					/>
+
+					<Autocomplete
+						disablePortal
+						options={Object.values(WhereStatementOperator).map(
+							(key) => ({ key }) as { key: WhereStatementOperator },
+						)}
+						sx={{ width: 200 }}
+						value={{ key: condition.operator }}
+						onChange={(e, newValue) => {
+							condition.operator =
+								(newValue?.key as WhereStatementOperator) || null;
+							onChange(condition);
+						}}
+						getOptionLabel={(option) =>
+							resolveOperatorName(option.key as WhereStatementOperator)
+						}
+						renderOption={(props, option) => {
+							const { key, ...optionProps } = props;
+							return (
+								<Box
+									key={key}
+									component='li'
+									sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+									{...optionProps}
+								>
+									<div style={{ display: 'flex', flexDirection: 'column' }}>
+										<div
+											style={{ display: 'flex', alignItems: 'center', gap: 8 }}
+										>
+											{resolveOperatorName(
+												option.key as WhereStatementOperator,
+											)}
+										</div>
+										<p
+											style={{
+												margin: 0,
+												fontSize: 10,
+												color: 'rgba(0,0,0,0.54)',
+											}}
+										>
+											{option.key}
+										</p>
+									</div>
+								</Box>
+							);
+						}}
+						renderInput={(params) => (
+							<TextField {...params} size='small' label='Select operator' />
+						)}
+					/>
+
+					<ValueSelector
+						value={condition.right as any}
+						side='right'
+						onChange={(newValue) => {
+							condition.right = newValue as any;
+							onChange(condition);
+						}}
+						options={options}
+						disabledFunctionCategories={disabledFunctionsInWhere}
+					/>
+
+					<IconButton
+						id={CLAUSE_ROW_ID + '--menu-button'}
+						size='small'
+						style={{ width: 22, height: 22, marginTop: 8 }}
+						onClick={() => setIsMenuOpen(!isMenuOpen)}
+					>
+						<i className='fas fa-ellipsis-v' />
+					</IconButton>
+
+					{!condition.isValid && (
+						<div style={{ marginTop: 8 }}>
+							<MuiTooltip
+								placement='bottom'
+								enterDelay={300}
+								leaveDelay={200}
+								arrow
+								title={
+									<>
+										This condition is not fully resolved.
+										<br />
+										If the condition is not resolved it will be ignored.
+									</>
+								}
+							>
+								<img
+									className='search-statement__error-icon'
+									src={WarningIcon}
+								/>
+							</MuiTooltip>
+						</div>
+					)}
+				</div>
+			</div>
+
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: `#${CLAUSE_ROW_ID}--menu-button`,
+					placement: 'right',
+					open: isMenuOpen,
+				}}
+				options={[
+					{
+						onClick: async () => {
+							condition.remove();
+							onChange(null as any);
+						},
+						label: 'Delete',
+						color: 'error',
+						iconEnd: 'fa-solid fa-trash-can',
+						tooltip: 'Click to delete this part of the statement',
+					},
+				]}
+			/>
+		</>
+	);
+};
+
+const ConditionBuilder = ({
+	parent,
+	condition,
+	onChange,
+	options,
+}: {
+	parent?: string;
+	condition: WhereStatement;
+	onChange: (value: WhereStatement) => void;
+	options: (InputMapState | ColumnRef)[];
+}) => {
+	const { searchStatementState, entity } = useSearchStatementContext();
+
+	const CLAUSE_ID =
+		'condition-builder--' + (condition?.id || ProjectState.UUID.uuid());
+
+	const conditions: { operator: 'and' | 'or'; condition: WhereStatement }[] =
+		!condition
+			? []
+			: [
+					...condition.and.map((c) => ({
+						operator: 'and' as 'and' | 'or',
+						condition: c,
+					})),
+					...condition.or.map((c) => ({
+						operator: 'or' as 'and' | 'or',
+						condition: c,
+					})),
+				];
+
+	const disabled = !entity.editable;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			{!!condition && !condition.and.length && !condition.or.length && (
+				<>
+					<ConditionBuilderRow
+						options={options}
+						index={0}
+						parent={parent}
+						condition={condition}
+						onChange={(nestedCondition) => {
+							onChange(nestedCondition);
+						}}
+					/>
+
+					{condition.isValid && (
+						<>
+							{/* vertical centered line */}
+							{!!parent && (
+								<div
+									id='condition-builder__vertical-line-after-root-condition'
+									style={{
+										width: 1,
+										height: 4,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+										marginLeft: 5,
+									}}
+								/>
+							)}
+
+							<span
+								className='condition-builder__add-condition-between__container'
+								style={{
+									display: 'flex',
+									gap: 6,
+									alignItems: 'center',
+								}}
+							>
+								<button
+									id={`${CLAUSE_ID}--add-first-nested-condition`}
+									className='condition-builder__add-condition-between__button'
+									disabled={disabled}
+									style={{
+										width: 11,
+										height: 11,
+									}}
+								>
+									<i className='fas fa-plus' />
+								</button>
+
+								<hr
+									className='condition-builder__add-condition-between__line'
+									style={{
+										width: 630,
+										backgroundColor: 'var(--color-main-primary)',
+										color: 'var(--color-main-primary)',
+										borderTop: '2px solid var(--color-main-primary)',
+										maxWidth: '100%',
+										margin: 0,
+									}}
+								/>
+							</span>
+
+							<DropdownMenuPopup
+								popupOptions={{
+									anchorQuerySelector: `#${CLAUSE_ID}--add-first-nested-condition`,
+									placement: 'bottom',
+								}}
+								options={[
+									{
+										disabled: disabled,
+										onClick: async () => {
+											const newSiblingWhereStatement = new WhereStatement(
+												searchStatementState,
+											);
+
+											const oldSelfClone = new WhereStatement(
+												searchStatementState,
+											);
+
+											oldSelfClone.left = condition.left;
+											oldSelfClone.right = condition.right;
+											oldSelfClone.operator = condition.operator;
+
+											newSiblingWhereStatement.parent = condition;
+											oldSelfClone.parent = condition;
+
+											condition.and = [
+												...(condition.and || []),
+												oldSelfClone,
+												newSiblingWhereStatement,
+											];
+
+											condition.left = null;
+											condition.right = null;
+											condition.operator = null;
+
+											onChange?.(condition);
+										},
+										label: `Add 'AND' condition`,
+										color: 'primary',
+										iconEnd: 'fa-solid fa-plus',
+										tooltip: 'Click to add',
+									},
+									{
+										disabled: disabled,
+										onClick: async () => {
+											const newSiblingWhereStatement = new WhereStatement(
+												searchStatementState,
+											);
+
+											const oldSelfClone = new WhereStatement(
+												searchStatementState,
+											);
+
+											oldSelfClone.left = condition.left;
+											oldSelfClone.right = condition.right;
+											oldSelfClone.operator = condition.operator;
+
+											newSiblingWhereStatement.parent = condition;
+											oldSelfClone.parent = condition;
+
+											condition.or = [
+												...(condition.or || []),
+												oldSelfClone,
+												newSiblingWhereStatement,
+											];
+
+											condition.left = null;
+											condition.right = null;
+											condition.operator = null;
+
+											onChange?.(condition);
+										},
+										label: `Add 'OR' condition`,
+										color: 'primary',
+										iconEnd: 'fa-solid fa-plus',
+										tooltip: 'Click to add',
+									},
+								]}
+							/>
+						</>
+					)}
+				</>
+			)}
+			{conditions.map((nestedConditionItem, index) => (
+				<div
+					key={nestedConditionItem.condition.id}
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+					}}
+				>
+					<span
+						style={{
+							display: 'flex',
+						}}
+					>
+						<span
+							key={index}
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+							}}
+						>
+							{index === 0 ? (
+								<div
+									id={`condition-builder__vertical-line-before-operator-keyword--${index}`}
+									style={{
+										width: 1,
+										height: 17,
+										backgroundColor: 'transparent',
+										marginLeft: 5,
+									}}
+								/>
+							) : (
+								<div
+									id={`condition-builder__vertical-line-before-operator-keyword--${index}`}
+									style={{
+										width: 1,
+										height: 16,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+										marginLeft: 5,
+									}}
+								/>
+							)}
+
+							<span
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+								}}
+							>
+								{index !== 0 ? (
+									<p
+										style={{
+											textTransform: 'uppercase',
+											fontSize: 8,
+											color: 'rgba(0,0,0,0.54)',
+											margin: 0,
+										}}
+									>
+										{nestedConditionItem.operator?.toUpperCase()}
+									</p>
+								) : (
+									<span
+										style={{
+											display: 'flex',
+											alignItems: 'center',
+										}}
+									>
+										{!!parent && (
+											<span
+												style={{
+													width: 2,
+													height: 1,
+													backgroundColor: 'rgba(0,0,0,0.54)',
+												}}
+											/>
+										)}
+										<div
+											style={{
+												width: 7,
+												height: 7,
+												borderRadius: 1,
+												backgroundColor: 'rgba(0,0,0,0.54)',
+												marginLeft: !!parent ? 0 : 2,
+											}}
+										/>
+									</span>
+								)}
+
+								{/* Horizontal line to connect to the nested condition builder */}
+								<span
+									style={{
+										width:
+											index !== 0
+												? nestedConditionItem.operator?.toUpperCase() === 'AND'
+													? 8
+													: 12
+												: 18,
+										height: 1,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+										flexGrow: 1,
+										marginLeft: index !== 0 ? 2 : 0,
+									}}
+								/>
+							</span>
+							<div
+								id={`condition-builder__vertical-line-after-operator-keyword--${index}`}
+								style={{
+									width: 1,
+									backgroundColor: 'rgba(0,0,0,0.54)',
+									flexGrow: 1,
+									marginLeft: 5,
+								}}
+							/>
+						</span>
+
+						<ConditionBuilder
+							parent={CLAUSE_ID}
+							condition={nestedConditionItem.condition}
+							options={options}
+							onChange={(value) => {
+								onChange(condition);
+							}}
+						/>
+					</span>
+
+					{!!parent && (
+						<div
+							id='condition-builder__vertical-line-after-root-condition'
+							style={{
+								width: 1,
+								height: 4,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: 5,
+							}}
+						/>
+					)}
+
+					{condition.isValid && (
+						<>
+							<span
+								className='condition-builder__add-condition-between__container'
+								style={{
+									display: 'flex',
+									gap: 6,
+									alignItems: 'center',
+								}}
+							>
+								<button
+									id={`${nestedConditionItem.condition.id}--add-nest-condition-in-group`}
+									className='condition-builder__add-condition-between__button'
+									disabled={disabled}
+									style={{
+										width: 11,
+										height: 11,
+									}}
+								>
+									<i className='fas fa-plus' />
+								</button>
+
+								<hr
+									className='condition-builder__add-condition-between__line'
+									style={{
+										width: 630,
+										backgroundColor: 'var(--color-main-primary)',
+										color: 'var(--color-main-primary)',
+										borderTop: '2px solid var(--color-main-primary)',
+										maxWidth: '100%',
+										margin: 0,
+									}}
+								/>
+							</span>
+
+							<DropdownMenuPopup
+								popupOptions={{
+									anchorQuerySelector: `#${nestedConditionItem.condition.id}--add-nest-condition-in-group`,
+									placement: 'bottom',
+								}}
+								options={[
+									{
+										disabled: disabled,
+										onClick: async () => {
+											const newSiblingStatement = new WhereStatement(
+												searchStatementState,
+											);
+
+											newSiblingStatement.parent = condition;
+
+											condition.and = [
+												...(condition.and || []),
+												newSiblingStatement,
+											];
+
+											onChange?.(newSiblingStatement);
+										},
+										label: `Add 'AND' condition`,
+										color: 'primary',
+										iconEnd: 'fa-solid fa-plus',
+										tooltip: 'Click to add',
+									},
+									{
+										disabled: disabled,
+										onClick: async () => {
+											const newSiblingStatement = new WhereStatement(
+												searchStatementState,
+											);
+
+											newSiblingStatement.parent = condition;
+
+											condition.or = [
+												...(condition.or || []),
+												newSiblingStatement,
+											];
+
+											onChange?.(newSiblingStatement);
+										},
+										label: `Add 'OR' condition`,
+										color: 'primary',
+										iconEnd: 'fa-solid fa-plus',
+										tooltip: 'Click to add',
+									},
+								]}
+							/>
+						</>
+					)}
+				</div>
+			))}
+
+			{!condition && (
+				<>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: 8,
+						}}
+					>
+						<button
+							id={`${CLAUSE_ID}--add-root-condition`}
+							className='condition-builder__add-condition-between__button'
+							disabled={disabled}
+							onClick={() => {
+								if (!condition) {
+									const newCondition = new WhereStatement(searchStatementState);
+									onChange?.(newCondition);
+								} else {
+									onChange?.(condition);
+								}
+							}}
+							style={{
+								width: 11,
+								height: 11,
+							}}
+						>
+							<i className='fas fa-plus' />
+						</button>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							No conditions
+						</p>
+					</div>
+
+					<Tooltip
+						anchorQuerySelector={`#${CLAUSE_ID}--add-root-condition`}
+						placement='bottom'
+					>
+						Click to add the first condition
+					</Tooltip>
+				</>
+			)}
+		</div>
+	);
+};
+
+export default ConditionBuilder;