@mohsinonxrm/pptb-fetchxml-studio 1.0.0 → 1.0.1

package/src/features/fetchxml/ui/LeftPane/PropertiesPanel/editors/ConditionEditor.tsx

@@ -1,533 +0,0 @@
-/**
- * Property editor for Condition nodes
- * Controls filter criteria: attribute, operator, value
- */
-
-import { useState, useEffect, useMemo } from "react";
-import {
-	Field,
-	Input,
-	Dropdown,
-	Option,
-	Label,
-	Tooltip,
-	Switch,
-	makeStyles,
-	tokens,
-} from "@fluentui/react-components";
-import { Info16Regular } from "@fluentui/react-icons";
-import type { ConditionNode, FetchNode } from "../../../../model/nodes";
-import { AttributePicker } from "../../../../../../shared/components/AttributePicker";
-import { OptionSetValuePicker } from "../../../../../../shared/components/OptionSetValuePicker";
-import { BooleanValuePicker } from "../../../../../../shared/components/BooleanValuePicker";
-import { NumericInputPicker } from "../../../../../../shared/components/NumericInputPicker";
-import { DateTimeInputPicker } from "../../../../../../shared/components/DateTimeInputPicker";
-import { BetweenInputPicker } from "../../../../../../shared/components/BetweenInputPicker";
-import { MultiValuePicker } from "../../../../../../shared/components/MultiValuePicker";
-import {
-	getOperatorsForAttributeType,
-	operatorRequiresValue,
-	type OperatorDefinition,
-} from "../../../../model/operators";
-import {
-	loadEntityAttributes,
-	loadAttributeDetailedMetadata,
-} from "../../../../api/dataverseMetadata";
-import type { AttributeMetadata } from "../../../../api/pptbClient";
-import {
-	collectLinkEntityReferences,
-	isConditionInRootEntityFilter,
-} from "../../../../model/treeUtils";
-import { ValueOfPicker } from "./ValueOfPicker";
-
-const useStyles = makeStyles({
-	container: {
-		display: "flex",
-		flexDirection: "column",
-		gap: tokens.spacingVerticalM,
-		padding: tokens.spacingVerticalM,
-	},
-	section: {
-		display: "flex",
-		flexDirection: "column",
-		gap: tokens.spacingVerticalS,
-	},
-	fieldWithTooltip: {
-		display: "flex",
-		alignItems: "center",
-		gap: tokens.spacingHorizontalXS,
-	},
-	tooltipIcon: {
-		color: tokens.colorNeutralForeground3,
-		cursor: "help",
-	},
-	compareToggle: {
-		display: "flex",
-		alignItems: "center",
-		gap: tokens.spacingHorizontalS,
-		marginBottom: tokens.spacingVerticalXS,
-	},
-});
-
-interface ConditionEditorProps {
-	node: ConditionNode;
-	entityName: string;
-	onUpdate: (updates: Record<string, unknown>) => void;
-	isAggregateQuery?: boolean;
-	fetchQuery?: FetchNode | null;
-}
-
-/**
- * Returns the exact attribute type for valueof comparisons.
- * Strict matching: source and target attributes must have the same type.
- * e.g., Money can only compare to Money, Integer to Integer, etc.
- */
-function getCompatibleTypesForValueof(attributeType: string | undefined): string[] {
-	if (!attributeType) return [];
-
-	// Strict type matching - return only the exact same type
-	// This ensures Money compares to Money, Integer to Integer, etc.
-	return [attributeType];
-}
-
-export function ConditionEditor({
-	node,
-	entityName,
-	onUpdate,
-	isAggregateQuery = false,
-	fetchQuery = null,
-}: ConditionEditorProps) {
-	const styles = useStyles();
-
-	// State for filtered operators based on selected attribute type
-	const [availableOperators, setAvailableOperators] = useState<OperatorDefinition[]>([]);
-	// State for selected attribute metadata
-	const [selectedAttribute, setSelectedAttribute] = useState<AttributeMetadata | null>(null);
-
-	// Collect available link-entity references for entityname picker
-	const linkEntityReferences = useMemo(() => collectLinkEntityReferences(fetchQuery), [fetchQuery]);
-
-	// Check if this condition is in the root entity's filter (where entityname is applicable)
-	const isInRootFilter = useMemo(
-		() => isConditionInRootEntityFilter(fetchQuery, node.id),
-		[fetchQuery, node.id]
-	);
-
-	// Determine the effective entity name for attribute loading
-	// If entityname is set, use the linked entity's name; otherwise use the parent entity
-	const effectiveEntityName = useMemo(() => {
-		if (node.entityname && isInRootFilter) {
-			// Find the link-entity reference and get its entity name
-			const ref = linkEntityReferences.find((r) => r.identifier === node.entityname);
-			if (ref) {
-				return ref.entityName;
-			}
-		}
-		return entityName;
-	}, [node.entityname, isInRootFilter, linkEntityReferences, entityName]);
-
-	// Get compatible attribute types for valueof comparison
-	const compatibleTypesForValueof = useMemo(
-		() => getCompatibleTypesForValueof(selectedAttribute?.AttributeType),
-		[selectedAttribute?.AttributeType]
-	);
-
-	// Load attribute metadata when attribute changes to get its type
-	useEffect(() => {
-		if (!node.attribute || !effectiveEntityName) {
-			// No attribute selected - show all operators
-			setAvailableOperators(getOperatorsForAttributeType(undefined));
-			setSelectedAttribute(null);
-			return;
-		}
-
-		// Load entity attributes to find the selected attribute's type
-		loadEntityAttributes(effectiveEntityName)
-			.then(async (attributes: AttributeMetadata[]) => {
-				const attr = attributes.find((a) => a.LogicalName === node.attribute);
-				const type = attr?.AttributeType;
-
-				// For numeric and datetime types, load detailed metadata
-				const needsDetailedMetadata =
-					type === "Integer" ||
-					type === "BigInt" ||
-					type === "Decimal" ||
-					type === "Double" ||
-					type === "DateTime";
-
-				let detailedAttr = attr;
-				if (needsDetailedMetadata && attr) {
-					try {
-						// Load detailed metadata with type casting to get MinValue, MaxValue, Precision, Format
-						detailedAttr = await loadAttributeDetailedMetadata(entityName, node.attribute, type);
-						console.log(`Loaded detailed metadata for ${node.attribute}:`, detailedAttr);
-					} catch (error) {
-						console.error(`Failed to load detailed metadata for ${node.attribute}:`, error);
-						// Fall back to basic metadata
-						detailedAttr = attr;
-					}
-				}
-
-				// Store the full attribute metadata (with detailed properties if available)
-				setSelectedAttribute(detailedAttr || null);
-
-				// Filter operators based on attribute type
-				let operators = getOperatorsForAttributeType(type);
-
-				// For DateTime with DateOnly behavior, exclude operators that require hours/minutes
-				if (type === "DateTime" && detailedAttr) {
-					const dateTimeBehavior = detailedAttr.DateTimeBehavior?.Value;
-					const format = detailedAttr.Format;
-
-					// DateOnly format or UserLocal behavior with DateOnly format should exclude hour/minute operators
-					const isDateOnly = format === "DateOnly" || dateTimeBehavior === "DateOnly";
-
-					if (isDateOnly) {
-						const excludedOperators = [
-							"last-x-hours",
-							"next-x-hours",
-							"olderthan-x-hours",
-							"olderthan-x-minutes",
-						];
-						operators = operators.filter((op) => !excludedOperators.includes(op.value));
-					}
-				}
-
-				setAvailableOperators(operators);
-			})
-			.catch((error) => {
-				console.error("Failed to load attribute metadata for operator filtering:", error);
-				// Fallback to all operators on error
-				setAvailableOperators(getOperatorsForAttributeType(undefined));
-				setSelectedAttribute(null);
-			});
-	}, [node.attribute, effectiveEntityName]);
-
-	const handleTextChange = (field: string) => (_: unknown, data: { value: string }) => {
-		onUpdate({ [field]: data.value || undefined });
-	};
-
-	const handleDropdownChange = (field: string) => (_: unknown, data: { optionValue?: string }) => {
-		onUpdate({ [field]: data.optionValue });
-	};
-
-	const handleAttributeChange = (logicalName: string | undefined) => {
-		// When attribute is cleared or changed, reset operator and value
-		if (!logicalName) {
-			onUpdate({ attribute: undefined, operator: undefined, value: undefined });
-		} else {
-			onUpdate({ attribute: logicalName, operator: undefined, value: undefined });
-		}
-	};
-
-	const handleEntityNameChange = (identifier: string | undefined) => {
-		// When entityname changes, also clear attribute, operator, and value
-		// since the attribute must come from the selected entity
-		onUpdate({
-			entityname: identifier || undefined,
-			attribute: undefined,
-			operator: undefined,
-			value: undefined,
-		});
-	};
-	// Check if the current operator requires a value (using the smart function)
-	const requiresValue = operatorRequiresValue(node.operator);
-
-	// Get the operator definition to check for multi-value requirements
-	const operatorDef = availableOperators.find((op) => op.value === node.operator);
-	const requiresTwoValues = operatorDef?.requiresTwoValues ?? false;
-	const requiresMultipleValues = operatorDef?.requiresMultipleValues ?? false;
-
-	return (
-		<div className={styles.container}>
-			{/* Basic Properties */}
-			<div className={styles.section}>
-				<Label weight="semibold">Condition Properties</Label>
-				<Field label="Attribute Name" required>
-					<div className={styles.fieldWithTooltip}>
-						<AttributePicker
-							entityLogicalName={effectiveEntityName}
-							value={node.attribute}
-							onChange={handleAttributeChange}
-							placeholder="Select or type attribute name"
-						/>
-						<Tooltip
-							content={
-								node.entityname
-									? `Logical name of the attribute from the linked entity "${node.entityname}".`
-									: "Logical name of the attribute to filter on. Must exist in the parent entity."
-							}
-							relationship="description"
-						>
-							<Info16Regular className={styles.tooltipIcon} />
-						</Tooltip>
-					</div>
-				</Field>
-				<Field label="Operator" required>
-					<div className={styles.fieldWithTooltip}>
-						<Dropdown
-							value={node.operator}
-							selectedOptions={[node.operator]}
-							onOptionSelect={handleDropdownChange("operator")}
-							placeholder="Select operator"
-						>
-							{availableOperators.map((op) => (
-								<Option key={op.value} value={op.value}>
-									{op.label}
-								</Option>
-							))}
-						</Dropdown>
-						<Tooltip
-							content="Comparison operator. Available operators depend on attribute type (string, number, datetime, lookup, etc.)."
-							relationship="description"
-						>
-							<Info16Regular className={styles.tooltipIcon} />
-						</Tooltip>
-					</div>
-				</Field>
-				{requiresValue && (
-					<>
-						{/* Multi-value operators don't support valueof */}
-						{requiresMultipleValues && selectedAttribute ? (
-							<Field label="Values">
-								<div className={styles.fieldWithTooltip}>
-									<MultiValuePicker
-										entityLogicalName={effectiveEntityName}
-										attributeLogicalName={node.attribute}
-										attribute={selectedAttribute}
-										value={Array.isArray(node.value) ? node.value : undefined}
-										onChange={(val) => onUpdate({ value: val })}
-										placeholder="Enter values (comma-separated)"
-									/>
-									<Tooltip
-										content="Enter multiple values separated by commas."
-										relationship="description"
-									>
-										<Info16Regular className={styles.tooltipIcon} />
-									</Tooltip>
-								</div>
-							</Field>
-						) : /* Dual-value operators don't support valueof */
-						requiresTwoValues && selectedAttribute ? (
-							<Field label="Value Range">
-								<div className={styles.fieldWithTooltip}>
-									<BetweenInputPicker
-										attribute={selectedAttribute}
-										value={
-											Array.isArray(node.value) && node.value.length === 2
-												? [node.value[0], node.value[1]]
-												: [undefined, undefined]
-										}
-										onChange={(val) => onUpdate({ value: val })}
-										placeholder1="Start value"
-										placeholder2="End value"
-									/>
-									<Tooltip
-										content="Enter start and end values for the range."
-										relationship="description"
-									>
-										<Info16Regular className={styles.tooltipIcon} />
-									</Tooltip>
-								</div>
-							</Field>
-						) : (
-							/* Single-value operators support valueof comparison */
-							<>
-								{/* Toggle between literal value and compare to column */}
-								<div className={styles.compareToggle}>
-									<Switch
-										checked={node.valueof !== undefined}
-										onChange={(_ev, data) => {
-											if (data.checked) {
-												// Switching to compare mode - clear value, set valueof to empty
-												onUpdate({ value: undefined, valueof: "" });
-											} else {
-												// Switching to literal mode - clear valueof
-												onUpdate({ valueof: undefined, value: undefined });
-											}
-										}}
-									/>
-									<Label size="small">
-										{node.valueof !== undefined ? "Compare to column" : "Literal value"}
-									</Label>
-									<Tooltip
-										content="Toggle between comparing to a literal value or another column's value (same row)."
-										relationship="description"
-									>
-										<Info16Regular className={styles.tooltipIcon} />
-									</Tooltip>
-								</div>
-
-								{node.valueof !== undefined ? (
-									/* Compare to column mode - show entity selector + attribute picker */
-									<ValueOfPicker
-										fetchQuery={fetchQuery}
-										rootEntityName={fetchQuery?.entity?.name || ""}
-										effectiveEntityName={effectiveEntityName}
-										valueof={node.valueof || ""}
-										compatibleTypes={compatibleTypesForValueof}
-										onChange={(valueof) => {
-											// Keep valueof as empty string (not undefined) when entity changes
-											// to prevent the switch from reverting to literal mode
-											onUpdate({ valueof: valueof ?? undefined });
-										}}
-									/>
-								) : (
-									/* Literal value mode - show type-specific pickers */
-									<Field label="Value">
-										<div className={styles.fieldWithTooltip}>
-											{selectedAttribute?.AttributeType === "Picklist" ||
-											selectedAttribute?.AttributeType === "State" ||
-											selectedAttribute?.AttributeType === "Status" ? (
-												<OptionSetValuePicker
-													entityLogicalName={effectiveEntityName}
-													attributeLogicalName={node.attribute}
-													value={typeof node.value === "number" ? node.value : undefined}
-													onChange={(val) => onUpdate({ value: val })}
-													placeholder="Select a value"
-												/>
-											) : selectedAttribute?.AttributeType === "Boolean" ? (
-												<BooleanValuePicker
-													entityLogicalName={effectiveEntityName}
-													attributeLogicalName={node.attribute}
-													value={
-														typeof node.value === "boolean"
-															? node.value
-															: typeof node.value === "string"
-															? node.value === "true" || node.value === "1"
-															: undefined
-													}
-													onChange={(val) => onUpdate({ value: val })}
-													placeholder="Select true or false"
-												/>
-											) : selectedAttribute?.AttributeType === "Integer" ||
-											  selectedAttribute?.AttributeType === "BigInt" ||
-											  selectedAttribute?.AttributeType === "Decimal" ||
-											  selectedAttribute?.AttributeType === "Double" ? (
-												<NumericInputPicker
-													attribute={selectedAttribute}
-													value={typeof node.value === "number" ? node.value : undefined}
-													onChange={(val) => onUpdate({ value: val })}
-													placeholder="Enter a number"
-												/>
-											) : selectedAttribute?.AttributeType === "DateTime" ? (
-												<DateTimeInputPicker
-													attribute={selectedAttribute}
-													value={
-														typeof node.value === "string"
-															? node.value
-															: node.value instanceof Date
-															? node.value
-															: undefined
-													}
-													onChange={(val) => onUpdate({ value: val?.toISOString() })}
-													placeholder="Select a date"
-												/>
-											) : (
-												<Input
-													value={
-														typeof node.value === "string" || typeof node.value === "number"
-															? String(node.value)
-															: ""
-													}
-													onChange={handleTextChange("value")}
-													placeholder="Filter value"
-												/>
-											)}
-											<Tooltip
-												content={
-													selectedAttribute?.AttributeType === "Picklist" ||
-													selectedAttribute?.AttributeType === "State" ||
-													selectedAttribute?.AttributeType === "Status"
-														? "Select a value from the available options."
-														: selectedAttribute?.AttributeType === "Boolean"
-														? "Select true or false."
-														: selectedAttribute?.AttributeType === "Integer" ||
-														  selectedAttribute?.AttributeType === "BigInt" ||
-														  selectedAttribute?.AttributeType === "Decimal" ||
-														  selectedAttribute?.AttributeType === "Double"
-														? "Enter a numeric value."
-														: selectedAttribute?.AttributeType === "DateTime"
-														? "Select a date and optionally a time."
-														: "Value to compare against."
-												}
-												relationship="description"
-											>
-												<Info16Regular className={styles.tooltipIcon} />
-											</Tooltip>
-										</div>
-									</Field>
-								)}
-							</>
-						)}
-					</>
-				)}
-			</div>
-
-			{/* Advanced Section */}
-			<div className={styles.section}>
-				<Label weight="semibold">Advanced</Label>
-
-				{/* Entity Name - only show for conditions in root entity filters where there are link-entities */}
-				{isInRootFilter && linkEntityReferences.length > 0 && (
-					<Field
-						label="Entity Name (optional)"
-						hint="Filter on a column from a linked entity (outer join scenario)."
-					>
-						<div className={styles.fieldWithTooltip}>
-							<Dropdown
-								value={node.entityname ?? ""}
-								selectedOptions={node.entityname ? [node.entityname] : []}
-								onOptionSelect={(_ev, data) => {
-									const value = data.optionValue;
-									handleEntityNameChange(value === "" ? undefined : value);
-								}}
-								placeholder="Select linked entity..."
-							>
-								<Option value="">None (current entity)</Option>
-								{linkEntityReferences.map((ref) => (
-									<Option key={ref.identifier} value={ref.identifier}>
-										{ref.displayLabel}
-									</Option>
-								))}
-							</Dropdown>
-							<Tooltip
-								content="When filtering on an outer-joined link-entity, specify which entity's column to filter. Use the alias if defined, otherwise the entity name."
-								relationship="description"
-							>
-								<Info16Regular className={styles.tooltipIcon} />
-							</Tooltip>
-						</div>
-					</Field>
-				)}
-
-				{isAggregateQuery && (
-					<Field label="Aggregate Function (optional)">
-						<div className={styles.fieldWithTooltip}>
-							<Dropdown
-								value={node.aggregate ?? "none"}
-								selectedOptions={[node.aggregate ?? "none"]}
-								onOptionSelect={handleDropdownChange("aggregate")}
-								placeholder="None"
-							>
-								<Option value="none">None</Option>
-								<Option value="count">Count</Option>
-								<Option value="countcolumn">Count Column</Option>
-								<Option value="sum">Sum</Option>
-								<Option value="avg">Average</Option>
-								<Option value="min">Minimum</Option>
-								<Option value="max">Maximum</Option>
-							</Dropdown>
-							<Tooltip
-								content="Apply aggregate function before comparing. Used in HAVING clauses for aggregate queries."
-								relationship="description"
-							>
-								<Info16Regular className={styles.tooltipIcon} />
-							</Tooltip>
-						</div>
-					</Field>
-				)}
-			</div>
-		</div>
-	);
-}