formstrap 0.2.1 → 0.3.0

data/app/views/formstrap/_repeater.html.erb

@@ -1,14 +1,17 @@
 <%
   # formstrap/repeater
   #
-  # ==== Options
+  # ==== Required parameters
   # * +form+ -  Form object
   # * +attribute+ - Name of the attribute of the form model
+  #
+  # ==== Optional parameters
   # * +header+ - Name of the template to use as header
   # * +label+ - Text to show as label. Label will be hidden if value is false
   # * +templates+ - List of all views that can be used as a template for a new block
   # * +flush+ - Set to true if you want the list items to sit flush with its parent.
   # * +row+ - Pass hash with options to pass to the row template.
+  # * +preview_url+ - Enables previews of each row. Provide and endpoint capable of rendering a preview for the rows values.
   #
   # ==== Examples
   #   # Basic version
@@ -28,7 +31,12 @@
   #
   #   # Allow more than one type of fields to be inserted. You must specify the templates as an array of view paths
   #   <% templates = ["admin/questions/fields/type_1", "admin/questions/fields/type_2"] %#>
-  #   <% render "formstrap/repeater", form: form, attribute: :questions, templates: templates do |question| %#>
+  #   <% render "formstrap/repeater", form: form, attribute: :questions, templates: templates do |question, template_name| %#>
+  #     <% render "admin/questions/#{template_name}, form: :question" %#>
+  #   <% end %#>
+  #
+  #   # Enable previews
+  #   <% render "formstrap/repeater", form: form, attribute: :questions, preview_url: admin_preview_question_path do |question| %#>
   #     <% render "admin/questions/fields, form: :question" %#>
   #   <% end %#>
 
@@ -37,6 +45,7 @@
   header = local_assigns.has_key?(:header) ? header : nil
   templates = local_assigns.has_key?(:templates) ? templates : []
   flush = local_assigns.has_key?(:flush) ? flush : true
+  preview_url = local_assigns.has_key?(:preview_url) ? preview_url : nil
   row_options = local_assigns.has_key?(:row) ? row : {}
 
   template_names = templates.map { |template| File.basename(template, ".html.erb") }
@@ -46,12 +55,21 @@
   association_object = association_model.new
   with_positions = association_object.attributes.keys.include?("position")
 
-  # We sort the collection with ruby to prevent a new query to be made that would dispose of nested object in memory
   associations = form.object.send(attribute)
-  associations = with_positions ? associations.sort_by{|resource| resource.position} : associations
+
+  # We sort the collection with ruby to prevent a new query to be made that would dispose of nested object in memory
+  associations = (with_positions && associations.map(&:position).compact.any?) ? associations.sort_by { |resource| resource.position } : associations
+
   repeater_id = form.object_id
   pass_thru = template_names.count == 1 ? "[data-template-name=\"#{template_names.first}\"]" : nil
   show_label = label != false
+
+  # Override default row options
+  row_options.merge!(
+    preview_url: preview_url,
+    pass_thru: pass_thru,
+    repeater_id: repeater_id,
+  )
 %>
 
 <!-- Label -->
@@ -70,7 +88,7 @@
 
   <!-- Rows -->
   <%= form.fields_for attribute, associations do |ff| %>
-    <%= render "formstrap/repeater/row", row_options.merge(pass_thru: pass_thru, form: ff, repeater_id: repeater_id) do %>
+    <%= render "formstrap/repeater/row", row_options.merge(form: ff, index: ff.index) do %>
       <%= yield(ff) %>
     <% end %>
   <% end %>
@@ -85,12 +103,12 @@
 
     <!-- Button -->
     <div
-       class="btn btn-sm btn-outline-secondary"
-       data-repeater-target="addButton"
-       data-popup-target="button"
-       data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
-       data-popup-pass-thru="<%= pass_thru %>"
-       data-action="click->repeater#resetButtonIndices click->popup#open"
+      class="btn btn-sm btn-outline-secondary"
+      data-repeater-target="addButton"
+      data-popup-target="button"
+      data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+      data-popup-pass-thru="<%= pass_thru %>"
+      data-action="click->repeater#resetButtonIndices click->popup#open"
     >
       <%= bootstrap_icon("plus") %>
       <%= t(".add", name: association_model.model_name.human) %>
