@mohsinonxrm/pptb-fetchxml-studio 1.0.0 → 1.0.2

package/src/shared/components/BetweenInputPicker.tsx

@@ -1,120 +0,0 @@
-/**
- * Input picker for operators that require TWO values (e.g., between, not-between, in-fiscal-period-and-year)
- * Displays two input fields side-by-side with an "and" label between them
- */
-
-import { Label, makeStyles, tokens } from "@fluentui/react-components";
-import { NumericInputPicker } from "./NumericInputPicker";
-import { DateTimeInputPicker } from "./DateTimeInputPicker";
-import type { AttributeMetadata } from "../../features/fetchxml/api/pptbClient";
-
-const useStyles = makeStyles({
-	container: {
-		display: "flex",
-		alignItems: "center",
-		gap: tokens.spacingHorizontalM,
-		width: "100%",
-	},
-	inputWrapper: {
-		flex: 1,
-		minWidth: "120px",
-	},
-	separator: {
-		color: tokens.colorNeutralForeground3,
-		fontWeight: tokens.fontWeightSemibold,
-		paddingInline: tokens.spacingHorizontalXS,
-	},
-});
-
-interface BetweenInputPickerProps {
-	attribute: AttributeMetadata;
-	value?: [number | string | undefined, number | string | undefined]; // Tuple [value1, value2]
-	onChange: (value: [number | string | undefined, number | string | undefined]) => void;
-	placeholder1?: string;
-	placeholder2?: string;
-}
-
-/**
- * BetweenInputPicker component for dual-value operators like 'between', 'not-between'
- */
-export function BetweenInputPicker({
-	attribute,
-	value = [undefined, undefined],
-	onChange,
-	placeholder1 = "Start value",
-	placeholder2 = "End value",
-}: BetweenInputPickerProps) {
-	const styles = useStyles();
-
-	const [value1, value2] = value;
-
-	const handleValue1Change = (newValue: number | string | Date | undefined) => {
-		const val1 =
-			newValue instanceof Date
-				? newValue.toISOString()
-				: typeof newValue === "number" || typeof newValue === "string"
-				? newValue
-				: undefined;
-		onChange([val1, value2]);
-	};
-
-	const handleValue2Change = (newValue: number | string | Date | undefined) => {
-		const val2 =
-			newValue instanceof Date
-				? newValue.toISOString()
-				: typeof newValue === "number" || typeof newValue === "string"
-				? newValue
-				: undefined;
-		onChange([value1, val2]);
-	};
-
-	const isNumeric =
-		attribute.AttributeType === "Integer" ||
-		attribute.AttributeType === "BigInt" ||
-		attribute.AttributeType === "Decimal" ||
-		attribute.AttributeType === "Double";
-
-	const isDateTime = attribute.AttributeType === "DateTime";
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.inputWrapper}>
-				{isNumeric ? (
-					<NumericInputPicker
-						attribute={attribute}
-						value={typeof value1 === "number" ? value1 : undefined}
-						onChange={handleValue1Change}
-						placeholder={placeholder1}
-					/>
-				) : isDateTime ? (
-					<DateTimeInputPicker
-						attribute={attribute}
-						value={typeof value1 === "string" ? value1 : undefined}
-						onChange={handleValue1Change}
-						placeholder={placeholder1}
-					/>
-				) : null}
-			</div>
-
-			<Label className={styles.separator}>and</Label>
-
-			<div className={styles.inputWrapper}>
-				{isNumeric ? (
-					<NumericInputPicker
-						attribute={attribute}
-						value={typeof value2 === "number" ? value2 : undefined}
-						onChange={handleValue2Change}
-						placeholder={placeholder2}
-					/>
-				) : isDateTime ? (
-					<DateTimeInputPicker
-						attribute={attribute}
-						value={typeof value2 === "string" ? value2 : undefined}
-						onChange={handleValue2Change}
-						placeholder={placeholder2}
-					/>
-				) : null}
-			</div>
-		</div>
-	);
-}

package/src/shared/components/BooleanValuePicker.tsx

