Disabled 'Add argument to list' button when maxItems is reached

Author: zonia3000

src/lib/components/common/jschema/ArrayProperty.svelte

@@ -55,9 +55,7 @@
 	}
 
 	function addNestedProperty() {
-		const maxItems = getMaxItems(schemaProperty.referenceSchema);
-		if (maxItems !== null && nestedProperties.length === maxItems) {
-			// It is not possible to add more properties than maxItems
+		if (!canAddMoreItems(nestedProperties)) {
 			return;
 		}
 		schemaProperty.addNestedSchemaProperty(undefined, nestedProperties.length);
@@ -68,13 +66,13 @@
 	 * @param {number} index
 	 */
 	function removeNestedProperty(index) {
-		schemaProperty.removeNestedSchemaProperty(index);
-		nestedProperties = schemaProperty.nestedProperties;
 		const minItems = getMinItems(schemaProperty.referenceSchema);
-		if (schemaProperty.isRequired() && minItems !== null && nestedProperties.length < minItems) {
-			schemaProperty.addNestedSchemaProperty(undefined, index);
-			nestedProperties = schemaProperty.nestedProperties;
+		if (schemaProperty.isRequired() && minItems !== null && nestedProperties.length === minItems) {
+			schemaProperty.updateNestedPropertyValue(undefined, index);
+		} else {
+			schemaProperty.removeNestedSchemaProperty(index);
 		}
+		nestedProperties = schemaProperty.nestedProperties;
 	}
 
 	/**
@@ -90,6 +88,16 @@
 	function moveDown(index) {
 		nestedProperties = schemaProperty.moveNestedPropertyDown(index);
 	}
+
+	/**
+	 * @param {any[]} nestedProperties
+	 */
+	function canAddMoreItems(nestedProperties) {
+		const maxItems = getMaxItems(schemaProperty.referenceSchema);
+		return maxItems === null || nestedProperties.length < maxItems;
+	}
+
+	$: addNestedPropertyBtnDisabled = !canAddMoreItems(nestedProperties);
 </script>
 
 {#if schemaProperty}
@@ -120,7 +128,12 @@
 					>
 						<div class="accordion-body p-1">
 							<div class="d-flex justify-content-center p-2">
-								<button class="btn btn-primary" type="button" on:click={addNestedProperty}>
+								<button
+									class="btn btn-primary"
+									type="button"
+									on:click={addNestedProperty}
+									disabled={addNestedPropertyBtnDisabled}
+								>
 									Add argument to list
 								</button>
 							</div>

src/lib/components/common/jschema/schema_management.js

@@ -249,6 +249,19 @@ export class SchemaProperty {
 		return nestedProperty;
 	}
 
+	/**
+	 * @param {any} value
+	 * @param {number} index
+	 */
+	updateNestedPropertyValue(value, index) {
+		const nestedProperty = this.nestedProperties[index];
+		nestedProperty.value = value;
+		this.nestedProperties = this.nestedProperties.filter((p, i) =>
+			i === index ? nestedProperty : p
+		);
+		this.manager.updateValue(this.key, this.getUpdatedNestedProperties());
+	}
+
 	/**
 	 * @param {number} index
 	 * @returns {any[]}

tests/jschema.spec.js

@@ -146,7 +146,7 @@ test('JSON Schema validation', async ({ page, browserName, workflow }) => {
 		const addBtn = form.getByRole('button', { name: 'Add argument to list' }).first();
 		await addBtn.click();
 		await addBtn.click();
-		await addBtn.click();
+		expect(await addBtn.isDisabled()).toEqual(true);
 		// Fill items
 		await form.locator('id=property-requiredArrayWithMinMaxItems###0').fill('a');
 		await form.locator('id=property-requiredArrayWithMinMaxItems###1').fill('b');
@@ -163,6 +163,7 @@ test('JSON Schema validation', async ({ page, browserName, workflow }) => {
 		await checkFirstArray(['a', 'b', 'd', 'c']);
 		// Remove items
 		await form.getByRole('button', { name: 'Remove' }).nth(3).click();
+		expect(await addBtn.isDisabled()).toEqual(false);
 		await form.getByRole('button', { name: 'Remove' }).nth(2).click();
 		await checkFirstArray(['a', 'b']);
 		await form.getByRole('button', { name: 'Remove' }).nth(1).click();
@@ -186,11 +187,12 @@ test('JSON Schema validation', async ({ page, browserName, workflow }) => {
 		await addBtn.click();
 		await addBtn.click();
 		await addBtn.click();
-		await addBtn.click();
+		expect(await addBtn.isDisabled()).toEqual(true);
 		await form.locator('id=property-optionalArrayWithMinMaxItems###0').fill('a');
 		await form.locator('id=property-optionalArrayWithMinMaxItems###1').fill('b');
 		await form.locator('id=property-optionalArrayWithMinMaxItems###2').fill('c');
 		await form.getByRole('button', { name: 'Remove' }).nth(4).click();
+		expect(await addBtn.isDisabled()).toEqual(false);
 		await form.getByRole('button', { name: 'Remove' }).nth(3).click();
 		await form.getByRole('button', { name: 'Remove' }).nth(2).click();
 		expect(form.locator('id=property-optionalArrayWithMinMaxItems###0')).toHaveCount(0);