@@ -101,12 +119,12 @@
       <div class="d-grid gap-2">
         <% template_names.each do |name| %>
           <div
-             class="btn btn-sm btn-outline-secondary"
-             data-popup-target="button"
-             data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
-             data-action="click->repeater#addRow click->popup#close"
-             data-row-index=""
-             data-template-name="<%= name %>"
+            class="btn btn-sm btn-outline-secondary"
+            data-popup-target="button"
+            data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+            data-action="click->repeater#addRow click->popup#close"
+            data-row-index=""
+            data-template-name="<%= name %>"
           >
             <%= t("blocks.#{name}", default: name).humanize %>
           </div>
@@ -115,11 +133,11 @@
     <% end %>
 
     <!-- Templates -->
-    <% template_names.each do |name| %>
-      <template data-repeater-target="template" data-template-name="<%= name %>" data-template-id-regex="<%= association_object.object_id %>">
-        <%= form.fields_for attribute, association_object, child_index: association_object.object_id do |ff| %>
-          <%= render "formstrap/repeater/row", row_options.merge(form: ff, pass_thru: pass_thru, repeater_id: repeater_id) do %>
-            <% yield(ff, name) %>
+    <% template_names.each do |template_name| %>
+      <template data-repeater-target="template" data-template-name="<%= template_name %>">
+        <%= form.fields_for attribute, association_object, child_index: "rrrrrrrrr" do |ff| %>
+          <%= render "formstrap/repeater/row", row_options.merge(form: ff, pass_thru: pass_thru, repeater_id: repeater_id, index: nil, template_name: template_name) do %>
+            <%= yield(ff, template_name) %>
           <% end %>
         <% end %>
       </template>

data/app/views/formstrap/repeater/_row.html.erb

@@ -3,16 +3,24 @@
   # accepts block: yes
   # parameters:
   #   form: Form object
+  #   repeater_id: ID of the repeater
+  #   index: Index of the row in the repeater
   #   pass_thru: (string) Pass thru for add button if needed
+  #   preview_url: (string) URL for previews
 
+  repeater_id = local_assigns[:repeater_id]
+  pass_thru = local_assigns[:pass_thru]
   draggable = form.object.respond_to?(:position)
   destroyable = form.object.respond_to?(:destroy)
-  error_class = form.object.errors.present? ? "border border-danger" : ""
-  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : "formstrap-repeater-row list-group-item"
+  error_class = form.object&.errors&.present? ? "border border-danger" : ""
+  preview_url = local_assigns.has_key?(:preview_url) ? local_assigns[:preview_url] : nil
+  preview = preview_url.present?
+  preview_url = "#{preview_url}?id=#{form.object.id}&name=#{local_assigns[:template_name] || form.object.name}&pp=disabled"
+  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : "formstrap-repeater-row list-group-item #{'p-0' if preview}"
 %>
 <div class="<%= class_names %> <%= error_class %>"
      data-repeater-target="row"
-     data-row-index="<%= form.options[:child_index] %>"
+     data-row-index="<%= index %>"
      data-new-record="<%= form.object.new_record? %>"
 >
 
@@ -49,5 +57,13 @@
     <%= bootstrap_icon("dash-circle") %>
   </div>
 
-  <%= yield %>
+  <% if preview %>
+    <!-- Wrap row in preview layout  -->
+    <%= render layout: "formstrap/shared/nested_preview", locals: { form: form, url: preview_url } do %>
+      <%= yield %>
+    <% end %>
+  <% else %>
+    <!-- Just render row content -->
+    <%= yield %>
+  <% end %>
 </div>

data/app/views/formstrap/shared/_nested_preview.html.erb

