@mohsinonxrm/pptb-fetchxml-studio 1.0.0

package/src/features/fetchxml/ui/RightPane/ColumnConfigDialog.tsx

@@ -0,0 +1,170 @@
+/**
+ * Column Configuration Dialog
+ * Allows users to reorder columns by moving them up/down
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import {
+	Dialog,
+	DialogSurface,
+	DialogTitle,
+	DialogBody,
+	DialogContent,
+	DialogActions,
+	Button,
+	makeStyles,
+	tokens,
+} from "@fluentui/react-components";
+import { ArrowUp24Regular, ArrowDown24Regular } from "@fluentui/react-icons";
+import type { LayoutColumn } from "../../model/layoutxml";
+
+const useStyles = makeStyles({
+	columnList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacingVerticalXS,
+		maxHeight: "400px",
+		overflowY: "auto",
+		padding: tokens.spacingVerticalS,
+		border: `1px solid ${tokens.colorNeutralStroke1}`,
+		borderRadius: tokens.borderRadiusMedium,
+	},
+	columnItem: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+		backgroundColor: tokens.colorNeutralBackground1,
+		border: `1px solid ${tokens.colorNeutralStroke2}`,
+		borderRadius: tokens.borderRadiusSmall,
+		"&:hover": {
+			backgroundColor: tokens.colorNeutralBackground1Hover,
+		},
+	},
+	columnName: {
+		flex: 1,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	buttonGroup: {
+		display: "flex",
+		gap: tokens.spacingHorizontalXS,
+	},
+	indexBadge: {
+		minWidth: "24px",
+		textAlign: "center",
+		color: tokens.colorNeutralForeground3,
+		fontSize: tokens.fontSizeBase200,
+		marginRight: tokens.spacingHorizontalS,
+	},
+});
+
+interface ColumnConfigDialogProps {
+	/** Whether the dialog is open */
+	open: boolean;
+	/** Columns to display for reordering */
+	columns: LayoutColumn[];
+	/** Called when dialog is closed without applying */
+	onClose: () => void;
+	/** Called when Apply is clicked with the new column order */
+	onReorder: (columns: LayoutColumn[]) => void;
+}
+
+export function ColumnConfigDialog({ open, columns, onClose, onReorder }: ColumnConfigDialogProps) {
+	const styles = useStyles();
+	const [localColumns, setLocalColumns] = useState<LayoutColumn[]>([]);
+
+	// Initialize local state when dialog opens or columns change
+	useEffect(() => {
+		if (open && columns.length > 0) {
+			setLocalColumns([...columns]);
+		}
+	}, [open, columns]);
+
+	const moveColumn = useCallback((index: number, direction: "up" | "down") => {
+		setLocalColumns((prev) => {
+			const newColumns = [...prev];
+			const targetIndex = direction === "up" ? index - 1 : index + 1;
+
+			if (targetIndex < 0 || targetIndex >= newColumns.length) {
+				return prev;
+			}
+
+			// Swap columns
+			[newColumns[index], newColumns[targetIndex]] = [newColumns[targetIndex], newColumns[index]];
+			return newColumns;
+		});
+	}, []);
+
+	const handleApply = useCallback(() => {
+		onReorder(localColumns);
+	}, [localColumns, onReorder]);
+
+	if (columns.length === 0) {
+		return null;
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={(_e, data) => !data.open && onClose()}>
+			<DialogSurface>
+				<DialogBody>
+					<DialogTitle>Configure Columns</DialogTitle>
+					<DialogContent>
+						<p
+							style={{
+								marginBottom: tokens.spacingVerticalM,
+								color: tokens.colorNeutralForeground2,
+							}}
+						>
+							Use the arrow buttons to reorder columns. Changes apply when you click Apply.
+						</p>
+						<div className={styles.columnList}>
+							{localColumns.map((column, index) => (
+								<div key={column.name} className={styles.columnItem}>
+									<span className={styles.indexBadge}>{index + 1}</span>
+									<span className={styles.columnName}>{column.displayName || column.name}</span>
+									<span
+										style={{
+											color: tokens.colorNeutralForeground3,
+											fontSize: tokens.fontSizeBase200,
+											marginRight: tokens.spacingHorizontalS,
+										}}
+									>
+										{column.width}px
+									</span>
+									<div className={styles.buttonGroup}>
+										<Button
+											appearance="subtle"
+											size="small"
+											icon={<ArrowUp24Regular />}
+											disabled={index === 0}
+											onClick={() => moveColumn(index, "up")}
+											title="Move up"
+										/>
+										<Button
+											appearance="subtle"
+											size="small"
+											icon={<ArrowDown24Regular />}
+											disabled={index === localColumns.length - 1}
+											onClick={() => moveColumn(index, "down")}
+											title="Move down"
+										/>
+									</div>
+								</div>
+							))}
+						</div>
+					</DialogContent>
+					<DialogActions>
+						<Button appearance="secondary" onClick={onClose}>
+							Cancel
+						</Button>
+						<Button appearance="primary" onClick={handleApply}>
+							Apply
+						</Button>
+					</DialogActions>
+				</DialogBody>
+			</DialogSurface>
+		</Dialog>
+	);
+}

