fix: change periodTotal to converted period in Timesheet views (#392)

* RM#74923
axelor · Feb 9, 2024 · cbb5ad3 · cbb5ad3
1 parent 433ffae
commit cbb5ad3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 6 deletions.
diff --git a/packages/apps/hr/src/api/index.ts b/packages/apps/hr/src/api/index.ts
@@ -58,6 +58,7 @@ export {
 } from './timer-api';
 export {
   addTimerTimesheet as addTimerTimesheetApi,
+  convertPeriodTimesheet as convertPeriodTimesheetApi,
   createTimesheet as createTimesheetApi,
   deleteTimesheet as deleteTimesheetApi,
   fetchDraftTimesheet as fetchDraftTimesheetApi,

diff --git a/packages/apps/hr/src/api/timesheet-api.js b/packages/apps/hr/src/api/timesheet-api.js
@@ -231,3 +231,9 @@ export async function deleteTimesheet({timesheetId}) {
     url: `ws/rest/com.axelor.apps.hr.db.Timesheet/${timesheetId}`,
   });
 }
+
+export async function convertPeriodTimesheet({timesheetId}) {
+  return axiosApiProvider.get({
+    url: `ws/aos/timesheet/convertPeriod/${timesheetId}`,
+  });
+}
diff --git a/packages/apps/hr/src/components/molecules/TimesheetDetailCard/TimesheetDetailCard.tsx b/packages/apps/hr/src/components/molecules/TimesheetDetailCard/TimesheetDetailCard.tsx
@@ -16,11 +16,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {useSelector} from '@axelor/aos-mobile-core';
 import {CardIconButton, useThemeColor} from '@axelor/aos-mobile-ui';
 import {TimesheetCard} from '../../atoms';
+import {convertPeriodTimesheet} from '../../../api/timesheet-api';
 import {Timesheet} from '../../../types';
 
 interface TimesheetDetailCardProps {
@@ -49,6 +50,8 @@ const TimesheetDetailCard = ({
   );
   const {user} = useSelector((state: any) => state.user);
 
+  const [convertedPeriod, setConvertedPeriod] = useState<number>(0);
+
   const _statusSelect = useMemo(() => {
     return Timesheet.getStatus(timesheetConfig.needValidation, item);
   }, [item, timesheetConfig]);
@@ -82,14 +85,26 @@ const TimesheetDetailCard = ({
     return false;
   }, [isActions, _statusSelect, userCanValidate]);
 
+  useEffect(() => {
+    convertPeriodTimesheet({timesheetId: item.id})
+      .then(res => {
+        if (res?.data?.object != null) {
+          setConvertedPeriod(res.data.object.periodTotalConvert);
+        } else {
+          setConvertedPeriod(0);
+        }
+      })
+      .catch(() => setConvertedPeriod(0));
+  }, [item.id]);
+
   return (
     <View style={[styles.container, style]}>
       <TimesheetCard
         statusSelect={_statusSelect}
         startDate={item.fromDate}
         endDate={item.toDate}
         company={item.company.name}
-        totalDuration={item.periodTotal}
+        totalDuration={convertedPeriod}
         durationUnit={item.timeLoggingPreferenceSelect}
         employeeName={isValidationMode ? item.employee?.name : null}
         style={styles.cardContainer}

diff --git a/packages/apps/hr/src/components/molecules/TimesheetHeader/TimesheetHeader.tsx b/packages/apps/hr/src/components/molecules/TimesheetHeader/TimesheetHeader.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {
   checkNullString,
@@ -32,8 +32,8 @@ import {
   useThemeColor,
 } from '@axelor/aos-mobile-ui';
 import {DatesInterval} from '../../atoms';
+import {convertPeriodTimesheet} from '../../../api/timesheet-api';
 import {Timesheet} from '../../../types';
-import {getDurationUnit} from '../../../utils';
 
 interface TimesheetHeaderProps {
   timesheet: any;
@@ -47,13 +47,33 @@ const TimesheetHeader = ({timesheet, statusSelect}: TimesheetHeaderProps) => {
 
   const {mobileSettings} = useSelector((state: any) => state.appConfig);
 
+  const [convertedPeriod, setConvertedPeriod] = useState<{
+    value: number;
+    title: string;
+  }>(null);
+
   const isAddButton = useMemo(
     () =>
       mobileSettings?.isLineCreationOfTimesheetDetailsAllowed &&
       statusSelect === Timesheet.statusSelect.Draft,
     [mobileSettings?.isLineCreationOfTimesheetDetailsAllowed, statusSelect],
   );
 
+  useEffect(() => {
+    convertPeriodTimesheet({timesheetId: timesheet.id})
+      .then(res => {
+        if (res?.data?.object != null) {
+          setConvertedPeriod({
+            value: res.data.object.periodTotalConvert,
+            title: res.data.object.periodTotalConvertTitle,
+          });
+        } else {
+          setConvertedPeriod(null);
+        }
+      })
+      .catch(() => setConvertedPeriod(null));
+  }, [timesheet.id]);
+
   return (
     <View style={styles.container}>
       <View style={styles.rowContainer}>
@@ -73,8 +93,10 @@ const TimesheetHeader = ({timesheet, statusSelect}: TimesheetHeaderProps) => {
             {I18n.t('User_Company')} : {timesheet.company.name}
           </Text>
           <Text>
-            {I18n.t('Hr_TotalDuration')} : {timesheet.periodTotal}
-            {getDurationUnit(timesheet.timeLoggingPreferenceSelect, I18n)}
+            {I18n.t('Hr_TotalDuration')} :
+            {convertedPeriod != null
+              ? ` ${convertedPeriod.value} ${convertedPeriod.title}`
+              : ' -'}
           </Text>
         </View>
         {isAddButton && (