@@ -0,0 +1,35 @@
+<div data-controller="nested-preview" data-nested-preview-url-value="<%= url %>">
+  <!-- Preview placeholder -->
+  <div class="nested-preview-iframe-wrapper position-relative" role="button" data-nested-preview-target="iframeWrapper" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-<%= form.options[:child_index] %>" aria-controls="offcanvasRight" data-turbo-cache="false">
+    <iframe src="<%= url %>" class="pe-none" data-nested-preview-target="iframe"></iframe>
+    <div data-nested-preview-target="loader" class="nested-preview-loader terti">
+      <div class="spinner-grow text-secondary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Preview fields wrapper -->
+  <div class="offcanvas offcanvas-end nested-preview-offcanvas" tabindex="-1" id="offcanvas-<%= form.options[:child_index] %>" aria-labelledby="offcanvasRightLabel" data-nested-preview-target="offcanvas">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="offcanvasRightLabel"><%= t('.title', model: form.object.model_name.human) %></h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+
+      <div class="alert alert-danger d-none" data-nested-preview-target="error">
+        <% t(".error") %>
+      </div>
+
+      <!-- Row content -->
+      <div data-nested-preview-target="fields">
+        <%= yield %>
+      </div>
+
+      <!-- Preview sync button -->
+      <div class="btn btn-primary" data-action="click->nested-preview#update">
+        <%= bootstrap_icon("arrow-repeat") %> <%= t('.button') %>
+      </div>
+    </div>
+  </div>
+</div>

data/config/locales/de.yml

@@ -0,0 +1,5 @@
+de:
+  language_name: Deutsch
+  date:
+    formats:
+      default: "%d/%m/%Y"

data/config/locales/en.yml

@@ -2,8 +2,4 @@ en:
   language_name: English
   date:
     formats:
-      default: "%d/%m/%Y"
-  formstrap:
-    pagination:
-      infinite:
-        load_more: Load more
+      default: "%d/%m/%Y"

data/config/locales/formstrap/de.yml

@@ -0,0 +1,48 @@
+de:
+  formstrap:
+    file:
+      not_found: Nicht verfügbar
+      placeholder:
+        one: Datei durchsuchen oder hierher ziehen und ablegen
+        other: Dateien durchsuchen oder hierher ziehen und ablegen
+    group:
+      save: Speichern
+    media:
+      modal:
+        close: Schließen
+        limits: "Minimum: %{min} und Maximum: %{max}"
+        maximum: " von %{count}"
+        placeholder: Laden Sie Ihre erste Datei in die Medienbibliothek hoch
+        search: Suche
+        search_no_results: Keine Suchergebnisse gefunden
+        select: Auswählen
+        title:
+          one: Wählen Sie mindestens 1 Datei aus
+          other: Wählen Sie mindestens %{count} Dateien aus
+        unlimited: unbegrenzt
+        upload: Neue Dateien hochladen
+      validation:
+        min:
+          one: Bitte wählen Sie mindestens 1 Element aus
+          other: "Bitte wählen Sie mindestens %{count} Elemente aus"
+        max:
+          one: Bitte beschränken Sie Ihre Auswahl auf maximal 1 Element
+          other: "Bitte beschränken Sie Ihre Auswahl auf maximal %{count} Elemente"
+    pagination:
+      infinite:
+        load_more: Mehr laden
+    repeater:
+      add: "%{name} hinzufügen"
+      empty: Beginnen Sie mit dem Hinzufügen Ihres ersten Blocks
+      row:
+        add: Zeile hinzufügen
+        remove: Zeile entfernen
+    select:
+      blank: Bitte wählen
+    shared:
+      nested_preview:
+        button: Vorschau aktualisieren
+        error: Vorschau konnte nicht geladen werden. Überprüfen Sie alle Felder und versuchen Sie es erneut.
+        title: "%{model} bearbeiten"
+    thumbnail:
+      title: Titel

data/config/locales/formstrap/en.yml

