refactor(attachment): add Attachment::EditComponent

app/components/attachment/edit_component.rb

@@ -0,0 +1,92 @@
+# Display a widget for uploading, editing and deleting a file attachment
+class Attachment::EditComponent < ApplicationComponent
+  def initialize(form:, attached_file:, accept: nil, template: nil, user_can_destroy: false, direct_upload: true)
+    @form = form
+    @attached_file = attached_file
+    @accept = accept
+    @template = template
+    @user_can_destroy = user_can_destroy
+    @direct_upload = direct_upload
+  end
+
+  attr_reader :template, :form
+
+  def self.text(form, file)
+    new(form: form, attached_file: file, user_can_destroy: true)
+  end
+
+  def self.image(form, file, direct_upload = true)
+    new(form: form,
+      attached_file: file,
+      accept: 'image/png, image/jpg, image/jpeg',
+      user_can_destroy: true,
+      direct_upload: direct_upload)
+  end
+
+  def user_can_destroy?
+    @user_can_destroy
+  end
+
+  def attachment
+    @attached_file.attachment
+  end
+
+  def attachment_path
+    helpers.attachment_path attachment.id, { signed_id: attachment.blob.signed_id }
+  end
+
+  def attachment_id
+    @attachment_id ||= attachment ? attachment.id : SecureRandom.uuid
+  end
+
+  def attachment_input_class
+    "attachment-input-#{attachment_id}"
+  end
+
+  def persisted?
+    attachment&.persisted?
+  end
+
+  def champ
+    @form.object.is_a?(Champ) ? @form.object : nil
+  end
+
+  def file_field_options
+    {
+      class: "attachment-input #{attachment_input_class} #{'hidden' if persisted?}",
+      accept: @accept,
+      direct_upload: @direct_upload,
+      id: champ&.input_id,
+      aria: { describedby: champ&.describedby_id },
+      data: { auto_attach_url: helpers.auto_attach_url(form, form.object) }
+    }
+  end
+
+  def file_field_name
+    @attached_file.name
+  end
+
+  def remove_button_options
+    {
+      role: 'button',
+      class: 'button small danger',
+      data: { turbo_method: :delete }
+    }
+  end
+
+  def retry_button_options
+    {
+      type: 'button',
+      class: 'button attachment-error-retry',
+      data: { input_target: ".#{attachment_input_class}", action: 'autosave#onClickRetryButton' }
+    }
+  end
+
+  def replace_button_options
+    {
+      type: 'button',
+      class: 'button small',
+      data: { toggle_target: ".#{attachment_input_class}" }
+    }
+  end
+end

app/components/attachment/edit_component/edit_component.en.yml

@@ -0,0 +1,2 @@
+---
+en:

app/components/attachment/edit_component/edit_component.fr.yml

@@ -0,0 +1,2 @@
+---
+fr:

app/components/attachment/edit_component/edit_component.html.haml

@@ -0,0 +1,27 @@
+.attachment
+  - if template&.attached?
+    %p.mb-1
+      Veuillez télécharger, remplir et joindre
+      = link_to('le modèle suivant', url_for(template), target: '_blank', rel: 'noopener')
+
+  - if persisted?
+    .attachment-actions{ id: dom_id(attachment, :actions) }
+      .attachment-action
+        = render Attachment::ShowComponent.new(attachment: attachment, user_can_upload: true)
+      - if user_can_destroy?
+        .attachment-action{ "data-turbo": "true" }
+          = link_to('Supprimer', attachment_path, **remove_button_options)
+      .attachment-action
+        = button_tag('Remplacer', **replace_button_options)
+
+  .attachment-error.hidden
+    .attachment-error-message
+      %p.attachment-error-title
+        Une erreur s’est produite pendant l’envoi du fichier.
+      %p.attachment-error-description
+        Une erreur inconnue s'est produite pendant l'envoi du fichier
+    = button_tag(**retry_button_options) do
+      %span.icon.retry
+      Ré-essayer
+
+  = form.file_field(file_field_name, **file_field_options)

app/views/shared/attachment/_edit.html.haml

@@ -1,43 +0,0 @@
--# Display a widget for uploading, editing and deleting a file attachment
-
-- attachment = attached_file.attachment
-- attachment_id = attachment ? attachment.id : SecureRandom.uuid
-- persisted = attachment && attachment.persisted?
-- accept = defined?(accept) ? accept : nil
-- user_can_destroy = defined?(user_can_destroy) ? user_can_destroy : false
-- direct_upload = direct_upload != nil ? false : true
-- champ = form.object.is_a?(Champ) ? form.object : nil
-
-.attachment
-  - if defined?(template) && template.attached?
-    %p.mb-1
-      Veuillez télécharger, remplir et joindre
-      = link_to('le modèle suivant', url_for(template), target: '_blank', rel: 'noopener')
-
-  - if persisted
-    .attachment-actions{ class: "attachment-actions-#{attachment_id}" }
-      .attachment-action
-        = render partial: "shared/attachment/show", locals: { attachment: attachment, user_can_upload: true }
-      - if user_can_destroy
-        .attachment-action
-          = link_to 'Supprimer', attachment_url(attachment.id, { signed_id: attachment.blob.signed_id }), remote: true, method: :delete, class: 'button small danger', data: { disable: true }, role: 'button'
-      .attachment-action
-        = button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': ".attachment-input-#{attachment_id}" }
-
-  .attachment-error.hidden
-    .attachment-error-message
-      %p.attachment-error-title
-        Une erreur s’est produite pendant l’envoi du fichier.
-      %p.attachment-error-description
-        Une erreur inconnue s'est produite pendant l'envoi du fichier
-    = button_tag type: 'button', class: 'button attachment-error-retry', data: { 'input-target': ".attachment-input-#{attachment_id}", action: 'autosave#onClickRetryButton' } do
-      %span.icon.retry
-      Ré-essayer
-
-  = form.file_field attached_file.name,
-    class: "attachment-input attachment-input-#{attachment_id} #{'hidden' if persisted}",
-    accept: accept,
-    direct_upload: direct_upload,
-    id: champ&.input_id,
-    aria: { describedby: champ&.describedby_id },
-    data: { 'auto-attach-url': auto_attach_url(form, form.object) }

spec/views/shared/attachment/_update.html.haml_spec.rb

@@ -5,7 +5,7 @@ describe 'shared/attachment/_update.html.haml', type: :view do
 
   subject do
     form_for(champ.dossier) do |form|
-      view.image_upload_and_render form, attached_file
+      view.render Attachment::EditComponent.image(form, attached_file)
     end
   end
 
@@ -53,12 +53,10 @@ describe 'shared/attachment/_update.html.haml', type: :view do
   context 'when the user cannot destroy the attachment' do
     subject do
       form_for(champ.dossier) do |form|
-        render 'shared/attachment/edit', {
+        render Attachment::EditComponent.new(form: form,
-          form: form,
           attached_file: attached_file,
           accept: 'image/png',
-          user_can_destroy: user_can_destroy
+          user_can_destroy: user_can_destroy)
-        }
       end
     end