feat: improve branch display on TreeView (#793)

* RM#86488
axelor · Nov 22, 2024 · 9ecd41a · 9ecd41a
1 parent 46370a5
commit 9ecd41a
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 93 deletions.
diff --git a/changelogs/unreleased/86488_feat_ActionCard.json b/changelogs/unreleased/86488_feat_ActionCard.json
@@ -0,0 +1,5 @@
+{
+  "title": "ActionCard: add the possibility to define a quick action which is displayed above the button to see all the actions",
+  "type": "feat",
+  "packages": "ui"
+}
diff --git a/changelogs/unreleased/86488_feat_TreeView.json b/changelogs/unreleased/86488_feat_TreeView.json
@@ -0,0 +1,5 @@
+{
+  "title": "TreeView: add the possibility to define additional actions on branch",
+  "type": "feat",
+  "packages": "ui"
+}
diff --git a/changelogs/unreleased/86488_refactor.json b/changelogs/unreleased/86488_refactor.json
@@ -0,0 +1,5 @@
+{
+  "title": "TreeView: use ActionCard for branch display",
+  "type": "refactor",
+  "packages": "ui"
+}
diff --git a/packages/core/src/components/templates/SearchTreeView/SearchTreeView.tsx b/packages/core/src/components/templates/SearchTreeView/SearchTreeView.tsx
@@ -19,6 +19,7 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {
+  ActionCardType,
   ActionType,
   AutoCompleteSearch,
   HeaderContainer,
@@ -59,6 +60,7 @@ interface SearchTreeViewProps {
   headerTopChildren?: any;
   parentFieldName?: string;
   renderBranch?: (item: any) => any;
+  getBranchActions?: (branch: any) => ActionCardType[];
   renderLeaf: (item: any) => any;
   actionList?: ActionType[];
   verticalActions?: boolean;
@@ -94,6 +96,7 @@ const SearchTreeView = ({
   headerTopChildren,
   parentFieldName,
   renderBranch,
+  getBranchActions,
   renderLeaf,
   actionList,
   verticalActions,
@@ -236,6 +239,7 @@ const SearchTreeView = ({
         parentFieldName={parentFieldName}
         branchCardInfoButtonIndication={I18n.t('Base_Filter')}
         renderBranch={renderBranch}
+        getBranchActions={getBranchActions}
         renderLeaf={renderLeaf}
         fetchData={fetchListAPI}
         fetchBranchData={fetchBranchData}

diff --git a/packages/ui/__tests__/components/organisms/ActionCard.test.js b/packages/ui/__tests__/components/organisms/ActionCard.test.js
@@ -58,6 +58,18 @@ describe('ActionCard Component', () => {
     expect(actionList[0].onPress).toHaveBeenCalled();
   });
 
+  it('should render InfoButton components for quick action if present', () => {
+    const quickAction = {iconName: 'heart', onPress: jest.fn()};
+    const wrapper = shallow(
+      <ActionCard {...props} quickAction={quickAction} />,
+    );
+
+    expect(wrapper.find(InfoButton).length).toBe(actionList.length + 1);
+
+    const quickActionWrapper = wrapper.find(InfoButton).at(actionList.length);
+    expect(quickActionWrapper.props()).toMatchObject(quickAction);
+  });
+
   it('should apply custom style to the container if provided', () => {
     const customStyle = {width: 200};
     const wrapper = shallow(<ActionCard {...props} style={customStyle} />);

diff --git a/packages/ui/src/components/organisms/ActionCard/ActionCard.tsx b/packages/ui/src/components/organisms/ActionCard/ActionCard.tsx
@@ -28,7 +28,7 @@ import {
 const ACTION_WIDTH = 40;
 const TWO_ACTIONS_HEIGHT = 84;
 
-interface Action {
+export interface Action {
   iconName: string;
   iconColor?: string;
   helper?: string;
@@ -42,6 +42,7 @@ interface ActionCardProps {
   style?: any;
   children: any;
   actionList: Action[];
+  quickAction?: Action;
   horizontal?: boolean;
   forceActionsDisplay?: boolean;
   translator: (key: string) => string;
@@ -51,6 +52,7 @@ const ActionCard = ({
   style,
   children,
   actionList,
+  quickAction,
   horizontal = false,
   forceActionsDisplay = false,
   translator,
@@ -90,6 +92,12 @@ const ActionCard = ({
     [actionList],
   );
 
+  const _quickAction = useMemo(
+    () =>
+      quickAction != null && !quickAction.hidden ? quickAction : undefined,
+    [quickAction],
+  );
+
   const isMoreThanOneAction = useMemo(
     () => _actionList.length > 1,
     [_actionList],
@@ -110,13 +118,14 @@ const ActionCard = ({
 
   useEffect(() => {
     const shouldDisplay =
-      (_actionList.length > 2 ||
-        (_actionList[0]?.large && horizontal) ||
-        _actionList[1]?.large) &&
-      !forceActionsDisplay;
+      (_quickAction != null && !_quickAction.large
+        ? _actionList.length > 1
+        : _actionList.length > 2 ||
+          (_actionList[0]?.large && horizontal) ||
+          _actionList[1]?.large) && !forceActionsDisplay;
     setDisplaySeeActionsButton(shouldDisplay);
     setIsActionsVisible(!shouldDisplay);
-  }, [_actionList, forceActionsDisplay, horizontal]);
+  }, [_actionList, forceActionsDisplay, horizontal, _quickAction]);
 
   const isCardMinHeight = useMemo(
     () => _actionList.length > 1 || _actionList[0]?.large,
@@ -129,7 +138,7 @@ const ActionCard = ({
   );
 
   const getIconColor = (action: Action) => {
-    return action.iconColor ?? Colors.secondaryColor_dark.background;
+    return action?.iconColor ?? Colors.secondaryColor_dark.background;
   };
 
   const renderHorizontalActions = (list, isLastList) => {
@@ -168,9 +177,7 @@ const ActionCard = ({
 
       verticalActions.push(
         <View
-          style={
-            getVerticalActionStyle(action2 == null || action3 === null).action
-          }
+          style={getVerticalActionStyle(action2 == null || action3 === null)}
           key={index}>
           <InfoButton
             style={{width: ACTION_WIDTH}}
@@ -207,15 +214,8 @@ const ActionCard = ({
         })}
       </View>
       {_actionList.length > 0 &&
-        (displaySeeActionsButton && !isActionsVisible ? (
-          <InfoButton
-            style={styles.seeActions}
-            iconName="three-dots"
-            iconColor={Colors.secondaryColor_dark.background}
-            indication={translator('Base_SeeActions')}
-            onPress={() => setIsActionsVisible(true)}
-          />
-        ) : (
+        isActionsVisible &&
+        (!_quickAction || isMoreThanOneAction) && (
           <View>
             {horizontal ? (
               <>
@@ -240,7 +240,42 @@ const ActionCard = ({
               </View>
             )}
           </View>
-        ))}
+        )}
+      <View style={styles.quickActionContainer}>
+        {_quickAction != null && _actionList.length === 1 && (
+          <InfoButton
+            style={getVerticalActionStyle(false)}
+            iconName={actionList[0].iconName}
+            iconColor={getIconColor(actionList[0])}
+            indication={actionList[0].helper}
+            onPress={actionList[0].onPress}
+            disabled={actionList[0].disabled}
+          />
+        )}
+        {displaySeeActionsButton && (
+          <InfoButton
+            style={getVerticalActionStyle(
+              _quickAction == null || _quickAction.large,
+            )}
+            iconName="three-dots"
+            iconColor={Colors.secondaryColor_dark.background}
+            indication={translator('Base_SeeActions')}
+            onPress={() => setIsActionsVisible(current => !current)}
+          />
+        )}
+        {_quickAction != null && (
+          <InfoButton
+            style={getVerticalActionStyle(
+              _actionList.length === 0 || _quickAction.large,
+            )}
+            iconName={_quickAction.iconName}
+            iconColor={getIconColor(_quickAction)}
+            indication={_quickAction.helper}
+            onPress={_quickAction.onPress}
+            disabled={_quickAction.disabled}
+          />
+        )}
+      </View>
     </View>
   );
 };
@@ -257,9 +292,6 @@ const getStyles = (isMoreThanOneAction: boolean) =>
     cardContainer: {
       flex: 1,
     },
-    seeActions: {
-      width: 40,
-    },
     horizontalActionContainer: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -269,13 +301,18 @@ const getStyles = (isMoreThanOneAction: boolean) =>
     verticalActionContainer: {
       flexDirection: 'row',
     },
+    quickActionContainer: {
+      flexDirection: 'column-reverse',
+      flexWrap: 'wrap',
+    },
   });
 
 const getVerticalActionStyle = (isLargeAction: boolean) =>
   StyleSheet.create({
     action: {
+      width: ACTION_WIDTH,
       height: isLargeAction ? '100%' : '50%',
     },
-  });
+  }).action;
 
 export default ActionCard;
diff --git a/packages/ui/src/components/organisms/index.tsx b/packages/ui/src/components/organisms/index.tsx
@@ -16,7 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export {default as ActionCard} from './ActionCard/ActionCard';
+export {
+  default as ActionCard,
+  Action as ActionCardType,
+} from './ActionCard/ActionCard';
 export {default as AutoCompleteSearch} from './AutoCompleteSearch/AutoCompleteSearch';
 export {default as CheckboxScrollList} from './CheckboxScrollList/CheckboxScrollList';
 export {default as ChipSelect} from './ChipSelect/ChipSelect';

diff --git a/packages/ui/src/components/templates/TreeView/Branch.tsx b/packages/ui/src/components/templates/TreeView/Branch.tsx
@@ -20,6 +20,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import {useThemeColor} from '../../../theme';
 import {Label} from '../../molecules';
+import {ActionCardType} from '../../organisms';
 import BranchCard from './BranchCard';
 
 interface SubBranchViewProps {
@@ -30,11 +31,12 @@ interface SubBranchViewProps {
   setOpenBranches: (current: any) => void;
   branchCardInfoButtonIndication: string;
   renderBranch: (renderParams: any) => any;
+  getBranchActions?: (renderParams: any) => ActionCardType[];
   renderLeaf: (renderParams: any) => any;
   fetchBranchData: (idParent: number) => Promise<any>;
   branchCondition: (item: any) => boolean;
   onBranchFilterPress: (branch: any) => void;
-  translator?: (translationKey: string) => string;
+  translator: (translationKey: string) => string;
 }
 
 const SubBranchView = ({
@@ -45,6 +47,7 @@ const SubBranchView = ({
   setOpenBranches,
   branchCardInfoButtonIndication,
   renderBranch,
+  getBranchActions,
   renderLeaf,
   fetchBranchData,
   branchCondition,
@@ -101,6 +104,7 @@ const SubBranchView = ({
             setOpenBranches={setOpenBranches}
             renderBranch={renderBranch}
             branchCardInfoButtonIndication={branchCardInfoButtonIndication}
+            getBranchActions={getBranchActions}
             renderLeaf={renderLeaf}
             fetchBranchData={fetchBranchData}
             branchCondition={branchCondition}
@@ -123,11 +127,12 @@ interface BranchProps {
   setOpenBranches: (current: any) => void;
   branchCardInfoButtonIndication: string;
   renderBranch: (renderParams: any) => any;
+  getBranchActions?: (renderParams: any) => ActionCardType[];
   renderLeaf: (renderParams: any) => any;
   fetchBranchData: (idParent: number) => Promise<any>;
   branchCondition: (item: any) => boolean;
   onBranchFilterPress: (branch: any) => void;
-  translator?: (translationKey: string) => string;
+  translator: (translationKey: string) => string;
 }
 
 const Branch = ({
@@ -138,6 +143,7 @@ const Branch = ({
   setOpenBranches,
   branchCardInfoButtonIndication,
   renderBranch,
+  getBranchActions,
   renderLeaf,
   fetchBranchData,
   branchCondition,
@@ -189,6 +195,8 @@ const Branch = ({
         parent={branch.item}
         onFilterPress={onBranchFilterPress}
         infoButtonIndication={branchCardInfoButtonIndication}
+        actionList={getBranchActions?.(branch)}
+        translator={translator}
       />
       {isBranchOpen && (
         <SubBranchView
@@ -199,6 +207,7 @@ const Branch = ({
           setOpenBranches={setOpenBranches}
           renderBranch={renderBranch}
           branchCardInfoButtonIndication={branchCardInfoButtonIndication}
+          getBranchActions={getBranchActions}
           renderLeaf={renderLeaf}
           fetchBranchData={fetchBranchData}
           branchCondition={branchCondition}