adding non hooked up modal
This commit is contained in:
jfrye122
210
components/Modals/JobSearchAndSelectModal.jsx
Normal file
210
components/Modals/JobSearchAndSelectModal.jsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FlatList, RefreshControl, View } from "react-native";
|
||||
import { Button, List, Modal, Portal, Searchbar } from "react-native-paper";
|
||||
import { connect } from "react-redux";
|
||||
// import { createStructuredSelector } from "reselect";
|
||||
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
|
||||
// import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
|
||||
// import {
|
||||
// selectCurrentCameraJob,
|
||||
// selectCurrentCameraJobId,
|
||||
// } from "../../redux/app/app.selectors";
|
||||
// import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import ErrorDisplay from "../error-display/error-display.component";
|
||||
import LoadingDisplay from "../loading-display/loading-display.component";
|
||||
|
||||
// const mapStateToProps = createStructuredSelector({
|
||||
// cameraJobId: selectCurrentCameraJobId,
|
||||
// cameraJob: selectCurrentCameraJob,
|
||||
// });
|
||||
|
||||
// const mapDispatchToProps = (dispatch) => ({
|
||||
// setCameraJobId: (id) => dispatch(setCameraJobId(id)),
|
||||
// setCameraJob: (job) => dispatch(setCameraJob(job)),
|
||||
// });
|
||||
|
||||
export function JobSearchAndSelectModal(
|
||||
props,
|
||||
// cameraJobId,
|
||||
// setCameraJobId,
|
||||
// cameraJob,
|
||||
// setCameraJob,
|
||||
) {
|
||||
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 { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
|
||||
fetchPolicy: "cache-and-network",
|
||||
variables: {
|
||||
statuses: false || ["Open", "Open*"],
|
||||
},
|
||||
});
|
||||
const { t } = useTranslation();
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
const [searchQuery, setSearchQuery] = React.useState("");
|
||||
if (loading) return <LoadingDisplay />;
|
||||
if (error) return <ErrorDisplay errorMessage={error.message} />;
|
||||
|
||||
const showModal = () => setVisible(true);
|
||||
const hideModal = () => setVisible(false);
|
||||
|
||||
const onRefresh = async () => {
|
||||
console.log("onRefresh was called");
|
||||
return refetch();
|
||||
};
|
||||
|
||||
const onChangeSearch = (query) => setSearchQuery(query);
|
||||
|
||||
const jobs = data
|
||||
? searchQuery === ""
|
||||
? data.jobs
|
||||
: data.jobs.filter(
|
||||
(j) =>
|
||||
(j.ro_number || "")
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
(j.ownr_co_nm || "")
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
(j.ownr_fn || "")
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
(j.ownr_ln || "")
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
(j.plate_no || "")
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
(j.v_model_desc || "")
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) ||
|
||||
(j.v_make_desc || "")
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase())
|
||||
)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Portal>
|
||||
<Modal
|
||||
visible={visible}
|
||||
onDismiss={hideModal}
|
||||
// eslint-disable-next-line react-native/no-color-literals
|
||||
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={searchQuery}
|
||||
/>
|
||||
</View>
|
||||
<FlatList
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
||||
}
|
||||
data={[{ id: "temp", ro_number: "Temporary Storage" }, ...jobs]}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={(object) => (
|
||||
<List.Item
|
||||
onPress={() => {
|
||||
//setCameraJob(object.item);
|
||||
//setCameraJobId(object.item.id);
|
||||
jobSrchOnSetCurrentValue(object.item);
|
||||
jobSrchOnSetCurrentValueId(object.item.id);
|
||||
hideModal();
|
||||
setSearchQuery("");
|
||||
}}
|
||||
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.ownr_co_nm || ""
|
||||
} ${
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Modal>
|
||||
</Portal>
|
||||
<Button mode="outlined" style={{ margin: 8 }} onPress={showModal}>
|
||||
{jobSrchCurrentValueId
|
||||
? jobSrchCurrentValueId === "temp"
|
||||
? t("mediabrowser.labels.temporarystorage")
|
||||
: `${jobSrchCurrentValue.ro_number ? `${jobSrchCurrentValue.ro_number} - ` : ``}${
|
||||
jobSrchCurrentValue.ownr_fn || ""
|
||||
} ${jobSrchCurrentValue.ownr_ln || ""} ${jobSrchCurrentValue.ownr_co_nm || ""} - ${
|
||||
jobSrchCurrentValue.v_model_yr || ""
|
||||
} ${jobSrchCurrentValue.v_make_desc || ""} ${jobSrchCurrentValue.v_model_desc || ""}`
|
||||
: t("mediabrowser.labels.selectjob")}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(null, null)(JobSearchAndSelectModal);
|
||||
Reference in New Issue
Block a user