VehicleJourneys#index: Allow company deletion in 'add' modal5574-vehicle-journeys--fix-transporter-deletion-in-modal--rb

While the 'x' button in the Select2 was available in the 'edit' modal
for a vehicle journey, it was not in the 'add' modal. Thus, once you
added an associated company, you couldn't remove it in the modal. You'd
either have to cancel and create your vehicle journey again, or create
it an delete the company in the 'edit' modal later.

This enables the 'x' button in the 'add' modal (it previously was only
enabled when `editMode` was active) and sets the proper action/reducer
to remove the company.

The `allowClear` attribute was changed to only work in the 'edit' modal
in 0079238842263768b88b0fa0fd977824b49eabd5. That commit appears to be
changing things so that certain functions work when not in 'edit' mode.
The case we're concerned about is that the 'edit' modal can be opened
when in 'view' mode (not 'edit' mode) in order to get more detailed
information about a vehicle journey. This means the company Select2 is
available in 'view' mode, and the 'x' button should not be visible in
that case. But, when I tested this, even with `allowClear: true`, the
'x' button wasn't visible. This, I can only assume, is because the
Select2 is in a 'disabled' state, so it's smart enough to know not to
show the 'x' button. Which works great for us, because this allows us to
not show the 'x' button here and still show it in the 'add' and 'edit'
modals.

Refs #5574

3 files changed, 5 insertions, 1 deletions

diff --git a/app/javascript/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index 90328458b..8536f66e6 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -66,6 +66,7 @@ export default class CreateModal extends Component {
                               <CompanySelect2
                                 company = {this.props.modal.modalProps.vehicleJourney && this.props.modal.modalProps.vehicleJourney.company || undefined}
                                 onSelect2Company = {(e) => this.props.onSelect2Company(e)}
+                                onUnselect2Company = {() => this.props.onUnselect2Company()}
                               />
                             </div>
                           </div>
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
index 28a092945..5c7f75d99 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
@@ -26,7 +26,7 @@ export default class BSelect4 extends Component {
         multiple={false}
         ref='company_id'
         options={{
-          allowClear: this.props.editMode,
+          allowClear: true,
           theme: 'bootstrap',
           width: '100%',
           placeholder: 'Filtrer par transporteur...',
diff --git a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
index 0db7628be..d982f5a5f 100644
--- a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -30,6 +30,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onSelect2Company: (e) => {
       dispatch(actions.select2Company(e.params.data))
+    },
+    onUnselect2Company: () => {
+      dispatch(actions.unselect2Company())
     }
   }
 }