Resolve issue for temp uploads & add search.

components/camera-select-job/camera-select-job.component.jsx

@@ -41,18 +41,17 @@ export function CameraSelectJob({
     skip: !bodyshop,
   });
   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 [visible, setVisible] = React.useState(false);
-
   const showModal = () => setVisible(true);
   const hideModal = () => setVisible(false);
 
   const onRefresh = async () => {
     return refetch();
   };
-  const [searchQuery, setSearchQuery] = React.useState("");
 
   const onChangeSearch = (query) => setSearchQuery(query);
 
@@ -96,6 +95,7 @@ export function CameraSelectJob({
           contentContainerStyle={{
             paddingTop: 20,
             paddingBottom: 20,
+            margin: 12,
             flex: 1,
             backgroundColor: "white",
           }}
@@ -148,12 +148,18 @@ export function CameraSelectJob({
                     : {}),
                 }}
                 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_co_nm || ""
-                } - ${object.item.v_model_yr || ""} ${
-                  object.item.v_make_desc || ""
-                } ${object.item.v_model_desc || ""}`}
+                } ${
+                  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}
               />
             )}

components/data-label/data-label.component.jsx

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

components/job-lines/job-lines.component.jsx

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

components/job-list/job-list.component.jsx

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

components/screen-media-browser/screen-media-browser.component.jsx

@@ -49,6 +49,7 @@ export function ImageBrowserScreen({
   const forceRerender = useCallback(() => {
     setTick((tick) => tick + 1);
   }, []);
+
   const client = useApolloClient();
   async function handleOnSuccess(uri, id) {
     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.
 
-    const queryData = await client.query({
-      query: GET_DOC_SIZE_TOTALS,
+    if (selectedCameraJobId !== "temp") {
+      const queryData = await client.query({
+        query: GET_DOC_SIZE_TOTALS,
 
-      fetchPolicy: "network-only",
-      variables: {
-        jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
-      },
-    });
-
-    const totalOfUploads = await data.reduce(async (acc, val) => {
-      //Get the size of the file based on URI.
-      const info = await FileSystem.getInfoAsync(val.uri, { size: true });
-      return (await acc) + info.size;
-    }, 0);
-    console.log("data :>> ", data);
-    console.log(
-      "Size of uploaded documents.",
-      queryData.data.documents_aggregate.aggregate.sum.size,
-      "Shop Limit",
-      bodyshop.jobsizelimit,
-      "Space remaining",
-      bodyshop.jobsizelimit -
+        fetchPolicy: "network-only",
+        variables: {
+          jobId: selectedCameraJobId,
+        },
+      });
+      const totalOfUploads = await data.reduce(async (acc, val) => {
+        //Get the size of the file based on URI.
+        const info = await FileSystem.getInfoAsync(val.uri, { size: true });
+        return (await acc) + info.size;
+      }, 0);
+      console.log("data :>> ", data);
+      console.log(
+        "Size of uploaded documents.",
         queryData.data.documents_aggregate.aggregate.sum.size,
-      "Total of uploaded files",
-      totalOfUploads
-    );
-
-    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")
+        "Shop Limit",
+        bodyshop.jobsizelimit,
+        "Space remaining",
+        bodyshop.jobsizelimit -
+          queryData.data.documents_aggregate.aggregate.sum.size,
+        "Total of uploaded files",
+        totalOfUploads
       );
-      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(