init of redo of SearchJobModal NotFlashing
This commit is contained in:
jfrye122
162
components/Modals/JobIdSearchAndList.jsx
Normal file
162
components/Modals/JobIdSearchAndList.jsx
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
|
||||||
|
import React from "react";
|
||||||
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
|
import { Button, List, Searchbar } from "react-native-paper";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
|
||||||
|
import { useQuery } from "@apollo/client";
|
||||||
|
|
||||||
|
function JobIdSearchAndList({ onClose }) {
|
||||||
|
const jobSrchNotExported = true;
|
||||||
|
const jobSrchNotInvoiced = false;
|
||||||
|
const jobSrchConvertedOnly = false;
|
||||||
|
|
||||||
|
const jobSrchCurrentValue = { id: "temp", ro_number: "Temporary Storage" };
|
||||||
|
const jobSrchOnSetCurrentValue = (e) => {
|
||||||
|
console.info("onSetCurrentValue was called", e);
|
||||||
|
};
|
||||||
|
const jobSrchCurrentValueId = "temp";
|
||||||
|
const jobSrchOnSetCurrentValueId = () => {
|
||||||
|
console.info("onSetCurrentValueId was called");
|
||||||
|
};
|
||||||
|
|
||||||
|
const [searchText, setSearchText] = useState(null);
|
||||||
|
const [loading2, setLoading2] = useState(null);
|
||||||
|
|
||||||
|
console.log("onClose :", onClose);
|
||||||
|
// const showModal = () => setVisible(true);
|
||||||
|
const close = onClose ? onClose : () => console.info("todo add close"); //setVisible(false);
|
||||||
|
const onChangeSearch = (query) => {
|
||||||
|
console.log("onChangeSearch text:", query);
|
||||||
|
setSearchText(query);
|
||||||
|
};
|
||||||
|
const onRefresh = async () => {
|
||||||
|
//7/18
|
||||||
|
setLoading2(true);
|
||||||
|
// refetch();
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoading2(false);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
//7/17
|
||||||
|
// setRefreshing(true);
|
||||||
|
// console.log(" ");
|
||||||
|
// console.log(" ");
|
||||||
|
// console.log(" ");
|
||||||
|
// console.log(" ");
|
||||||
|
// console.log(" ");
|
||||||
|
// console.log("onRefresh was called");
|
||||||
|
|
||||||
|
// console.log("data:", data);
|
||||||
|
// refetch({
|
||||||
|
// notInvoiced: jobSrchNotInvoiced,
|
||||||
|
// notExported: jobSrchNotExported,
|
||||||
|
// isConverted: jobSrchConvertedOnly,
|
||||||
|
// search: searchText,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
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 } : {}),
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
},
|
||||||
|
skip: !!!searchText,
|
||||||
|
fetchPolicy: "network-only",
|
||||||
|
nextFetchPolicy: "network-only",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
margin: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button onPress={() => close()}>
|
||||||
|
<Ionicons name="ios-arrow-back" size={32} color="dodgerblue" />
|
||||||
|
</Button>
|
||||||
|
<Searchbar
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
onChangeText={(text) => onChangeSearch(text)}
|
||||||
|
value={searchText}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<FlatList
|
||||||
|
refreshControl={
|
||||||
|
<RefreshControl refreshing={loading2} onRefresh={onRefresh} />
|
||||||
|
}
|
||||||
|
// data={[{ id: "temp", ro_number: "Temporary Storage" }, ...jobs]}
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default JobIdSearchAndList;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({});
|
||||||
53
components/Modals/JobSearchModal.jsx
Normal file
53
components/Modals/JobSearchModal.jsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { StyleSheet, Text, View } from "react-native";
|
||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { Button, Modal, Portal } from "react-native-paper";
|
||||||
|
import JobIdSearchAndList from "./JobIdSearchAndList";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
function JobSearchModal() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const showModal = () => setVisible(true);
|
||||||
|
const hideModal = () => setVisible(false);
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<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",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<JobIdSearchAndList onClose={hideModal}/>
|
||||||
|
</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.v_model_yr || ""} ${
|
||||||
|
jobSrchCurrentValue.v_make_desc || ""
|
||||||
|
} ${jobSrchCurrentValue.v_model_desc || ""}`
|
||||||
|
: t("mediabrowser.labels.selectjob")} */}
|
||||||
|
{t("mediabrowser.labels.selectjob")}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default JobSearchModal;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({});
|
||||||
Reference in New Issue
Block a user