@@ -0,0 +1,48 @@
+en:
+  formstrap:
+    file:
+      not_found: Not available
+      placeholder:
+        one: Browse file or drag & drop it here
+        other: Browse files or drag & drop them here
+    group:
+      save: Save
+    media:
+      modal:
+        close: Close
+        limits: "minimum: %{min} en maximum: %{max}"
+        maximum: " of %{count}"
+        placeholder: Upload your first file to the media library
+        search: Search
+        search_no_results: No search results found
+        select: Select
+        title:
+          one: Select at least 1 file
+          other: Select at least %{count} files
+        unlimited: unlimited
+        upload: Upload new files
+      validation:
+        min:
+          one: Please select at least 1 item
+          other: "Please select at least %{count} items"
+        max:
+          one: Please limit your selection to maximum 1 item
+          other: "Please limit your selection to maximum %{count} items"
+    pagination:
+      infinite:
+        load_more: Load more
+    repeater:
+      add: "Add %{name}"
+      empty: Start by adding your first block
+      row:
+        add: Add row
+        remove: Remove row
+    select:
+      blank: Make a choice
+    shared:
+      nested_preview:
+        button: Update preview
+        error: Unable to load preview. Check all fields and try again.
+        title: "Edit %{model}"
+    thumbnail:
+      title: Title

data/config/locales/formstrap/fr.yml

@@ -0,0 +1,48 @@
+fr:
+  formstrap:
+    file:
+      not_found: Indisponible
+      placeholder:
+        one: Parcourir le fichier ou faites glisser et déposez-le ici
+        other: Parcourir les fichiers ou faites les glisser et déposez-les ici
+    group:
+      save: Sauvegarder
+    media:
+      modal:
+        close: Fermer
+        limits: "minimum: %{min} et maximum: %{max}"
+        maximum: " de %{count}"
+        placeholder: Téléchargez votre premier fichier dans la bibliothèque multimédia
+        search: Rechercher
+        search_no_results: Aucun résultat trouvé
+        select: Sélectionner
+        title:
+          one: Sélectionnez au moins 1 fichier
+          other: Sélectionnez au moins %{count} fichiers
+        unlimited: illimité
+        upload: Télécharger de nouveaux fichiers
+      validation:
+        min:
+          one: Veuillez sélectionner au moins 1 élément
+          other: "Veuillez sélectionner au moins %{count} éléments"
+        max:
+          one: Veuillez limiter votre sélection à un maximum de 1 élément
+          other: "Veuillez limiter votre sélection à un maximum de %{count} éléments"
+    pagination:
+      infinite:
+        load_more: Charger plus
+    repeater:
+      add: "Ajouter %{name}"
+      empty: Commencez par ajouter votre premier bloc
+      row:
+        add: Ajouter une ligne
+        remove: Supprimer la ligne
+    select:
+      blank: Faites un choix
+    shared:
+      nested_preview:
+        button: Mettre à jour l'aperçu
+        error: Impossible de charger l'aperçu. Vérifiez tous les champs et réessayez.
+        title: "Modifier %{model}"
+    thumbnail:
+      title: Titre

data/config/locales/formstrap/nl.yml

@@ -0,0 +1,48 @@
+nl:
+  formstrap:
+    file:
+      not_found: Niet beschikbaar
+      placeholder:
+        one: Kies bestand of sleep het hierheen
+        other: Kies bestanden of sleep ze hierheen
+    group:
+      save: Opslaan
+    media:
+      modal:
+        close: Sluiten
+        limits: "minimum: %{min} and maximum: %{max}"
+        maximum: " van %{count}"
+        placeholder: Upload je eerste bestand naar de mediabibliotheek
+        search: Zoeken
+        search_no_results: Geen resultaten gevonden
+        select: Selecteer
+        title:
+          one: Selecteer bestand
+          other: Selecteer bestanden
+        unlimited: onbeperkt
+        upload: Nieuwe bestanden uploaden
+      validation:
+        min:
+          one: Gelieve minstens 1 item te selecteren
+          other: "Gelieve minstens %{count} items te selecteren"
+        max:
+          one: Gelieve maximum 1 item te selecteren
+          other: "Gelieve maximum %{count} items te selecteren"
+    pagination:
+      infinite:
+        load_more: Laad meer
+    repeater:
+      add: "%{name} toevoegen"
+      empty: Voeg je eerste rij toe om te beginnen
+      row:
+        add: Rij toevoegen
+        remove: Rij verwijderen
+    select:
+      blank: Maak een keuze
+    shared:
+      nested_preview:
+        button: Voorvertoning bijwerken
+        error: Er kon geen voorvertoning worden geladen. Kijk alle velden na en probeer het opnieuw.
+        title: "%{model} bewerken"
+    thumbnail:
+      title: Titel

