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