added component for testing selecting job id

components/Selects/select-job-id.jsx

@@ -0,0 +1,188 @@
+import { useLazyQuery } from "@apollo/client";
+import React, { forwardRef, useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import _ from "lodash";
+
+import {
+  SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE,
+  SEARCH_JOBS_FOR_AUTOCOMPLETE,
+} from "../../graphql/jobs.queries";
+import { StyleSheet, Text, View } from "react-native";
+import { Dropdown } from "react-native-element-dropdown";
+import { connect } from "react-redux";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+
+///This Component is for testing select. This is not for prod. Justin
+
+export function JobIdSearchSelect(
+  convertedOnly = false,
+  notInvoiced = false,
+  notExported = true,
+  clm_no = false,
+  onValueSelected,
+  currentValue,
+  ...restProps
+) {
+  const { t } = useTranslation();
+  const [theOptions, setTheOptions] = useState([]);
+
+  const [selectorData, setSelectorData] = useState([]);
+  const [selectedvalue, setSelectedValue] = useState(null);
+  const [isFocus, setIsFocus] = useState(false);
+
+  const [callIdSearch, { loading: idLoading, error: idError, data: idData }] =
+    useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE);
+
+
+  const [callSearch, { loading, error, data }] = useLazyQuery(
+    SEARCH_JOBS_FOR_AUTOCOMPLETE,
+    {}
+  );
+  const executeSearch = (v) => {
+    console.log("executeSearchWithV:", v);
+    if (v && v !== "") callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+
+  const handleSearch = (value) => {
+    console.log("handleSearchWithValue:", value);
+    debouncedExecuteSearch({
+      variables: {
+        search: value,
+        ...(convertedOnly || notExported
+          ? {
+              ...(convertedOnly ? { isConverted: true } : {}),
+              ...(notExported ? { notExported: true } : {}),
+              ...(notInvoiced ? { notInvoiced: true } : {}),
+            }
+          : {}),
+      },
+    });
+  };
+
+  useEffect(() => {
+    console.log("useEfectDependentOn: restProps.value, callIdSearch", restProps);
+    if (restProps.value) {
+        console.log("restPropsValue:", restProps.value);
+      callIdSearch({ variables: { id: restProps.value } });
+    }
+  }, [restProps.value, callIdSearch]);
+
+  useEffect(() => {
+    console.log("useEfectDependentOn: [data, idData]");
+    
+    console.log("idDataValue:", (idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []));
+    console.log("dataValue:", (data && data.search_jobs ? data.search_jobs : []));
+    setTheOptions(
+      _.uniqBy(
+        [
+          ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
+          ...(data && data.search_jobs ? data.search_jobs : []),
+        ],
+        "id"
+      )
+    );
+  }, [data, idData]);
+
+  useEffect(() => {
+    console.log("useEfectDependentOn: [theOptions]");
+    var count = Object.keys(theOptions).length;
+    let selectDataArray = [];
+    for (let i = 0; i < count; i++) {
+     // let o = theOptions[i];
+      selectDataArray.push({
+        value: theOptions[i].id,
+        label:  theOptions[i].ro_number,
+        
+        // `${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
+        //   o.ro_number || t("general.labels.na")
+        // } | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
+        //   o.v_model_desc || ""
+        // }`,
+        
+      });
+    }
+    setSelectorData(selectDataArray);
+  }, [theOptions]);
+
+  
+  return (
+    <View style={styles.container}>
+      <Dropdown
+        style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
+        placeholderStyle={styles.placeholderStyle}
+        selectedTextStyle={styles.selectedTextStyle}
+        inputSearchStyle={styles.inputSearchStyle}
+        iconStyle={styles.iconStyle}
+        data={selectorData}
+        search
+        maxHeight={300}
+        labelField="label"
+        valueField="value"
+        placeholder={!isFocus ? "Job Id to Post Against" : "..."}
+        searchPlaceholder="Search..."
+        value={selectedvalue}//{selectedvalue}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={(item) => {
+            console.log("onChangefired!!!!");
+            console.log("itemSelected", item);
+            setSelectedValue(item.value);
+            // onValueSelected(item);
+          //console.log(item);
+        //   setSelectedValue(item.value);
+        // if (onValueSelected) onValueSelected(item.value);
+          setIsFocus(false);
+        }}
+        onChangeText={(search) => {
+            console.log("onChangeTextFired!!!!");
+          handleSearch(search);
+        }}
+      />
+      {/* {theOptions ? console.log(theOptions): null} */}
+    </View>
+  );
+}
+
+export default connect(null, null)(JobIdSearchSelect);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    justifyContent: "center",
+    alignContent: "center",
+  },
+  dropdown: {
+    height: 50,
+    borderColor: "gray",
+    borderWidth: 0.5,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+  },
+  icon: {
+    marginRight: 5,
+  },
+  label: {
+    position: "absolute",
+    backgroundColor: "white",
+    left: 22,
+    top: 8,
+    zIndex: 999,
+    paddingHorizontal: 8,
+    fontSize: 14,
+  },
+  placeholderStyle: {
+    fontSize: 16,
+  },
+  selectedTextStyle: {
+    fontSize: 16,
+  },
+  iconStyle: {
+    width: 20,
+    height: 20,
+  },
+  inputSearchStyle: {
+    height: 40,
+    fontSize: 16,
+  },
+});

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { View, Text } from "react-native";
 
 import { connect } from "react-redux";
@@ -22,6 +22,7 @@ import {
   selectCurrentTimeTicketJob,
   selectCurrentTimeTicketJobId,
 } from "../../redux/timetickets/timetickets.selectors";
+import { JobIdSearchSelect } from "../Selects/select-job-id";
 
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
@@ -49,7 +50,9 @@ export function ScreenTimeTicketBrowser({
   currentSelectedTimeTicketJobId,
 }) {
   //const employeeId = currentEmployee.technician.id;
-  const [currentCC, setCurrentCC] = useState(null);
+  const [currentSCC, setCurrentSCC] = useState(null);
+  const [currentSJob, setCurrentSJob] = useState(null);
+  const [currentSJobId, setCurrentSJobId] = useState(null);
 
   // const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
   //   variables: { id: currentEmployee.technician.id },
@@ -57,15 +60,24 @@ export function ScreenTimeTicketBrowser({
   // const signingErrorMsg = error ? (<ErrorDisplay errorMessage={error.message} />) : null;
   // const signingErrorMsg = signingError ? (<ErrorDisplay errorMessage={signingError} />) : null;
 
+  const wrapperSetCurrentSJobState = useCallback(val => {
+    setCurrentSJob(val);
+  }, [setCurrentSJob]);
+
+
   const getRates = (currentEmployee) => {
     employeeGetRatesStart(currentEmployee.technician.id);
   };
   const createTheTimeTicketOBJ = (
     currentEmployee,
     currentBodyshop,
-    currentCC
+    currentSCC,
+    currentSJob,
+    currentSJobId
   ) => {
-    console.log("currentCC", currentCC.value);
+    console.log("currentSCC", currentSCC.value);
+    console.log("currentSJob", currentSJob.value);
+    console.log("currentSJobId", currentSJobId.value);
     console.log("bodyshopid", currentBodyshop.id);
     console.log("employeeid", currentEmployee.technician.id);
     console.log(currentBodyshop);
@@ -99,21 +111,38 @@ export function ScreenTimeTicketBrowser({
         loading={loaderGettingRates}
         //onPress={() => getRates(currentEmployee)}
         onPress={() =>
-          createTheTimeTicketOBJ(currentEmployee, currentBodyshop, currentCC)
+          createTheTimeTicketOBJ(currentEmployee, currentBodyshop, currentSCC)
         }
       >
         <Text>text here</Text>
       </Button>
       {/* {signingErrorMsg} */}
+      <JobIdSearchSelect
+        currentValue={currentSJobId}
+        //onValueSelected={setCurrentSJobId}
+        convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
+        notExported={!currentBodyshop.tt_allow_post_to_invoiced}
+      />
+
       <JobSearchSelect
+        currentValue={currentSJob}
+        onValueSelected={setCurrentSJob}
         convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
         notExported={!currentBodyshop.tt_allow_post_to_invoiced}
       />
       <CostCenterSelect
-        currentValue={currentCC}
+        currentValue={currentSCC}
         currentRatesNCostCenters={currentRatesNCostCenters}
-        onValueSelected={setCurrentCC}
+        onValueSelected={setCurrentSCC}
       />
+      <Button
+        mode="outlined"
+        //loading={loaderClockIn}
+        //onPress={() => clockIn()}
+        
+      >
+        <Text>Clock In</Text>
+      </Button>
     </View>
   );
 }

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

@@ -13,6 +13,7 @@ import {
   selectRates,
 } from "../../redux/employee/employee.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useCallback } from "react";
 
 //TODO add props needed for call
 const mapStateToProps = createStructuredSelector({
@@ -32,7 +33,12 @@ export function TimeTicketCreate({
   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
   const [date2, setDate2] = useState(new Date());
 
-  const [currentCC, setCurrentCC] = useState(null);
+  const [currentSCC, setCurrentSCC] = useState(null);
+  const [currentSJob, setCurrentSJob] = useState(null);
+
+  const wrapperSetCurrentSJobState = useCallback(val => {
+    setCurrentSJob(val);
+  }, [setCurrentSJob]);
 
   const showDatePicker = () => {
     setDatePickerVisibility(true);
@@ -93,7 +99,7 @@ export function TimeTicketCreate({
                 label={"Employee"}
               />
 
-              <CostCenterSelect currentRatesNCostCenters={currentRatesNCostCenters} currentValue={currentCC} onValueSelected={setCurrentCC}/>
+              <CostCenterSelect currentRatesNCostCenters={currentRatesNCostCenters} currentValue={currentSCC} onValueSelected={setCurrentSCC}/>
               <TextInput
                 style={localStyles.inputStyle}
                 mode="outlined"