piece_justificative: toggle file upload control

app/assets/stylesheets/new_design/editable_champs/piece_justificative.scss

@@ -2,6 +2,7 @@
 
 .piece-justificative-actions {
   display: flex;
+  margin-bottom: $default-spacer;
 }
 
 .piece-justificative-action {

app/javascript/packs/application.js

@@ -12,6 +12,7 @@ import '../shared/safari-11-file-xhr-workaround';
 import '../shared/autocomplete';
 import '../shared/remote-input';
 import '../shared/franceconnect';
+import '../shared/toggle-target';
 
 import '../new_design/spinner';
 import '../new_design/dropdown';

app/javascript/shared/toggle-target.js

@@ -0,0 +1,20 @@
+import { delegate, toggle } from '@utils';
+
+// Unobtrusive Javascript for allowing an element to toggle
+// the visibility of another element.
+//
+// Usage:
+//   <button data-toggle-target="#target">Toggle</button>
+//   <div id="target">Content</div>
+
+const TOGGLE_SOURCE_SELECTOR = '[data-toggle-target]';
+
+delegate('click', TOGGLE_SOURCE_SELECTOR, evt => {
+  evt.preventDefault();
+
+  const targetSelector = evt.target.dataset.toggleTarget;
+  const targetElements = document.querySelectorAll(targetSelector);
+  for (let target of targetElements) {
+    toggle(target);
+  }
+});

app/views/new_user/dossiers/purge_champ_piece_justificative.js.erb

@@ -1,2 +1,5 @@
 <%= render_flash(timeout: 5000, sticky: true) %>
 <%= remove_element("#piece_justificative_#{@champ.id}") %>
+
+let fileInputSelector = '<%= "#champs_#{@champ.id}" %>';
+document.querySelector(fileInputSelector).classList.remove('hidden');

app/views/shared/dossiers/editable_champs/_piece_justificative.html.haml

@@ -15,8 +15,10 @@
           = link_to 'Supprimer', gestionnaire_champ_purge_champ_piece_justificative_path(procedure_id: champ.dossier.procedure_id, dossier_id: champ.dossier_id, champ_id: champ.id), remote: true, method: :delete, class: 'button small danger'
         - else
           = link_to 'Supprimer', champ_purge_champ_piece_justificative_path(id: champ.dossier_id, champ_id: champ.id), remote: true, method: :delete, class: 'button small danger'
+      .piece-justificative-action
+        = button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': "#champs_#{champ.id}" }
 
   = form.file_field :piece_justificative_file,
     id: "champs_#{champ.id}",
-    class: "piece-justificative-input",
+    class: "piece-justificative-input #{'hidden' if pj.attached?}",
     direct_upload: true