diff --git a/app/javascript/controllers/file_input_reset_controller.ts b/app/javascript/controllers/file_input_reset_controller.ts new file mode 100644 index 000000000..0b26c6c84 --- /dev/null +++ b/app/javascript/controllers/file_input_reset_controller.ts @@ -0,0 +1,19 @@ +import { ApplicationController } from './application_controller'; +import { hide, show } from '@utils'; + +export class FileInputResetController extends ApplicationController { + static targets = ['input', 'reset']; + + declare readonly inputTarget: HTMLInputElement; + declare readonly resetTarget: HTMLElement; + + reset(event: Event) { + event.preventDefault(); + this.inputTarget.value = ''; + hide(this.resetTarget); + } + + showResetButton() { + show(this.resetTarget); + } +} diff --git a/app/views/shared/dossiers/messages/_form.html.haml b/app/views/shared/dossiers/messages/_form.html.haml index 7a26eb66f..eea4ac1eb 100644 --- a/app/views/shared/dossiers/messages/_form.html.haml +++ b/app/views/shared/dossiers/messages/_form.html.haml @@ -8,8 +8,9 @@ = render Dsfr::InputComponent.new(form: f, attribute: :body, input_type: :text_area, opts: { rows: 5, placeholder: placeholder, title: placeholder, class: 'fr-input message-textarea'}) - .fr-mt-3w - = render Attachment::EditComponent.new(attached_file: commentaire.piece_jointe) + .fr-mt-3w{ data: { controller: "file-input-reset" } } + %button.hidden.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-icon-delete-line.fr-mr-1w{ 'aria-label': t('views.shared.messages.remove_file'), data: { 'file-input-reset-target': 'reset', action: 'file-input-reset#reset' } } + = f.file_field :piece_jointe, direct_upload: true, data: { 'file-input-reset-target': 'input', action: 'change->file-input-reset#showResetButton' } .fr-mt-3w = f.submit t('views.shared.dossiers.messages.form.send_message'), class: 'fr-btn', data: { disable: true } diff --git a/config/locales/views/shared/fr.yml b/config/locales/views/shared/fr.yml index 1f08d10cc..33ef71b89 100644 --- a/config/locales/views/shared/fr.yml +++ b/config/locales/views/shared/fr.yml @@ -21,3 +21,5 @@ fr: already_user: 'J’ai déjà un compte' create: 'Créer un compte' signin: 'Se connecter' + messages: + remove_file: 'Supprime le fichier'