admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ModalForJobBeforeCleanup

Browse Source
This commit is contained in:
jfrye122
2023-07-20 12:28:05 -04:00
parent 9675147845
commit eb75909106
1 changed files with 85 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
components/Modals/JobSearchAndSelectModal.jsx
View File

@@ -6,13 +6,11 @@ import { FlatList, RefreshControl, Text, View } from "react-native";
import { Button, List, Modal, Portal, Searchbar } from "react-native-paper"; import { Button, List, Modal, Portal, Searchbar } from "react-native-paper";
import { connect } from "react-redux"; import { connect } from "react-redux";
// import { createStructuredSelector } from "reselect"; // import { createStructuredSelector } from "reselect";
import { import { SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
SEARCH_JOBS_FOR_AUTOCOMPLETE,
} from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
// import LoadingDisplay from "../loading-display/loading-display.component"; // import LoadingDisplay from "../loading-display/loading-display.component";
import _ from 'lodash'; import _ from "lodash";
import { useCallback } from "react";
export function JobSearchAndSelectModal(props) { export function JobSearchAndSelectModal(props) {
const jobSrchNotExported = const jobSrchNotExported =
@@ -25,36 +23,40 @@ export function JobSearchAndSelectModal(props) {
const jobSrchCurrentValue = const jobSrchCurrentValue =
props?.currentValue !== undefined props?.currentValue !== undefined
? props.currentValue ? props.currentValue
: { id: "temp", ro_number: "Temporary Storage" }; : { id: "temp", ro_number: "No Selection" };
const jobSrchOnSetCurrentValue = const jobSrchOnSetCurrentValue =
props?.onSetCurrentValue !== undefined props?.onSetCurrentValue !== undefined
? props.onSetCurrentValue ? props.onSetCurrentValue
: (e) => { : (e) => {
console.info("onSetCurrentValue was called", e); console.info("onSetCurrentValue was called", e);
}; };
const jobSrchCurrentValueId = // const jobSrchCurrentValueId =
props?.currentValueId !== undefined ? props.currentValueId : "temp"; // props?.currentValueId !== undefined ? props.currentValueId : "temp";
const jobSrchOnSetCurrentValueId = // const jobSrchOnSetCurrentValueId =
props?.onSetCurrentValueId !== undefined // props?.onSetCurrentValueId !== undefined
? props.onSetCurrentValueId // ? props.onSetCurrentValueId
: () => { // : () => {
console.info("onSetCurrentValueId was called"); // console.info("onSetCurrentValueId was called");
}; // };
console.log(" "); console.log(" ");
console.log("*****JobSearchAndSelectModal*****"); console.log("*****JobSearchAndSelectModal*****");
// console.log("props:", props);//works // console.log("props:", props);//works
// console.log("notExported:", jobSrchNotExported);//works // console.log("notExported:", jobSrchNotExported);//works
// console.log("notInvoiced:", jobSrchNotInvoiced);//works // console.log("notInvoiced:", jobSrchNotInvoiced);//works
// console.log("convertedOnly:", jobSrchConvertedOnly);//works // console.log("convertedOnly:", jobSrchConvertedOnly);//works
// console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"} // console.log("jobSrchCurrentValue:", jobSrchCurrentValue); //{"id": "temp", "ro_number": "Temporary Storage"}
// console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue); // console.log("jobSrchOnSetCurrentValue:", jobSrchOnSetCurrentValue);
// console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp will be currentValue // console.log("jobSrchCurrentValueId:", jobSrchCurrentValueId); //temp will be currentValue
// console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue // console.log("jobSrchOnSetCurrentValueId:", jobSrchOnSetCurrentValueId); // will be onSetCurrentValue
const { t } = useTranslation(); const { t } = useTranslation();
const [visible, setVisible] = React.useState(false); const [visible, setVisible] = React.useState(false);
const [searchText, setSearchText] = React.useState(null); 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*"], //TODO:Replace QUERY_ALL_ACTIVE_JOBS with SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE and update variables, statuses: false || ["Open", "Open*"],
// with search: value, // with search: value,
@@ -66,6 +68,7 @@ export function JobSearchAndSelectModal(props) {
// } // }
// : {}), // : {}),
//orig works 7/20
// const { loading, error, data, refetch } = useQuery( // const { loading, error, data, refetch } = useQuery(
// SEARCH_JOBS_FOR_AUTOCOMPLETE, // SEARCH_JOBS_FOR_AUTOCOMPLETE,
// { // {
@@ -82,11 +85,13 @@ export function JobSearchAndSelectModal(props) {
// }, // },
// } // }
// ); // );
//temp placeholder commented code
// const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm)); // const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm));
const [searchQuery, { loading, error, data }] = useLazyQuery( //2nd try with uselazyquery
const [searchQuery, { loading, error, data, refetch }] = useLazyQuery(
SEARCH_JOBS_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE,
{ {
// fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
// variables: { // variables: {
// search: searchText, // search: searchText,
// ...(jobSrchConvertedOnly || jobSrchNotExported // ...(jobSrchConvertedOnly || jobSrchNotExported
@@ -99,27 +104,45 @@ export function JobSearchAndSelectModal(props) {
// }, // },
} }
); );
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
const showModal = () => setVisible(true); const showModal = () => setVisible(true);
const hideModal = () => setVisible(false); const hideModal = () => setVisible(false);
const onRefresh = async () => { const onRefresh = async () => {
// refetch({ // searchDebouncer({
// notInvoiced: jobSrchNotInvoiced, // variables: {
// notExported: jobSrchNotExported, // search: searchText,
// isConverted: jobSrchConvertedOnly, // ...(jobSrchConvertedOnly || jobSrchNotExported
// search: searchText, // ? {
// ...(jobSrchConvertedOnly ? { isConverted: true } : {}),
// ...(jobSrchNotExported ? { notExported: true } : {}),
// ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
// }
// : {}),
// },
// }); // });
refetch({
notInvoiced: jobSrchNotInvoiced,
notExported: jobSrchNotExported,
isConverted: jobSrchConvertedOnly,
search: searchText,
});
}; };
const executeSearch = (v) => {
console.log("executeSearchWithV:", v); const search = (v) => {
console.log("execute search with :", v);
if (v && v !== "") searchQuery(v); if (v && v !== "") searchQuery(v);
}; };
const debouncedExecuteSearch = _.debounce(executeSearch, 1000); const searchDebouncer = useCallback(
_.debounce(search, 1000),
[]
);
const onChangeSearch = (query) => { const onChangeSearch = (query) => {
setSearchText(query); setSearchText(query);
debouncedExecuteSearch({variables: { searchDebouncer({
variables: {
search: query, search: query,
...(jobSrchConvertedOnly || jobSrchNotExported ...(jobSrchConvertedOnly || jobSrchNotExported
? { ? {
@@ -128,17 +151,10 @@ export function JobSearchAndSelectModal(props) {
...(jobSrchNotInvoiced ? { notInvoiced: true } : {}), ...(jobSrchNotInvoiced ? { notInvoiced: true } : {}),
} }
: {}), : {}),
}}); },
// debouncedSearchTerm(query); });
};
};
// const debouncedSearchTerm = debounce(searchText => {
// // Fetch search results using useQuery
// searchQuery.refetch();
// }, 1000);
//TODO:Replace this with returns of the other call jobs:search_jobs, This should be done
const jobs = data const jobs = data
? searchText === "" ? searchText === ""
? data.search_jobs ? data.search_jobs
@@ -147,7 +163,7 @@ export function JobSearchAndSelectModal(props) {
(j.ro_number || "") (j.ro_number || "")
.toString() .toString()
.toLowerCase() .toLowerCase()
.includes(searchText.toLowerCase()) || .includes(searchText.toLowerCase()) ||
(j.ownr_fn || "") (j.ownr_fn || "")
.toLowerCase() .toLowerCase()
.includes(searchText.toLowerCase()) || .includes(searchText.toLowerCase()) ||
@@ -162,11 +178,7 @@ export function JobSearchAndSelectModal(props) {
.includes(searchText.toLowerCase()) .includes(searchText.toLowerCase())
) )
: []; : [];
//TODO:Replace the Button with returns of the other call, This should be done
//Side Note removed ${jobSrchCurrentValue.ownr_co_nm || ""} from button display when jobSrchCurrentValueId has a value
//Side Note removed ${object.item.ownr_co_nm || ""} from title of <List.Item in flatlist
//side note removed following from <FlatList Data, : { id: "temp", ro_number: "No Selection" },
return ( return (
<> <>
<Portal> <Portal>
@@ -208,12 +220,12 @@ export function JobSearchAndSelectModal(props) {
<List.Item <List.Item
onPress={() => { onPress={() => {
jobSrchOnSetCurrentValue(object.item); jobSrchOnSetCurrentValue(object.item);
jobSrchOnSetCurrentValueId(object.item.id); // jobSrchOnSetCurrentValueId(object.item.id);
hideModal(); hideModal();
setSearchText(""); setSearchText("");
}} }}
left={() => { left={() => {
if (object.item.id !== jobSrchCurrentValueId) return null; if (object.item.id !== jobSrchCurrentValue?.id) return null;
return ( return (
<Ionicons <Ionicons
name="ios-checkmark-circle" name="ios-checkmark-circle"
@@ -224,7 +236,7 @@ export function JobSearchAndSelectModal(props) {
); );
}} }}
titleStyle={{ titleStyle={{
...(object.item.id === jobSrchCurrentValueId ...(object.item.id === jobSrchCurrentValue?.id
? { color: "dodgerblue" } ? { color: "dodgerblue" }
: {}), : {}),
}} }}
@@ -235,7 +247,9 @@ export function JobSearchAndSelectModal(props) {
}${ }${
object.item.v_make_desc ? `- ${object.item.v_make_desc}` : "" object.item.v_make_desc ? `- ${object.item.v_make_desc}` : ""
}${ }${
object.item.v_model_desc ? `- ${object.item.v_model_desc}` : "" object.item.v_model_desc
? `- ${object.item.v_model_desc}`
: ""
}`} }`}
key={object.item.id} key={object.item.id}
/> />
@@ -255,16 +269,22 @@ export function JobSearchAndSelectModal(props) {
/> />
</Modal> </Modal>
</Portal> </Portal>
<Button mode="outlined" style={{ margin: 8, <Button
height: 50, mode="outlined"
borderColor: "gray", style={{
borderWidth: 0.5, margin: 8,
borderRadius: 4, height: 50,
marginVertical: 4, borderColor: "gray",
marginHorizontal: 16, borderWidth: 0.5,
justifyContent: "center"}} onPress={showModal}> borderRadius: 4,
{jobSrchCurrentValueId marginVertical: 4,
? jobSrchCurrentValueId === "temp" marginHorizontal: 16,
justifyContent: "center",
}}
onPress={showModal}
>
{jobSrchCurrentValue?.id
? jobSrchCurrentValue?.id === "temp"
? t("mediabrowser.labels.temporarystorage") ? t("mediabrowser.labels.temporarystorage")
: `${ : `${
jobSrchCurrentValue.ro_number jobSrchCurrentValue.ro_number