Resolve issue for temp uploads & add search.

This commit is contained in:
Patrick Fic
2021-05-13 09:39:29 -07:00
parent bdf7390678
commit b6155c6a85
11 changed files with 230 additions and 185 deletions

View File

@@ -1085,6 +1085,27 @@
<folder_node> <folder_node>
<name>actions</name> <name>actions</name>
<children> <children>
<concept_node>
<name>refresh</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>swipecamera</name> <name>swipecamera</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -1153,6 +1174,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>nojobs</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children> </children>
</folder_node> </folder_node>
<folder_node> <folder_node>

View File

@@ -41,18 +41,17 @@ export function CameraSelectJob({
skip: !bodyshop, skip: !bodyshop,
}); });
const { t } = useTranslation(); const { t } = useTranslation();
const [visible, setVisible] = React.useState(false);
const [searchQuery, setSearchQuery] = React.useState("");
if (loading) return <LoadingDisplay />; if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true); const showModal = () => setVisible(true);
const hideModal = () => setVisible(false); const hideModal = () => setVisible(false);
const onRefresh = async () => { const onRefresh = async () => {
return refetch(); return refetch();
}; };
const [searchQuery, setSearchQuery] = React.useState("");
const onChangeSearch = (query) => setSearchQuery(query); const onChangeSearch = (query) => setSearchQuery(query);
@@ -96,6 +95,7 @@ export function CameraSelectJob({
contentContainerStyle={{ contentContainerStyle={{
paddingTop: 20, paddingTop: 20,
paddingBottom: 20, paddingBottom: 20,
margin: 12,
flex: 1, flex: 1,
backgroundColor: "white", backgroundColor: "white",
}} }}
@@ -148,12 +148,18 @@ export function CameraSelectJob({
: {}), : {}),
}} }}
title={`${ title={`${
object.item.ro_number ? `${object.item.ro_number} - ` : `` object.item.ro_number ? `${object.item.ro_number} ` : ``
}${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${ }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
object.item.ownr_co_nm || "" object.item.ownr_co_nm || ""
} - ${object.item.v_model_yr || ""} ${ } ${
object.item.v_make_desc || "" object.item.v_model_yr ? `- ${object.item.v_model_yr}` : ""
} ${object.item.v_model_desc || ""}`} } ${
object.item.v_make_desc ? `- ${object.item.v_make_desc}` : ""
} ${
object.item.v_model_desc
? `- ${object.item.v_model_desc}`
: ""
}`}
key={object.item.id} key={object.item.id}
/> />
)} )}

View File