data/config/locales/fr.yml

@@ -0,0 +1,5 @@
+fr:
+  language_name: Français
+  date:
+    formats:
+      default: "%d/%m/%Y"

data/config/locales/nl.yml

@@ -2,8 +2,4 @@ nl:
   language_name: Nederlands
   date:
     formats:
-      default: "%d/%m/%Y"
-  formstrap:
-    pagination:
-      infinite:
-        load_more: Laad meer
+      default: "%d/%m/%Y"

data/lib/formstrap/form_builder.rb

@@ -11,6 +11,17 @@ module Formstrap
       render_input(:association, attribute, options)
     end
 
+    def preview_button(value = nil, options = {}, &block)
+      default_options = {
+        data: {
+          controller: "preview",
+          "preview-url-value":  options[:url]
+        },
+        type: nil
+      }
+      button value, default_options.deep_merge(options.except(:url)), &block
+    end
+
     def checkbox(attribute, formstrap: true, **options)
       if formstrap
         render_input :checkbox, attribute, options
@@ -103,6 +114,10 @@ module Formstrap
       end
     end
 
+    def repeater_for(attribute, options = {}, &block)
+      @template.render("formstrap/repeater", form: self, attribute: attribute, **options, &block)
+    end
+
     def redactorx(attribute, options = {})
       render_input(:redactorx, attribute, options)
     end

data/lib/formstrap/version.rb

@@ -1,3 +1,3 @@
 module Formstrap
-  VERSION = "0.2.1"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: formstrap
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-02-08 00:00:00.000000000 Z
+date: 2024-03-11 00:00:00.000000000 Z
 dependencies: []
 description: An extensive Bootstrap form library to power your Ruby On Rails application.
 email:
@@ -44,7 +44,9 @@ files:
 - app/assets/javascripts/formstrap/controllers/infinite_scroller_controller.js
 - app/assets/javascripts/formstrap/controllers/media_controller.js
 - app/assets/javascripts/formstrap/controllers/media_modal_controller.js
+- app/assets/javascripts/formstrap/controllers/nested_preview_controller.js
 - app/assets/javascripts/formstrap/controllers/popup_controller.js
+- app/assets/javascripts/formstrap/controllers/preview_controller.js
 - app/assets/javascripts/formstrap/controllers/redactorx_controller.js
 - app/assets/javascripts/formstrap/controllers/repeater_controller.js
 - app/assets/javascripts/formstrap/controllers/select_controller.js
@@ -61,6 +63,7 @@ files:
 - app/assets/stylesheets/formstrap/repeater.scss
 - app/assets/stylesheets/formstrap/search.scss
 - app/assets/stylesheets/formstrap/shared.scss
+- app/assets/stylesheets/formstrap/shared/nested_preview.scss
 - app/assets/stylesheets/formstrap/shared/popup.scss
 - app/assets/stylesheets/formstrap/shared/thumbnail.scss
 - app/assets/stylesheets/formstrap/utilities.scss
@@ -114,6 +117,7 @@ files:
 - app/models/view_model.rb
 - app/views/formstrap/_association.html.erb
 - app/views/formstrap/_autocomplete.html.erb
+- app/views/formstrap/_button.html.erb
 - app/views/formstrap/_checkbox.html.erb
 - app/views/formstrap/_color.html.erb
 - app/views/formstrap/_datalist.html.erb
@@ -156,19 +160,20 @@ files:
 - app/views/formstrap/media/thumbnail.html.erb
 - app/views/formstrap/pagination/_infinite.html.erb
 - app/views/formstrap/repeater/_row.html.erb
