Quick actions management

It is sometimes necessary to add quick actions on a number of screens, but it is very costly to overload each screen to add the various tools. To simplify these additions, the application's base contains a toolbox that each module can enhance with quick actions. These actions can then be displayed on all screens according to the given configuration.

When exported, each module can enter a list of tools in its globalTools attribute:

interface ToolData {
  dispatch: Dispatch<any>;
  storeState: any;
  screenContext: any;
}

interface ActionToolData extends ToolData {
  navigation: any;
}

export interface Tool {
  key: string;
  order?: number;
  title?: string;
  iconName: string;
  color?: string;
  hideIf?: (data: ToolData) => boolean;
  disabledIf?: (data: ToolData) => boolean;
  onPress: (data: ActionToolData) => void;
}

export interface Module {
  name: string;
  ...
  globalTools?: Tool[];
}

A tool is defined with the following properties:

• key: action identifier to enable overloading between modules.
• order: action order in the list. The action with the lowest order will appear at the top of the toolbox.
• title: translation key to be used for the title displayed in the toolbox next to the action.
• iconName : name of the Bootstrap icon to be displayed on the button.
• color : color key to be displayed. The default color is 'primaryColor'.
• hideIf : function used to define the tool's display condition. This function takes as arguments the state of the application's store and the current screen context.
• disabledIf : function for defining the tool's activation condition. This function takes as arguments the state of the application's store and the current screen context.
• onPress: function for defining tool behavior. This function takes as arguments the state of the store, the screen context and the dispatch & navigation tools for making an API call or navigating to a specific screen.

Here's an example of how to define a tool in the Sales module to add a product to the user's cart:

export const SaleModule: Module = {
  name: 'app-sale',
  ...
  globalTools: [
    {
      key: 'sale_activeCart_addProduct',
      iconName: 'cart-plus-fill',
      hideIf: ({screenContext, storeState}) => {
        return (
          !storeState.appConfig?.sale?.isCartManagementEnabled ||
          screenContext?.productId == null
        );
      },
      onPress: ({dispatch, screenContext, storeState}) => {
        dispatch(
          addProductToUserCart({
            productId: screenContext.productId,
            userId: storeState.auth?.userId,
          }),
        );
      },
    },
  ],
};

To define the context of a screen, simply use the useContextRegister hook and pass the associated data as arguments:

import React from 'react';
import {Screen} from '@axelor/aos-mobile-ui';
import {useContextRegister} from '@axelor/aos-mobile-core';

const ProductDetailsScreen = ({route}) => {
  const {productId} = route.params.productId;

  useContextRegister({productId});

  ...

  return (...);
};

export default ProductDetailsScreen;