feat: add process history list screen

packages/core/src/auth/components/molecules/ProcessHistoryCard/ProcessHistoryCard.tsx

@@ -0,0 +1,95 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, {useCallback, useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+import {useThemeColor, ObjectCard} from '@axelor/aos-mobile-ui';
+import {useTranslator} from '../../../../i18n';
+import {ProcessStatus} from '../../../../components';
+import {ProcessHistory} from '../../../types';
+
+interface ProccessHistoryCardProps {
+  style?: any;
+  status: ProcessStatus;
+  name: string;
+  startedDate: string;
+  completedDate: string;
+  failedDate: string;
+  onSuccess: () => void;
+  onError: () => void;
+}
+
+const ProccessHistoryCard = ({
+  style,
+  status,
+  name,
+  startedDate,
+  completedDate,
+  failedDate,
+  onSuccess,
+  onError,
+}: ProccessHistoryCardProps) => {
+  const Colors = useThemeColor();
+  const I18n = useTranslator();
+
+  const borderStyle = useMemo(() => {
+    return getStyles(ProcessHistory.getStatusColor(status, Colors).background)
+      ?.border;
+  }, [Colors, status]);
+
+  const handleOnProcess = useCallback(() => {
+    status === ProcessStatus.COMPLETED ? onSuccess() : onError();
+  }, [status, onSuccess, onError]);
+
+  return (
+    <ObjectCard
+      onPress={handleOnProcess}
+      style={[borderStyle, style]}
+      upperTexts={{
+        items: [
+          {isTitle: true, displayText: name},
+          {
+            iconName: 'calendar-event',
+            indicatorText: I18n.t('User_ProcessHistory_StartedOn'),
+            displayText: startedDate,
+          },
+          {
+            iconName: 'calendar-check',
+            indicatorText: I18n.t('User_ProcessHistory_CompletedOn'),
+            displayText: completedDate,
+            hideIfNull:
+              status !== ProcessStatus.COMPLETED || completedDate == null,
+          },
+          {
+            iconName: 'calendar-check',
+            indicatorText: I18n.t('User_ProcessHistory_FailedOn'),
+            displayText: failedDate,
+            hideIfNull: status !== ProcessStatus.FAILED || failedDate == null,
+          },
+        ],
+      }}
+    />
+  );
+};
+
+const getStyles = (color: string) =>
+  StyleSheet.create({
+    border: {borderLeftWidth: 7, borderLeftColor: color},
+  });
+
+export default ProccessHistoryCard;

packages/core/src/auth/components/molecules/index.js

@@ -16,4 +16,5 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+export {default as ProcessHistoryCard} from './ProcessHistoryCard/ProcessHistoryCard';
 export {default as TranslationsButton} from './TranslationsButton/TranslationsButton';

packages/core/src/auth/hooks/use-auth-headers.js

@@ -43,8 +43,17 @@ const useUserProfileActions = () => {
     headerActionsProvider.registerModel('auth_user_profile', {
       actions: [
         {
-          key: 'settings',
+          key: 'processes',
           order: 10,
+          iconName: 'clock-history',
+          iconColor: Colors.primaryColor.background,
+          title: I18n.t('User_ProcessHistroy'),
+          onPress: () => navigation.navigate('ProcessesHistroyListScreen'),
+          showInHeader: true,
+        },
+        {
+          key: 'settings',
+          order: 20,
           iconName: 'gear-fill',
           iconColor: Colors.primaryColor.background,
           title: I18n.t('User_Settings'),

packages/core/src/auth/i18n/en.json

@@ -20,6 +20,15 @@
   "User_Language": "Language",
   "User_Theme": "Theme",
   "User_NoAppUser": "The user could not be fetched. Please verify that you have the necessary permissions or contact your administrator.",
+  "User_ProcessHistory": "Process history",
+  "User_ProcessHistory_Today": "Today",
+  "User_ProcessHistory_All": "All",
+  "User_ProcessHistory_Status_Running": "Running",
+  "User_ProcessHistory_Status_Completed": "Completed",
+  "User_ProcessHistory_Status_Failed": "Failed",
+  "User_ProcessHistory_StartedOn": "Started on",
+  "User_ProcessHistory_CompletedOn": "Completed on",
+  "User_ProcessHistory_FailedOn": "Failed on",
   "Auth_SliceAction_FetchLocalization": "fetch localizations",
   "Auth_SliceAction_FetchCompanies": "fetch companies",
   "Auth_SliceAction_FetchActiveUser": "fetch active user",

packages/core/src/auth/i18n/fr.json

@@ -20,6 +20,15 @@
   "User_Language": "Langage",
   "User_Theme": "Thème",
   "User_NoAppUser": "L'utilisateur n'a pas pu être récupéré. Veuillez vérifier que vous avez les permissions nécessaires ou contactez votre administrateur.",
+  "User_ProcessHistory": "Historique du processus",
+  "User_ProcessHistory_Today": "Aujourd'hui",
+  "User_ProcessHistory_All": "Tous",
+  "User_ProcessHistory_Status_Running": "En cours",
+  "User_ProcessHistory_Status_Completed": "Terminé",
+  "User_ProcessHistory_Status_Failed": "Échoué",
+  "User_ProcessHistory_StartedOn": "Démarré le",
+  "User_ProcessHistory_CompletedOn": "Terminé le",
+  "User_ProcessHistory_FailedOn": "Échoué le",
   "Auth_SliceAction_FetchLocalization": "récupération des localisations",
   "Auth_SliceAction_FetchCompanies": "récupération des sociétés",
   "Auth_SliceAction_FetchActiveUser": "récupération de l'utilisateur actif",

packages/core/src/auth/index.ts

@@ -20,7 +20,11 @@ import {Module} from '../app/Module';
 import enTranslations from './i18n/en.json';
 import frTranslations from './i18n/fr.json';
 import * as authReducers from './features';
-import {SettingsScreen, UserScreen} from './screens';
+import {
+  ProcessesHistroyListScreen,
+  SettingsScreen,
+  UserScreen,
+} from './screens';
 import {auth_modelAPI} from './models';
 import {useAuthHeaders} from './hooks/use-auth-headers';
 
@@ -47,6 +51,10 @@ export const authModule: Module = {
       title: 'User_Settings',
       component: SettingsScreen,
     },
+    ProcessesHistroyListScreen: {
+      title: 'User_ProcessHistory',
+      component: ProcessesHistroyListScreen,
+    },
   },
   translations: {
     en: enTranslations,

packages/core/src/auth/screens/ProcessHistoryListScreen.js

@@ -0,0 +1,128 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, {useCallback, useEffect, useState} from 'react';
+import {StyleSheet} from 'react-native';
+import {
+  ChipSelect,
+  HeaderContainer,
+  Screen,
+  ScrollList,
+  ToggleSwitch,
+  useThemeColor,
+} from '@axelor/aos-mobile-ui';
+import {filterChip} from '../../utils';
+import {ProcessStatus, processProvider} from '../../components';
+import {ProcessHistoryCard} from '../components';
+import {useTranslator} from '../../i18n';
+import {ProcessHistory} from '../types';
+
+const ProcessHistoryListScreen = () => {
+  const I18n = useTranslator();
+  const Colors = useThemeColor();
+  const [tabSwitch, setTabSwitch] = useState(false);
+
+  const processList = processProvider.processList;
+
+  const [filteredList, setFilteredList] = useState(processList);
+  const [selectedStatus, setSelectedStatus] = useState([]);
+
+  const filterOnStatus = useCallback(
+    list => {
+      return filterChip(list, selectedStatus, 'status');
+    },
+    [selectedStatus],
+  );
+
+  useEffect(() => {
+    setFilteredList(filterOnStatus(processList));
+  }, [filterOnStatus, processList]);
+
+  return (
+    <Screen removeSpaceOnTop={true}>
+      <HeaderContainer
+        fixedItems={
+          <ToggleSwitch
+            leftTitle={I18n.t('User_ProcessHistory_Today')}
+            rightTitle={I18n.t('User_ProcessHistory_All')}
+            onSwitch={() => setTabSwitch(!tabSwitch)}
+          />
+        }
+        chipComponent={
+          <ChipSelect
+            mode="multi"
+            onChangeValue={chiplist => setSelectedStatus(chiplist)}
+            selectionItems={[
+              {
+                title: I18n.t('User_ProcessHistory_Status_Running'),
+                color: ProcessHistory.getStatusColor(
+                  ProcessStatus.RUNNING,
+                  Colors,
+                ),
+                key: ProcessStatus.RUNNING,
+              },
+              {
+                title: I18n.t('User_ProcessHistory_Status_Completed'),
+                color: ProcessHistory.getStatusColor(
+                  ProcessStatus.COMPLETED,
+                  Colors,
+                ),
+                key: ProcessStatus.COMPLETED,
+              },
+              {
+                title: I18n.t('User_ProcessHistory_Status_Failed'),
+                color: ProcessHistory.getStatusColor(
+                  ProcessStatus.FAILED,
+                  Colors,
+                ),
+                key: ProcessStatus.FAILED,
+              },
+            ]}
+          />
+        }
+        expandableFilter={false}
+      />
+      <ScrollList
+        loadingList={false}
+        data={filteredList}
+        renderItem={({item}) => (
+          <ProcessHistoryCard
+            name={item.name}
+            status={item.status}
+            startedDate={item.startedDate}
+            finishedDate={item.finishedDate}
+            onSuccess={item.onSuccess}
+            onError={item.onError}
+            style={styles.item}
+          />
+        )}
+        moreLoading={false}
+        isListEnd={true}
+        translator={I18n.t}
+      />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    marginHorizontal: 12,
+    marginVertical: 4,
+  },
+});
+
+export default ProcessHistoryListScreen;

packages/core/src/auth/screens/index.js

@@ -16,5 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+export {default as ProcessesHistroyListScreen} from './ProcessHistoryListScreen';
 export {default as SettingsScreen} from './SettingsScreen';
 export {default as UserScreen} from './UserScreen';

packages/core/src/auth/types/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export {default as ProcessHistory} from './process-history';

packages/core/src/auth/types/process-history.tsx

@@ -0,0 +1,43 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {Color, ThemeColors} from '@axelor/aos-mobile-ui';
+import {ProcessStatus} from '../../components';
+
+class ProcessHistory {
+  static getStatusColor = (
+    status: ProcessStatus,
+    Colors: ThemeColors,
+  ): Color => {
+    switch (status) {
+      case ProcessStatus.RUNNING:
+        return Colors.cautionColor;
+      case ProcessStatus.COMPLETED:
+        return Colors.successColor;
+      case ProcessStatus.FAILED:
+        return Colors.errorColor;
+      default:
+        console.warn(
+          `Status provided with value ${status} is not supported by process history`,
+        );
+        return null;
+    }
+  };
+}
+
+export default ProcessHistory;

packages/core/src/components/templates/Loader/LoaderPopup.tsx

@@ -62,6 +62,7 @@ const LoaderPopup = ({
 
   const {processItem, loading} = useProcessRegister(
     {
+      name: 'process #1',
       disabled,
       process,
       onSuccess,