Merge pull request #129 from sumocoders/add-min-max-to-collection-items

Add min/max to form collection

src/js/Framework/FormCollection.js

@@ -1,20 +1,23 @@
 import Sortable from 'sortablejs'
 
 const FormCollection = function (element) {
-  const addButton = element.querySelector('[data-role="collection-add-button"]')
+  this.addButton = element.querySelector('[data-role="collection-add-button"]')
   // set index if not defined
   const index = element.dataset.index
 
   const items = element.querySelectorAll('[data-role="collection-item"]')
-  const numberOfItems = items.length
 
-  addButton.addEventListener('click', event => { addItem(event, element) })
+  this.numberOfItems = items.length
+  this.minimumItems = element.dataset.min !== undefined && element.dataset.min !== 'null' ? parseInt(element.dataset.min) : 0
+  this.maximumItems = element.dataset.max !== undefined && element.dataset.max !== 'null' ? parseInt(element.dataset.max) : null
+
+  this.addButton.addEventListener('click', event => { addItem(event, element) })
   element.querySelectorAll('[data-role="collection-remove-button"]').forEach(button => {
     button.addEventListener('click', event => { removeItem(event) })
   })
 
   if (index === undefined || index === null) {
-    element.dataset.index = numberOfItems
+    element.dataset.index = this.numberOfItems
   }
 
   if (element.dataset.allowDragAndDrop === '1') {
@@ -26,10 +29,21 @@ const FormCollection = function (element) {
       dragClass: 'collection-item-selected'
     })
   }
+
+  // Add minimum items
+  while (this.numberOfItems < this.minimumItems) {
+    addItem(new Event('click'), element)
+  }
 }
 
 const addItem = function (event, element) {
   event.preventDefault()
+  // Check if the button should have been disabled
+  if (this.maximumItems && this.numberOfItems >= this.maximumItems) {
+    this.addButton.setAttribute('disabled', 'disabled')
+
+    return
+  }
 
   document.dispatchEvent(new Event('add.collection.item'))
 
@@ -41,6 +55,8 @@ const addItem = function (event, element) {
   prototype = prototype.replace(/__name__/g, index)
   // increase the index with one for the next item
   element.dataset.index = index + 1
+  // increase the number of items
+  this.numberOfItems++
   // Display the form in the page before the "new" link
 
   const container = element.querySelector('[data-role="collection-item-container"]')
@@ -51,6 +67,10 @@ const addItem = function (event, element) {
     removeItem(event)
   })
 
+  if (this.maximumItems && this.numberOfItems >= this.maximumItems) {
+    this.addButton.setAttribute('disabled', 'disabled')
+  }
+
   document.dispatchEvent(new Event('added.collection.item'))
 }
 
@@ -60,8 +80,11 @@ const removeItem = function (event) {
   document.dispatchEvent(new Event('remove.collection.item'))
 
   const itemToRemove = event.target.closest('[data-role="collection-item"]')
-  console.log(itemToRemove)
   itemToRemove.parentNode.removeChild(itemToRemove)
+  this.numberOfItems--
+  if (this.maximumItems && this.numberOfItems < this.maximumItems) {
+    this.addButton.removeAttribute('disabled')
+  }
 
   document.dispatchEvent(new Event('removed.collection.item'))
 }