element components

app/helpers/admin/blocks_helper.rb

 module Admin::BlocksHelper
 
   def block_component_edit(property, **options)
-    component = block_component property
+    component = block_component property, options[:element]
     partial = "admin/communication/blocks/components/#{component.kind}/edit"
     render partial, property: property, **options
   end
 
   def block_component_preview(property, **options)
-    component = block_component property
+    component = block_component property, options[:element]
     partial = "admin/communication/blocks/components/#{component.kind}/preview"
     render partial, property: property, **options
   end
 
   def block_component_static(property, **options)
-    component = block_component property
+    component = block_component property, options[:element]
     partial = "admin/communication/blocks/components/#{component.kind}/static"
     render partial, property: property, **options
   end
 
   protected
 
-  def block_component(property)
-    @block.template.public_send "#{property}_component"
+  def block_component(property, element)
+    template = element.nil? ? @block.template
+                            : element
+    template.public_send "#{property}_component"
   end
 end

app/models/communication/block/template/gallery/image.rb

 class Communication::Block::Template::Gallery::Image < Communication::Block::Template::Base
   has_image :image
+  has_string :alt
+  has_rich_text :credit
   has_rich_text :text
 
   def default_data

app/views/admin/communication/blocks/components/add_element/_edit.html.erb

 <a  class="<%= button_classes('mb-4') %>"
-    v-on:click="data.elements.push(defaultElement)">
+    v-on:click="data.elements.push(Object.assign({}, defaultElement))">
     <%= label %>
 </a>

app/views/admin/communication/blocks/components/rich_text/_edit.html.erb

-<label  class="form-label" for="<%= property %>">
-  <%= t "admin.communication.blocks.templates.#{@block.template_kind}.edit.#{property}.label" %>
+<%
+template_kind = @block.template_kind
+i18n_template = "admin.communication.blocks.templates.#{template_kind}.edit"
+if element
+  model = 'element'
+  dom_id = "'element-' + index + '-#{property}'"
+  i18n_component = "#{i18n_template}.element.#{property}"
+else
+  model = 'data'
+  dom_id = property
+  i18n_component = "#{i18n_template}.#{property}"
+end
+label ||= t "#{i18n_component}.label"
+placeholder ||= t "#{i18n_component}.placeholder"
+%>
+
+<label      class="form-label"
+            aria-label="<%= label %>"
+            :for="<%= dom_id.html_safe %>">
+  <%= label %>
 </label>
 <div class="summernote mb-3">
-  <textarea id="<%= property %>"
+  <textarea :id="<%= dom_id.html_safe %>"
             class="form-control summernote-vue"
-            v-model="data.<%= property %>"
+            v-model="<%= model %>.<%= property %>"
             data-summernote-config="mini-list"
-            placeholder="<%= t "admin.communication.blocks.templates.#{@block.template_kind}.edit.#{property}.placeholder" %>"></textarea>
+            placeholder="<%= placeholder %>"></textarea>
 </div>

app/views/admin/communication/blocks/components/string/_edit.html.erb

 <%
 template_kind = @block.template_kind
-namespace = "admin.communication.blocks.templates.#{template_kind}.edit.#{property}"
-label ||= t "#{namespace}.label"
-placeholder ||= t "#{namespace}.placeholder"
+i18n_template = "admin.communication.blocks.templates.#{template_kind}.edit"
+if element
+  model = 'element'
+  dom_id = "'element-' + index + '-#{property}'"
+  i18n_component = "#{i18n_template}.element.#{property}"
+else
+  model = 'data'
+  dom_id = property
+  i18n_component = "#{i18n_template}.#{property}"
+end
+label ||= t "#{i18n_component}.label"
+placeholder ||= t "#{i18n_component}.placeholder"
 %>
-<label  class="form-label" for="<%= property %>">
+
+<label  class="form-label"
+        aria-label="<%= label %>"
+        :for="<%= dom_id.html_safe %>">
   <%= label%>
 </label>
-<div class="mb-3">
-  <input  id="<%= property %>"
-          class="form-control mb-3"
-          v-model="data.<%= property %>"
-          placeholder="<%= placeholder %>"
-          type="text" />
-</div>
+<input  :id="<%= dom_id.html_safe %>"
+        class="form-control mb-3"
+        v-model="<%= model %>.<%= property %>"
+        placeholder="<%= placeholder %>"
+        type="text" />

app/views/admin/communication/blocks/components/text/_edit.html.erb

 <%
+template_kind = @block.template_kind
+i18n_template = "admin.communication.blocks.templates.#{template_kind}.edit"
+if element
+  model = 'element'
+  dom_id = "'element-' + index + '-#{property}'"
+  i18n_component = "#{i18n_template}.element.#{property}"
+else
+  model = 'data'
+  dom_id = property
+  i18n_component = "#{i18n_template}.#{property}"
+end
+label ||= t "#{i18n_component}.label"
+placeholder ||= t "#{i18n_component}.placeholder"
 rows ||= 3
 %>
