From b1ea6413746dfc4c9a02c9d8ea931ee4d0aca9c9 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 24 May 2024 13:21:11 +0200
Subject: [PATCH] block code editor: allow to add block on the top

---
 src/core/Resources/assets/css/admin.scss         | 16 +++++++++++-----
 .../js/components/builder-block/BuilderBlock.vue |  9 +++++++++
 .../builder-block/BuilderBlockCreate.vue         | 16 ++++++++++++----
 .../builder-block/BuilderBlockItem.vue           | 12 ++++++++++++
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss
index 34745ec..4fccd8a 100644
--- a/src/core/Resources/assets/css/admin.scss
+++ b/src/core/Resources/assets/css/admin.scss
@@ -805,10 +805,16 @@ label.required::after {
     }
   }
 
-  .builder-add .btn {
-    font-size: 12px;
-    line-height: 14px;
-    padding: 3px 5px;
+  .builder-add {
+    &-top {
+      margin-top: 7px;
+    }
+
+    .btn {
+      font-size: 12px;
+      line-height: 14px;
+      padding: 3px 5px;
+    }
   }
 
   .block-settings {
@@ -821,7 +827,7 @@ label.required::after {
     }
   }
 
-  .block[class*="block-depth"] .block {
+  .block .block {
     margin-top: 10px;
   }
 
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
index c1e17ca..adc33ae 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue
@@ -12,6 +12,14 @@
     :class="{'block-show-dropzone': showDragDrop}"
     class="block"
   >
+    <BuilderBlockCreate
+      :container="value"
+      :widgets="widgets"
+      :openedBlocks="openedBlocks"
+      :allowedWidgets="[]"
+      v-if="value.length > 0"
+      position="top"
+    />
     <BuilderBlockItem
       v-for="(block, key) in value"
       :key="block.id + '-' + key"
@@ -30,6 +38,7 @@
           :widgets="widgets"
           :openedBlocks="openedBlocks"
           :allowedWidgets="[]"
+          position="bottom"
         />
         <div>
           <button
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
index 7c7fc40..0a55c56 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue
@@ -42,7 +42,7 @@
 </style>
 
 <template>
-  <div class="builder-add">
+  <div class="builder-add" :class="{'builder-add-top': position === 'top'}">
     <button type="button" class="btn btn-secondary" v-on:click="togglePicker">
       <span class="fa fa-plus"></span>
     </button>
@@ -106,7 +106,11 @@ export default {
     openedBlocks: {
       type: Object,
       required: true
-    }
+    },
+    position: {
+      type: String,
+      required: true
+    },
   },
   data() {
     return {
@@ -129,10 +133,14 @@ export default {
         children: [],
       }
 
-      this.container.push(block)
-      this.openedBlocks[block.id] = true
+      if (this.position === 'bottom') {
+        this.container.push(block)
+      } else {
+        this.container.unshift(block)
+      }
 
       this.$emit('updateContainer', this.container)
+      this.openedBlocks[block.id] = true
       this.togglePicker()
     },
     makeId() {
diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
index 1b5a527..741d712 100644
--- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
+++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue
@@ -59,6 +59,17 @@
       </div>
     </div>
 
+    <div v-if="widget.isContainer" class="container">
+      <BuilderBlockCreate
+        :container="item.children"
+        :widgets="widgets"
+        :openedBlocks="openedBlocks"
+        :allowedWidgets="widget.widgets"
+        v-if="item.children.length > 0"
+        position="top"
+      />
+    </div>
+
     <Draggable
       v-if="widget.isContainer"
       v-model="item.children"
@@ -90,6 +101,7 @@
         :widgets="widgets"
         :openedBlocks="openedBlocks"
         :allowedWidgets="widget.widgets"
+        position="bottom"
       />
     </div>
   </div>