fix: change periodTotal to converted period in TimesheetDetailCard an…

…d TimesheetHeader
axelor · Feb 7, 2024 · 3e91b18 · 3e91b18
1 parent 6d0d62a
commit 3e91b18
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/packages/apps/hr/src/api/index.ts b/packages/apps/hr/src/api/index.ts
@@ -57,6 +57,7 @@ export {
   fetchTimerById as fetchTimerByIdApi,
 } from './timer-api';
 export {
+  convertPeriodTimesheet as convertPeriodTimesheetApi,
   fetchDraftTimesheet as fetchDraftTimesheetApi,
   fetchTimesheet as fetchTimesheetApi,
   fetchTimesheetById as fetchTimesheetByIdApi,

diff --git a/packages/apps/hr/src/api/timesheet-api.js b/packages/apps/hr/src/api/timesheet-api.js
@@ -17,6 +17,7 @@
  */
 
 import {
+  axiosApiProvider,
   createStandardFetch,
   createStandardSearch,
   getSearchCriterias,
@@ -187,3 +188,9 @@ export async function fetchDraftTimesheet({
     page: 0,
   });
 }
+
+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 {
@@ -40,6 +41,8 @@ const TimesheetDetailCard = ({
 }: TimesheetDetailCardProps) => {
   const Colors = useThemeColor();
 
+  const [convertedPeriod, setConvertedPeriod] = useState(0);
+
   const {timesheet: timesheetConfig} = useSelector(
     (state: any) => state.appConfig,
   );
@@ -78,6 +81,12 @@ const TimesheetDetailCard = ({
     return false;
   }, [isActions, _statusSelect, userCanValidate]);
 
+  useEffect(() => {
+    convertPeriodTimesheet({timesheetId: item.id}).then(res =>
+      setConvertedPeriod(res.data.object.periodTotalConvert),
+    );
+  }, [item.id]);
+
   const handleSend = () => {
     console.log('handleSend');
   };
@@ -93,7 +102,7 @@ const TimesheetDetailCard = ({
         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 {
   useNavigation,
@@ -25,6 +25,7 @@ import {
 } from '@axelor/aos-mobile-core';
 import {Badge, CircleButton, Text, useThemeColor} from '@axelor/aos-mobile-ui';
 import {DatesInterval} from '../../atoms';
+import {convertPeriodTimesheet} from '../../../api/timesheet-api';
 import {Timesheet} from '../../../types';
 import {getDurationUnit} from '../../../utils';
 
@@ -38,6 +39,8 @@ const TimesheetHeader = ({timesheet, statusSelect}: TimesheetHeaderProps) => {
   const I18n = useTranslator();
   const navigation = useNavigation();
 
+  const [convertedPeriod, setConvertedPeriod] = useState(0);
+
   const {mobileSettings} = useSelector((state: any) => state.appConfig);
 
   const isAddButton = useMemo(
@@ -47,6 +50,12 @@ const TimesheetHeader = ({timesheet, statusSelect}: TimesheetHeaderProps) => {
     [mobileSettings?.isLineCreationOfTimesheetDetailsAllowed, statusSelect],
   );
 
+  useEffect(() => {
+    convertPeriodTimesheet({timesheetId: timesheet.id}).then(res =>
+      setConvertedPeriod(res.data.object.periodTotalConvert),
+    );
+  }, [timesheet.id]);
+
   return (
     <View style={styles.container}>
       <View style={styles.rowContainer}>
@@ -66,7 +75,7 @@ const TimesheetHeader = ({timesheet, statusSelect}: TimesheetHeaderProps) => {
             {I18n.t('User_Company')} : {timesheet.company.name}
           </Text>
           <Text>
-            {I18n.t('Hr_TotalDuration')} : {timesheet.periodTotal}
+            {I18n.t('Hr_TotalDuration')} : {convertedPeriod}
             {getDurationUnit(timesheet.timeLoggingPreferenceSelect, I18n)}
           </Text>
         </View>