diff --git a/components/Modals/JobSearchAndSelectModal.jsx b/components/Modals/JobSearchAndSelectModal.jsx
index 92989a7..aebedf6 100644
--- a/components/Modals/JobSearchAndSelectModal.jsx
+++ b/components/Modals/JobSearchAndSelectModal.jsx
@@ -5,14 +5,29 @@ import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, Text, View } from "react-native";
import { Button, List, Modal, Portal, Searchbar } from "react-native-paper";
import { connect } from "react-redux";
-// import { createStructuredSelector } from "reselect";
import { SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component";
-// import LoadingDisplay from "../loading-display/loading-display.component";
import _ from "lodash";
import { useCallback } from "react";
+import { useRef } from "react";
+import { useEffect } from "react";
+
+
+const useIsMounted = () => {
+ const isMounted = useRef(false);
+ useEffect(() => {
+ isMounted.current = true;
+ return () => {
+ isMounted.current = false;
+ };
+ }, []);
+
+ return isMounted.current;
+};
export function JobSearchAndSelectModal(props) {
+
+ const { t } = useTranslation();
const jobSrchNotExported =
props?.notExported !== undefined ? props.notExported : true;
const jobSrchNotInvoiced =
@@ -30,98 +45,18 @@ export function JobSearchAndSelectModal(props) {
: (e) => {
console.info("onSetCurrentValue was called", e);
};
- // const jobSrchCurrentValueId =
- // props?.currentValueId !== undefined ? props.currentValueId : "temp";
- // const jobSrchOnSetCurrentValueId =
- // props?.onSetCurrentValueId !== undefined
- // ? props.onSetCurrentValueId
- // : () => {
- // console.info("onSetCurrentValueId was called");
- // };
- console.log(" ");
- console.log("*****JobSearchAndSelectModal*****");
- // console.log("props:", props);//works
- // console.log("notExported:", jobSrchNotExported);//works
- // console.log("notInvoiced:", jobSrchNotInvoiced);//works
- // console.log("convertedOnly:", jobSrchConvertedOnly);//works
- // console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"}
- // console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue);
- // console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp will be currentValue
- // console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue
-
- const { t } = useTranslation();
const [visible, setVisible] = React.useState(false);
const [searchText, setSearchText] = React.useState("");
- // const [error, setError] = React.useState(null);
- // const [data, setData] = React.useState(null);
- // const [loading, setLoading] = React.useState(null);
-
- //TODO:Replace QUERY_ALL_ACTIVE_JOBS with SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE and update variables, statuses: false || ["Open", "Open*"],
- // with search: value,
- // ...(convertedOnly || notExported
- // ? {
- // ...(convertedOnly ? { isConverted: true } : {}),
- // ...(notExported ? { notExported: true } : {}),
- // ...(notInvoiced ? { notInvoiced: true } : {}),
- // }
- // : {}),
-
- //orig works 7/20
- // const { loading, error, data, refetch } = useQuery(
- // SEARCH_JOBS_FOR_AUTOCOMPLETE,
- // {
- // fetchPolicy: "cache-and-network",
- // variables: {
- // search: searchText,
- // ...(jobSrchConvertedOnly || jobSrchNotExported
- // ? {
- // ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
- // ...(jobSrchNotExported ? { notExported: true } : {}),
- // ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
- // }
- // : {}),
- // },
- // }
- // );
- //temp placeholder commented code
- // const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm));
- //2nd try with uselazyquery
- const [searchQuery, { loading, error, data, refetch }] = useLazyQuery(
- SEARCH_JOBS_FOR_AUTOCOMPLETE,
- {
- fetchPolicy: "cache-and-network",
- // variables: {
- // search: searchText,
- // ...(jobSrchConvertedOnly || jobSrchNotExported
- // ? {
- // ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
- // ...(jobSrchNotExported ? { notExported: true } : {}),
- // ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
- // }
- // : {}),
- // },
- }
- );
-
- if (error) return ;
-
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
+
+ const [searchQuery, { loading, error, data, refetch }] = useLazyQuery(
+ SEARCH_JOBS_FOR_AUTOCOMPLETE,{fetchPolicy: "cache-and-network",}
+ );
+ if (error) return ;
const onRefresh = async () => {
- // searchDebouncer({
- // variables: {
- // search: searchText,
- // ...(jobSrchConvertedOnly || jobSrchNotExported
- // ? {
- // ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
- // ...(jobSrchNotExported ? { notExported: true } : {}),
- // ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
- // }
- // : {}),
- // },
- // });
refetch({
notInvoiced: jobSrchNotInvoiced,
notExported: jobSrchNotExported,
@@ -129,18 +64,10 @@ export function JobSearchAndSelectModal(props) {
search: searchText,
});
};
-
- const search = (v) => {
- console.log("execute search with :", v);
- if (v && v !== "") searchQuery(v);
- };
- const searchDebouncer = useCallback(
- _.debounce(search, 1000),
- []
- );
-
+ const search = (v) => {if (v && v !== "") searchQuery(v);};
+ const searchDebouncer = useCallback(_.debounce(search, 1000),[]);
const onChangeSearch = (query) => {
- setSearchText(query);
+ setSearchText(query);
searchDebouncer({
variables: {
search: query,
@@ -154,30 +81,22 @@ export function JobSearchAndSelectModal(props) {
},
});
};
+ const inputSearch = useRef(null);
+ const isMounted = useIsMounted();
+ const setFocus = useCallback(() => {
+ console.log("setFocus called",inputSearch);
+ if (inputSearch.current) {
+ inputSearch.current.focus();
+ }
+ }, []);
- const jobs = data
- ? searchText === ""
- ? data.search_jobs
- : data.search_jobs.filter(
- (j) =>
- (j.ro_number || "")
- .toString()
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.ownr_fn || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.ownr_ln || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.v_model_desc || "")
- .toLowerCase()
- .includes(searchText.toLowerCase()) ||
- (j.v_make_desc || "")
- .toLowerCase()
- .includes(searchText.toLowerCase())
- )
- : [];
+ useEffect(() => {
+ setTimeout(() => {
+ if (visible) {
+ setFocus();
+ }
+ }, 300);
+ }, [visible, isMounted]);
return (
<>
@@ -208,6 +127,8 @@ export function JobSearchAndSelectModal(props) {
style={{ flex: 1 }}
onChangeText={onChangeSearch}
value={searchText}
+ ref={inputSearch}
+ placeholder={t("selectjobid.labels.searchplaceholder")}
/>
{
jobSrchOnSetCurrentValue(object.item);
- // jobSrchOnSetCurrentValueId(object.item.id);
hideModal();
setSearchText("");
}}
@@ -295,7 +215,7 @@ export function JobSearchAndSelectModal(props) {
} - ${jobSrchCurrentValue.v_model_yr || ""} ${
jobSrchCurrentValue.v_make_desc || ""
} ${jobSrchCurrentValue.v_model_desc || ""}`
- : t("mediabrowser.labels.selectjob")}
+ : t("selectjobid.labels.placeholder")}
>
);
diff --git a/translations/en-US/common.json b/translations/en-US/common.json
index 1ca773b..9e6f473 100644
--- a/translations/en-US/common.json
+++ b/translations/en-US/common.json
@@ -369,7 +369,7 @@
"missingvalues": "Please make sure all fields have a value."
},
"titles": {
- "createtimeticket": "Create a Time Ticket"
+ "createtimeticket": "New Time Ticket"
}
},
"joblines": {