added parts for last 3 calls

components/Buttons/tech-clock-out-button.component.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Text } from "react-native";
+import { Button } from "react-native-paper";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { employeeSignOut } from "../../redux/employee/employee.actions";
+import { setTmTicketJobId } from "../../redux/app/app.actions";
+
+const mapDispatchToProps = (dispatch) => ({
+  signOut:(jobId) => dispatch(setTmTicketJobId()),
+});
+
+export function TechClockOffButton({ setTmTicketJobId,
+    jobId,
+    timeTicketId, }) {
+  const { t } = useTranslation();
+  return (
+    <Button
+      mode="text"
+      compact={true}
+      onPress={() => signOut()}
+      icon="logout"
+    >
+    <Text style={{fontSize: 12}}>{t("general.actions.logout")}</Text> 
+    </Button>
+  );
+}
+export default connect(null, mapDispatchToProps)(SignOutButton);

components/job-list-item/job-list-item.component.jsx

@@ -6,16 +6,16 @@ import { Button, List, Title } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
-import { setCameraJob, setCameraJobId, setTmTicketJobId } from "../../redux/app/app.actions";
+import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
 
 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
   setCameraJobId: (id) => dispatch(setCameraJobId(id)),
   setCameraJob: (job) => dispatch(setCameraJob(job)),
-  setTmTicketJobId:(id) => dispatch(setTmTicketJobId(id)),
+  // setTmTicketJobId:(id) => dispatch(setTmTicketJobId(id)),
 });
 
