batch selectable ajustments

app/assets/javascripts/admin/commons/batch-selectable.js

@@ -4,25 +4,46 @@ window.osuny.BatchSelectable = function BatchSelectable (element) {
     this.element = element;
     this.selectAllInput = this.element.querySelector('[data-batch-selectable-role="select-all"]');
     this.selectSingleInputs = this.element.querySelectorAll('[data-batch-selectable-role="select-single"]');
+    this.actionsContainer = this.element.querySelector('[data-batch-selectable-role="actions-container"]');
     this.initEvents();
+    this.toggleActionsContainer();
 };
 
 window.osuny.BatchSelectable.prototype.initEvents = function () {
     'use strict';
-    if (this.selectAllInput === null) {
-        return;
+    var i;
+    if (this.selectAllInput !== null) {
+        this.selectAllInput.addEventListener('change', this.toggleSingleInputs.bind(this));
+    }
+    if (this.actionsContainer !== null) {
+        for (i = 0; i < this.selectSingleInputs.length; i += 1) {
+            this.selectSingleInputs[i].addEventListener('change', this.toggleActionsContainer.bind(this));
+        }
     }
-    this.selectAllInput.addEventListener('change', function () {
-        this.toggleSingleInputs(this.selectAllInput.checked);
-    }.bind(this));
 };
 
-window.osuny.BatchSelectable.prototype.toggleSingleInputs = function (checked) {
+window.osuny.BatchSelectable.prototype.toggleSingleInputs = function (event) {
     'use strict';
-    var i;
+    var checked = event.currentTarget.checked,
+        i;
     for (i = 0; i < this.selectSingleInputs.length; i += 1) {
         this.selectSingleInputs[i].checked = checked;
     }
+    if (this.actionsContainer !== null) {
+        this.toggleActionsContainer();
+    }
+};
+
+window.osuny.BatchSelectable.prototype.toggleActionsContainer = function () {
+    'use strict';
+    var i;
+    for (i = 0; i < this.selectSingleInputs.length; i += 1) {
+        if (this.selectSingleInputs[i].checked) {
+            this.actionsContainer.classList.remove('d-none');
+            return;
+        }
+    }
+    this.actionsContainer.classList.add('d-none');
 };
 
 window.addEventListener('DOMContentLoaded', function () {

app/views/admin/communication/website/posts/_list.html.erb

@@ -3,7 +3,10 @@
   hide_category |= false
   selectable |= false
 %>
-<table class="<%= table_classes %>" <%= "data-batch-selectable" if selectable %>>
+<% if selectable %>
+<input type="hidden" name="ids[]" value="">
+<% end %>
+<table class="<%= table_classes %>">
   <thead>
     <tr>
       <% if selectable %>

app/views/admin/communication/website/posts/index.html.erb

@@ -3,28 +3,29 @@
 <%= render 'admin/communication/websites/sidebar' do %>
   <%= render 'filters', current_path: admin_communication_website_posts_path, filters: @filters if @filters.any?  %>
 
-  <div class="card">
+  <div class="card" data-batch-selectable>
     <%= form_tag publish_admin_communication_website_posts_path do %>
-      <input type="hidden" name="ids[]" value="">
       <%= render 'admin/communication/website/posts/list', posts: @posts, selectable: true %>
       <div class="card-footer">
         <% if @posts.total_pages > 1 %>
-          <div class="float-end">
+          <div class="float-end mb-3">
             <%= paginate @posts, theme: 'bootstrap-5' %>
           </div>
         <% end %>
-        <div class="row align-items-center">
-          <div class="col-auto">
-            Modifier la sélection
-          </div>
-          <div class="col-auto">
-            <select name="published" class="form-select">
-              <option value="false">Non publiée</option>
-              <option value="true">Publiée</option>
-            </select>
-          </div>
-          <div class="col-auto">
-            <input type="submit" value="Enregistrer" class="btn btn-primary">
+        <div data-batch-selectable-role="actions-container">
+          <div class="d-flex align-items-center">
+            <div class="col-auto me-3">
+              Modifier la sélection
+            </div>
+            <div class="col-auto me-3">
+              <select name="published" class="form-select">
+                <option value="false">Non publiée</option>
+                <option value="true">Publiée</option>
+              </select>
+            </div>
+            <div class="col-auto me-3">
+              <input type="submit" value="Enregistrer" class="btn btn-primary">
+            </div>
           </div>
         </div>
       </div>