From 369370aed5060bd87440ffe008c9c26c2e0063d2 Mon Sep 17 00:00:00 2001
From: Droxx <michaelstocks1@gmail.com>
Date: Tue, 11 Jul 2023 13:12:56 +0200
Subject: [PATCH] feat: support maxItems & minItems in Vue array renderer

Disable add and remove buttons in Vue array renderer according to 'maxItems' and
'minItems' when the 'restrict' UI Schema option is set.

Also all array buttons are now disabled if the overall control is disabled.
---
 .../src/examples/arrays-with-detail.ts        |  3 ++
 .../src/examples/arrays-with-sorting.ts       |  4 +++
 .../src/array/ArrayListElement.vue            |  6 ++++
 .../src/array/ArrayListRenderer.vue           | 33 +++++++++++++++++--
 .../unit/array/ArrayListRenderer.spec.ts      | 22 +++++++++++++
 5 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/examples/src/examples/arrays-with-detail.ts b/packages/examples/src/examples/arrays-with-detail.ts
index c830d55ec..a21c40853 100644
--- a/packages/examples/src/examples/arrays-with-detail.ts
+++ b/packages/examples/src/examples/arrays-with-detail.ts
@@ -32,6 +32,8 @@ export const schema = {
     occupation: { type: 'string' },
     comments: {
       type: 'array',
+      minItems: 2,
+      maxItems: 8,
       items: {
         type: 'object',
         properties: {
@@ -58,6 +60,7 @@ export const uischema = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
+        restrict: true,
         detail: {
           type: 'VerticalLayout',
           elements: [
diff --git a/packages/examples/src/examples/arrays-with-sorting.ts b/packages/examples/src/examples/arrays-with-sorting.ts
index ee6932ade..9891c2d94 100644
--- a/packages/examples/src/examples/arrays-with-sorting.ts
+++ b/packages/examples/src/examples/arrays-with-sorting.ts
@@ -30,6 +30,8 @@ export const schema = {
   properties: {
     comments: {
       type: 'array',
+      minItems: 2,
+      maxItems: 8,
       items: {
         type: 'object',
         properties: {
@@ -64,6 +66,7 @@ export const uischema = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
+        restrict: true,
       },
     },
   ],
@@ -81,6 +84,7 @@ export const uischemaWithSorting = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
+        restrict: true,
       },
     },
   ],
diff --git a/packages/vue/vue-vanilla/src/array/ArrayListElement.vue b/packages/vue/vue-vanilla/src/array/ArrayListElement.vue
index 62e8da464..01df843f5 100644
--- a/packages/vue/vue-vanilla/src/array/ArrayListElement.vue
+++ b/packages/vue/vue-vanilla/src/array/ArrayListElement.vue
@@ -19,6 +19,7 @@
         ↓
       </button>
       <button
+        :disabled="!deleteEnabled"
         :class="styles.arrayList.itemDelete"
         type="button"
         @click="deleteClicked"
@@ -69,6 +70,11 @@ const listItem = defineComponent({
       type: Function,
       default: undefined,
     },
+    deleteEnabled: {
+      required: false,
+      type: Boolean,
+      default: true,
+    },
     delete: {
       required: false,
       type: Function,
diff --git a/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue b/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
index 2674df945..8f3fa3af0 100644
--- a/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
+++ b/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
@@ -4,6 +4,9 @@
       <button
         :class="styles.arrayList.addButton"
         type="button"
+        :disabled="
+          !control.enabled || (appliedOptions.restrict && maxItemsReached)
+        "
         @click="addButtonClick"
       >
         +
@@ -19,9 +22,10 @@
     >
       <array-list-element
         :move-up="moveUp(control.path, index)"
-        :move-up-enabled="index > 0"
+        :move-up-enabled="control.enabled && index > 0"
         :move-down="moveDown(control.path, index)"
-        :move-down-enabled="index < control.data.length - 1"
+        :move-down-enabled="control.enabled && index < control.data.length - 1"
+        :delete-enabled="control.enabled && !minItemsReached"
         :delete="removeItems(control.path, [index])"
         :label="childLabelForIndex(index)"
         :styles="styles"
@@ -50,6 +54,8 @@ import {
   rankWith,
   ControlElement,
   schemaTypeIs,
+  Resolve,
+  JsonSchema,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
@@ -77,6 +83,29 @@ const controlRenderer = defineComponent({
     noData(): boolean {
       return !this.control.data || this.control.data.length === 0;
     },
+    arraySchema(): JsonSchema | undefined {
+      return Resolve.schema(
+        this.schema,
+        this.control.uischema.scope,
+        this.control.rootSchema
+      );
+    },
+    maxItemsReached(): boolean | undefined {
+      return (
+        this.arraySchema !== undefined &&
+        this.arraySchema.maxItems !== undefined &&
+        this.control.data !== undefined &&
+        this.control.data.length >= this.arraySchema.maxItems
+      );
+    },
+    minItemsReached(): boolean | undefined {
+      return (
+        this.arraySchema !== undefined &&
+        this.arraySchema.minItems !== undefined &&
+        this.control.data !== undefined &&
+        this.control.data.length <= this.arraySchema.minItems
+      );
+    },
   },
   methods: {
     composePaths,
diff --git a/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
index cfccf04fe..fcd973751 100644
--- a/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
@@ -4,6 +4,8 @@ import { mountJsonForms } from '../util';
 const schema = {
   type: 'array',
   title: 'My Array',
+  maxItems: 3,
+  minItems: 1,
   items: {
     type: 'string',
   },
@@ -11,6 +13,9 @@ const schema = {
 const uischema = {
   type: 'Control',
   scope: '#',
+  options: {
+    restrict: true,
+  },
 };
 
 describe('ArrayListRenderer.vue', () => {
@@ -37,6 +42,14 @@ describe('ArrayListRenderer.vue', () => {
     expect(wrapper.vm.data).to.deep.equal(['a', 'b', '']);
   });
 
+  it('add button disabled if maxItems is reached', async () => {
+    const wrapper = mountJsonForms(['a', 'b'], schema, uischema);
+    const addButton = wrapper.find('.array-list-add');
+    expect(addButton.attributes().disabled).to.not.exist;
+    await addButton.trigger('click');
+    expect(addButton.attributes().disabled).to.exist;
+  });
+
   it('remove element from array', async () => {
     const wrapper = mountJsonForms(['a', 'b', 'c'], schema, uischema);
     const deleteButtons = wrapper.findAll('.array-list-item-delete');
@@ -44,6 +57,15 @@ describe('ArrayListRenderer.vue', () => {
     expect(wrapper.vm.data).to.deep.equal(['a', 'c']);
   });
 
+  it('remove button disabled if minItems is reached', async () => {
+    const wrapper = mountJsonForms(['a', 'b'], schema, uischema);
+    const deleteButtons = wrapper.findAll('.array-list-item-delete');
+    expect(deleteButtons[0].attributes().disabled).to.not.exist;
+    expect(deleteButtons[1].attributes().disabled).to.not.exist;
+    await deleteButtons[0].trigger('click');
+    expect(deleteButtons[0].attributes().disabled).to.exist;
+  });
+
   it('move element up', async () => {
     const wrapper = mountJsonForms(['a', 'b', 'c'], schema, uischema);
     const moveUpButtons = wrapper.findAll('.array-list-item-move-up');