285 lines
10 KiB
JavaScript
285 lines
10 KiB
JavaScript
import { useLazyQuery, useQuery } from "@apollo/client";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import React from "react";
|
|
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';
|
|
|
|
|
|
export function JobSearchAndSelectModal(props) {
|
|
const jobSrchNotExported =
|
|
props?.notExported !== undefined ? props.notExported : true;
|
|
const jobSrchNotInvoiced =
|
|
props?.notInvoiced !== undefined ? props.notInvoiced : false;
|
|
const jobSrchConvertedOnly =
|
|
props?.convertedOnly !== undefined ? props.convertedOnly : false;
|
|
|
|
const jobSrchCurrentValue =
|
|
props?.currentValue !== undefined
|
|
? props.currentValue
|
|
: { id: "temp", ro_number: "Temporary Storage" };
|
|
const jobSrchOnSetCurrentValue =
|
|
props?.onSetCurrentValue !== undefined
|
|
? props.onSetCurrentValue
|
|
: (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(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 } : {}),
|
|
// }
|
|
// : {}),
|
|
|
|
// 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 } : {}),
|
|
// }
|
|
// : {}),
|
|
// },
|
|
// }
|
|
// );
|
|
// const searchQuery = useQuery([SEARCH_JOBS_FOR_AUTOCOMPLETE, debouncedSearchTerm], () => fetchSearchResults(debouncedSearchTerm));
|
|
const [searchQuery, { loading, error, data }] = 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 <ErrorDisplay errorMessage={error.message} />;
|
|
|
|
const showModal = () => setVisible(true);
|
|
const hideModal = () => setVisible(false);
|
|
const onRefresh = async () => {
|
|
// refetch({
|
|
// notInvoiced: jobSrchNotInvoiced,
|
|
// notExported: jobSrchNotExported,
|
|
// isConverted: jobSrchConvertedOnly,
|
|
// search: searchText,
|
|
// });
|
|
};
|
|
const executeSearch = (v) => {
|
|
console.log("executeSearchWithV:", v);
|
|
if (v && v !== "") searchQuery(v);
|
|
};
|
|
const debouncedExecuteSearch = _.debounce(executeSearch, 1000);
|
|
|
|
const onChangeSearch = (query) => {
|
|
setSearchText(query);
|
|
debouncedExecuteSearch({variables: {
|
|
search: query,
|
|
...(jobSrchConvertedOnly || jobSrchNotExported
|
|
? {
|
|
...(jobSrchConvertedOnly ? { isConverted: true } : {}),
|
|
...(jobSrchNotExported ? { notExported: 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
|
|
? 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())
|
|
)
|
|
: [];
|
|
//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 (
|
|
<>
|
|
<Portal>
|
|
<Modal
|
|
visible={visible}
|
|
onDismiss={hideModal}
|
|
contentContainerStyle={{
|
|
paddingTop: 20,
|
|
paddingBottom: 20,
|
|
margin: 12,
|
|
flex: 1,
|
|
backgroundColor: "white",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
margin: 8,
|
|
}}
|
|
>
|
|
<Button onPress={() => hideModal()}>
|
|
<Ionicons name="ios-arrow-back" size={32} color="dodgerblue" />
|
|
</Button>
|
|
<Searchbar
|
|
style={{ flex: 1 }}
|
|
onChangeText={onChangeSearch}
|
|
value={searchText}
|
|
/>
|
|
</View>
|
|
<FlatList
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
data={data?.search_jobs}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={(object) => (
|
|
<List.Item
|
|
onPress={() => {
|
|
jobSrchOnSetCurrentValue(object.item);
|
|
jobSrchOnSetCurrentValueId(object.item.id);
|
|
hideModal();
|
|
setSearchText("");
|
|
}}
|
|
left={() => {
|
|
if (object.item.id !== jobSrchCurrentValueId) return null;
|
|
return (
|
|
<Ionicons
|
|
name="ios-checkmark-circle"
|
|
size={24}
|
|
color="dodgerblue"
|
|
style={{ alignSelf: "center" }}
|
|
/>
|
|
);
|
|
}}
|
|
titleStyle={{
|
|
...(object.item.id === jobSrchCurrentValueId
|
|
? { color: "dodgerblue" }
|
|
: {}),
|
|
}}
|
|
title={`${
|
|
object.item.ro_number ? `${object.item.ro_number} ` : ``
|
|
}${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""}${
|
|
object.item.v_model_yr ? `- ${object.item.v_model_yr}` : ""
|
|
}${
|
|
object.item.v_make_desc ? `- ${object.item.v_make_desc}` : ""
|
|
}${
|
|
object.item.v_model_desc ? `- ${object.item.v_model_desc}` : ""
|
|
}`}
|
|
key={object.item.id}
|
|
/>
|
|
)}
|
|
ListEmptyComponent={
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
padding: 10,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text>No Data</Text>
|
|
</View>
|
|
}
|
|
/>
|
|
</Modal>
|
|
</Portal>
|
|
<Button mode="outlined" style={{ margin: 8,
|
|
height: 50,
|
|
borderColor: "gray",
|
|
borderWidth: 0.5,
|
|
borderRadius: 4,
|
|
marginVertical: 4,
|
|
marginHorizontal: 16,
|
|
justifyContent: "center"}} onPress={showModal}>
|
|
{jobSrchCurrentValueId
|
|
? jobSrchCurrentValueId === "temp"
|
|
? t("mediabrowser.labels.temporarystorage")
|
|
: `${
|
|
jobSrchCurrentValue.ro_number
|
|
? `${jobSrchCurrentValue.ro_number} - `
|
|
: ``
|
|
}${jobSrchCurrentValue.ownr_fn || ""} ${
|
|
jobSrchCurrentValue.ownr_ln || ""
|
|
} - ${jobSrchCurrentValue.v_model_yr || ""} ${
|
|
jobSrchCurrentValue.v_make_desc || ""
|
|
} ${jobSrchCurrentValue.v_model_desc || ""}`
|
|
: t("mediabrowser.labels.selectjob")}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default connect(null, null)(JobSearchAndSelectModal);
|