diff --git a/app/models/communication/block/template/contact.rb b/app/models/communication/block/template/contact.rb
index fa65262b9739ec71ba960ce8a3b7e417d39f5501..b298da6c9c4c4159e26efd0e3dddce754f1e76d9 100644
--- a/app/models/communication/block/template/contact.rb
+++ b/app/models/communication/block/template/contact.rb
@@ -1,9 +1,12 @@
class Communication::Block::Template::Contact < Communication::Block::Template::Base
has_component :name, :string
+ has_component :address, :text
+ has_component :zipcode, :string
+ has_component :city, :string
+ has_component :country, :string
has_component :phone_numbers, :array
has_component :emails, :array
- has_component :address, :text
has_elements
diff --git a/app/views/admin/communication/blocks/components/time_slot/_edit.html.erb b/app/views/admin/communication/blocks/components/time_slot/_edit.html.erb
index f5b321c6b7fc67aa0692dadbf6a9c17d1d4b27fa..3b069d144654ee175609e82120b47e20f321ba4f 100644
--- a/app/views/admin/communication/blocks/components/time_slot/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/time_slot/_edit.html.erb
@@ -1,21 +1,28 @@
-<% rows ||= 3 %>
-
+<%
+rows ||= 3
+from = t 'admin.communication.blocks.components.time_slot.from'
+to = t 'admin.communication.blocks.components.time_slot.to'
+%>
+<% if label.present? %>
+ <label class="form-label">
+ <%= label %>
+ </label>
+<% end %>
<div class="d-flex align-items-center mb-2">
- <label class="form-label me-1 mb-0"
- aria-label="<%= label %>">
- <%= label %> De
+ <label class="form-label d-flex me-2">
+ <span class="me-2 pt-1">
+ <%= from %>
+ </span>
+ <input class="form-control me-1"
+ v-model="<%= model %>.<%= property %>.from"
+ type="time" />
</label>
- <input class="form-control me-1"
- v-model="<%= model %>.<%= property %>.from"
- placeholder="<%= placeholder %> from"
- type="time" />
-
- <label class="form-label me-1 mb-0"
- aria-label="<%= label %>">
- <%= label %> Ã
+ <label class="form-label d-flex">
+ <span class="me-2 pt-1">
+ <%= to %>
+ </span>
+ <input class="form-control"
+ v-model="<%= model %>.<%= property %>.to"
+ type="time" />
</label>
- <input class="form-control"
- v-model="<%= model %>.<%= property %>.to"
- placeholder="<%= placeholder %> to"
- type="time" />
</div>
\ No newline at end of file
diff --git a/app/views/admin/communication/blocks/templates/contact/_edit.html.erb b/app/views/admin/communication/blocks/templates/contact/_edit.html.erb
index 4153e8cc49f3b18d41542abd0018b39f4491483b..1ab0305c4091972f255e9c564746e2c65fca4b7a 100644
--- a/app/views/admin/communication/blocks/templates/contact/_edit.html.erb
+++ b/app/views/admin/communication/blocks/templates/contact/_edit.html.erb
@@ -1,78 +1,94 @@
-<%# TODO: traduction %>
-
-<h3 class="h4">Contact</h3>
-
-<div class="row">
- <div class="col-md-4">
- <%= block_component_edit :name,
- label: "Nom (personne, établissement...)",
- placeholder: t('admin.communication.blocks.components.text.placeholder') %>
-
- <%= block_component_edit :address,
- label: "Adresse",
- placeholder: t('admin.communication.blocks.components.text.placeholder') %>
-
+<div class="row mb-4">
+ <div class="col-md-6 col-xl-4">
+ <h3 class="h4"><%= t '.contacts' %></h3>
+ <%= block_component_edit :name %>
+ <%= block_component_edit :address %>
+ <%= block_component_edit :zipcode %>
+ <%= block_component_edit :city %>
+ <%= block_component_edit :country %>
</div>
- <div class="col-md-4">
- <h3 class="h4">Téléphones</h3>
-
- <div v-for="(element, index) in data.phone_numbers" class="list-group-item">
- <div class="d-flex">
- <input type="tel"
- class="form-control"
- maxlength="12"
- v-model="data.phone_numbers[index]">
- <a class="btn btn-danger ms-2"
- v-on:click="data.phone_numbers.splice(index, 1)">
- <i class="fas fa-times"></i>
- </a>
+ <div class="col-md-6 col-xl-8">
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="card">
+ <div class="card-header d-flex">
+ <h3 class="h4 pt-1 flex-fill"><%= t '.phones.label' %></h3>
+ <a class="btn bn-sm btn-primary" v-on:click="data.phone_numbers.push('')">
+ <%= t('.add') %>
+ </a>
+ </div>
+ <div class="card-body mb-n2">
+ <div v-for="(element, index) in data.phone_numbers">
+ <div class="d-flex mb-2">
+ <input type="tel"
+ class="form-control"
+ placeholder="<%= t '.phones.placeholder' %>"
+ maxlength="12"
+ v-model="data.phone_numbers[index]">
+ <a class="btn text-danger" v-on:click="data.phone_numbers.splice(index, 1)">
+ <i class="fas fa-times"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- </div>
-
- <a class="btn btn-primary mt-1"
- v-on:click="data.phone_numbers.push('')">
- <i class="fas fa-plus"></i> ajouter une numéro de téléphone
- </a>
- </div>
- <div class="col-md-4">
- <h3 class="h4">Emails</h3>
-
- <div v-for="(element, index) in data.emails" class="list-group-item">
- <div class="d-flex">
- <input type="email"
- class="form-control"
- v-model="data.emails[index]">
- <a class="btn btn-danger ms-2"
- v-on:click="data.emails.splice(index, 1)">
- <i class="fas fa-times"></i>
- </a>
+ <div class="col-xl-6">
+ <div class="card">
+ <div class="card-header d-flex">
+ <h3 class="h4 flex-fill"><%= t '.mails.label' %></h3>
+ <a class="btn bn-sm btn-primary" v-on:click="data.emails.push('')">
+ <%= t('.add') %>
+ </a>
+ </div>
+ <div class="card-body mb-n2">
+ <div v-for="(element, index) in data.emails">
+ <div class="d-flex mb-2">
+ <input type="email"
+ class="form-control"
+ placeholder="<%= t '.mails.placeholder' %>"
+ v-model="data.emails[index]">
+ <a class="btn text-danger" v-on:click="data.emails.splice(index, 1)">
+ <i class="fas fa-times"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
-
- <a class="btn btn-primary mt-1"
- v-on:click="data.emails.push('')">
- <i class="fas fa-plus"></i> ajouter un email
- </a>
-
</div>
</div>
-<h3 class="h4 mt-5">Horaires</h3>
-
-<div class="row">
- <div v-for="(element, index) in data.elements" class="col-md-4">
- <div class="card">
- <a class="btn btn-sm btn-danger position-absolute top-0 end-0"
- v-on:click="data.elements.splice(index, 1)">
- <i class="fas fa-times"></i>
- </a>
- <div class="card-body">
- <%= block_component_edit :title, template: @element, label: 'Jour' %>
- <%# TODO: Refactor des créneaux horaires %>
- <%= block_component_edit :time_slot_morning, template: @element %>
- <%= block_component_edit :time_slot_afternoon, template: @element %>
+<h3 class="h4"><%= t '.slots' %></h3>
+<%= block_component_add_element t('.add_slot') %>
+<draggable :list="data.elements" handle=".dragHandle" class="list-group">
+ <div v-for="(element, index) in data.elements" class="list-group-item">
+ <div class="d-flex">
+ <div>
+ <a class="btn ps-0 pt-0 dragHandle">
+ <i class="fa fa-bars handle"></i>
+ </a>
+ </div>
+ <div class="flex-fill">
+ <div class="row mb-n3">
+ <div class="col-xl-4">
+ <%= block_component_edit :title, template: @element %>
+ </div>
+ <div class="col-xl-4 col-md-6">
+ <%= block_component_edit :time_slot_morning, template: @element %>
+ </div>
+ <div class="col-xl-4 col-md-6">
+ <%= block_component_edit :time_slot_afternoon, template: @element %>
+ </div>
+ </div>
+ </div>
+ <div>
+ <a class="btn text-danger position-absolute top-0 end-0"
+ v-on:click="data.elements.splice(index, 1)">
+ <i class="fas fa-times"></i>
+ </a>
</div>
</div>
</div>
-</div>
-<%= block_component_add_element 'Ajouter un créneau horaire' %>
+</draggable>
diff --git a/config/locales/communication/en.yml b/config/locales/communication/en.yml
index 60f6541398a29f1c7472e229cd31f839ac043451..c6f5c61ac850019dadc20a08822b6d5c57fd4585 100644
--- a/config/locales/communication/en.yml
+++ b/config/locales/communication/en.yml
@@ -160,6 +160,9 @@ en:
placeholder: Enter credit
link:
target_blank: Open in new window
+ time_slot:
+ from: From
+ to: to
templates:
call_to_action:
description: A title, a text, an optional image and up to 3 call to action buttons.
@@ -193,6 +196,40 @@ en:
placeholder: Enter text
contact:
description: Contact information and opening time, so anyone can get in touch.
+ edit:
+ add: Add
+ add_slot: Add a time slot
+ address:
+ label: Address
+ placeholder: Street and number
+ city:
+ label: City
+ placeholder: Enter the city
+ contacts: Contacts
+ country:
+ label: Country
+ placeholder: Enter the country
+ element:
+ title:
+ label: Day
+ placeholder: Enter the day or period
+ time_slot_morning:
+ label: Morning (if necessary)
+ time_slot_afternoon:
+ label: Afternoon (or full day)
+ name:
+ label: Name (person, organization...)
+ placeholder: Enter the text
+ zipcode:
+ label: Zipcode
+ placeholder: Enter the zipcode
+ mails:
+ label: Mails
+ placeholder: Enter the mail
+ phones:
+ label: Telephone numbers
+ placeholder: Enter the number
+ slots: Opening times
datatable:
description: A table of data, as responsive and accessible as possible.
edit:
diff --git a/config/locales/communication/fr.yml b/config/locales/communication/fr.yml
index 72a10d59a424d3bd1bbf04a7fe8c46b99a07088f..bcce9123c4c83364df3992bc6b78c6954dd60829 100644
--- a/config/locales/communication/fr.yml
+++ b/config/locales/communication/fr.yml
@@ -160,6 +160,9 @@ fr:
placeholder: Entrer le crédit
link:
target_blank: Ouvrir dans une nouvelle fenêtre
+ time_slot:
+ from: De
+ to: Ã
templates:
call_to_action:
description: Un titre, un texte, un visuel et 3 boutons pour inviter les personnes à agir.
@@ -193,6 +196,40 @@ fr:
placeholder: Entrer le texte
contact:
description: Des coordonnées et des horaires d'ouverture, tout ce qu'il faut pour être contacté.
+ edit:
+ add: Ajouter
+ add_slot: Ajouter un créneau horaire
+ address:
+ label: Adresse
+ placeholder: Numéro et voie
+ city:
+ label: Ville
+ placeholder: Entrer le nom de la ville
+ contacts: Contacts
+ country:
+ label: Pays
+ placeholder: Entrer le nom du pays
+ element:
+ title:
+ label: Jour
+ placeholder: Entrer le jour ou la période
+ time_slot_morning:
+ label: Matin (si nécessaire)
+ time_slot_afternoon:
+ label: Après-midi (ou jour complet)
+ name:
+ label: Nom (personne, établissement...)
+ placeholder: Entrer le texte
+ zipcode:
+ label: Code postal
+ placeholder: Entrer le code postal
+ mails:
+ label: Mails
+ placeholder: Entrer le mail
+ phones:
+ label: Téléphones
+ placeholder: Entrer le numéro
+ slots: Horaires
datatable:
description: Un tableau de données, aussi responsive et accessible que possible.
edit: