added select job id selector

components/Selects/select-cost-center.jsx

@@ -5,7 +5,6 @@ import { Dropdown } from "react-native-element-dropdown";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 
-//TODO Justin currently inprogress 
 import {
     selectCurrentTimeTicketJob,
     selectCurrentTimeTicketJobId,
@@ -17,11 +16,6 @@ const data = [
   { label: "Item 1", value: "1" },
   { label: "Item 2", value: "3" },
   { label: "Item 3", value: "3" },
-  { label: "Item 4", value: "4" },
-  { label: "Item 5", value: "5" },
-  { label: "Item 6", value: "6" },
-  { label: "Item 7", value: "7" },
-  { label: "Item 8", value: "8" },
 ];
 
 // const mapStateToProps = createStructuredSelector({
@@ -78,7 +72,6 @@ export default connect(null, null)(SelectCostCenter);
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "white",
     padding: 16,
     justifyContent: "center",
     alignContent: "center",

components/Selects/select-job-name.jsx

@@ -0,0 +1,165 @@
+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";
+
+export function JobSearchSelect(
+  convertedOnly = false,
+  notInvoiced = false,
+  notExported = true,
+  clm_no = false,
+  ...restProps
+) {
+  const { t } = useTranslation();
+  const [selectorData, setSelectorData] = useState([]);
+  const [selectedvalue, setSelectedValue] = useState(null);
+  const [isFocus, setIsFocus] = useState(false);
+
+  const [theOptions, setTheOptions] = useState([]);
+
+  const [callSearch, { loading, error, data }] = useLazyQuery(
+    SEARCH_JOBS_FOR_AUTOCOMPLETE,
+    {}
+  );
+  const [callIdSearch, { loading: idLoading, error: idError, data: idData }] =
+    useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE);
+
+  const executeSearch = (v) => {
+    if (v && v !== "") callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
+
+  const handleSearch = (value) => {
+    debouncedExecuteSearch({
+      variables: {
+        search: value,
+        ...(convertedOnly || notExported
+          ? {
+              ...(convertedOnly ? { isConverted: true } : {}),
+              ...(notExported ? { notExported: true } : {}),
+              ...(notInvoiced ? { notInvoiced: true } : {}),
+            }
+          : {}),
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (restProps.value) {
+      callIdSearch({ variables: { id: restProps.value } });
+    }
+  }, [restProps.value, callIdSearch]);
+
+  useEffect(() => {
+    setTheOptions(
+      _.uniqBy(
+        [
+          ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
+          ...(data && data.search_jobs ? data.search_jobs : []),
+        ],
+        "id"
+      )
+    );
+  }, [data, idData]);
+
+  useEffect(() => {
+    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 to Post Against" : "..."}
+        searchPlaceholder="Search..."
+        value={selectedvalue}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={(item) => {
+          console.log(item);
+          setSelectedValue(item.value);
+          setIsFocus(false);
+        }}
+        onChangeText={(search) => {
+          handleSearch(search);
+        }}
+      />
+      {/* {theOptions ? console.log(theOptions): null} */}
+    </View>
+  );
+}
+
+export default connect(null, null)(JobSearchSelect);
+
+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/owner-name-display/owner-name-display.component.jsx

@@ -0,0 +1,47 @@
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { store } from "../../redux/store";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(OwnerNameDisplay);
+
+export function OwnerNameDisplay({ bodyshop, ownerObject }) {
+  const emptyTest =
+    ownerObject?.ownr_fn + ownerObject?.ownr_ln + ownerObject?.ownr_co_nm;
+
+  if (!emptyTest || emptyTest === "null" || emptyTest.trim() === "")
+    return "N/A";
+
+  if (bodyshop.last_name_first)
+    return `${ownerObject?.ownr_ln || ""}, ${ownerObject?.ownr_fn || ""} ${
+      ownerObject?.ownr_co_nm || ""
+    }`.trim();
+
+  return `${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_ln || ""} ${
+    ownerObject.ownr_co_nm || ""
+  }`.trim();
+}
+
+export function OwnerNameDisplayFunction(ownerObject, forceFirstLast = false) {
+  const emptyTest =
+    ownerObject?.ownr_fn + ownerObject?.ownr_ln + ownerObject?.ownr_co_nm;
+
+  if (!emptyTest || emptyTest === "null" || emptyTest.trim() === "")
+    return "N/A";
+
+  const rdxStore = store.getState();
+
+  if (rdxStore.user.bodyshop.last_name_first && !forceFirstLast)
+    return `${ownerObject?.ownr_ln || ""}, ${ownerObject?.ownr_fn || ""} ${
+      ownerObject?.ownr_co_nm || ""
+    }`.trim();
+
+  return `${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_ln || ""} ${
+    ownerObject?.ownr_co_nm || ""
+  }`.trim();
+}

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

@@ -14,17 +14,21 @@ import {
   selectRates,
 } from "../../redux/employee/employee.selectors";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { JobSearchSelect } from "../Selects/select-job-name";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 //TODO add props needed for call
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   currentRatesNCostCenters: selectRates,
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({});
 
 export function TimeTicketCreate({
   currentEmployee,
   currentRatesNCostCenters,
+  bodyshop
 }) {
   const { t } = useTranslation();
 
@@ -77,20 +81,13 @@ export function TimeTicketCreate({
           {({ handleChange, handleBlur, handleSubmit, values }) => (
             <View style={localStyles.topTimeTicketContainer}>
               {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
-              <TextInput
+              <JobSearchSelect convertedOnly={!bodyshop.tt_allow_post_to_invoiced}
-                style={localStyles.input}
+                notExported={!bodyshop.tt_allow_post_to_invoiced} />
-                onChangeText={handleChange("jobid")}
-                mode="flat"
-                onBlur={handleBlur("jobid")}
-                value={values.jobid}
-                label={"Job to Post Against"}
-              />
 
               {/* Below will be replaced with a Date Picker*/}
               {/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */}
-              <Button title="TicketDatePickerButton" onPress={showDatePicker}>
+              <Button mode="outlined" title="TicketDatePickerButton" onPress={showDatePicker} style={localStyles.dateButton}>
-                {" "}
+                <Text  style={localStyles.textForButton}>Ticket Date: {date2.toLocaleDateString()}</Text>
-                Ticket Date: {date2.toLocaleDateString()}{" "}
               </Button>
               <DateTimePickerModal
                 isVisible={isDatePickerVisible}
@@ -101,8 +98,9 @@ export function TimeTicketCreate({
               />
               {/* Below will set to auto fill with current employee */}
               <TextInput
-                style={localStyles.input}
+                style={localStyles.inputStyle}
-                mode="flat"
+                mode="outlined"
+                disabled={true}
                 onChangeText={handleChange("employee")}
                 onBlur={handleBlur("employee")}
                 value={values.employee}
@@ -110,26 +108,18 @@ export function TimeTicketCreate({
               />
 
               <SelectCostCenter selectorData={costCenters} />
-              {/* Below will be replaced with SelectCostCenter */}
+           
               <TextInput
-                style={localStyles.input}
+                style={localStyles.inputStyle}
-                mode="flat"
+                mode="outlined"
-                onChangeText={handleChange("costcenter")}
-                onBlur={handleBlur("costcenter")}
-                value={values.costcenter}
-                label={"Cost Center"}
-              />
-              <TextInput
-                style={localStyles.input}
-                mode="flat"
                 onChangeText={handleChange("productivehours")}
                 onBlur={handleBlur("productivehours")}
                 value={values.productivehours}
                 label={"Productive Hours"}
               />
               <TextInput
-                style={localStyles.input}
+                style={localStyles.inputStyle}
-                mode="flat"
+                mode="outlined"
                 onChangeText={handleChange("actualhours")}
                 onBlur={handleBlur("actualhours")}
                 value={values.actualhours}
@@ -163,4 +153,23 @@ const localStyles = StyleSheet.create({
   topTimeTicketContainer: {},
   bottomTimeTicketContainer: {},
   input: {},
+  dateButton: {
+    margin: 16,
+    height: 40,
+    justifyContent: "center",
+    alignContent: "center",
+    borderColor:"blue",
+    borderWidth:0.8,
+    flex: 1,
+  },
+  textForButton: {
+    flex: 1,
+    justifyContent: "center",
+    alignContent: "center",
+  },
+  inputStyle: {
+    margin: 16,
+    height: 48,
+    fontSize: 16,
+  },
 });