From e9e9efab691f8b93d493cf41a2f4f4991fe47d58 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Tue, 7 Jun 2022 20:09:02 +0200
Subject: [PATCH] element components
---
app/helpers/admin/blocks_helper.rb | 12 +++--
.../block/template/gallery/image.rb | 2 +
.../components/add_element/_edit.html.erb | 2 +-
.../components/rich_text/_edit.html.erb | 28 ++++++++--
.../blocks/components/string/_edit.html.erb | 32 ++++++++----
.../blocks/components/text/_edit.html.erb | 32 ++++++++----
.../blocks/templates/gallery/_edit.html.erb | 52 +++++--------------
config/locales/communication/fr.yml | 10 ++++
8 files changed, 101 insertions(+), 69 deletions(-)
diff --git a/app/helpers/admin/blocks_helper.rb b/app/helpers/admin/blocks_helper.rb
index 387ff3e01..cbec783b0 100644
--- a/app/helpers/admin/blocks_helper.rb
+++ b/app/helpers/admin/blocks_helper.rb
@@ -1,26 +1,28 @@
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
diff --git a/app/models/communication/block/template/gallery/image.rb b/app/models/communication/block/template/gallery/image.rb
index 9308ff92c..40f093130 100644
--- a/app/models/communication/block/template/gallery/image.rb
+++ b/app/models/communication/block/template/gallery/image.rb
@@ -1,5 +1,7 @@
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
diff --git a/app/views/admin/communication/blocks/components/add_element/_edit.html.erb b/app/views/admin/communication/blocks/components/add_element/_edit.html.erb
index a3c609545..4f2a0da8a 100644
--- a/app/views/admin/communication/blocks/components/add_element/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/add_element/_edit.html.erb
@@ -1,4 +1,4 @@
<a class="<%= button_classes('mb-4') %>"
- v-on:click="data.elements.push(defaultElement)">
+ v-on:click="data.elements.push(Object.assign({}, defaultElement))">
<%= label %>
</a>
diff --git a/app/views/admin/communication/blocks/components/rich_text/_edit.html.erb b/app/views/admin/communication/blocks/components/rich_text/_edit.html.erb
index 77158e0ef..4de0040c6 100644
--- a/app/views/admin/communication/blocks/components/rich_text/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/rich_text/_edit.html.erb
@@ -1,10 +1,28 @@
-<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>
diff --git a/app/views/admin/communication/blocks/components/string/_edit.html.erb b/app/views/admin/communication/blocks/components/string/_edit.html.erb
index bd975931e..7aaad01b0 100644
--- a/app/views/admin/communication/blocks/components/string/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/string/_edit.html.erb
@@ -1,16 +1,26 @@
<%
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" />
diff --git a/app/views/admin/communication/blocks/components/text/_edit.html.erb b/app/views/admin/communication/blocks/components/text/_edit.html.erb
index c364efadb..8d9645640 100644
--- a/app/views/admin/communication/blocks/components/text/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/text/_edit.html.erb
@@ -1,13 +1,27 @@
<%
+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>
diff --git a/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb b/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb
index a8c9c1003..66fe346e6 100644
--- a/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb
+++ b/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb
@@ -1,3 +1,6 @@
+<%
+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>
diff --git a/config/locales/communication/fr.yml b/config/locales/communication/fr.yml
index 0da3340d6..e29128dff 100644
--- a/config/locales/communication/fr.yml
+++ b/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
--
GitLab