From cbb5ad3cca648d17d20de80d5baf55fee151dca0 Mon Sep 17 00:00:00 2001
From: vhu-axelor <146069039+vhu-axelor@users.noreply.github.com>
Date: Fri, 9 Feb 2024 12:55:41 +0100
Subject: [PATCH] fix: change periodTotal to converted period in Timesheet
 views (#392)

* RM#74923
---
 packages/apps/hr/src/api/index.ts             |  1 +
 packages/apps/hr/src/api/timesheet-api.js     |  6 ++++
 .../TimesheetDetailCard.tsx                   | 19 ++++++++++--
 .../TimesheetHeader/TimesheetHeader.tsx       | 30 ++++++++++++++++---
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/packages/apps/hr/src/api/index.ts b/packages/apps/hr/src/api/index.ts
index cd6facb7e5..8f8eb5dfc5 100644
--- 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
index 7e1cca41de..f877309b80 100644
--- 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
index 86b13d285c..c7719f9b8f 100644
--- 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,6 +85,18 @@ 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
@@ -89,7 +104,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
index 82c0b75ecc..5200d07bff 100644
--- 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,6 +47,11 @@ 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 &&
@@ -54,6 +59,21 @@ const TimesheetHeader = ({timesheet, statusSelect}: TimesheetHeaderProps) => {
     [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 && (