added JobSearchAndSelectModal to timeticketbrowser

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import moment from "moment";
 import {
   View,
@@ -31,7 +31,6 @@ import {
 } 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 {
@@ -43,14 +42,13 @@ import { useMutation, useQuery } from "@apollo/client";
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
 
 import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.component";
-import { logImEXEvent } from "../../firebase/firebase.analytics";
-import StyleRepeater from "../style-repeater/style-repeater";
 import { useTranslation } from "react-i18next";
 import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
 import SignOutButton from "../Buttons/employee-sign-out-button.component";
 import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";
 
 import KeyboardAvoidingComponent from "../keyboards/KeyboardAvoidingComponent";
+import JobSearchAndSelectModal from "../Modals/JobSearchAndSelectModal";
 
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
@@ -81,8 +79,6 @@ export function ScreenTimeTicketBrowser({
 }) {
   const { t } = useTranslation();
   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);
@@ -90,6 +86,8 @@ export function ScreenTimeTicketBrowser({
     refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
   });
 
+  const [curSelClockIntoJob, setCurSelClockIntoJob] = useState(null);
+
   const handleFinish = async (values) => {
     // console.log("handleFinish called in ScreenTimeTicketBrowser");
     setLoadingClockIn(true);
@@ -97,7 +95,7 @@ export function ScreenTimeTicketBrowser({
 
     const theTime = (await axios.post("/utils/time")).data;
 
-    if (!!currentSCC?.value && !!currentSJobId?.value) {
+    if (!!currentSCC?.value && !!curSelClockIntoJob?.id) {
       setError(null);
       // console.log("have all values");
     } else {
@@ -115,7 +113,7 @@ export function ScreenTimeTicketBrowser({
             employeeid: currentEmployee?.technician?.id,
             date: moment(theTime).format("YYYY-MM-DD"),
             clockon: moment(theTime),
-            jobid: currentSJobId?.value,
+            jobid: curSelClockIntoJob?.id,
             cost_center: currentSCC?.value,
             ciecacode:
               currentBodyshop?.cdk_dealerid || currentBodyshop?.pbs_serialnumber
@@ -142,7 +140,7 @@ export function ScreenTimeTicketBrowser({
       setError(JSON.stringify(result.errors));
     } else {
       // console.log("insertTimeTicket, result. :", result.data);
-      setCurrentSJobId(null);
+      setCurSelClockIntoJob(null);
       setCurrentSCC(null);
     }
   };
@@ -223,23 +221,40 @@ export function ScreenTimeTicketBrowser({
             <Card style={localStyles.localCardStyle}>
               <Card.Title
                 title={t("timeticketbrowser.labels.clockintojob")}
-                //     right={(props) =>
-                //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
-                //     <Button mode="outlined"
-                // compact={true} loading={loading} onPress={handleFinish}
-                // style={{margin:4}}
-                // >
+                // right={(props) => (
+                //   <View style={{ flexDirection: "row" }}>
+                //     <Button
+                //       mode="outlined"
+                //       compact={true}
+                //       onPress={() => {
+                //         navigation.navigate("CreateTimeTicket");
+                //       }}
+                //       icon="plus"
+                //       style={{ margin: 4 }}
+                //     >
+                //       <Text >
+                //         {t("timeticketbrowser.actions.ticket")}
+                //       </Text>
+                //     </Button>
+                //     <Button
+                //       mode="outlined"
+                //       compact={true}
+                //       loading={loadingClockIn}
+                //       onPress={handleFinish}
+                //       style={{ margin: 4 }}
+                //     >
                 //       <Text>Clock In</Text>
-                //     </Button></View>
-                //     }
+                //     </Button>
+                //   </View>
+                // )}
               />
               <Card.Content>
-                <JobIdSearchSelect
-                  currentValue={currentSJobId}
-                  onJobSelected={setCurrentSJobId}
-                  convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
+                <JobSearchAndSelectModal
+                  currentValue={curSelClockIntoJob}
+                  onSetCurrentValue={setCurSelClockIntoJob}
                   notExported={!currentBodyshop.tt_allow_post_to_invoiced}
                   notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
+                  convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
                 />
                 <CostCenterSelect
                   currentValue={currentSCC}
@@ -267,7 +282,12 @@ export function ScreenTimeTicketBrowser({
             </Card>
           }
           refreshControl={
-            <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+          ListEmptyComponent={
+            <View style={styles.containerNoData}>
+              <Text>No Data</Text>
+            </View>
           }
         />
       </KeyboardAvoidingComponent>
@@ -283,7 +303,7 @@ const MyItem = ({ itemState, style }) => {
       <Card.Content>
         {!!items ? (
           items.map((item) => <ClockedinListItem key={item.id} ticket={item} />)
-        ) : !!itemState.content ? (
+        ) : !!itemState?.content ? (
           itemState.content
         ) : (
           <Text>No Data</Text>
@@ -301,6 +321,12 @@ const localStyles = StyleSheet.create({
   localCardStyle: {
     margin: 4,
   },
+  containerNoData: {
+    flex: 1,
+    padding: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
 
 export default connect(