@mohsinonxrm/pptb-fetchxml-studio 1.0.0 → 1.0.1

package/src/shared/components/MultiValuePicker.tsx

@@ -1,178 +0,0 @@
-/**
- * Input picker for operators that require MULTIPLE values (e.g., in, not-in, contain-values)
- * Uses Fluent UI v9 TagPicker for multi-select picklists and DynamicValueList for other types
- */
-
-import { useState, useEffect } from "react";
-import {
-	TagPicker,
-	TagPickerControl,
-	TagPickerGroup,
-	TagPickerInput,
-	TagPickerList,
-	TagPickerOption,
-	Tag,
-	makeStyles,
-} from "@fluentui/react-components";
-import type { TagPickerProps } from "@fluentui/react-components";
-import { loadAttributeWithOptionSet } from "../../features/fetchxml/api/dataverseMetadata";
-import type { AttributeMetadata } from "../../features/fetchxml/api/pptbClient";
-import { DynamicValueList } from "./DynamicValueList";
-
-const useStyles = makeStyles({
-	container: {
-		width: "100%",
-	},
-});
-
-interface MultiValuePickerProps {
-	entityLogicalName: string;
-	attributeLogicalName: string;
-	attribute: AttributeMetadata;
-	value?: (string | number)[]; // Array of values (mixed types supported from parser)
-	onChange: (value: (string | number)[] | undefined) => void;
-	placeholder?: string;
-}
-
-/**
- * MultiValuePicker component for multi-value operators like 'in', 'not-in', 'contain-values'
- */
-export function MultiValuePicker({
-	entityLogicalName,
-	attributeLogicalName,
-	attribute,
-	value = [],
-	onChange,
-	placeholder = "Enter value",
-}: MultiValuePickerProps) {
-	const styles = useStyles();
-	const [options, setOptions] = useState<Array<{ label: string; value: number }>>([]);
-	const [selectedValues, setSelectedValues] = useState<string[]>((value ?? []).map(String));
-
-	const isPicklist =
-		attribute.AttributeType === "Picklist" ||
-		attribute.AttributeType === "State" ||
-		attribute.AttributeType === "Status";
-
-	// Load picklist options when needed
-	useEffect(() => {
-		if (isPicklist) {
-			loadAttributeWithOptionSet(entityLogicalName, attributeLogicalName)
-				.then((metadata: AttributeMetadata) => {
-					if (metadata.OptionSet?.Options) {
-						const opts = metadata.OptionSet.Options.map((opt) => ({
-							label: opt.Label?.UserLocalizedLabel?.Label || String(opt.Value),
-							value: opt.Value,
-						}));
-						setOptions(opts);
-					}
-				})
-				.catch((error: unknown) => {
-					console.error("Failed to load OptionSet metadata:", error);
-				});
-		}
-	}, [entityLogicalName, attributeLogicalName, isPicklist]);
-
-	// Sync external value changes to internal state (for picklist only)
-	useEffect(() => {
-		if (!isPicklist) return;
-
-		const newSelectedValues = (value ?? []).map(String);
-		// Only update if the values actually changed (avoid infinite loop)
-		const hasChanged =
-			newSelectedValues.length !== selectedValues.length ||
-			newSelectedValues.some((v, i) => v !== selectedValues[i]);
-
-		if (hasChanged) {
-			setSelectedValues(newSelectedValues);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [value, isPicklist]); // selectedValues intentionally excluded to prevent infinite loop
-
-	const handleDynamicListChange = (values: string[]) => {
-		// Determine if we need to convert to numbers
-		const isNumeric =
-			attribute.AttributeType === "Integer" ||
-			attribute.AttributeType === "BigInt" ||
-			attribute.AttributeType === "Decimal" ||
-			attribute.AttributeType === "Double" ||
-			attribute.AttributeType === "Money";
-
-		if (isNumeric) {
-			const numbers = values.map((v) => parseFloat(v)).filter((n) => !isNaN(n));
-			onChange(numbers.length > 0 ? numbers : undefined);
-		} else {
-			onChange(values.length > 0 ? values : undefined);
-		}
-	};
-
-	const handlePicklistChange: TagPickerProps["onOptionSelect"] = (_, data) => {
-		const selected = data.selectedOptions.map((opt) => parseInt(opt, 10)).filter((n) => !isNaN(n));
-
-		// Update local state immediately for controlled component behavior
-		setSelectedValues(data.selectedOptions);
-
-		// Notify parent of the change (parent will update value prop, but useEffect will detect no change)
-		onChange(selected.length > 0 ? selected : undefined);
-	};
-
-	if (isPicklist) {
-		const availableOptions = options.filter((opt) => !selectedValues.includes(String(opt.value)));
-
-		return (
-			<div className={styles.container}>
-				<TagPicker onOptionSelect={handlePicklistChange} selectedOptions={selectedValues}>
-					<TagPickerControl>
-						<TagPickerGroup aria-label="Selected values">
-							{selectedValues.map((val) => {
-								const opt = options.find((o) => String(o.value) === val);
-								return (
-									<Tag key={val} shape="rounded" value={val}>
-										{opt ? `${opt.label} - ${opt.value}` : val}
-									</Tag>
-								);
-							})}
-						</TagPickerGroup>
-						<TagPickerInput aria-label={placeholder} placeholder={placeholder} />
-					</TagPickerControl>
-					<TagPickerList>
-						{availableOptions.length > 0 ? (
-							availableOptions.map((opt) => (
-								<TagPickerOption
-									key={opt.value}
-									value={String(opt.value)}
-									text={`${opt.label} - ${opt.value}`}
-								>
-									{opt.label} - {opt.value}
-								</TagPickerOption>
-							))
-						) : (
-							<TagPickerOption value="no-options" text="No options available">
-								No options available
-							</TagPickerOption>
-						)}
-					</TagPickerList>
-				</TagPicker>
-			</div>
-		);
-	}
-
-	// For non-picklist attributes, use dynamic value list with add/remove buttons
-	const isNumeric =
-		attribute.AttributeType === "Integer" ||
-		attribute.AttributeType === "BigInt" ||
-		attribute.AttributeType === "Decimal" ||
-		attribute.AttributeType === "Double" ||
-		attribute.AttributeType === "Money";
-
-	return (
-		<div className={styles.container}>
-			<DynamicValueList
-				values={(value ?? []).map(String)}
-				onChange={handleDynamicListChange}
-				placeholder={placeholder}
-				inputType={isNumeric ? "number" : "text"}
-			/>
-		</div>
-	);
-}

package/src/shared/components/NumericInputPicker.tsx

@@ -1,156 +0,0 @@
-/**
- * Shared Numeric Input Picker component using Fluent UI v9 Input
- * Handles Integer, BigInt, Decimal, and Double attribute types
- * Sets min/max values and precision based on metadata
- */
-
-import { useState, useEffect } from "react";
-import { Input, useId } from "@fluentui/react-components";
-import type { AttributeMetadata } from "../../features/fetchxml/api/pptbClient";
-
-interface NumericInputPickerProps {
-	attribute: AttributeMetadata;
-	value?: number | string;
-	onChange: (value: number | undefined) => void;
-	placeholder?: string;
-	disabled?: boolean;
-}
-
-export function NumericInputPicker({
-	attribute,
-	value,
-	onChange,
-	placeholder = "Enter a number",
-	disabled = false,
-}: NumericInputPickerProps) {
-	const inputId = useId("numeric-input");
-	const [inputValue, setInputValue] = useState<string>("");
-
-	// Format number to avoid scientific notation
-	const formatNumber = (num: number): string => {
-		if (Math.abs(num) < 1e-10 && num !== 0) {
-			// Very small numbers - use high precision
-			return num.toFixed(20).replace(/\.?0+$/, "");
-		} else if (Number.isInteger(num)) {
-			// Integer - no decimal point needed
-			return num.toString();
-		} else {
-			// Decimal - preserve precision but remove trailing zeros
-			return num.toFixed(10).replace(/\.?0+$/, "");
-		}
-	};
-
-	// Sync input value with prop value
-	useEffect(() => {
-		if (value !== undefined && value !== null && value !== "") {
-			const numValue = typeof value === "number" ? value : parseFloat(String(value));
-			setInputValue(isNaN(numValue) ? String(value) : formatNumber(numValue));
-		} else {
-			setInputValue("");
-		}
-	}, [value]);
-
-	// Determine input step based on attribute type and precision
-	const getStep = (): number | undefined => {
-		const attrType = attribute.AttributeType;
-
-		// Integer and BigInt: whole numbers only
-		if (attrType === "Integer" || attrType === "BigInt") {
-			return 1;
-		}
-
-		// Decimal and Double: use precision if available
-		if ((attrType === "Decimal" || attrType === "Double") && attribute.Precision !== undefined) {
-			// step = 10^(-precision), e.g., precision 2 → step 0.01
-			return Math.pow(10, -attribute.Precision);
-		}
-
-		return undefined;
-	};
-
-	// Round value to the attribute's precision
-	const roundToPrecision = (val: number): number => {
-		const attrType = attribute.AttributeType;
-
-		// Integer and BigInt: round to whole number
-		if (attrType === "Integer" || attrType === "BigInt") {
-			return Math.round(val);
-		}
-
-		// Decimal and Double: round to precision
-		if ((attrType === "Decimal" || attrType === "Double") && attribute.Precision !== undefined) {
-			const multiplier = Math.pow(10, attribute.Precision);
-			return Math.round(val * multiplier) / multiplier;
-		}
-
-		return val;
-	};
-
-	// Handle input change
-	const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
-		const newValue = ev.target.value;
-		setInputValue(newValue);
-
-		// Parse and validate
-		if (newValue === "") {
-			onChange(undefined);
-			return;
-		}
-
-		const parsed = parseFloat(newValue);
-		if (!isNaN(parsed)) {
-			// Round to precision to avoid floating-point errors
-			const rounded = roundToPrecision(parsed);
-			onChange(rounded);
-		}
-	};
-
-	// Handle blur to validate min/max
-	const handleBlur = () => {
-		if (inputValue === "") {
-			onChange(undefined);
-			return;
-		}
-
-		const parsed = parseFloat(inputValue);
-		if (isNaN(parsed)) {
-			// Invalid number, clear
-			setInputValue("");
-			onChange(undefined);
-			return;
-		}
-
-		// Round to precision first to avoid floating-point errors
-		let constrainedValue = roundToPrecision(parsed);
-
-		// Enforce min/max constraints
-		if (attribute.MinValue !== undefined && constrainedValue < attribute.MinValue) {
-			constrainedValue = attribute.MinValue;
-		}
-
-		if (attribute.MaxValue !== undefined && constrainedValue > attribute.MaxValue) {
-			constrainedValue = attribute.MaxValue;
-		}
-
-		// Update if constrained or rounded
-		if (constrainedValue !== parsed) {
-			setInputValue(String(constrainedValue));
-			onChange(constrainedValue);
-		}
-	};
-
-	return (
-		<Input
-			id={inputId}
-			type="number"
-			value={inputValue}
-			onChange={handleChange}
-			onBlur={handleBlur}
-			placeholder={placeholder}
-			disabled={disabled}
-			min={attribute.MinValue}
-			max={attribute.MaxValue}
-			step={getStep()}
-		/>
-	);
-}

package/src/shared/components/OptionSetValuePicker.tsx

@@ -1,150 +0,0 @@
-/**
- * Shared OptionSet Value Picker component using Fluent UI v9 Combobox
- * Loads option values from attribute metadata and displays as searchable dropdown
- * Supports Picklist, State, and Status attribute types
- */
-
-import { useState, useEffect } from "react";
-import { Combobox, useComboboxFilter, useId } from "@fluentui/react-components";
-import { loadAttributeWithOptionSet } from "../../features/fetchxml/api/dataverseMetadata";
-import type { AttributeMetadata } from "../../features/fetchxml/api/pptbClient";
-
-interface OptionSetOption {
-	value: number;
-	label: string;
-	displayText: string; // "Label - Value" format
-}
-
-interface OptionSetValuePickerProps {
-	entityLogicalName: string;
-	attributeLogicalName: string;
-	value?: number | string; // Can be number or string representation
-	onChange: (value: number | undefined) => void;
-	placeholder?: string;
-	disabled?: boolean;
-}
-
-export function OptionSetValuePicker({
-	entityLogicalName,
-	attributeLogicalName,
-	value,
-	onChange,
-	placeholder = "Select a value",
-	disabled = false,
-}: OptionSetValuePickerProps) {
-	const comboId = useId("optionset-combobox");
-	const [options, setOptions] = useState<OptionSetOption[]>([]);
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [query, setQuery] = useState<string>("");
-
-	// Load option set values when entity/attribute changes
-	useEffect(() => {
-		if (!entityLogicalName || !attributeLogicalName) {
-			setOptions([]);
-			return;
-		}
-
-		setLoading(true);
-		setError(null);
-
-		loadAttributeWithOptionSet(entityLogicalName, attributeLogicalName)
-			.then((attr: AttributeMetadata) => {
-				if (!attr.OptionSet?.Options) {
-					setError("No options found for this attribute");
-					setOptions([]);
-					setLoading(false);
-					return;
-				}
-
-				// Convert metadata options to our format
-				const optionsList: OptionSetOption[] = attr.OptionSet.Options.map((opt) => {
-					const label = opt.Label?.UserLocalizedLabel?.Label || `Option ${opt.Value}`;
-					return {
-						value: opt.Value,
-						label,
-						displayText: `${label} - ${opt.Value}`,
-					};
-				});
-
-				setOptions(optionsList);
-				setLoading(false);
-			})
-			.catch((err: unknown) => {
-				console.error("Failed to load option set values:", err);
-				setError("Failed to load options");
-				setLoading(false);
-			});
-	}, [entityLogicalName, attributeLogicalName]);
-
-	// Sync query with value when value changes or options load
-	useEffect(() => {
-		if (value !== undefined && value !== null && value !== "") {
-			const numValue = typeof value === "string" ? parseInt(value, 10) : value;
-			const opt = options.find((o) => o.value === numValue);
-			if (opt) {
-				setQuery(opt.displayText);
-			} else {
-				setQuery(String(value));
-			}
-		} else {
-			setQuery("");
-		}
-	}, [value, options]);
-
-	// Convert options to combobox format and filter by both label and value
-	const comboboxOptions = options
-		.filter((opt) => {
-			if (!query) return true;
-			const searchLower = query.toLowerCase();
-			return (
-				opt.label.toLowerCase().includes(searchLower) || String(opt.value).includes(searchLower)
-			);
-		})
-		.map((opt) => ({
-			children: opt.displayText,
-			value: String(opt.value), // Combobox uses string values
-		}));
-
-	// Apply Fluent UI's visual filtering only (we've already filtered the data)
-	const filteredChildren = useComboboxFilter(query, comboboxOptions, {
-		noOptionsMessage: loading ? "Loading options..." : error || "No options found",
-		filter: () => true, // Always return true since we pre-filtered
-	});
-
-	const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
-		setQuery(ev.target.value);
-	};
-
-	const handleOptionSelect: NonNullable<React.ComponentProps<typeof Combobox>["onOptionSelect"]> = (
-		_ev,
-		data
-	) => {
-		if (!data.optionValue) {
-			// Clear button clicked
-			setQuery("");
-			onChange(undefined);
-			return;
-		}
-
-		const selectedOption = options.find((opt) => String(opt.value) === data.optionValue);
-		if (selectedOption) {
-			setQuery(selectedOption.displayText);
-			onChange(selectedOption.value);
-		}
-	};
-
-	return (
-		<Combobox
-			aria-labelledby={comboId}
-			placeholder={placeholder}
-			value={query}
-			onChange={handleChange}
-			onOptionSelect={handleOptionSelect}
-			disabled={disabled || loading}
-			clearable
-		>
-			{filteredChildren}
-		</Combobox>
-	);
-}