(feat) destroy a limitation

app/controllers/api/plan_limitations_controller.rb

@@ -2,7 +2,7 @@
 
 # API Controller for resources of type PlanLimitation
 # PlanLimitation allows to restrict bookings of resources for the subscribers of that plan.
-class PlanLimitationsController < API::ApiController
+class API::PlanLimitationsController < API::ApiController
   def destroy
     @limitation = PlanLimitation.find(params[:id])
     authorize @limitation

app/frontend/src/javascript/components/base/edit-destroy-buttons.tsx

@@ -5,26 +5,29 @@ import { useTranslation } from 'react-i18next';
 import { FabButton } from './fab-button';
 import { FabModal } from './fab-modal';
 
-interface EditDestroyButtonsProps {
+type EditDestroyButtonsCommon = {
   onDeleteSuccess: (message: string) => void,
   onError: (message: string) => void,
   onEdit: () => void,
   itemId: number,
-  itemType: string,
   apiDestroy: (itemId: number) => Promise<void>,
-  confirmationTitle?: string,
-  confirmationMessage?: string|ReactNode,
   className?: string,
   iconSize?: number,
   showEditButton?: boolean,
 }
 
+type EditDestroyButtonsMessages =
+  { itemType: string, confirmationTitle?: string, confirmationMessage?: string|ReactNode, deleteSuccessMessage?: string } |
+  { itemType?: never, confirmationTitle: string, confirmationMessage: string|ReactNode, deleteSuccessMessage: string}
+
+type EditDestroyButtonsProps = EditDestroyButtonsCommon & EditDestroyButtonsMessages;
+
 /**
  * This component shows a group of two buttons.
  * Destroy : shows a modal dialog to ask the user for confirmation about the deletion of the provided item.
  * Edit : triggers the provided function.
  */
-export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDeleteSuccess, onError, onEdit, itemId, itemType, apiDestroy, confirmationTitle, confirmationMessage, className, iconSize = 20, showEditButton = true }) => {
+export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDeleteSuccess, onError, onEdit, itemId, itemType, apiDestroy, confirmationTitle, confirmationMessage, deleteSuccessMessage, className, iconSize = 20, showEditButton = true }) => {
   const { t } = useTranslation('admin');
 
   const [deletionModal, setDeletionModal] = useState<boolean>(false);
@@ -42,9 +45,9 @@ export const EditDestroyButtons: React.FC<EditDestroyButtonsProps> = ({ onDelete
    */
   const onDeleteConfirmed = (): void => {
     apiDestroy(itemId).then(() => {
-      onDeleteSuccess(t('app.admin.edit_destroy_buttons.deleted', { TYPE: itemType }));
+      onDeleteSuccess(deleteSuccessMessage || t('app.admin.edit_destroy_buttons.deleted', { TYPE: itemType }));
     }).catch((error) => {
-      onError(t('app.admin.edit_destroy_buttons.unable_to_delete', { TYPE: itemType }) + error);
+      onError(t('app.admin.edit_destroy_buttons.unable_to_delete') + error);
     });
     toggleDeletionModal();
   };

app/frontend/src/javascript/components/plans/plan-limit-form.tsx

@@ -89,12 +89,16 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
   };
 
   /**
-   * Callback triggered when the limitation was deleted. Return a callback accepting a message
+   * Callback triggered when a previously-saved limitation was deleted. Return a callback accepting a message.
    */
   const onLimitationDeleted = (index: number): (message: string) => void => {
     return (message: string) => {
       onSuccess(message);
       remove(index);
+      // This have a little drowback: remove(index) will set the form as "dirty", and trigger the "unsaved form alert", even if clicking on save or not
+      // won't change anything to the deleted item. To improve this we could do the following: do not destroy the limitation through the API and instead
+      // set {_destroy: true} and destroy the limitation when saving the form but we need some UI for items about to be deleted
+      // update(index, { ...getValues(`plan_limitations_attributes.${index}`), _destroy: true });
     };
   };
 
@@ -190,8 +194,8 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
                     <EditDestroyButtons onDeleteSuccess={onLimitationDeleted(index)}
                                         onError={onError}
                                         onEdit={onEditLimitation(limitation, index)}
-                                        itemId={limitation.id}
+                                        itemId={getValues(`plan_limitations_attributes.${index}.id`)}
-                                        itemType={t('app.admin.plan_limit_form.limitation')}
+                                        deleteSuccessMessage={t('app.admin.plan_limit_form.delete_success')}
                                         confirmationTitle={t('app.admin.plan_limit_form.confirmation_title')}
                                         confirmationMessage={t('app.admin.plan_limit_form.confirmation_message')}
                                         apiDestroy={PlanLimitationAPI.destroy} />
@@ -225,10 +229,10 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
                     <EditDestroyButtons onDeleteSuccess={onLimitationDeleted(index)}
                                         onError={onError}
                                         onEdit={onEditLimitation(limitation, index)}
-                                        itemId={limitation.id}
+                                        itemId={getValues(`plan_limitations_attributes.${index}.id`)}
-                                        itemType={t('app.admin.plan_limit_form.limitation')}
                                         confirmationTitle={t('app.admin.plan_limit_form.confirmation_title')}
                                         confirmationMessage={t('app.admin.plan_limit_form.confirmation_message')}
+                                        deleteSuccessMessage={t('app.admin.plan_limit_form.delete_success')}
                                         apiDestroy={PlanLimitationAPI.destroy} />
                   </div>
                 </div>

config/locales/app.admin.en.yml

@@ -3,7 +3,7 @@ en:
     admin:
       edit_destroy_buttons:
         deleted: "The {TYPE} was successfully deleted."
-        unable_to_delete: "Unable to delete the {TYPE}: "
+        unable_to_delete: "Unable to delete: "
         delete_item: "Delete the {TYPE}"
         confirm_delete: "Delete"
         delete_confirmation: "Are you sure you want to delete this {TYPE}?"
@@ -209,9 +209,9 @@ en:
         ongoing_limitations: "Ongoing limitations"
         saved_limitations: "Saved limitations"
         cancel: "Cancel this limitation"
-        limitation: "Limitation"
         confirmation_title: "Delete the limitation"
         confirmation_message: "Are you sure you want to delete this limitation? This will take effect immediately and cannot be undone."
+        delete_success: "The limitation was successfully deleted."
       plan_limit_modal:
         title: "Manage limitation of use"
         limit_reservations: "Limit reservations"