feat(instructeur/procedure#show): enhance sort by notifications as planned by UX

Update app/javascript/controllers/checkbox_controller.ts

Co-authored-by: Paul Chavard <github@paul.chavard.net>

app/components/dossiers/notified_toggle_component.rb

@@ -0,0 +1,41 @@
+class Dossiers::NotifiedToggleComponent < ApplicationComponent
+  def initialize(procedure:, procedure_presentation:)
+    @procedure = procedure
+    @procedure_presentation = procedure_presentation
+    @current_sort = procedure_presentation.sort
+  end
+
+  private
+
+  def opposite_order
+    @procedure_presentation.opposite_order_for(current_table, current_column)
+  end
+
+  def active?
+    sorted_by_notifications? && order_asc?
+  end
+
+  def icon_class_name
+    active? ? 'fr-fi-checkbox' : 'fr-fi-checkbox-blank'
+  end
+
+  def order_asc?
+    current_order == 'asc'
+  end
+
+  def current_order
+    @current_sort['order']
+  end
+
+  def current_table
+    @current_sort['table']
+  end
+
+  def current_column
+    @current_sort['column']
+  end
+
+  def sorted_by_notifications?
+    current_table == 'notifications' && current_column == 'notifications'
+  end
+end

app/components/dossiers/notified_toggle_component/notified_toggle_component.en.yml

@@ -0,0 +1,2 @@
+en:
+  show_notified_first: Show files with notification first

app/components/dossiers/notified_toggle_component/notified_toggle_component.fr.yml

@@ -0,0 +1,2 @@
+fr:
+  show_notified_first: Remonter les dossiers avec une notification

app/components/dossiers/notified_toggle_component/notified_toggle_component.html.haml

@@ -0,0 +1,7 @@
+= form_tag update_sort_instructeur_procedure_path(procedure_id: @procedure.id, table: 'notifications', column: 'notifications', order: opposite_order), method: 'GET', data: {controller: 'checkbox'} do
+  .fr-form-group
+    .fr-fieldset__content
+      .fr-checkbox-group.fix-dsfr-notified-toggle-component
+        = check_box_tag :order, opposite_order, active?, data: {action: 'change->checkbox#onChange'}
+        = label_tag :order, t('.show_notified_first'), class: 'fr-label'
+        = submit_tag t('.show_notified_first'), data: {"checkbox-target": 'submit' }, class: 'visually-hidden'