+- app/views/formstrap/shared/_nested_preview.html.erb
 - app/views/formstrap/shared/_notifications.html.erb
 - app/views/formstrap/shared/_popup.html.erb
 - app/views/formstrap/shared/_thumbnail.html.erb
 - bin/console
 - bin/setup
 - config/importmap.rb
+- config/locales/de.yml
 - config/locales/en.yml
-- config/locales/formstrap/forms/en.yml
-- config/locales/formstrap/forms/nl.yml
-- config/locales/formstrap/media/en.yml
-- config/locales/formstrap/media/nl.yml
-- config/locales/formstrap/thumbnail/en.yml
-- config/locales/formstrap/thumbnail/nl.yml
+- config/locales/formstrap/de.yml
+- config/locales/formstrap/en.yml
+- config/locales/formstrap/fr.yml
+- config/locales/formstrap/nl.yml
+- config/locales/fr.yml
 - config/locales/nl.yml
 - config/routes.rb
 - esbuild-css.js

data/config/locales/formstrap/forms/en.yml

@@ -1,25 +0,0 @@
-en:
-  formstrap:
-    file:
-      not_found: Not available
-      placeholder:
-        one: Browse file or drag & drop it here
-        other: Browse files or drag & drop them here
-    group:
-      save: Save
-    media:
-      validation:
-        min:
-          one: Please select at least 1 item
-          other: "Please select at least %{count} items"
-        max:
-          one: Please limit your selection to maximum 1 item
-          other: "Please limit your selection to maximum %{count} items"
-    select:
-      blank: Make a choice
-    repeater:
-      add: "Add %{name}"
-      empty: Start by adding your first block
-      row:
-        add: Add row
-        remove: Remove row

data/config/locales/formstrap/forms/nl.yml

@@ -1,25 +0,0 @@
-nl:
-  formstrap:
-    file:
-      not_found: Niet beschikbaar
-      placeholder:
-        one: Kies bestand of sleep het hierheen
-        other: Kies bestanden of sleep ze hierheen
-    group:
-      save: Opslaan
-    media:
-      validation:
-        min:
-          one: Gelieve minstens 1 item te selecteren
-          other: "Gelieve minstens %{count} items te selecteren"
-        max:
-          one: Gelieve maximum 1 item te selecteren
-          other: "Gelieve maximum %{count} items te selecteren"
-    select:
-      blank: Maak een keuze
-    repeater:
-      add: "%{name} toevoegen"
-      empty: Voeg je eerste rij toe om te beginnen
-      row:
-        add: Rij toevoegen
-        remove: Rij verwijderen

data/config/locales/formstrap/media/en.yml

@@ -1,16 +0,0 @@
-en:
-  formstrap:
-    media:
-      modal:
-        close: Close
-        limits: "minimum: %{min} en maximum: %{max}"
-        maximum: " of %{count}"
-        placeholder: Upload your first file to the media library
-        search: Search
-        search_no_results: No search results found
-        select: Select
-        title:
-          one: Select at least 1 file
-          other: Select at least %{count} files
-        unlimited: unlimited
-        upload: Upload new files

data/config/locales/formstrap/media/nl.yml

@@ -1,16 +0,0 @@
-nl:
-  formstrap:
-    media:
-      modal:
-        close: Sluiten
-        limits: "minimum: %{min} and maximum: %{max}"
-        maximum: " van %{count}"
-        placeholder: Upload je eerste bestand naar de mediabibliotheek
-        search: Zoeken
-        search_no_results: Geen resultaten gevonden
-        select: Selecteer
-        title:
-          one: Selecteer bestand
-          other: Selecteer bestanden
-        unlimited: onbeperkt
-        upload: Nieuwe bestanden uploaden

data/config/locales/formstrap/thumbnail/en.yml

@@ -1,4 +0,0 @@
-en:
-  formstrap:
-    thumbnail:
-      title: Title

data/config/locales/formstrap/thumbnail/nl.yml

@@ -1,4 +0,0 @@
-nl:
-  formstrap:
-    thumbnail:
-      title: Titel