package/src/features/fetchxml/ui/RightPane/DataGridCellRenderers.tsx

@@ -0,0 +1,356 @@
+/**
+ * Rich cell renderers for different attribute types in DataGrid
+ * Renders values using appropriate Fluent UI v9 components
+ * Prefers formatted values from OData annotations when available
+ */
+
+import { Switch, Badge, Label, SkeletonItem, makeStyles, tokens } from "@fluentui/react-components";
+import type { AttributeMetadata } from "../../api/pptbClient";
+
+const useStyles = makeStyles({
+	booleanCell: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacingHorizontalXS,
+	},
+	lookupCell: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+	},
+	lookupName: {
+		fontSize: tokens.fontSizeBase200,
+		fontWeight: tokens.fontWeightSemibold,
+	},
+	lookupType: {
+		fontSize: tokens.fontSizeBase100,
+		color: tokens.colorNeutralForeground3,
+	},
+	numberCell: {
+		textAlign: "right",
+		fontVariantNumeric: "tabular-nums",
+	},
+	dateCell: {
+		fontVariantNumeric: "tabular-nums",
+	},
+	picklistCell: {
+		display: "flex",
+		alignItems: "center",
+	},
+});
+
+/**
+ * Render a boolean/two-option value as a read-only Switch
+ * Uses formatted value from OData annotations if available
+ */
+export function BooleanCellRenderer({
+	value,
+	formattedValue,
+	attribute,
+}: {
+	value: unknown;
+	formattedValue?: unknown;
+	attribute?: AttributeMetadata;
+}) {
+	const styles = useStyles();
+	const boolValue = Boolean(value);
+
+	// Prefer formatted value, otherwise use metadata labels
+	const displayValue =
+		formattedValue ||
+		(boolValue
+			? attribute?.OptionSet?.TrueOption?.Label?.UserLocalizedLabel?.Label || "Yes"
+			: attribute?.OptionSet?.FalseOption?.Label?.UserLocalizedLabel?.Label || "No");
+
+	return (
+		<div className={styles.booleanCell}>
+			<Switch checked={boolValue} disabled />
+			<Label size="small">{String(displayValue)}</Label>
+		</div>
+	);
+}
+
+/**
+ * Render a picklist/state/status value as a Badge
+ * Uses formatted value from OData annotations if available
+ */
+export function PicklistCellRenderer({
+	value,
+	formattedValue,
+	attribute,
+}: {
+	value: unknown;
+	formattedValue?: unknown;
+	attribute?: AttributeMetadata;
+}) {
+	const styles = useStyles();
+
+	// Prefer formatted value
+	if (formattedValue) {
+		const appearance =
+			attribute?.AttributeType === "State" || attribute?.AttributeType === "Status"
+				? "filled"
+				: "tint";
+		return (
+			<div className={styles.picklistCell}>
+				<Badge appearance={appearance}>{String(formattedValue)}</Badge>
+			</div>
+		);
+	}
+
+	// Fallback to raw value with metadata lookup
+	const numValue = typeof value === "number" ? value : parseInt(String(value), 10);
+
+	if (isNaN(numValue)) {
+		return <span>—</span>;
+	}
+
+	// Find the option label from metadata
+	const option = attribute?.OptionSet?.Options?.find((opt) => opt.Value === numValue);
+	const label = option?.Label?.UserLocalizedLabel?.Label || String(numValue);
+
+	// Use different badge colors for different states
+	const appearance =
+		attribute?.AttributeType === "State" || attribute?.AttributeType === "Status"
+			? "filled"
+			: "tint";
+
+	return (
+		<div className={styles.picklistCell}>
+			<Badge appearance={appearance}>{label}</Badge>
+		</div>
+	);
+}
+
+/**
+ * Render a lookup/customer/owner value
+ * Uses formatted value from OData annotations (preferred)
+ */
+export function LookupCellRenderer({
+	value,
+	formattedValue,
+}: {
+	value: unknown;
+	formattedValue?: unknown;
+}) {
+	const styles = useStyles();
+
+	// Prefer formatted value (just the name string)
+	if (formattedValue) {
+		return <span className={styles.lookupName}>{String(formattedValue)}</span>;
+	}
+
+	// Fallback to raw value (structured object)
+	if (!value || typeof value !== "object") {
+		return <span>—</span>;
+	}
+
+	const lookupValue = value as { Id?: string; Name?: string; LogicalName?: string };
+
+	return (
+		<div className={styles.lookupCell}>
+			<span className={styles.lookupName}>{lookupValue.Name || "—"}</span>
+			{lookupValue.LogicalName && (
+				<span className={styles.lookupType}>{lookupValue.LogicalName}</span>
+			)}
+		</div>
+	);
+}
+
+/**
+ * Render a numeric value (integer, decimal, money)
+ * Uses formatted value from OData annotations if available
+ */
+export function NumberCellRenderer({
+	value,
+	formattedValue,
+	attribute,
+}: {
+	value: unknown;
+	formattedValue?: unknown;
+	attribute?: AttributeMetadata;
+}) {
+	const styles = useStyles();
+
+	// Prefer formatted value (already includes currency symbol, etc.)
+	if (formattedValue) {
+		return <span className={styles.numberCell}>{String(formattedValue)}</span>;
+	}
+
+	// Fallback to manual formatting
+	if (value === null || value === undefined || value === "") {
+		return <span>—</span>;
+	}
+
+	const numValue = typeof value === "number" ? value : parseFloat(String(value));
+
+	if (isNaN(numValue)) {
+		return <span>—</span>;
+	}
+
+	// Format based on attribute type
+	if (attribute?.AttributeType === "Money") {
+		// Format as currency (would need locale info for proper currency symbol)
+		return (
+			<span className={styles.numberCell}>
+				$
+				{numValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+			</span>
+		);
+	}
+
+	if (attribute?.AttributeType === "Integer" || attribute?.AttributeType === "BigInt") {
+		return <span className={styles.numberCell}>{numValue.toLocaleString()}</span>;
+	}
+
+	// Decimal/Double - use precision from metadata if available
+	const precision = attribute?.Precision ?? 2;
+	return (
+		<span className={styles.numberCell}>
+			{numValue.toLocaleString(undefined, {
+				minimumFractionDigits: 0,
+				maximumFractionDigits: precision,
+			})}
+		</span>
+	);
+}
+
+/**
+ * Render a date/time value
+ * Uses formatted value from OData annotations if available
+ */
+export function DateTimeCellRenderer({
+	value,
+	formattedValue,
+	attribute,
+}: {
+	value: unknown;
+	formattedValue?: unknown;
+	attribute?: AttributeMetadata;
+}) {
+	const styles = useStyles();
+
+	// Prefer formatted value
+	if (formattedValue) {
+		return <span className={styles.dateCell}>{String(formattedValue)}</span>;
+	}
+
+	// Fallback to manual formatting
+	if (!value) {
+		return <span>—</span>;
+	}
+
+	const dateValue = new Date(String(value));
+
+	if (isNaN(dateValue.getTime())) {
+		return <span>—</span>;
+	}
+
+	// Check if DateOnly format
+	const isDateOnly =
+		attribute?.Format === "DateOnly" || attribute?.DateTimeBehavior?.Value === "DateOnly";
+
+	if (isDateOnly) {
+		return (
+			<span className={styles.dateCell}>
+				{dateValue.toLocaleDateString(undefined, {
+					year: "numeric",
+					month: "short",
+					day: "numeric",
+				})}
+			</span>
+		);
+	}
+
+	// Full date-time
+	return (
+		<span className={styles.dateCell}>
+			{dateValue.toLocaleString(undefined, {
+				year: "numeric",
+				month: "short",
+				day: "numeric",
+				hour: "2-digit",
+				minute: "2-digit",
+			})}
+		</span>
+	);
+}
+
+/**
+ * Default text renderer for strings and other types
+ * Uses formatted value from OData annotations if available
+ */
+export function TextCellRenderer({
+	value,
+	formattedValue,
+}: {
+	value: unknown;
+	formattedValue?: unknown;
+}) {
+	// Prefer formatted value
+	const displayValue = formattedValue ?? value;
+
+	if (displayValue === null || displayValue === undefined || displayValue === "") {
+		return <span>—</span>;
+	}
+
+	return <span>{String(displayValue)}</span>;
+}
+
+/**
+ * Loading skeleton for virtualized cells
+ */
+export function LoadingCellRenderer() {
+	return <SkeletonItem />;
+}
+
+/**
+ * Get the appropriate cell renderer for an attribute type
+ * Now accepts formatted value from OData annotations
+ */
+export function getCellRenderer(
+	attributeType: string | undefined,
+	value: unknown,
+	formattedValue: unknown | undefined,
+	attribute?: AttributeMetadata
+) {
+	if (value === null || value === undefined) {
+		return <span>—</span>;
+	}
+
+	switch (attributeType) {
+		case "Boolean":
+			return (
+				<BooleanCellRenderer value={value} formattedValue={formattedValue} attribute={attribute} />
+			);
+
+		case "Picklist":
+		case "State":
+		case "Status":
+			return (
+				<PicklistCellRenderer value={value} formattedValue={formattedValue} attribute={attribute} />
+			);
+
+		case "Lookup":
+		case "Customer":
+		case "Owner":
+			return <LookupCellRenderer value={value} formattedValue={formattedValue} />;
+
+		case "Integer":
+		case "BigInt":
+		case "Decimal":
+		case "Double":
+		case "Money":
+			return (
+				<NumberCellRenderer value={value} formattedValue={formattedValue} attribute={attribute} />
+			);
+
+		case "DateTime":
+			return (
+				<DateTimeCellRenderer value={value} formattedValue={formattedValue} attribute={attribute} />
+			);
+
+		default:
+			return <TextCellRenderer value={value} formattedValue={formattedValue} />;
+	}
+}