-export function JobListItem({ setCameraJob, setCameraJobId,setTmTicketJobId, item }) {
+export function JobListItem({ setCameraJob, setCameraJobId, item }) {
   const { t } = useTranslation();
   const navigation = useNavigation();
   // const _swipeableRow = useRef(null);
@@ -72,7 +72,7 @@ export function JobListItem({ setCameraJob, setCameraJobId,setTmTicketJobId, ite
           onPress={() => {
             logImEXEvent("imexmobile_setcamerajobid_row");
             setCameraJobId(item.id);
-            setTmTicketJobId(item.id);
+            // setTmTicketJobId(item.id);
             setCameraJob(item);
             navigation.navigate("MediaBrowserTab");
           }}

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

@@ -3,64 +3,84 @@ import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Card, Text } from "react-native-paper";
-import { connect } from "react-redux";
+import { connect, useSelector, useDispatch } from "react-redux";
-import { createStructuredSelector } from "reselect";
+import { createSelector, createStructuredSelector } from "reselect";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import { DateTimeFormatter } from "../../util/DateFormater";
 // import { setTimeTicketJobId } from "../../redux/timetickets/timetickets.actions";
 import { setTmTicketJobId } from "../../redux/app/app.actions";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
+import { employeeSignInStart } from "../../redux/employee/employee.actions";
+import { useRef } from "react";
+
+
+// const selectNumCompletedTodos = createSelector(
+//     (state) => state.timeTickets,
+//     (timeTickets) => timeTickets.timeTicketJobId
+//   );
+//const mapStateToProps = createStructuredSelector({});
+  // // setTimeTicketJobId: (jobId) =>dispatch(setTimeTicketJobId({jobId})),
+  //employeeSignInStart:(idjob) => dispatch(employeeSignInStart(idjob)),
 
-const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
-    // setTimeTicketJobId: (jobId) =>dispatch(setTimeTicketJobId({jobId})),
+  setTmTicketJobId:() => dispatch(setTmTicketJobId(jobId)),
-    setTmTicketJobId:(id) => dispatch(setTmTicketJobId(id)),
 });
 
-export function ClockedinListItem({ setTmTicketJobId, ticket }) {
+export function ClockedinListItem( props ) {
+
   const { t } = useTranslation();
   const navigation = useNavigation();
+  console.log("ClockedinListItem, ", props.ticket.job.id);
+  const jbId = props.ticket.job.id;
+  console.log("ClockedinListItem, jbId: ", jbId);
+  const te = useRef(jbId)
+ let makeNave = (jobId) => (
+    console.log("ClockedinListItem ", setTmTicketJobId)
+    ,console.log("te", jobId)
+    ,setTmTicketJobId(jobId)
     
-  const onPress = (ticket, setCameraJobId) => {
+    // ,navigation.navigate("TimeTicketClockOff")
-    console.log("ClockedinListItem, onPress called");
+    );
-    console.log("ClockedinListItem, ticket", ticket);
+  //   const onPress = (ticket, setCameraJobId) => {
-    setTimeTicketJobId(ticket.jobid);
+  //     console.log("ClockedinListItem, onPress called");
-    // logImEXEvent("imexmobile_view_job_detail");
+  //     console.log("ClockedinListItem, ticket", ticket);
-    navigation.push("TimeTicketClockOff", {
+  //     setTimeTicketJobId(ticket.jobid);
-      jobId: ticket.jobid, //item.id,
+  //     // logImEXEvent("imexmobile_view_job_detail");
-      timeTicketId: ticket.id,
+  //     navigation.push("TimeTicketClockOff", {
-      //completedCallback: refetch,
+  //       jobId: ticket.jobid, //item.id,
-    });
+  //       timeTicketId: ticket.id,
-    // navigation.push("JobDetail", {
+  //       //completedCallback: refetch,
-    //     jobId: item.id,
+  //     });
-    //     timeTicketId: item.ro_number || t("general.labels.na"),
+  //     // navigation.push("JobDetail", {
-    //     job: item,
+  //     //     jobId: item.id,
-    //   });
+  //     //     timeTicketId: item.ro_number || t("general.labels.na"),
-    // () => {navigation.navigate("TimeTicketClockOff");}
+  //     //     job: item,
-  };
+  //     //   });
+  //     // () => {navigation.navigate("TimeTicketClockOff");}
+  //   };
 
   return (
     <Card style={{ margin: 8 }}>
       <Card.Title
         title={`${
-          ticket.job.ro_number || t("general.labels.na")
+            props.ticket.job.ro_number || t("general.labels.na")
-        } ${OwnerNameDisplayFunction(ticket.job)}`}
+        } ${OwnerNameDisplayFunction(props.ticket.job)}`}
       />
       <Card.Content>
         <Text>
           Vehicle :
-          {`${ticket.job.v_model_yr || ""} ${ticket.job.v_make_desc || ""} ${
+          {`${props.ticket.job.v_model_yr || ""} ${props.ticket.job.v_make_desc || ""} ${
-            ticket.job.v_model_desc || ""
+            props.ticket.job.v_model_desc || ""
           }`}
         </Text>
         <Text>
-          Clocked In : <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+          Clocked In : <DateTimeFormatter>{props.ticket.clockon}</DateTimeFormatter>
         </Text>
         <Text>
           Cost Center :{" "}
-          {ticket.cost_center === "timetickets.labels.shift"
+          {props.ticket.cost_center === "timetickets.labels.shift"
-            ? t(ticket.cost_center)
+            ? t(props.ticket.cost_center)
-            : ticket.cost_center}
+            : props.ticket.cost_center}
         </Text>
       </Card.Content>
       <Card.Actions>
@@ -70,21 +90,25 @@ export function ClockedinListItem({ setTmTicketJobId, ticket }) {
                       completedCallback={refetch}
                     /> */}
         <Button
+          key={props.ticket.id}
           mode="outlined"
-          onPress={() => {
+          onPress={makeNave(props.ticket.id)}
-            logImEXEvent("imexmobile_setcamerajobid_row");
+        //     {
-            // setTmTicketJobId(ticket.id);
+        //     logImEXEvent("imexmobile_setcamerajobid_row");
-            // console.log("ticket.jobid is :",ticket.jobid );
+        //     // setTmTicketJobId(ticket.id);
-            // console.log("setTimeTicketJobId is :",setTimeTicketJobId );
+        //     // console.log("ticket.jobid is :",ticket.jobid );
-            // console.log("ham is :",setTimeTicketJobId );
+        //     // console.log("setTimeTicketJobId is :",setTimeTicketJobId );
-            // if (typeof ham === 'undefined') {
+        //     // console.log("ham is :",setTimeTicketJobId );
-            //     console.error("yo dog, setTimeTicketJobId is undefined!");
+        //     // if (typeof ham === 'undefined') {
-            //     return;
+        //     //     console.error("yo dog, setTimeTicketJobId is undefined!");
-            // }
+        //     //     return;
-
+        //     // }
-            // setTimeTicketJobId(ticket.jobid);
+        //     const { id, jobid } = e;
-            navigation.navigate("TimeTicketClockOff");
+        //     console.log("ticket.jobid is :", ticket.jobid);
-          }}
+        //     setTmTicketJobId(ticket.jobid);
+        //     // setTimeTicketJobId(ticket.jobid);
+        //     //navigation.navigate("TimeTicketClockOff");
+        //   }}
         >
           Clock Out
         </Button>
@@ -121,4 +145,4 @@ export function ClockedinListItem({ setTmTicketJobId, ticket }) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ClockedinListItem);
+export default connect(null, mapDispatchToProps)(ClockedinListItem);

components/time-ticket-lists/employee-clockedin-list.component.jsx

@@ -1,24 +1,32 @@
 import { connect } from "react-redux";
-import { selectCurrentEmployee, selectTechnician } from "../../redux/employee/employee.selectors";
+import {
+  selectCurrentEmployee,
+  selectTechnician,
+} from "../../redux/employee/employee.selectors";
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
-import { ActivityIndicator,Button, List, Modal, Portal, Searchbar } from "react-native-paper";
+import { ActivityIndicator } from "react-native-paper";
 import ErrorDisplay from "../error-display/error-display.component";
-import { View,Text,FlatList, RefreshControl, } from "react-native";
+import { View, Text, FlatList, RefreshControl } from "react-native";
 import { useQuery } from "@apollo/client";
 import { createStructuredSelector } from "reselect";
 import { useTranslation } from "react-i18next";
 import { ClockedinListItem } from "../time-ticket-items/clockedin-list-item.component";
+import { setTmTicketJobId } from "../../redux/app/app.actions";
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician,
   //currentEmployee: selectCurrentEmployee,
 });
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = (dispatch) => ({
+  setTmTicketJobId: (jobId) => dispatch(setTmTicketJobId(jobId)),
+});
 
 export function EmployeeClockedInList({ technician }) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-  const { loading, error, data, refetch } = useQuery(QUERY_ACTIVE_TIME_TICKETS, {
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ACTIVE_TIME_TICKETS,
+    {
       variables: {
         employeeId: technician?.id,
       },
@@ -30,9 +38,9 @@ export function EmployeeClockedInList({ technician }) {
   if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
   if (error) return <ErrorDisplay errorMessage={error.message} />;
   //if (error) return <AlertComponent message={error.message} type="error" />;
-console.log("QUERY_ACTIVE_TIME_TICKETS data",data)
+  console.log("QUERY_ACTIVE_TIME_TICKETS data", data);
-
+//   if (data) () => {setTmTicketJobId(data)}
-const onRefresh = async () => {
+  const onRefresh = async () => {
     return refetch();
   };
   return (
@@ -40,9 +48,13 @@ const onRefresh = async () => {
       {data.timetickets.length > 0 ? (
         <View>
           <Text>You are already clocked in to the following job(s):</Text>
-          <FlatList data={data.timetickets} 
+          <FlatList
-          refreshControl={<RefreshControl refreshing={loading} onRefresh={onRefresh} />}
+            data={data.timetickets}
-          renderItem={(object) => <ClockedinListItem ticket={object.item} />} />
+            refreshControl={
+              <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+            }
+            renderItem={(object) => <ClockedinListItem ticket={object.item} setTmTicketJobId={setTmTicketJobId}/>}
+          />
         </View>
       ) : null}
     </View>
@@ -105,4 +117,4 @@ const onRefresh = async () => {
   );
 }
 
-export default connect(mapStateToProps,null)(EmployeeClockedInList);
+export default connect(mapStateToProps, mapDispatchToProps)(EmployeeClockedInList);

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

@@ -16,6 +16,7 @@ import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { useMutation } from "@apollo/client";
 import { selectCurrentTmTicketJobId } from "../../redux/app/app.selectors";
 import ErrorDisplay from "../error-display/error-display.component";
+import { timeTicketClockOutStart } from "../../redux/timetickets/timetickets.actions";
 // import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors";
 
 //TODO add props needed for call
@@ -26,7 +27,9 @@ const mapStateToProps = createStructuredSelector({
   currentTmTicketJobId: selectCurrentTmTicketJobId,
 //   currentJobId: selectCurrentTimeTicketJobId
 });
-// const mapDispatchToProps = (dispatch) => ({});
+ const mapDispatchToProps = (dispatch) => ({
+    timeTicketClockOutStart
+ });
 
 export function TimeTicketClockOff({
   currentEmployee,

redux/timetickets/timetickets.actions.js

@@ -24,3 +24,29 @@ export const timeTicketCreateFailure = (error) => ({
   type: TimeTicketsActionTypes.TIME_TICKET_CREATE_FAILURE,
   payload: error,
 });
+
+export const timeTicketClockInStart = (timeTicket) => ({
+  type: TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_START,
+  payload: timeTicket,
+});
+export const timeTicketClockInSuccess = (insertTimeTickets) => ({
+  type: TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_SUCCESS,
+  payload: insertTimeTickets,
+});
+export const timeTicketClockInFailure = (error) => ({
+  type: TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_FAILURE,
+  payload: error,
+});
+
+export const timeTicketClockOutStart = (timeTicket) => ({
+  type: TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_START,
+  payload: timeTicket,
+});
+export const timeTicketClockOutSuccess = (insertTimeTickets) => ({
+  type: TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_SUCCESS,
+  payload: insertTimeTickets,
+});
+export const timeTicketClockOutFailure = (error) => ({
+  type: TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_FAILURE,
+  payload: error,
+});

redux/timetickets/timetickets.reducer.js

@@ -6,6 +6,10 @@ const INITIAL_STATE = {
   timeTicketJob: null,
   uploadTimeTicketInProgress: false,
   uploadTimeTicketError: null,
+  clockingIn: false,
+  clockingInError: null,
+  clockingOut: false,
+  clockingOutError: null,
 };
 
 const timeTicketsReducer = (state = INITIAL_STATE, action) => {
@@ -23,22 +27,41 @@ const timeTicketsReducer = (state = INITIAL_STATE, action) => {
         timeTicketJob: action.payload
       };
     case TimeTicketsActionTypes.TIME_TICKET_CREATE_START:
-      return {
+      return {...state,uploadTimeTicketInProgress: true};
-        ...state,
-        uploadTimeTicketInProgress: true
-      };
     case TimeTicketsActionTypes.TIME_TICKET_CREATE_SUCCESS:
-      return {
+      return {...state,
-        ...state, //TODO add logic here when successful
         uploadTimeTicketInProgress: false,
         uploadTimeTicketError: null,
       };
     case TimeTicketsActionTypes.TIME_TICKET_CREATE_FAILURE:
-      return {
+      return {...state,
-        ...state,
         uploadTimeTicketInProgress: false,
         uploadTimeTicketError: action.payload,
       };
+    case TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_START:
+      return {...state,clockingIn: true};
+    case TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_SUCCESS:
+      return {...state,
+        clockingIn: false,
+        clockingInError: null,
+      };
+    case TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_FAILURE:
+      return {...state,
+        clockingIn: false,
+        clockingInError: action.payload,
+      };
+    case TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_START:
+      return {...state,clockingOut: true};
+    case TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_SUCCESS:
+      return {...state,
+        clockingOut: false,
+        clockingOutError: null,
+      };
+    case TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_FAILURE:
+      return {...state,
+        clockingOut: false,
+        clockingOutError: action.payload,
+      };
     default:
       return state;
   }

redux/timetickets/timetickets.sagas.js

@@ -1,6 +1,10 @@
 import {
   timeTicketCreateFailure,
   timeTicketCreateSuccess,
+  timeTicketClockInSuccess,
+  timeTicketClockInFailure,
+  timeTicketClockOutSuccess,
+  timeTicketClockOutFailure
 } from "./timetickets.actions";
 import TimeTicketsActionTypes from "./timetickets.types";
 import { client } from "../../graphql/client";
@@ -67,6 +71,69 @@ export function* insertNewTimeTicket({ payload: { timeTicketInput } }) {
   }
 }
 
-export function* timeTicketsSagas() {
+export function* onClockOutStart() {
-  yield all([call(onCreateTimeTicketStart)]);
+  yield takeLatest(TimeTicketsActionTypes.TIME_TICKET_CLOCKOUT_START,clockOutStart);
+}
+export function* clockOutStart({ payload: { timeTicketInput } }) {
+  try {
+    logImEXEvent("redux_clockOutStart_attempt");
+    //console.loging
+     console.log("Saga, clockOutStart :", timeTicketInput);
+    // const timeTicket = yield select(selectCurrentTimeTicket);
+    // const response = yield call(axios.post, "/tech/login", {
+    //   shopid: bodyshop.id,
+    //   employeeid: employeeId,
+    //   pin: pin,
+    // });
+    // const { valid, data, error } = response.data;
+    // const result = yield client.mutate({
+    //   mutation: INSERT_NEW_TIME_TICKET,
+    //   variables: {
+    //     timeTicketInput: [
+    //       // {
+    //       //   bodyshopid: bodyshop.id,
+    //       //   employeeid: technician.id,
+    //       //   date: moment(theTime).format("YYYY-MM-DD"),
+    //       //   clockon: moment(theTime),
+    //       //   jobid: values.jobid,
+    //       //   cost_center: values.cost_center,
+    //       //   ciecacode:
+    //       //     bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
+    //       //       ? values.cost_center
+    //       //       : Object.keys(
+    //       //           bodyshop.md_responsibility_centers.defaults.costs
+    //       //         ).find((key) => {
+    //       //           return (
+    //       //             bodyshop.md_responsibility_centers.defaults.costs[key] ===
+    //       //             values.cost_center
+    //       //           );
+    //       //         }),
+    //       // },
+    //     ],
+    //   },
+    // });
+    // console.log(result);
+    // const { valid, data, error  } = result.data;
+    // if (valid) {
+    //   yield put(timeTicketCreateSuccess(data));
+    // } else {
+    //   yield put(timeTicketCreateFailure(error));
+    // }
+  } catch (error) {
+    yield put(timeTicketClockOutFailure(error));
+  }
+}
+export function* onClockInStart() {
+  yield takeLatest(TimeTicketsActionTypes.TIME_TICKET_CLOCKIN_START,clockInStart);
+}
+export function* clockInStart({ payload: { timeTicketInput } }) {
+  try {
+    logImEXEvent("redux_clockInStart_attempt");
+     console.log("Saga, clockInStart :", timeTicketInput);
+  } catch (error) {
+    yield put(timeTicketClockInFailure(error));
+  }
+}
+export function* timeTicketsSagas() {
+  yield all([call(onCreateTimeTicketStart),call(onClockOutStart),call(onClockInStart)]);
 }

redux/timetickets/timetickets.types.js

@@ -5,5 +5,11 @@ const TimeTicketsActionTypes = {
   TIME_TICKET_CREATE_START: "TIME_TICKET_CREATE_START",
   TIME_TICKET_CREATE_SUCCESS: "TIME_TICKET_CREATE_SUCCESS",
   TIME_TICKET_CREATE_FAILURE: "TIME_TICKET_CREATE_FAILURE",
+  TIME_TICKET_CLOCKIN_START: "TIME_TICKET_CLOCKIN_START",
+  TIME_TICKET_CLOCKIN_SUCCESS: "TIME_TICKET_CLOCKIN_SUCCESS",
+  TIME_TICKET_CLOCKIN_FAILURE: "TIME_TICKET_CLOCKIN_FAILURE",
+  TIME_TICKET_CLOCKOUT_START: "TIME_TICKET_CLOCKOUT_START",
+  TIME_TICKET_CLOCKOUT_SUCCESS: "TIME_TICKET_CLOCKOUT_SUCCESS",
+  TIME_TICKET_CLOCKOUT_FAILURE: "TIME_TICKET_CLOCKOUT_FAILURE",
 };
 export default TimeTicketsActionTypes;