@@ -1,165 +0,0 @@
-/**
- * Shared Boolean Value Picker component using Fluent UI v9 Combobox
- * Loads true/false labels from TwoOptions attribute metadata
- * Displays custom labels like "Yes - true" / "No - false" or "On - true" / "Off - false"
- */
-
-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 BooleanOption {
-	value: boolean;
-	label: string;
-	displayText: string; // "Label - value" format
-}
-
-interface BooleanValuePickerProps {
-	entityLogicalName: string;
-	attributeLogicalName: string;
-	value?: boolean | string; // Can be boolean, "true"/"false", or "1"/"0"
-	onChange: (value: boolean | undefined) => void;
-	placeholder?: string;
-	disabled?: boolean;
-}
-
-export function BooleanValuePicker({
-	entityLogicalName,
-	attributeLogicalName,
-	value,
-	onChange,
-	placeholder = "Select true or false",
-	disabled = false,
-}: BooleanValuePickerProps) {
-	const comboId = useId("boolean-combobox");
-	const [options, setOptions] = useState<BooleanOption[]>([]);
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [query, setQuery] = useState<string>("");
-
-	// Load boolean labels from attribute metadata
-	useEffect(() => {
-		if (!entityLogicalName || !attributeLogicalName) {
-			setOptions([]);
-			return;
-		}
-
-		setLoading(true);
-		setError(null);
-
-		loadAttributeWithOptionSet(entityLogicalName, attributeLogicalName)
-			.then((attr: AttributeMetadata) => {
-				if (!attr.OptionSet) {
-					// Fallback to default labels if metadata doesn't have OptionSet
-					console.warn("No OptionSet found for boolean attribute, using defaults");
-					setOptions([
-						{ value: true, label: "Yes", displayText: "Yes - true" },
-						{ value: false, label: "No", displayText: "No - false" },
-					]);
-					setLoading(false);
-					return;
-				}
-
-				// TwoOptions attributes have TrueOption and FalseOption
-				const trueLabel = attr.OptionSet.TrueOption?.Label?.UserLocalizedLabel?.Label || "Yes";
-				const falseLabel = attr.OptionSet.FalseOption?.Label?.UserLocalizedLabel?.Label || "No";
-
-				setOptions([
-					{ value: true, label: trueLabel, displayText: `${trueLabel} - true` },
-					{ value: false, label: falseLabel, displayText: `${falseLabel} - false` },
-				]);
-				setLoading(false);
-			})
-			.catch((err: unknown) => {
-				console.error("Failed to load boolean attribute metadata:", err);
-				// Fallback to defaults on error
-				setOptions([
-					{ value: true, label: "Yes", displayText: "Yes - true" },
-					{ value: false, label: "No", displayText: "No - false" },
-				]);
-				setLoading(false);
-			});
-	}, [entityLogicalName, attributeLogicalName]);
-
-	// Sync query with value when value changes or options load
-	useEffect(() => {
-		if (value !== undefined && value !== null && value !== "") {
-			// Normalize value to boolean
-			let boolValue: boolean;
-			if (typeof value === "boolean") {
-				boolValue = value;
-			} else if (typeof value === "string") {
-				boolValue = value === "true" || value === "1";
-			} else {
-				boolValue = Boolean(value);
-			}
-
-			const opt = options.find((o) => o.value === boolValue);
-			if (opt) {
-				setQuery(opt.displayText);
-			} else {
-				setQuery(String(value));
-			}
-		} else {
-			setQuery("");
-		}
-	}, [value, options]);
-
-	// Convert options to combobox format and filter by both label and boolean value
-	const comboboxOptions = options
-		.filter((opt) => {
-			if (!query) return true;
-			const searchLower = query.toLowerCase();
-			return (
-				opt.label.toLowerCase().includes(searchLower) ||
-				String(opt.value).toLowerCase().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..." : error || "No options",
-		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>
-	);
-}

package/src/shared/components/DateTimeInputPicker.tsx

@@ -1,170 +0,0 @@
-/**
- * Shared DateTime Input Picker component using Fluent UI v9 DatePicker and TimePicker
- * Handles DateTime attribute types
- * Renders DatePicker for DateOnly format, DatePicker + TimePicker for DateAndTime format
- */
-
-import { useState, useEffect } from "react";
-import { makeStyles } from "@fluentui/react-components";
-import { DatePicker } from "@fluentui/react-datepicker-compat";
-import { TimePicker, formatDateToTimeString } from "@fluentui/react-timepicker-compat";
-import type { AttributeMetadata } from "../../features/fetchxml/api/pptbClient";
-
-const useStyles = makeStyles({
-	root: {
-		display: "flex",
-		flexDirection: "row",
-		gap: "8px",
-	},
-	datePicker: {
-		flexGrow: 1,
-	},
-	timePicker: {
-		flexGrow: 1,
-	},
-});
-
-interface DateTimeInputPickerProps {
-	attribute: AttributeMetadata;
-	value?: Date | string;
-	onChange: (value: Date | undefined) => void;
-	placeholder?: string;
-	disabled?: boolean;
-}
-
-export function DateTimeInputPicker({
-	attribute,
-	value,
-	onChange,
-	placeholder = "Select a date",
-	disabled = false,
-}: DateTimeInputPickerProps) {
-	const styles = useStyles();
-	const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-	const [selectedTime, setSelectedTime] = useState<Date | null>(null);
-	const [timePickerValue, setTimePickerValue] = useState<string>("");
-
-	const isDateOnly = attribute.Format === "DateOnly";
-
-	// Sync selected date/time with prop value
-	useEffect(() => {
-		if (value) {
-			const dateValue = typeof value === "string" ? new Date(value) : value;
-			if (!isNaN(dateValue.getTime())) {
-				setSelectedDate(dateValue);
-				if (!isDateOnly) {
-					setSelectedTime(dateValue);
-					setTimePickerValue(formatDateToTimeString(dateValue));
-				}
-			}
-		} else {
-			setSelectedDate(null);
-			setSelectedTime(null);
-			setTimePickerValue("");
-		}
-	}, [value, isDateOnly]);
-
-	// Parse min/max dates
-	const minDate = attribute.MinSupportedValue ? new Date(attribute.MinSupportedValue) : undefined;
-	const maxDate = attribute.MaxSupportedValue ? new Date(attribute.MaxSupportedValue) : undefined;
-
-	// Handle date selection
-	const handleDateChange = (date: Date | null | undefined) => {
-		setSelectedDate(date ?? null);
-
-		if (!date) {
-			onChange(undefined);
-			return;
-		}
-
-		if (isDateOnly) {
-			// For DateOnly, just use the date at midnight UTC
-			const dateOnly = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-			onChange(dateOnly);
-		} else {
-			// For DateAndTime, combine with selected time or use midnight
-			if (selectedTime) {
-				const combined = new Date(
-					date.getFullYear(),
-					date.getMonth(),
-					date.getDate(),
-					selectedTime.getHours(),
-					selectedTime.getMinutes(),
-					selectedTime.getSeconds()
-				);
-				onChange(combined);
-			} else {
-				onChange(date);
-			}
-		}
-	};
-
-	// Handle time selection (only for DateAndTime format)
-	const handleTimeChange = (
-		_ev: unknown,
-		data: { selectedTime: Date | null; selectedTimeText?: string }
-	) => {
-		setSelectedTime(data.selectedTime);
-		setTimePickerValue(data.selectedTimeText ?? "");
-
-		if (selectedDate && data.selectedTime) {
-			const combined = new Date(
-				selectedDate.getFullYear(),
-				selectedDate.getMonth(),
-				selectedDate.getDate(),
-				data.selectedTime.getHours(),
-				data.selectedTime.getMinutes(),
-				data.selectedTime.getSeconds()
-			);
-			onChange(combined);
-		}
-	};
-
-	// Handle time input (freeform)
-	const handleTimeInput = (ev: React.ChangeEvent<HTMLInputElement>) => {
-		setTimePickerValue(ev.target.value);
-	};
-
-	if (isDateOnly) {
-		// DateOnly: just show DatePicker
-		return (
-			<DatePicker
-				value={selectedDate}
-				onSelectDate={handleDateChange}
-				placeholder={placeholder}
-				disabled={disabled}
-				minDate={minDate}
-				maxDate={maxDate}
-				allowTextInput
-				className={styles.datePicker}
-			/>
-		);
-	}
-
-	// DateAndTime: show DatePicker + TimePicker
-	return (
-		<div className={styles.root}>
-			<DatePicker
-				value={selectedDate}
-				onSelectDate={handleDateChange}
-				placeholder="Select date"
-				disabled={disabled}
-				minDate={minDate}
-				maxDate={maxDate}
-				allowTextInput
-				className={styles.datePicker}
-			/>
-			<TimePicker
-				placeholder="Select time"
-				freeform
-				dateAnchor={selectedDate ?? undefined}
-				selectedTime={selectedTime}
-				onTimeChange={handleTimeChange}
-				value={timePickerValue}
-				onInput={handleTimeInput}
-				disabled={disabled || !selectedDate}
-				className={styles.timePicker}
-			/>
-		</div>
-	);
-}

package/src/shared/components/DynamicValueList.tsx

@@ -1,128 +0,0 @@
-/**
- * Dynamic list of input fields with add/remove buttons for multi-value operators
- * Each value gets its own input field to handle values with commas, spaces, etc.
- */
-
-import { useState, useEffect } from "react";
-import { Input, Button, makeStyles, tokens } from "@fluentui/react-components";
-import { Add20Regular, Dismiss20Regular } from "@fluentui/react-icons";
-
-const useStyles = makeStyles({
-	container: {
-		display: "flex",
-		flexDirection: "column",
-		gap: tokens.spacingVerticalS,
-		width: "100%",
-	},
-	row: {
-		display: "flex",
-		alignItems: "center",
-		gap: tokens.spacingHorizontalS,
-	},
-	input: {
-		flexGrow: 1,
-	},
-	addButton: {
-		marginTop: tokens.spacingVerticalXS,
-	},
-});
-
-interface DynamicValueListProps {
-	values: string[];
-	onChange: (values: string[]) => void;
-	placeholder?: string;
-	inputType?: "text" | "number";
-}
-
-/**
- * Component that displays a dynamic list of input fields
- * User can add/remove fields as needed
- */
-export function DynamicValueList({
-	values,
-	onChange,
-	placeholder = "Enter value",
-	inputType = "text",
-}: DynamicValueListProps) {
-	const styles = useStyles();
-	const [internalValues, setInternalValues] = useState<string[]>(values.length > 0 ? values : [""]);
-
-	// Sync external changes
-	useEffect(() => {
-		if (values.length === 0 && internalValues.length === 1 && internalValues[0] === "") {
-			// Don't update if external is empty and we just have one empty field
-			return;
-		}
-
-		// Only update if values actually changed
-		const currentNonEmpty = internalValues.filter((v) => v.trim() !== "");
-		const valuesChanged =
-			values.length !== currentNonEmpty.length || values.some((v, i) => v !== currentNonEmpty[i]);
-
-		if (valuesChanged) {
-			setInternalValues(values.length > 0 ? values : [""]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [values]); // internalValues intentionally excluded to prevent infinite loop
-
-	const handleValueChange = (index: number, newValue: string) => {
-		const updated = [...internalValues];
-		updated[index] = newValue;
-		setInternalValues(updated);
-
-		// Filter out empty values before notifying parent
-		const nonEmpty = updated.filter((v) => v.trim() !== "");
-		onChange(nonEmpty);
-	};
-
-	const handleAddField = () => {
-		const updated = [...internalValues, ""];
-		setInternalValues(updated);
-	};
-
-	const handleRemoveField = (index: number) => {
-		if (internalValues.length === 1) {
-			// Don't remove the last field, just clear it
-			const updated = [""];
-			setInternalValues(updated);
-			onChange([]);
-		} else {
-			const updated = internalValues.filter((_, i) => i !== index);
-			setInternalValues(updated);
-			const nonEmpty = updated.filter((v) => v.trim() !== "");
-			onChange(nonEmpty);
-		}
-	};
-
-	return (
-		<div className={styles.container}>
-			{internalValues.map((value, index) => (
-				<div key={index} className={styles.row}>
-					<Input
-						className={styles.input}
-						value={value}
-						onChange={(_, data) => handleValueChange(index, data.value)}
-						placeholder={`${placeholder} ${index + 1}`}
-						type={inputType}
-					/>
-					{internalValues.length > 1 && (
-						<Button
-							appearance="subtle"
-							icon={<Dismiss20Regular />}
-							onClick={() => handleRemoveField(index)}
-							aria-label={`Remove value ${index + 1}`}
-						/>
-					)}
-				</div>
-			))}
-			<Button
-				className={styles.addButton}
-				appearance="secondary"
-				icon={<Add20Regular />}
-				onClick={handleAddField}
-			>
-				Add Value
-			</Button>
-		</div>
-	);
-}

package/src/shared/components/ExcelIcon.tsx

@@ -1,30 +0,0 @@
-/**
- * Excel icon component using the Microsoft Office Excel logo
- */
-
-import excelIconUrl from "../../assets/20px-Microsoft_Office_Excel_(2025–present).svg.png";
-
-interface ExcelIconProps {
-	/** Size in pixels (default: 20) */
-	size?: number;
-	/** Additional CSS class */
-	className?: string;
-}
-
-/**
- * Excel icon for export buttons
- * Uses the official Microsoft Office Excel 2025 logo
- */
-export function ExcelIcon({ size = 20, className }: ExcelIconProps) {
-	return (
-		<img
-			src={excelIconUrl}
-			alt=""
-			width={size}
-			height={size}
-			className={className}
-			style={{ display: "block" }}
-			aria-hidden="true"
-		/>
-	);
-}