Added validating claiming hours using shop setting

components/time-ticket/screen-time-ticket-clockoff.component.jsx

@@ -1,16 +1,16 @@
 import { Formik } from "formik";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { StyleSheet, Text, View, ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Button, TextInput, Card } from "react-native-paper";
+import { Button, TextInput, Card, Headline, Subheading } from "react-native-paper";
 import  CostCenterSelect  from "../Selects/select-cost-center";
 import {
   selectCurrentEmployee,
   selectRates,
 } from "../../redux/employee/employee.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectBodyshop,selectRestrictClaimableHoursFlag } from "../../redux/user/user.selectors";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { useMutation } from "@apollo/client";
@@ -20,6 +20,8 @@ import { timeTicketClockOutStart } from "../../redux/timetickets/timetickets.act
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import axios from "axios";
 import { useNavigation } from "@react-navigation/native";
+import styles from "../styles";
+import StyleRepeater from "../style-repeater/style-repeater";
 // import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors";
 
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
@@ -28,6 +30,7 @@ const mapStateToProps = createStructuredSelector({
   currentRatesNCostCenters: selectRates,
   currentBodyshop: selectBodyshop,
   currentTmTicketJobId: selectCurrentTmTicketJobId,
+  currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag
 });
 const mapDispatchToProps = (dispatch) => ({
   timeTicketClockOutStart,
@@ -38,8 +41,19 @@ export function TimeTicketClockOff({
   currentRatesNCostCenters,
   currentBodyshop,
   currentTmTicketJobId,
+  currentRestrictClaimableHoursFlag,
   route,
 }) {
+
+  const costCenterDiff = useRef(0);
+  // console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
+
+
+  const setCostCenterDiff = (value) => {
+    countRef.current = val;
+    console.log(`Button clicked ${countRef.current} times`);
+  };
+
   const navigation = useNavigation();
   const { timeTicketId } = route.params;
   // console.log("TimeTicketClockOff, timeTicketId :", timeTicketId);
@@ -74,6 +88,15 @@ export function TimeTicketClockOff({
       setError({ message: t("timeticketclockoff.errors.missingvalues")  });
       return;
     }
+    // console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag :", currentRestrictClaimableHoursFlag);
+    if(!!currentRestrictClaimableHoursFlag){
+      //  console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
+      if (values.productivehours > costCenterDiff.current){
+        setError({ message: t("timeticketclockoff.errors.hoursenteredmorethanavailable")  });
+        return;
+      }    
+    }
+
     const tempcallobj = {
       variables: {
         timeticketId: timeTicketId,
@@ -117,18 +140,19 @@ export function TimeTicketClockOff({
     // console.log("updateTimeticket, result :", result);
     setLoading(false);
     if (!!result.errors) {
-      // console.log("updateTimeticket, result.error :", result.errors);
+      console.log("updateTimeticket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
     } else {
-      // console.log("updateTimeticket, result :", result.data);
+      console.log("updateTimeticket, result :", result.data);
       navigation.goBack();
     }
     //if (completedCallback) completedCallback();
   };
   return (
-    <View style={localStyles.content}>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <Card>
+    <View style={styles.cardBackground}> 
+    {/* style={localStyles.content}> */}
+      <StyleRepeater childStyle={{ margin: 4 }}>
+      <Card>
         <Formik
           initialValues={{
             costcenter: { currentSCC },
@@ -174,10 +198,8 @@ export function TimeTicketClockOff({
           )}
         </Formik>
         </Card>
-      </ScrollView>
-      <View style={{ flexGrow: 1 }}>
-        <LaborAllocationsTable jobId={currentTmTicketJobId} />
-      </View>
+      <LaborAllocationsTable jobId={currentTmTicketJobId} costCenterDiff={costCenterDiff} selectedCostCenter={currentSCC}/>
+      </StyleRepeater>
     </View>
   );
 }