updated styling and display jobslist above clockin

components/Selects/select-cost-center.jsx

@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
     height: 48,
     borderColor: "gray",
     borderWidth: 0.5,
-    borderRadius: 8,
+    borderRadius: 4,
     paddingHorizontal: 8,
   },
   icon: {

components/Selects/select-job-id.jsx

@@ -173,7 +173,8 @@ export default connect(null, null)(JobIdSearchSelect);
 
 const styles = StyleSheet.create({
   container: {
-    padding: 16,
+    marginVertical: 4,
+    marginHorizontal: 16,
     justifyContent: "center",
     alignContent: "center",
   },
@@ -181,7 +182,7 @@ const styles = StyleSheet.create({
     height: 50,
     borderColor: "gray",
     borderWidth: 0.5,
-    borderRadius: 8,
+    borderRadius: 4,
     paddingHorizontal: 8,
   },
   icon: {

components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -85,9 +85,8 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
     <View style={{  flex: 1}}>
       {typeof data !== "undefined" ? (
         <Card style={{ flex: 1 }}>
-          <Card.Title><Text>Labor Allocations</Text></Card.Title>
+          <Card.Title title={"Labor Allocations"} />
           <Card.Content>
-          <DataTable>
             <View style={localStyles.headerArea}>
               <Text style={localStyles.headertext}>Cost Center</Text>
               <Text style={localStyles.headertext}>Hours Total</Text>
@@ -97,7 +96,6 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
               <Text style={localStyles.headertext}>Difference</Text>
             </View>
             <Divider orientation="vertical" />
-          </DataTable>
           <DataTable>
             <FlatList
               data={totals}

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

@@ -1,7 +1,20 @@
 import React, { useCallback, useState } from "react";
 import moment from "moment";
-import {  View,  Text,  StyleSheet,  ScrollView,  RefreshControl} from "react-native";
+import {
-import { Button, Card, Headline, Subheading } from "react-native-paper";
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  FlatList,
+} from "react-native";
+import {
+  ActivityIndicator,
+  Button,
+  Card,
+  Headline,
+  Subheading,
+} from "react-native-paper";
 import styles from "../styles";
 
 import axios from "axios";
@@ -9,14 +22,21 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 
 import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
-import {  selectCurrentEmployee, selectRates, selectGettingRates,  selectSignInError,  selectEmployeeFullName,
+import {
+  selectCurrentEmployee,
+  selectRates,
+  selectGettingRates,
+  selectSignInError,
+  selectEmployeeFullName,
 } from "../../redux/employee/employee.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 import { JobIdSearchSelect } from "../Selects/select-job-id";
 import CostCenterSelect from "../Selects/select-cost-center";
 import ErrorDisplay from "../error-display/error-display.component";
-import {  selectCurrentTimeTicketJob,  selectCurrentTimeTicketJobId,
+import {
+  selectCurrentTimeTicketJob,
+  selectCurrentTimeTicketJobId,
 } from "../../redux/timetickets/timetickets.selectors";
 import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { useMutation, useQuery } from "@apollo/client";
@@ -26,8 +46,9 @@ import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import StyleRepeater from "../style-repeater/style-repeater";
 import { useTranslation } from "react-i18next";
-// import  SignOutButton  from "../Buttons/employee-sign-out-button.component";
+import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
-// import  AddTimeTicketButton  from "../Buttons/create-time-ticket-button.component";
+import  SignOutButton  from "../Buttons/employee-sign-out-button.component";
+import  AddTimeTicketButton  from "../Buttons/create-time-ticket-button.component";
 
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
@@ -60,6 +81,7 @@ export function ScreenTimeTicketBrowser({
   const [currentSCC, setCurrentSCC] = useState(null);
   const [currentSJobId, setCurrentSJobId] = useState(null);
   const [loading, setLoading] = useState(false);
+  const [loadingClockIn, setLoadingClockIn] = useState(false);
   const [error, setError] = useState(null);
   const [refreshing, setRefreshing] = useState(false);
   const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
@@ -68,7 +90,7 @@ export function ScreenTimeTicketBrowser({
 
   const handleFinish = async (values) => {
     // console.log("handleFinish called in ScreenTimeTicketBrowser");
-    setLoading(true);
+    setLoadingClockIn(true);
     setError(null);
 
     const theTime = (await axios.post("/utils/time")).data;
@@ -78,7 +100,7 @@ export function ScreenTimeTicketBrowser({
       // console.log("have all values");
     } else {
       // console.log("missing values!");
-      setLoading(false);
+      setLoadingClockIn(false);
       setError({ message: t("timeticketbrowser.errors.missingvalues") });
       return;
     }
@@ -112,7 +134,7 @@ export function ScreenTimeTicketBrowser({
     // console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] );
     const result = await insertTimeTicket(tempVariablesObj);
     // console.log("insertTimeTicket, result :", result);
-    setLoading(false);
+    setLoadingClockIn(false);
     if (!!result.errors) {
       // console.log("insertTimeTicket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
@@ -122,24 +144,65 @@ export function ScreenTimeTicketBrowser({
       setCurrentSCC(null);
     }
   };
+
   const onRefresh = useCallback(() => {
     setRefreshing(true);
+    refetch();
     setTimeout(() => {
       setRefreshing(false);
-    }, 2000);
+    }, 1000);
   }, []);
 
-  return (
+  const [itemState, setItemState] = useState({
-    <ScrollView
+    title: t("employeeclockedinlist.labels.alreadyclockedon"),
-      style={styles.cardBackground}
+    data: null,
-      // contentContainerStyle={{ flexGrow: 0 }}
+    content: null,
-      refreshControl={
+  });
-        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+
+  const { loadingATT, errorATT, dataATT, refetch } = useQuery(
+    QUERY_ACTIVE_TIME_TICKETS,
+    {
+      variables: {
+        employeeId: currentEmployee?.technician?.id,
+      },
+      skip: !currentEmployee?.technician,
+      onCompleted: (dataATT) => {
+        if (!!dataATT && dataATT?.timetickets) {
+          setItemState((itemState) => ({
+            ...itemState,
+            data: dataATT?.timetickets,
+          }));
         }
-    >
+      },
-      <StyleRepeater childStyle={{ margin: 4 }}>
+      onRefresh: { onRefresh },
-        <Card>
+    }
-          <Card.Title title={t("timeticketbrowser.labels.loggedinemployee")} 
+  );
+
+  if (loadingATT) {
+    // console.log("loadingATT : ");
+    setItemState((itemState) => ({
+      ...itemState,
+      content: <ActivityIndicator color="dodgerblue" size="large" />,
+    }));
+    return;
+  }
+  if (errorATT) {
+    // console.error("ErrorATT : ",errorATT);
+    setItemState((itemState) => ({
+      ...itemState,
+      content: <ErrorDisplay errorMessage={errorATT.message} />,
+    }));
+    return;
+  }
+  // console.log({ itemState: !!itemState });
+
+  return (
+    <View style={styles.cardBackground}>
+      <FlatList
+        ListHeaderComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Title
+              title={t("timeticketbrowser.labels.loggedinemployee")}
               //  right={(props) => <SignOutButton />}
             />
             <Card.Content>
@@ -148,8 +211,15 @@ export function ScreenTimeTicketBrowser({
               )}
             </Card.Content>
           </Card>
-        <Card>
+        }
-          <Card.Title title={t("timeticketbrowser.labels.clockintojob")} 
+        data={!!itemState ? [itemState] : null}
+        renderItem={({ item }) => (
+          <MyItem style={localStyles.localCardStyle} itemState={item} />
+        )}
+        ListFooterComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Title
+              title={t("timeticketbrowser.labels.clockintojob")}
               //     right={(props) =>
               //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
               //     <Button mode="outlined"
@@ -176,27 +246,51 @@ export function ScreenTimeTicketBrowser({
               {error && error?.message ? (
                 <ErrorDisplay errorMessage={error.message} />
               ) : null}
-          <Button mode="outlined" loading={loading} onPress={handleFinish}>
+              <Button
+                mode="outlined"
+                style={styles.buttonBasicOutlined}
+                loading={loadingClockIn}
+                onPress={handleFinish}
+              >
                 <Text>{t("timeticketbrowser.actions.clockin")}</Text>
               </Button>
             </Card.Content>
           </Card>
-      </StyleRepeater>
+        }
-      <View style={{ flexGrow: 1, flex: 1 }}>
+        refreshControl={
-        <EmployeeClockedInList
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
-          technician={currentEmployee}
+        }
-          isRefresh={refreshing}
       />
     </View>
-    </ScrollView>
   );
 }
 
+const MyItem = ({ itemState, style }) => {
+  const items = itemState?.data;
+  return (
+    <Card key={itemState.title} style={style}>
+      <Card.Title title={itemState.title} />
+      <Card.Content>
+        {!!items ? (
+          items.map((item) => <ClockedinListItem ticket={item} />)
+        ) : !!itemState.content ? (
+          itemState.content
+        ) : (
+          <Text>No Data</Text>
+        )}
+      </Card.Content>
+    </Card>
+  );
+};
+
 const localStyles = StyleSheet.create({
   content: {
     display: "flex",
     flex: 2,
   },
+  localCardStyle: {
+    margin: 4,
+  },
 });
 
 export default connect(

components/styles.js

@@ -9,4 +9,23 @@ export default StyleSheet.create({
     display: "flex",
     flex: 1,
   },
+  buttonBasicOutlined: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    justifyContent: "center",
+    alignContent: "center",
+    borderColor: "gray",
+    borderWidth: 0.8,
+    borderRadius: 4,
+  },
+  buttonFatOutlined: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    height: 48,
+    justifyContent: "center",
+    alignContent: "center",
+    borderColor: "gray",
+    borderWidth: 0.8,
+    borderRadius: 4,
+  }
 });

components/time-ticket-items/clockedin-list-item.component.jsx

@@ -6,13 +6,14 @@ import { connect } from "react-redux";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import { DateTimeFormatter } from "../../util/DateFormater";
 import { setTmTicketJobId } from "../../redux/app/app.actions";
+import styles from "../styles";
 
 const mapDispatchToProps = (dispatch) => ({
   setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)),
 });
 
 export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
-  // console.log("makeNavToTimeTicketClockOff, handleRefresh:");
+  //  console.log("ClockedinListItem, ticket:",ticket);
   const { t } = useTranslation();
   const navigation = useNavigation();
 
@@ -28,7 +29,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
   );
 
   return (
-    <Card style={{ margin: 8 }}>
+    <Card key={ticket.id} style={{ margin: 8 }}>
       <Card.Title
         title={`${
           ticket.job.ro_number || t("general.labels.na")
@@ -51,8 +52,9 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
             : ticket.cost_center}
         </Text>
       </Card.Content>
-      <Card.Actions>
+      <Card.Actions style={{
-        <Button mode="outlined" onPress={makeNavToTimeTicketClockOff} >
+      justifyContent: 'center'}}>
+        <Button mode="outlined" style={styles.buttonBasicOutlined} onPress={makeNavToTimeTicketClockOff} >
           {t("clockedinlistitem.actions.clockout")}
         </Button>
       </Card.Actions>

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

@@ -4,13 +4,22 @@ 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, Headline, Subheading } 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,selectRestrictClaimableHoursFlag } 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";
@@ -30,7 +39,7 @@ const mapStateToProps = createStructuredSelector({
   currentRatesNCostCenters: selectRates,
   currentBodyshop: selectBodyshop,
   currentTmTicketJobId: selectCurrentTmTicketJobId,
-  currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag
+  currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
 });
 const mapDispatchToProps = (dispatch) => ({
   timeTicketClockOutStart,
@@ -44,14 +53,12 @@ export function TimeTicketClockOff({
   currentRestrictClaimableHoursFlag,
   route,
 }) {
-
   const costCenterDiff = useRef(0);
   // console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
 
-
   const setCostCenterDiff = (value) => {
     countRef.current = val;
-    console.log(`Button clicked ${countRef.current} times`);
+    // console.log(`Button clicked ${countRef.current} times`);
   };
 
   const navigation = useNavigation();
@@ -64,8 +71,9 @@ export function TimeTicketClockOff({
   const [error, setError] = useState(null);
   const [currentSCC, setCurrentSCC] = useState(null);
 
-  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET,
+  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET, {
-    {refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"]});
+    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
+  });
 
   const handleFinish = async (values) => {
     logImEXEvent("TimeTicketClockOff_handleFinish");
@@ -92,7 +100,9 @@ export function TimeTicketClockOff({
     if (!!currentRestrictClaimableHoursFlag) {
       //  console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
       if (values.productivehours > costCenterDiff.current) {
-        setError({ message: t("timeticketclockoff.errors.hoursenteredmorethanavailable")  });
+        setError({
+          message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
+        });
         return;
       }
     }
@@ -140,10 +150,10 @@ 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();
@@ -153,6 +163,7 @@ export function TimeTicketClockOff({
       {/* style={localStyles.content}> */}
       <StyleRepeater childStyle={{ margin: 4 }}>
         <Card>
+          <Card.Content>
             <Formik
               initialValues={{
                 costcenter: { currentSCC },
@@ -169,7 +180,9 @@ export function TimeTicketClockOff({
                     onChangeText={handleChange("actualhours")}
                     onBlur={handleBlur("actualhours")}
                     value={values.actualhours}
-                label={t("timeticketclockoff.labels.actualhoursplaceholder")}
+                    label={t(
+                      "timeticketclockoff.labels.actualhoursplaceholder"
+                    )}
                     keyboardType="numeric"
                   />
                   <TextInput
@@ -178,7 +191,9 @@ export function TimeTicketClockOff({
                     onChangeText={handleChange("productivehours")}
                     onBlur={handleBlur("productivehours")}
                     value={values.productivehours}
-                label={t("timeticketclockoff.labels.productivehoursplaceholder")}
+                    label={t(
+                      "timeticketclockoff.labels.productivehoursplaceholder"
+                    )}
                     keyboardType="numeric"
                   />
                   <CostCenterSelect
@@ -188,17 +203,27 @@ export function TimeTicketClockOff({
                   />
                   {error ? <ErrorDisplay errorMessage={error.message} /> : null}
                   <Button
-                style={localStyles.input}
+                    mode="outlined"
+                    style={styles.buttonBasicOutlined}
                     onPress={handleSubmit}
                     title={t("timeticketclockoff.actions.clockoff")}
                   >
-                <Text style={{ fontSize: 12 }}>{t("timeticketclockoff.actions.clockoff")}</Text>
+                    <Text style={{ fontSize: 12 }}>
+                      {t("timeticketclockoff.actions.clockoff")}
+                    </Text>
                   </Button>
                 </View>
               )}
             </Formik>
+          </Card.Content>
         </Card>
-      <LaborAllocationsTable jobId={currentTmTicketJobId} costCenterDiff={costCenterDiff} selectedCostCenter={currentSCC}/>
+        <View style={{ flexGrow: 1 }}>
+        <LaborAllocationsTable
+          jobId={currentTmTicketJobId}
+          costCenterDiff={costCenterDiff}
+          selectedCostCenter={currentSCC}
+        />
+        </View >
       </StyleRepeater>
     </View>
   );

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

@@ -4,14 +4,14 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Button, Dialog, TextInput } from "react-native-paper";
+import { Button, TextInput, Card } from "react-native-paper";
 import CostCenterSelect from "../Selects/select-cost-center";
 import { JobIdSearchSelect } from "../Selects/select-job-id";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import {
   selectCurrentEmployee,
   selectRates,
-  selectEmployeeFullName
+  selectEmployeeFullName,
 } from "../../redux/employee/employee.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useCallback } from "react";
@@ -26,11 +26,14 @@ import { logImEXEvent } from "../../firebase/firebase.analytics";
 import moment from "moment";
 import { useNavigation } from "@react-navigation/native";
 
+import styles from "../styles";
+import StyleRepeater from "../style-repeater/style-repeater";
+
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   currentRatesNCostCenters: selectRates,
   currentBodyshop: selectBodyshop,
-  currentEmployeeFullName: selectEmployeeFullName
+  currentEmployeeFullName: selectEmployeeFullName,
 });
 // const mapDispatchToProps = (dispatch) => ({});
 
@@ -38,7 +41,7 @@ export function TimeTicketCreate({
   currentEmployee,
   currentRatesNCostCenters,
   currentBodyshop,
-  currentEmployeeFullName
+  currentEmployeeFullName,
 }) {
   const navigation = useNavigation();
   const { t } = useTranslation();
@@ -172,8 +175,11 @@ export function TimeTicketCreate({
     setLoading(false);
   };
   return (
-    <View style={localStyles.content}>
+    <View style={styles.cardBackground}>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+      <StyleRepeater childStyle={{ margin: 4 }}>
+        {/* <ScrollView contentContainerStyle={{ flexGrow: 1 }}> */}
+        <Card>
+          <Card.Content>
             <Formik
               initialValues={{
                 jobid: { currentSJobId },
@@ -203,7 +209,12 @@ export function TimeTicketCreate({
                     style={localStyles.dateButton}
                   >
                     <Text style={localStyles.textForButton}>
-                {t("createtimeticket.actions.ticketdate")}{date2.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit',  year: 'numeric' })}
+                      {t("createtimeticket.actions.ticketdate")}
+                      {date2.toLocaleDateString("en-US", {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric",
+                      })}
                     </Text>
                   </Button>
                   <DateTimePickerModal
@@ -231,7 +242,9 @@ export function TimeTicketCreate({
                     onChangeText={handleChange("productivehours")}
                     onBlur={handleBlur("productivehours")}
                     value={values.productivehours}
-                label={t("createtimeticket.labels.productivehoursplaceholder")}
+                    label={t(
+                      "createtimeticket.labels.productivehoursplaceholder"
+                    )}
                     keyboardType="numeric"
                   />
                   <TextInput
@@ -245,22 +258,27 @@ export function TimeTicketCreate({
                   />
                   {error ? <ErrorDisplay errorMessage={error.message} /> : null}
                   <Button
-                style={localStyles.input}
+                    mode="outlined"
+                    style={styles.buttonBasicOutlined}
                     onPress={handleSubmit}
                     loading={loading}
                     title="Submit"
                   >
-                <Text style={{ fontSize: 12 }}>{t("createtimeticket.actions.createticket")}</Text>
+                    <Text style={{ fontSize: 12 }}>
+                      {t("createtimeticket.actions.createticket")}
+                    </Text>
                   </Button>
                 </View>
               )}
             </Formik>
-
+          </Card.Content>
+        </Card>
         {/* Below is for list of jobs/tickets */}
-      </ScrollView>
+        {/* </ScrollView> */}
         <View style={{ flexGrow: 1 }}>
           <LaborAllocationsTable jobId={currentSJobId?.value} />
         </View>
+      </StyleRepeater>
     </View>
   );
 }
@@ -274,16 +292,22 @@ const localStyles = StyleSheet.create({
   },
   topContainer: {},
   bottomContainer: {},
-  input: {},
+  input: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    height: 48,
+    justifyContent: "center",
+    alignContent: "center",
+    borderWidth: 0.8,
+  },
   dateButton: {
     marginVertical: 4,
     marginHorizontal: 16,
     height: 48,
     justifyContent: "center",
     alignContent: "center",
-    borderColor: "blue",
+    borderColor: "gray",
     borderWidth: 0.8,
-    flex: 1,
   },
   textForButton: {
     flex: 1,

translations/en-US/common.json

@@ -496,7 +496,7 @@
 		},
 		"employeeclockedinlist": {
 			"labels": {
-				"alreadyclockedon": "You are already clocked in to the following job(s):"
+				"alreadyclockedon": "Clocked into job(s)"
 			}
 		},
 		"clockedinlistitem": {