feat: improve management of root element creation (#847)

* RM#88573
axelor · Jan 17, 2025 · 90142d9 · 90142d9
1 parent 516b325
commit 90142d9
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 88 deletions.
diff --git a/changelogs/unreleased/88573.json b/changelogs/unreleased/88573.json
@@ -0,0 +1,5 @@
+{
+  "title": "SearchTreeView: add onParentChange props to get parent update",
+  "type": "feat",
+  "packages": "core"
+}
diff --git a/...s/apps/dms/src/components/organisms/ParentDirectorySearchBar/ParentDirectorySearchBar.tsx b/...s/apps/dms/src/components/organisms/ParentDirectorySearchBar/ParentDirectorySearchBar.tsx
@@ -16,9 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback} from 'react';
+import {StyleSheet} from 'react-native';
 import {useDispatch, useSelector, useTranslator} from '@axelor/aos-mobile-core';
-import {AutoCompleteSearch} from '@axelor/aos-mobile-ui';
+import {AutoCompleteSearch, Label} from '@axelor/aos-mobile-ui';
 import {searchDirectory} from '../../../features/documentSlice';
 
 interface ParentDirectorySearchBarProps {
@@ -28,6 +29,7 @@ interface ParentDirectorySearchBarProps {
   onChange?: (any: any) => void;
   readonly?: boolean;
   required?: boolean;
+  displayRootInfo?: boolean;
 }
 
 const ParentDirectorySearchBar = ({
@@ -37,30 +39,18 @@ const ParentDirectorySearchBar = ({
   onChange = () => {},
   readonly = false,
   required = false,
+  displayRootInfo = false,
 }: ParentDirectorySearchBarProps) => {
   const I18n = useTranslator();
   const dispatch = useDispatch();
 
-  const {user} = useSelector(state => state.user);
-  const {mobileSettings} = useSelector(state => state.appConfig);
   const {
     loadingDirectory,
     moreLoadingDirectory,
     isListEndDirectory,
     directoryList,
   } = useSelector(state => state.dms_document);
 
-  const extendedDirectoryList = useMemo(
-    () => [
-      {
-        ...(user.dmsRoot ?? mobileSettings?.defaultDmsRoot),
-        fileName: I18n.t('Dms_Root'),
-      },
-      ...directoryList,
-    ],
-    [I18n, directoryList, mobileSettings?.defaultDmsRoot, user.dmsRoot],
-  );
-
   const searchParentDirectoryAPI = useCallback(
     ({searchValue, page = 0}) => {
       dispatch((searchDirectory as any)({searchValue, page}));
@@ -69,26 +59,42 @@ const ParentDirectorySearchBar = ({
   );
 
   return (
-    <AutoCompleteSearch
-      style={style}
-      title={I18n.t(title)}
-      objectList={extendedDirectoryList}
-      value={defaultValue}
-      required={required}
-      readonly={readonly}
-      onChangeValue={onChange}
-      fetchData={searchParentDirectoryAPI}
-      displayValue={item => item.fileName}
-      placeholder={I18n.t(title)}
-      showDetailsPopup={true}
-      loadingList={loadingDirectory}
-      moreLoading={moreLoadingDirectory}
-      isListEnd={isListEndDirectory}
-      navigate={false}
-      oneFilter={false}
-      translator={I18n.t}
-    />
+    <>
+      {displayRootInfo && defaultValue == null && (
+        <Label
+          style={styles.label}
+          type="info"
+          message={I18n.t('Dms_SearchBarRootInfo')}
+        />
+      )}
+      <AutoCompleteSearch
+        style={style}
+        title={I18n.t(title)}
+        objectList={directoryList}
+        value={defaultValue}
+        required={required}
+        readonly={readonly}
+        onChangeValue={onChange}
+        fetchData={searchParentDirectoryAPI}
+        displayValue={item => item.fileName}
+        placeholder={I18n.t(title)}
+        showDetailsPopup={true}
+        loadingList={loadingDirectory}
+        moreLoading={moreLoadingDirectory}
+        isListEnd={isListEndDirectory}
+        navigate={false}
+        oneFilter={false}
+        translator={I18n.t}
+      />
+    </>
   );
 };
 
+const styles = StyleSheet.create({
+  label: {
+    width: '90%',
+    alignSelf: 'center',
+  },
+});
+
 export default ParentDirectorySearchBar;
diff --git a/packages/apps/dms/src/components/templates/DocumentList/DocumentList.tsx b/packages/apps/dms/src/components/templates/DocumentList/DocumentList.tsx
@@ -16,8 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {
+  headerActionsProvider,
   SearchTreeView,
   useNavigation,
   useDispatch,
@@ -52,6 +53,7 @@ const DocumentList = ({
 
   const [author, setAuthor] = useState(null);
   const [selectedExtensions, setSelectedExtensions] = useState([]);
+  const [parentList, setParentList] = useState([]);
 
   const {
     loadingDocument,
@@ -78,6 +80,25 @@ const DocumentList = ({
     [author?.id, selectedExtensions],
   );
 
+  useEffect(() => {
+    headerActionsProvider.registerModel('dms_all_documents', {
+      actions: [
+        {
+          key: 'newDocument',
+          order: 10,
+          iconName: 'plus-lg',
+          title: I18n.t('Dms_NewDocument'),
+          iconColor: Colors.primaryColor.background,
+          onPress: () =>
+            navigation.navigate('DocumentFormScreen', {
+              parent: parentList.at(-1),
+            }),
+          showInHeader: true,
+        },
+      ],
+    });
+  }, [Colors, I18n, navigation, parentList]);
+
   return (
     <Screen removeSpaceOnTop={true}>
       <SearchTreeView
@@ -158,6 +179,7 @@ const DocumentList = ({
         displayBreadcrumb
         defaultParent={defaultParent}
         manageParentFilter={!isAttachedFilesList}
+        onParentChange={setParentList}
       />
     </Screen>
   );

diff --git a/packages/apps/dms/src/hooks/use-dms-header-actions.ts b/packages/apps/dms/src/hooks/use-dms-header-actions.ts
@@ -24,36 +24,12 @@ import {
   useSelector,
   useTranslator,
 } from '@axelor/aos-mobile-core';
-import {useThemeColor} from '@axelor/aos-mobile-ui';
 import {getAction} from '../utils';
 
 export const useDMSHeaders = () => {
-  useAllDocumentsActions();
   useAttachedFilesGenericAction();
 };
 
-const useAllDocumentsActions = () => {
-  const Colors = useThemeColor();
-  const navigation = useNavigation();
-  const I18n = useTranslator();
-
-  useEffect(() => {
-    headerActionsProvider.registerModel('dms_all_documents', {
-      actions: [
-        {
-          key: 'newDocument',
-          order: 10,
-          iconName: 'plus-lg',
-          title: I18n.t('Dms_NewDocument'),
-          iconColor: Colors.primaryColor.background,
-          onPress: () => navigation.navigate('DocumentFormScreen'),
-          showInHeader: true,
-        },
-      ],
-    });
-  }, [Colors, I18n, navigation]);
-};
-
 const useAttachedFilesGenericAction = () => {
   const I18n = useTranslator();
   const navigation = useNavigation();

diff --git a/packages/apps/dms/src/i18n/en.json b/packages/apps/dms/src/i18n/en.json
@@ -13,10 +13,10 @@
   "Dms_Name": "Name",
   "Dms_Folder": "Folder",
   "Dms_File": "File",
-  "Dms_Root": "Root",
   "Dms_AttachedFiles": "Attached files",
   "Dms_NoAttachedFiles": "No attached files",
   "Dms_DoYouWantToAddFile": "Do you want to add a file?",
+  "Dms_SearchBarRootInfo": "If the parent folder stays empty then the file will be saved on your root folder",
   "Dms_SliceAction_SearchDocument": "search document",
   "Dms_SliceAction_SearchDirectory": "search directory",
   "Dms_SliceAction_SearchFavoriteDocument": "search favorite document",

diff --git a/packages/apps/dms/src/i18n/fr.json b/packages/apps/dms/src/i18n/fr.json
@@ -13,10 +13,10 @@
   "Dms_Name": "Nom",
   "Dms_Folder": "Dossier",
   "Dms_File": "Fichier",
-  "Dms_Root": "Racine",
   "Dms_AttachedFiles": "Fichiers joints",
   "Dms_NoAttachedFiles": "Pas de fichiers joints",
   "Dms_DoYouWantToAddFile": "Voulez-vous ajouter un fichier ?",
+  "Dms_SearchBarRootInfo": "Si le dossier parent reste vide alors le document sera enregistré à votre dossier racine",
   "Dms_SliceAction_SearchDocument": "recherche sur les documents",
   "Dms_SliceAction_SearchDirectory": "recherche sur les dossiers",
   "Dms_SliceAction_SearchFavoriteDocument": "recherche sur les documents favoris",

diff --git a/packages/apps/dms/src/models/forms.ts b/packages/apps/dms/src/models/forms.ts
@@ -36,9 +36,8 @@ export const dms_formsRegister: FormConfigs = {
         type: 'object',
         widget: 'custom',
         customComponent: ParentDirectorySearchBar,
+        options: {displayRootInfo: true},
         hideIf: ({objectState}) => objectState.isAttachedFileCreation,
-        requiredIf: ({objectState}) =>
-          !objectState.parent?.fileName && !objectState.isAttachedFileCreation,
       },
       fileName: {
         titleKey: 'Dms_Name',

diff --git a/packages/apps/dms/src/screens/DocumentFormScreen.tsx b/packages/apps/dms/src/screens/DocumentFormScreen.tsx
@@ -18,15 +18,11 @@
 
 import React, {useCallback, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
-import {FormView, useSelector, useTranslator} from '@axelor/aos-mobile-core';
+import {FormView, useSelector} from '@axelor/aos-mobile-core';
 import {createDocument, updateDocument} from '../features/documentSlice';
 
 const DocumentFormScreen = ({navigation, route}) => {
-  const parent = route?.params?.parent;
-  const document = route?.params?.document;
-  const model = route?.params?.model;
-  const modelId = route?.params?.modelId;
-  const I18n = useTranslator();
+  const {parent, document, model, modelId} = route?.params ?? {};
 
   const {user} = useSelector(state => state.user);
   const {mobileSettings} = useSelector(state => state.appConfig);
@@ -39,31 +35,14 @@ const DocumentFormScreen = ({navigation, route}) => {
     [model, modelId, parent],
   );
 
-  const defaultValue = useMemo(
-    () =>
-      document && {
-        ...document,
-        parent: document.parent ?? {
-          fileName: I18n.t('Dms_Root'),
-        },
-      },
-    [I18n, document],
-  );
+  const defaultValue = useMemo(() => document, [document]);
 
   const documentAPI = useCallback(
     (_document, isCreation, dispatch) => {
       const parentId = _document.parent?.id;
 
       if (parentId == null) {
-        _document.parent = null;
-      }
-
-      if (parentId === user.dmsRoot?.id) {
-        _document.parent = user.dmsRoot;
-      }
-
-      if (parentId === mobileSettings?.defaultDmsRoot?.id) {
-        _document.parent = mobileSettings?.defaultDmsRoot;
+        _document.parent = user.dmsRoot ?? mobileSettings?.defaultDmsRoot;
       }
 
       const sliceFunction = isCreation ? createDocument : updateDocument;

diff --git a/packages/core/src/components/templates/SearchTreeView/SearchTreeView.tsx b/packages/core/src/components/templates/SearchTreeView/SearchTreeView.tsx
@@ -71,6 +71,7 @@ interface SearchTreeViewProps {
   displayBreadcrumb?: boolean;
   defaultParent?: any;
   manageParentFilter?: boolean;
+  onParentChange?: (parent: any) => void;
 }
 
 const SearchTreeView = ({
@@ -111,6 +112,7 @@ const SearchTreeView = ({
   displayBreadcrumb = false,
   defaultParent,
   manageParentFilter = true,
+  onParentChange,
 }: SearchTreeViewProps) => {
   const I18n = useTranslator();
   const dispatch = useDispatch();
@@ -127,6 +129,10 @@ const SearchTreeView = ({
     }
   }, [defaultParent, isFocused]);
 
+  useEffect(() => {
+    onParentChange(parent);
+  }, [onParentChange, parent]);
+
   const handleChangeParent = value => {
     setParent(current => {
       const _parent = [...current];