-<label  class="form-label" for="<%= property %>">
-  <%= t "admin.communication.blocks.templates.#{@block.template_kind}.edit.#{property}.label" %>
+
+<label    class="form-label"
+          aria-label="<%= label %>"
+          :for="<%= dom_id.html_safe %>">
+  <%= label %>
 </label>
-<div class="mb-3">
-  <textarea id="<%= property %>"
-            class="form-control"
-            rows="<%= rows %>"
-            v-model="data.<%= property %>"
-            placeholder="<%= t "admin.communication.blocks.templates.#{@block.template_kind}.edit.#{property}.placeholder" %>"></textarea>
-</div>
+<textarea :id="<%= dom_id.html_safe %>"
+          class="form-control mb-3"
+          rows="<%= rows %>"
+          v-model="<%= model %>.<%= property %>"
+          placeholder="<%= placeholder %>"></textarea>

app/views/admin/communication/blocks/templates/gallery/_edit.html.erb

+<%
+element = @block.template.default_element
+%>
 <%= render 'admin/communication/blocks/components/layouts/edit',
             horizontal: true %>
 
@@ -5,7 +8,9 @@
             label: t('.add_image') %>
 
 <draggable :list="data.elements" handle=".imageHandle" class="row">
-  <div v-for="(image, imageIndex) in data.elements" class="col-xxl-2 col-xl-3 col-md-4 col-6">
+  <div  v-for="(element, index) in data.elements"
+        :key="index"
+        class="col-xxl-2 col-xl-3 col-md-4 col-6">
     <div class="card">
       <div class="card-header border-bottom">
         <a class="btn ps-0 pt-0 imageHandle">
@@ -13,56 +18,27 @@
         </a>
         <div class="float-end">
           <a  class="btn btn-sm btn-danger"
-              v-on:click="data.elements.splice(data.elements.indexOf(image), 1)"
+              v-on:click="data.elements.splice(data.elements.indexOf(element), 1)"
               title="<%= t '.remove_image' %>">
               <i class="fas fa-times"></i>
           </a>
         </div>
       </div>
-      <img :src="getImageUrl(image.file)" class="img-fluid d-block" v-if="image.file.id" />
+      <img :src="getImageUrl(element.file)" class="img-fluid d-block" v-if="element.file.id" />
       <div class="card-body">
         <label  class="form-label"
-                :for="'image-file-' + imageIndex">
+                :for="'element-' + index + '-file'">
           <%= t '.image_label' %>
         </label>
         <input  class="form-control mb-3"
                 type="file"
                 accept="image/*"
-                @change="onFileImageChange( $event, image, 'file' )"
-                :id="'image-file-' + imageIndex">
+                @change="onFileImageChange( $event, element, 'file' )"
+                :id="'element-' + index + '-file'">
 
-        <div class="mb-3">
-          <label  class="form-label"
-                  aria-label="<%= t '.alt_label' %>"
-                  :for="'image-alt-' + imageIndex">
-                  <%= t '.alt_label' %>
-          </label>
-          <input  class="form-control mb-2"
-                  type="text"
-                  v-model="image.alt"
-                  placeholder="<%= t '.alt_placeholder' %>"
-                  :id="'image-alt-' + imageIndex">
-
-          <label  class="form-label"
-                  aria-label="<%= t '.text_label' %>"
-                  :for="'image-text-' + imageIndex">
-                  <%= t '.text_label' %>
-          </label>
-          <textarea class="form-control mb-2"
-                  v-model="image.text"
-                  placeholder="<%= t '.text_placeholder' %>"
-                  :id="'image-text-' + imageIndex"></textarea>
-
-          <label  class="form-label"
-                  :for="'image-credit-' + imageIndex">
-            <%= t '.credit_label' %>
-          </label>
-          <input  type="text"
-                  class="form-control"
-                  v-model="image.credit"
-                  :id="'image-credit-' + imageIndex"
-                  placeholder="<%= t '.credit_placeholder' %>" />
-        </div>
+        <%= block_component_edit :alt, element: element %>
+        <%= block_component_edit :credit, element: element %>
+        <%= block_component_edit :text, element: element %>
       </div>
     </div>
   </div>

config/locales/communication/fr.yml

@@ -222,6 +222,16 @@ fr:
                 label: Carrousel
                 description: Les images sont présentées en grand, avec une navigation suivant / précédent.
             edit:
+              element:
+                text:
+                  label: Texte
+                  placeholder: Entrer le texte
+                alt:
+                  label: Texte alternatif
+                  placeholder: Entrer la description textuelle
+                credit:
+                  label: Crédit
+                  placeholder: Entrer le crédit de l'image ici
               add_image: Ajouter une image
               image_label: Image (.png, .jpg)
               alt_label: Texte alternatif