@@ -1,6 +1,6 @@
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import React from "react"; import React from "react";
import { Text, TextInput, View } from "react-native"; import { Text, View } from "react-native";
export default function DataLabelComponent({ export default function DataLabelComponent({
label, label,
@@ -16,8 +16,8 @@ export default function DataLabelComponent({
); );
return ( return (
<View {...restProps}> <View {...restProps} style={{ margin: 4, ...restProps.style }}>
<TextInput disabled placeholder={label} /> <Text style={{ color: "slategray" }}>{label}</Text>
<Text>{theContent}</Text> <Text>{theContent}</Text>
</View> </View>
); );

View File

@@ -2,6 +2,7 @@ import Dinero from "dinero.js";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native"; import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Card, DataTable } from "react-native-paper"; import { Card, DataTable } from "react-native-paper";
export default function JobLines({ job, loading, refetch }) { export default function JobLines({ job, loading, refetch }) {
@@ -17,64 +18,66 @@ export default function JobLines({ job, loading, refetch }) {
}; };
return ( return (
<View> <ScrollView horizontal>
<DataTable> <View>
<DataTable.Header> <DataTable>
<DataTable.Title style={{ flex: 4 }}> <DataTable.Header>
{t("jobdetail.labels.lines_desc")} <DataTable.Title style={{ flex: 4 }}>
</DataTable.Title> {t("jobdetail.labels.lines_desc")}
<DataTable.Title style={{ flex: 2 }}> </DataTable.Title>
{t("jobdetail.labels.lines_lbr_ty")} <DataTable.Title style={{ flex: 2 }}>
</DataTable.Title> {t("jobdetail.labels.lines_lbr_ty")}
<DataTable.Title style={{ flex: 1 }}> </DataTable.Title>
{t("jobdetail.labels.lines_lb_hrs")} <DataTable.Title style={{ flex: 1 }}>
</DataTable.Title> {t("jobdetail.labels.lines_lb_hrs")}
<DataTable.Title style={{ flex: 2 }}> </DataTable.Title>
{t("jobdetail.labels.lines_part_type")} <DataTable.Title style={{ flex: 2 }}>
</DataTable.Title> {t("jobdetail.labels.lines_part_type")}
<DataTable.Title style={{ flex: 1 }}> </DataTable.Title>
{t("jobdetail.labels.lines_qty")} <DataTable.Title style={{ flex: 1 }}>
</DataTable.Title> {t("jobdetail.labels.lines_qty")}
<DataTable.Title style={{ flex: 1 }}> </DataTable.Title>
{t("jobdetail.labels.lines_price")} <DataTable.Title style={{ flex: 1 }}>
</DataTable.Title> {t("jobdetail.labels.lines_price")}
</DataTable.Header> </DataTable.Title>
</DataTable> </DataTable.Header>
</DataTable>
<FlatList <FlatList
data={job.joblines} data={job.joblines}
refreshControl={ refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> <RefreshControl refreshing={loading} onRefresh={onRefresh} />
} }
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
renderItem={(object) => ( renderItem={(object) => (
<DataTable.Row> <DataTable.Row>
<DataTable.Cell style={{ flex: 4 }}> <DataTable.Cell style={{ flex: 4 }}>
{object.item.line_desc} {object.item.line_desc}
</DataTable.Cell> </DataTable.Cell>
<DataTable.Cell style={{ flex: 2 }}> <DataTable.Cell style={{ flex: 2 }}>
{object.item.mod_lbr_ty && {object.item.mod_lbr_ty &&
t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)} t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</DataTable.Cell> </DataTable.Cell>
<DataTable.Cell style={{ flex: 1 }}> <DataTable.Cell style={{ flex: 1 }}>
{object.item.mod_lb_hrs} {object.item.mod_lb_hrs}
</DataTable.Cell> </DataTable.Cell>
<DataTable.Cell style={{ flex: 2 }}> <DataTable.Cell style={{ flex: 2 }}>
{object.item.part_type && {object.item.part_type &&
t(`jobdetail.part_types.${object.item.part_type}`)} t(`jobdetail.part_types.${object.item.part_type}`)}
</DataTable.Cell> </DataTable.Cell>
<DataTable.Cell style={{ flex: 1 }}> <DataTable.Cell style={{ flex: 1 }}>
{object.item.part_qty} {object.item.part_qty}
</DataTable.Cell> </DataTable.Cell>
<DataTable.Cell style={{ flex: 1 }}> <DataTable.Cell style={{ flex: 1 }}>
{Dinero({ {Dinero({
amount: Math.round((object.item.act_price || 0) * 100), amount: Math.round((object.item.act_price || 0) * 100),
}).toFormat()} }).toFormat()}
</DataTable.Cell> </DataTable.Cell>
</DataTable.Row> </DataTable.Row>
)} )}
/> />
</View> </View>
</ScrollView>
); );
} }

View File

@@ -1,6 +1,6 @@
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import React from "react"; import React from "react";
import { RefreshControl } from "react-native"; import { RefreshControl, View, Text } from "react-native";
import { FlatList } from "react-native-gesture-handler"; import { FlatList } from "react-native-gesture-handler";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -9,12 +9,15 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
import JobListItem from "../job-list-item/job-list-item.component"; import JobListItem from "../job-list-item/job-list-item.component";
import LoadingDisplay from "../loading-display/loading-display.component"; import LoadingDisplay from "../loading-display/loading-display.component";
import { Title, Button, Searchbar } from "react-native-paper";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
export function JobListComponent({ bodyshop }) { export function JobListComponent({ bodyshop }) {
const { t } = useTranslation();
const [searchQuery, setSearchQuery] = React.useState("");
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, { const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: { variables: {
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"], statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
@@ -25,19 +28,62 @@ export function JobListComponent({ bodyshop }) {
const onRefresh = async () => { const onRefresh = async () => {
return refetch(); return refetch();
}; };
const onChangeSearch = (query) => setSearchQuery(query);
if (loading) return <LoadingDisplay />; if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
if (data && data.jobs && data.jobs.length === 0)
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Title>
<Text>{t("joblist.labels.nojobs")}</Text>
</Title>
<Button onPress={() => refetch()}>
{t("joblist.actions.refresh")}
</Button>
</View>
);
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.v_model_desc || "")
.toLowerCase()
.includes(searchQuery.toLowerCase()) ||
(j.v_make_desc || "")
.toLowerCase()
.includes(searchQuery.toLowerCase())
)
: [];
return ( return (
<FlatList <View style={{ flex: 1 }}>
refreshControl={ <Searchbar onChangeText={onChangeSearch} value={searchQuery} />
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> <FlatList
} refreshControl={
style={{ flex: 1 }} <RefreshControl refreshing={loading} onRefresh={onRefresh} />
data={data ? data.jobs : []} }
renderItem={(object) => <JobListItem item={object.item} />} style={{ flex: 1 }}
/> data={jobs}
renderItem={(object) => <JobListItem item={object.item} />}
/>
</View>
); );
} }

View File

@@ -49,6 +49,7 @@ export function ImageBrowserScreen({
const forceRerender = useCallback(() => { const forceRerender = useCallback(() => {
setTick((tick) => tick + 1); setTick((tick) => tick + 1);
}, []); }, []);
const client = useApolloClient(); const client = useApolloClient();
async function handleOnSuccess(uri, id) { async function handleOnSuccess(uri, id) {
console.log("Succesful upload!", uri); console.log("Succesful upload!", uri);
@@ -61,44 +62,45 @@ export function ImageBrowserScreen({
//Validate to make sure the totals for the file sizes do not exceed the total on the job. //Validate to make sure the totals for the file sizes do not exceed the total on the job.
const queryData = await client.query({ if (selectedCameraJobId !== "temp") {
query: GET_DOC_SIZE_TOTALS, const queryData = await client.query({
query: GET_DOC_SIZE_TOTALS,
fetchPolicy: "network-only", fetchPolicy: "network-only",
variables: { variables: {
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null, jobId: selectedCameraJobId,
}, },
}); });
const totalOfUploads = await data.reduce(async (acc, val) => {
const totalOfUploads = await data.reduce(async (acc, val) => { //Get the size of the file based on URI.
//Get the size of the file based on URI. const info = await FileSystem.getInfoAsync(val.uri, { size: true });
const info = await FileSystem.getInfoAsync(val.uri, { size: true }); return (await acc) + info.size;
return (await acc) + info.size; }, 0);
}, 0); console.log("data :>> ", data);
console.log("data :>> ", data); console.log(
console.log( "Size of uploaded documents.",
"Size of uploaded documents.",
queryData.data.documents_aggregate.aggregate.sum.size,
"Shop Limit",
bodyshop.jobsizelimit,
"Space remaining",
bodyshop.jobsizelimit -
queryData.data.documents_aggregate.aggregate.sum.size, queryData.data.documents_aggregate.aggregate.sum.size,
"Total of uploaded files", "Shop Limit",
totalOfUploads bodyshop.jobsizelimit,
); "Space remaining",
bodyshop.jobsizelimit -
if ( queryData.data.documents_aggregate.aggregate.sum.size,
bodyshop.jobsizelimit - "Total of uploaded files",
queryData.data.documents_aggregate.aggregate.sum.size <= totalOfUploads
totalOfUploads
) {
//No more room... abandon ship.
Alert.alert(
t("mediabrowser.labels.storageexceeded_title"),
t("mediabrowser.labels.storageexceeded")
); );
return;
if (
bodyshop.jobsizelimit -
queryData.data.documents_aggregate.aggregate.sum.size <=
totalOfUploads
) {
//No more room... abandon ship.
Alert.alert(
t("mediabrowser.labels.storageexceeded_title"),
t("mediabrowser.labels.storageexceeded")
);
return;
}
} }
const ret = await Promise.all( const ret = await Promise.all(

View File

@@ -128,10 +128,11 @@ export const client = new ApolloClient({
//link: from([apolloLogger, errorLink, authLink, link]), //link: from([apolloLogger, errorLink, authLink, link]),
link: from([authLink, link]), link: from([authLink, link]),
cache, cache,
// connectToDevTools: process.env.NODE_ENV !== "production", // connectToDevTools: process.env.NODE_ENV !== "production",
// defaultOptions: { defaultOptions: {
// watchQuery: { watchQuery: {
// fetchPolicy: "cache-and-network", fetchPolicy: "network-only",
// }, },
// }, },
}); });

View File

@@ -8,47 +8,15 @@ export const QUERY_ALL_ACTIVE_JOBS = gql`
) { ) {
ownr_fn ownr_fn
ownr_ln ownr_ln
ownr_ph1 ownr_co_nm
ownr_ea clm_no
owner {
id
allow_text_message
preferred_contact
}
plate_no
plate_st
v_vin
v_model_yr v_model_yr
v_model_desc v_model_desc
v_make_desc v_make_desc
v_color
vehicleid
actual_completion
actual_delivery
actual_in
id id
ins_co_nm
ins_ct_fn
ins_ct_ln
ins_ph1
ins_ea
est_co_nm
est_ph1
est_ea
est_ct_fn
est_ct_ln
clm_no
clm_total
owner_owing owner_owing
ro_number ro_number
scheduled_completion
scheduled_in
scheduled_delivery
status status
updated_at
ded_amt
vehicleid
} }
} }
`; `;
@@ -152,7 +120,6 @@ export const GET_JOB_BY_PK = gql`
special_coverage_policy special_coverage_policy
scheduled_delivery scheduled_delivery
converted converted
ro_number ro_number
clm_total clm_total
inproduction inproduction
@@ -163,18 +130,7 @@ export const GET_JOB_BY_PK = gql`
v_model_desc v_model_desc
v_make_desc v_make_desc
v_color v_color
vehicle {
id
plate_no
v_vin
v_model_yr
v_model_desc
v_make_desc
v_color
}
ins_co_id
policy_no
loss_date
clm_no clm_no
area_of_damage area_of_damage
ins_co_nm ins_co_nm
@@ -190,10 +146,7 @@ export const GET_JOB_BY_PK = gql`
pay_date pay_date
est_ph1 est_ph1
est_ea est_ea
selling_dealer
servicing_dealer
selling_dealer_contact
servicing_dealer_contact
regie_number regie_number
scheduled_completion scheduled_completion
id id
@@ -216,20 +169,6 @@ export const GET_JOB_BY_PK = gql`
ownr_zip ownr_zip
ownr_ctry ownr_ctry
ownr_ph1 ownr_ph1
owner {
id
ownr_fn
ownr_ln
ownr_ea
ownr_addr1
ownr_addr2
ownr_city
ownr_st
ownr_zip
ownr_ctry
ownr_ph1
}
actual_in actual_in
scheduled_completion scheduled_completion
scheduled_in scheduled_in

View File

@@ -70,11 +70,13 @@
}, },
"joblist": { "joblist": {
"actions": { "actions": {
"refresh": "Refresh",
"swipecamera": "Add Pictures/Video" "swipecamera": "Add Pictures/Video"
}, },
"labels": { "labels": {
"activejobs": "Jobs", "activejobs": "Jobs",
"detail": "Job Detail" "detail": "Job Detail",
"nojobs": "There are no active jobs."
}, },
"titles": { "titles": {
"jobtab": "Jobs" "jobtab": "Jobs"

View File

@@ -70,11 +70,13 @@
}, },
"joblist": { "joblist": {
"actions": { "actions": {
"refresh": "",
"swipecamera": "" "swipecamera": ""
}, },
"labels": { "labels": {
"activejobs": "", "activejobs": "",
"detail": "" "detail": "",
"nojobs": ""
}, },
"titles": { "titles": {
"jobtab": "" "jobtab": ""

View File

@@ -70,11 +70,13 @@
}, },
"joblist": { "joblist": {
"actions": { "actions": {
"refresh": "",
"swipecamera": "" "swipecamera": ""
}, },
"labels": { "labels": {
"activejobs": "", "activejobs": "",
"detail": "" "detail": "",
"nojobs": ""
}, },
"titles": { "titles": {
"jobtab": "" "jobtab": ""