Add limit to a custom layout

resources/js/components/FormField.vue

@@ -61,11 +61,19 @@ export default {
     },
 
     data() {
+
+        let layoutCounter = [];
+
+        this.field.layouts.map(function(value, key) {
+            layoutCounter[value.name] = value.limit;
+        });
+
         return {
             order: [],
             groups: {},
             files: {},
-            limitCounter: this.field.limit
+            limitCounter: this.field.limit,
+            layoutCounter: layoutCounter
         };
     },
 
@@ -169,6 +177,14 @@ export default {
         addGroup(layout, attributes, key, collapsed) {
             if(!layout) return;
 
+            if(this.layoutCounter[layout.name] === 0) {
+                Nova.error(this.__('The layout :customLayout is limited to :layoutLimit', {
+                    customLayout: layout.name,
+                    layoutLimit: layout.limit,
+                }));
+                return;
+            }
+
             collapsed = collapsed || false;
 
             let fields = attributes || JSON.parse(JSON.stringify(layout.fields)),
@@ -177,6 +193,10 @@ export default {
             this.groups[group.key] = group;
             this.order.push(group.key);
 
+            if(this.layoutCounter[layout.name] !== null) {
+                this.layoutCounter[layout.name]--;
+            }
+
             if (this.limitCounter > 0) {
                 this.limitCounter--;
             }
@@ -208,13 +228,19 @@ export default {
          * Remove a group
          */
         remove(key) {
+
+            let layout = this.groups[key].name;
             let index = this.order.indexOf(key);
 
             if(index < 0) return;
 
             this.order.splice(index, 1);
             delete this.groups[key];
 
+            if(this.layoutCounter[layout.name] !== null) {
+                this.layoutCounter[layout.name]++;
+            }
+
             if (this.limitCounter >= 0) {
                 this.limitCounter++;
             }

src/Layouts/Layout.php

@@ -22,6 +22,13 @@ class Layout implements LayoutInterface, JsonSerializable, ArrayAccess, Arrayabl
     use HidesAttributes;
     use HasFlexible;
 
+    /**
+     * The layout's limit
+     *
+     * @var int
+     */
+    protected $limit;
+
     /**
      * The layout's name
      *
@@ -581,6 +588,7 @@ public function jsonSerialize()
         $this->resolve(true);
 
         return [
+            'limit' => $this->limit,
             'name' => $this->name,
             'title' => $this->title,
             'fields' => $this->fields->jsonSerialize()