Fixing binding between engine and web forms

Author: latin-panda

packages/web-forms/src/components/controls/RankControl.vue

@@ -9,9 +9,14 @@ interface RankControlProps {
 	readonly question: RankNode;
 }
 
+interface RankDraggableOption {
+	value: string;
+	label: string;
+}
+
 const props = defineProps<RankControlProps>();
 const HOLD_DELAY = 60; // Delay in ms to hold an item before dragging, avoids accidental reordering on swipe.
-const options = ref([]);
+const options = ref<RankDraggableOption[]>([]);
 const touched = ref(false);
 const submitPressed = inject<boolean>('submitPressed');
 const highlight = {
@@ -20,18 +25,15 @@ const highlight = {
 };
 
 const transformOptions = (rankOptions: RankItem[]) => {
-	options.value = rankOptions.map((option) => {
-		const value = option.value;
-		const valueOption = props.question.getValueOption(value);
-
-		if (valueOption == null) {
-			throw new RankFunctionalityError(`Failed to find option for value: ${value}`);
-		}
+	if (options.value.length) {
+		options.value.forEach((option) => {
+			option.label = props.question.getValueLabel(option.value);
+		});
+		return;
+	}
 
-		return {
-			value,
-			label: valueOption.label.asString,
-		};
+	options.value = rankOptions.map((option) => {
+		return { value: option.value, label: props.question.getValueLabel(option.value) };
 	});
 };
 

packages/xforms-engine/src/client/RankNode.ts

@@ -17,8 +17,8 @@ export interface RankNodeState extends BaseValueNodeState<readonly string[]> {
 	get valueOptions(): RankValueOptions;
 
 	/**
-	 * This value is an ordered collection of {@link RankItem}s.
-	 * The order of the items is important and should be preserved during processing.
+	 * An ordered collection of values from {@link RankItem}.
+	 * The order of the items is important and must be preserved during processing.
 	 */
 	get value(): readonly string[];
 }
@@ -37,12 +37,12 @@ export interface RankNode extends BaseValueNode<'string', readonly string[]> {
 	readonly validationState: LeafNodeValidationState;
 
 	/**
-	 * Convenience API to get the value which is an ordered collection of {@link RankItem}s.
+	 * Convenience API to get the {@link RankItem}'s label.
 	 */
-	getValueOption(value: string): RankItem | null;
+	getValueLabel(value: string): string;
 
 	/**
-	 * Set the value which is an ordered collection of {@link RankItem}s.
+	 * Set the value which is an ordered collection of values from {@link RankItem}.
 	 * Calling this setter replaces the currently value.
 	 * If called with an empty array, the current is cleared.
 	 */

packages/xforms-engine/src/instance/RankControl.ts

@@ -134,14 +134,9 @@ export class RankControl
 		this.currentState = state.currentState;
 	}
 
-	/**
-	 * This method is a client-facing convenience API for reading state,
-	 * so it **MUST** read from client-reactive state!
-	 * @param value
-	 */
-	getValueOption(value: string): RankItem | null {
+	getValueLabel(value: string): string {
 		const valueOption = this.currentState.valueOptions.find(item => item.value === value);
-		return valueOption ?? null;
+		return valueOption.label.asString;
 	}
 
 	setValues(valuesInOrder: readonly string[]): Root {