Fix availableBlocks override eachother

Author: Tofandel

frontend/js/components/blocks/Blocks.vue

@@ -1,5 +1,5 @@
 <template>
-  <a17-blocks-list :editor-name="editorName" v-slot="{ savedBlocks, availableBlocks, moveBlock, moveBlockToEditor, cloneBlock }">
+  <a17-blocks-list :editor-name="editorName" :availability-id="availabilityId" v-slot="{ savedBlocks, availableBlocks, moveBlock, moveBlockToEditor, cloneBlock }">
     <div class="blocks">
       <draggable class="blocks__container"
                  :value="savedBlocks"
@@ -163,6 +163,9 @@
       editorName: {
         type: String,
         required: true
+      },
+      availabilityId: {
+        type: String,
       }
     },
     data () {
@@ -179,9 +182,8 @@
       }),
       ...mapGetters([
         'blocks',
-        'fieldsByBlockId',
         'availableBlocks'
-      ])
+      ]),
     },
     methods: {
       setOpened: function () {
@@ -265,7 +267,7 @@
         }
       },
       checkIfBlockTypeIsAvailable (editorName, type) {
-        const availableBlocks = JSON.parse(JSON.stringify(this.availableBlocks(editorName)))
+        const availableBlocks = this.availableBlocks(editorName)
         const blockTypes = availableBlocks.map(block => block.component)
 
         return blockTypes.indexOf(type) !== -1

frontend/js/components/blocks/BlocksList.js

@@ -8,13 +8,14 @@ export default {
     editorName: {
       type: String,
       required: true
+    },
+    availabilityId: {
+      type: String,
     }
   },
   computed: {
     availableBlocks () {
-      const splitted = this.editorName.split('|')
-      const editorName = splitted[splitted.length - 1]
-      return this.getAvailableBlocks(editorName)
+      return this.getAvailableBlocks(this.availabilityId ? this.availabilityId : this.editorName.split('|').pop())
     },
     savedBlocks () {
       return this.blocks(this.editorName)

src/Services/Forms/InlineRepeater.php

@@ -203,7 +203,7 @@ public function render(): View
             $repeater->max($this->max);
         }
 
-        $repeater->renderForBlocks = $this->renderForBlocks ?? false;
+        $repeater->renderForBlocks($this->renderForBlocks ?? false);
         return $repeater->render();
     }
 

src/View/Components/Fields/BlockEditor.php

@@ -54,6 +54,7 @@ public function render(): View
                     'value' => $this->name,
                     'nested' => $this->renderForBlocks,
                 ],
+                'availabilityId' => uniqid($this->name . '-')
             ])
         );
     }

views/partials/form/_block_editor.blade.php

@@ -3,12 +3,14 @@
 @endunless
 
 <a17-blocks title="{{ $label }}"
+    availability-id="{{ $availabilityId }}"
     @if ($renderForBlocks) :editor-name="nestedEditorName('{{ $name }}')" @else editor-name="{{ $name }}" @endif
-    trigger="{{ $trigger }}" :is-settings="{{ (bool) $isSettings ? 'true' : 'false' }}">
+
+    trigger="{{ $trigger }}" :is-settings="{{ $isSettings ? 'true' : 'false' }}">
 </a17-blocks>
 
 @push('vuexStore')
-    window['{{ config('twill.js_namespace') }}'].STORE.form.availableBlocks['{{ $name }}'] =
+    window['{{ config('twill.js_namespace') }}'].STORE.form.availableBlocks['{{ $availabilityId }}'] =
     {!! json_encode(array_values($allowedBlocks)) !!}
     window['{{ config('twill.js_namespace') }}'].STORE.form.editorNames.push({!! json_encode($editorName) !!})
 @endpush