DeleteConfirmationDialogComponent Details

This component is implemented to replace all the deletion confirmation dialogs rendered all over the code. We rendered a different partial every time we needed a modal of this type.

From now on, we just have to render DeleteConfirmationDialogComponent, passing specific parameters, wherever we have a deletion action.

Those dialogs are based on the Bootstrap Modal, as you can see now in app/components/delete_confirmation_dialog_component.html.haml.

Calling DeleteConfirmationDialogComponent for a Unique Delete Action

When we only have one element to delete on the page, i.e "Delete project" on the project overview page, we just need to

• render the component passing all the parameters

= render DeleteConfirmationDialogComponent.new(modal_id: 'delete-foo-modal',
                                               method: :delete,
                                               options: { remote: true,
                                                          modal_title: 'Do you really want to remove this foo?',
                                                          confirmation_text: "Please confirm you want to remove this foo",
                                                          action: foo_path(@foo) })

• render the link or button that triggers the deletion action, passing data-toggle=modal and data-target=<modal_id>. So clicking on this delete link, the correct modal will open.

= link_to('#', title: 'Delete attribute', data: { toggle: 'modal',
                                                  target: '#delete-foo-modal' }) do # modal_id that we passed to the component
  %i.fas.fa-times-circle.text-danger

Calling DeleteConfirmationDialogComponent for Multiple Delete Actions

When the page contains many elements of the same type that can be deleted, i.e. many files inside a package, we need to open the modal specifying which element is affected and maybe also some specific texts per element.

This is the tricky part. We follow the instructions from Bootstrap Modal - Varying modal content that suggest modifying the content of the modal by JavaScript after rendering the modal.

To do so, we need to

• render the component passing only the parameters that are not going to vary among the elements:

= render DeleteConfirmationDialogComponent.new(modal_id: 'delete-foo-modal',
                                               method: :delete,
                                               options: { remote: true,
                                                          modal_title: 'Do you really want to remove this foo?' })

• render the link or button that triggers the deletion action, passing data-toggle=modal, data-target=<modal_id> and all the values that vary among elements.

= link_to('#', title: 'Delete attribute', data: { toggle: 'modal',
                                                  target: '#delete-foo-modal', # modal_id that we passed to the component
                                                  action: foo_path(@foo), # a different action per element
                                                  confirmation_text: "Please confirm the deletion of the foo '#{@foo.name}'" }) do # a different text per element
  %i.fas.fa-times-circle.text-danger

When a user clicks on the deletion link, a piece of JavaScript code called from the component retrieves all the data attributes of the element and with them modifies the content of the modal.