added styling for allocation table

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

@@ -1,6 +1,6 @@
 import { Formik } from "formik";
-import React, { useEffect, useState, useRef } from "react";
-import { StyleSheet, Text, View, ScrollView } from "react-native";
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { StyleSheet, Text, View, ScrollView, FlatList } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -34,6 +34,9 @@ import StyleRepeater from "../style-repeater/style-repeater";
 // import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors";
 
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+
+import { RefreshControl } from "react-native";
+
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   currentRatesNCostCenters: selectRates,
@@ -54,7 +57,6 @@ export function TimeTicketClockOff({
   route,
 }) {
   const costCenterDiff = useRef(0);
-  // console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
 
   const setCostCenterDiff = (value) => {
     countRef.current = val;
@@ -67,6 +69,7 @@ export function TimeTicketClockOff({
   //  console.log( "TimeTicketClockOff, handleOnDone :", handleOnDone );
 
   const { t } = useTranslation();
+  const [loadingClockOut, setLoadingClockOut] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [currentSCC, setCurrentSCC] = useState(null);
@@ -85,7 +88,7 @@ export function TimeTicketClockOff({
     ) {
       if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
         // console.log("actual hours is NAN!");
-        setLoading(false);
+        setLoadingClockOut(false);
         setError({ message: t("timeticketclockoff.errors.nan") });
         return;
       }
@@ -93,6 +96,7 @@ export function TimeTicketClockOff({
       // console.log("all have values:");
     } else {
       // console.log("missing values!");
+        setLoadingClockOut(false);
       setError({ message: t("timeticketclockoff.errors.missingvalues") });
       return;
     }
@@ -100,6 +104,7 @@ export function TimeTicketClockOff({
     if (!!currentRestrictClaimableHoursFlag) {
       //  console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
       if (values.productivehours > costCenterDiff.current) {
+        setLoadingClockOut(false);
         setError({
           message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
         });
@@ -143,12 +148,12 @@ export function TimeTicketClockOff({
     // console.log("TimeTicketClockOff, tempcallobj :", tempcallobj);
 
     //after obj is good add below to make call
-    setLoading(true);
+    setLoadingClockOut(true);
     const result = await updateTimeticket(tempcallobj);
 
     //after call results are retuning add handling below for cases
     // console.log("updateTimeticket, result :", result);
-    setLoading(false);
+    setLoadingClockOut(false);
     if (!!result.errors) {
       // console.log("updateTimeticket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
@@ -158,73 +163,93 @@ export function TimeTicketClockOff({
     }
     //if (completedCallback) completedCallback();
   };
+
+  const onRefresh = useCallback(() => {
+    setLoading(true);
+    // refetch();
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
   return (
     <View style={styles.cardBackground}>
-      {/* style={localStyles.content}> */}
-      <StyleRepeater childStyle={{ margin: 4 }}>
-        <Card>
-          <Card.Content>
-            <Formik
-              initialValues={{
-                costcenter: { currentSCC },
-                productivehours: "",
-                actualhours: "",
-              }}
-              onSubmit={handleFinish}
-            >
-              {({ handleChange, handleBlur, handleSubmit, values }) => (
-                <View style={localStyles.topTimeTicketContainer}>
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    onChangeText={handleChange("actualhours")}
-                    onBlur={handleBlur("actualhours")}
-                    value={values.actualhours}
-                    label={t(
-                      "timeticketclockoff.labels.actualhoursplaceholder"
-                    )}
-                    keyboardType="numeric"
-                  />
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    onChangeText={handleChange("productivehours")}
-                    onBlur={handleBlur("productivehours")}
-                    value={values.productivehours}
-                    label={t(
-                      "timeticketclockoff.labels.productivehoursplaceholder"
-                    )}
-                    keyboardType="numeric"
-                  />
-                  <CostCenterSelect
-                    currentRatesNCostCenters={currentRatesNCostCenters}
-                    currentValue={currentSCC}
-                    onValueSelected={setCurrentSCC}
-                  />
-                  {error ? <ErrorDisplay errorMessage={error.message} /> : null}
-                  <Button
-                    mode="outlined"
-                    style={styles.buttonBasicOutlined}
-                    onPress={handleSubmit}
-                    title={t("timeticketclockoff.actions.clockoff")}
-                  >
-                    <Text style={{ fontSize: 12 }}>
-                      {t("timeticketclockoff.actions.clockoff")}
-                    </Text>
-                  </Button>
-                </View>
-              )}
-            </Formik>
-          </Card.Content>
-        </Card>
-        <View style={{ flexGrow: 1 }}>
-        <LaborAllocationsTable
-          jobId={currentTmTicketJobId}
-          costCenterDiff={costCenterDiff}
-          selectedCostCenter={currentSCC}
-        />
-        </View >
-      </StyleRepeater>
+      <FlatList
+        ListHeaderComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Content>
+              <Formik
+                initialValues={{
+                  costcenter: { currentSCC },
+                  productivehours: "",
+                  actualhours: "",
+                }}
+                onSubmit={handleFinish}
+              >
+                {({ handleChange, handleBlur, handleSubmit, values }) => (
+                  <View style={localStyles.topTimeTicketContainer}>
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      onChangeText={handleChange("actualhours")}
+                      onBlur={handleBlur("actualhours")}
+                      value={values.actualhours}
+                      label={t(
+                        "timeticketclockoff.labels.actualhoursplaceholder"
+                      )}
+                      keyboardType="numeric"
+                    />
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      onChangeText={handleChange("productivehours")}
+                      onBlur={handleBlur("productivehours")}
+                      value={values.productivehours}
+                      label={t(
+                        "timeticketclockoff.labels.productivehoursplaceholder"
+                      )}
+                      keyboardType="numeric"
+                    />
+                    <CostCenterSelect
+                      currentRatesNCostCenters={currentRatesNCostCenters}
+                      currentValue={currentSCC}
+                      onValueSelected={setCurrentSCC}
+                    />
+                    {error ? (
+                      <ErrorDisplay errorMessage={error.message} />
+                    ) : null}
+                    <Button
+                      mode="outlined"
+                      style={styles.buttonBasicOutlined}
+                      onPress={handleSubmit}
+                      title={t("timeticketclockoff.actions.clockoff")}
+                      loading={loadingClockOut}
+                    >
+                      <Text style={{ fontSize: 12 }}>
+                        {t("timeticketclockoff.actions.clockoff")}
+                      </Text>
+                    </Button>
+                  </View>
+                )}
+              </Formik>
+            </Card.Content>
+          </Card>
+        }
+        data={null}
+        renderItem={null}
+        ListFooterComponent={
+          <LaborAllocationsTable
+            jobId={currentTmTicketJobId}
+            costCenterDiff={costCenterDiff}
+            selectedCostCenter={currentSCC}
+            style={localStyles.localCardStyle}
+            shouldRefresh={loading}
+          />
+        }
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      />
     </View>
   );
 }
@@ -260,4 +285,7 @@ const localStyles = StyleSheet.create({
     height: 48,
     fontSize: 16,
   },
+  localCardStyle: {
+    margin: 4,
+  },
 });