injected dossier_ids in front

app/controllers/instructeurs/batch_operations_controller.rb

@@ -4,7 +4,8 @@ module Instructeurs
     before_action :ensure_ownership!
 
     def create
-      batch = BatchOperation.safe_create!(batch_operation_params)
+      dossier_ids = batch_operation_params[:dossier_ids].join(',').split(',').uniq
+      batch = BatchOperation.safe_create!(batch_operation_params.merge(dossier_ids: dossier_ids))
       flash[:alert] = "Le traitement de masse n'a pas été lancé. Vérifiez que l'action demandée est possible pour les dossiers sélectionnés" if batch.blank?
       redirect_back(fallback_location: instructeur_procedure_url(@procedure.id))
     end

app/controllers/instructeurs/procedures_controller.rb

@@ -77,13 +77,13 @@ module Instructeurs
       @has_termine_notifications = notifications[:termines].present?
       @not_archived_notifications_dossier_ids = notifications[:en_cours] + notifications[:termines]
 
-      filtered_sorted_ids = procedure_presentation.filtered_sorted_ids(dossiers, statut, count: dossiers_count)
+      @filtered_sorted_ids = procedure_presentation.filtered_sorted_ids(dossiers, statut, count: dossiers_count)
 
       page = params[:page].presence || 1
 
-      @dossiers_count = filtered_sorted_ids.size
+      @dossiers_count = @filtered_sorted_ids.size
       @filtered_sorted_paginated_ids = Kaminari
-        .paginate_array(filtered_sorted_ids)
+        .paginate_array(@filtered_sorted_ids)
         .page(page)
         .per(ITEMS_PER_PAGE)
 

app/javascript/controllers/batch_operation_controller.ts

@@ -1,5 +1,5 @@
 import { ApplicationController } from './application_controller';
-import { disable, enable } from '@utils';
+import { disable, enable, show, hide } from '@utils';
 import invariant from 'tiny-invariant';
 
 export class BatchOperationController extends ApplicationController {
@@ -11,6 +11,7 @@ export class BatchOperationController extends ApplicationController {
 
   onCheckOne() {
     this.toggleSubmitButtonWhenNeeded();
+    deleteSelection();
   }
 
   onCheckAll(event: Event) {
@@ -18,6 +19,25 @@ export class BatchOperationController extends ApplicationController {
 
     this.inputTargets.forEach((e) => (e.checked = target.checked));
     this.toggleSubmitButtonWhenNeeded();
+
+    displayNotice(this.inputTargets);
+  }
+
+  onSelectMore(event) {
+    event.preventDefault();
+
+    const target = event.target as HTMLInputElement;
+    const dossierIds = target.getAttribute('data-dossiers');
+    const hidden_checkbox_multiple_ids = document.querySelector('#checkbox_multiple_batch_operation');
+    hidden_checkbox_multiple_ids.value = dossierIds;
+    hide(document.querySelector('#not_selected'));
+    show(document.querySelector('#selected'));
+  }
+
+  onDeleteSelection(event) {
+    event.preventDefault();
+    emptyCheckboxes();
+    deleteSelection();
   }
 
   toggleSubmitButtonWhenNeeded() {
@@ -63,3 +83,28 @@ function switchButton(button: HTMLButtonElement, flag: boolean) {
     button.querySelectorAll('button').forEach((button) => disable(button));
   }
 }
+
+function displayNotice(inputs) {
+  if (document.querySelector('#checkbox_all_batch_operation').checked) {
+    show(document.querySelector('.fr-notice'));
+    hide(document.querySelector('#selected'));
+    show(document.querySelector('#not_selected'));
+  } else {
+    hide(document.querySelector('.fr-notice'));
+    deleteSelection();
+  };
+
+  document.querySelector('#dynamic_number').textContent = (inputs.length - 1);
+}
+
+function deleteSelection() {
+  const hidden_checkbox_multiple_ids = document.querySelector('#checkbox_multiple_batch_operation');
+  hidden_checkbox_multiple_ids.value = "";
+
+  hide(document.querySelector('.fr-notice'));
+}
+
+function emptyCheckboxes() {
+  const inputs = document.querySelectorAll('div[data-controller="batch-operation"] input[type=checkbox]')
+  inputs.forEach((e) => (e.checked = false));
+}

app/views/instructeurs/procedures/_notice_dossier_select_all.html.haml

@@ -0,0 +1,17 @@
+.fr-notice.fr-notice--info.fr-mt-2w.hidden
+  .fr-container
+    .fr-notice__body
+      #not_selected
+        %p.fr-notice__title
+          Les
+          %span#dynamic_number n
+          dossiers de cette pages sont sélectionnés.
+          %a{ :href => "#", data: { action: "batch-operation#onSelectMore", dossiers: @filtered_sorted_ids.join(',') } }
+            = "Sélectionner les #{@dossiers_count} dossiers."
+      #selected.hidden
+        %p.fr-notice__title
+          = "#{@dossiers_count} dossiers sont sélectionnés"
+          %a{ :href => "#", data: { action: "batch-operation#onDeleteSelection" } }
+            = "Effacer la sélection"
+
+        = check_box_tag :"batch_operation[dossier_ids][]", [], false, class: 'hidden', data: { batch_operation_target: "input", action: "batch-operation#onCheckOne", operations: "accepter,repasser_en_construction,follow,unfollow" }, form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_multiple"), aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled') }

app/views/instructeurs/procedures/show.html.haml

@@ -102,6 +102,9 @@
             = page_entries_info @filtered_sorted_paginated_ids, entry_name: 'dossier'
 
           = render batch_operation_component
+
+        = render partial: "notice_dossier_select_all", local: {dossiers_count: @dossiers_count, filtered_sorted_ids: @filtered_sorted_ids}
+
         .fr-table.fr-table--bordered
           %table.table.dossiers-table.hoverable
             %thead