Add liquid search & jobs list.

components/jobs-list/job-list-item.jsx

@@ -0,0 +1,54 @@
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { Button, List, Text, useTheme } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.analytics";
+import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+
+const mapStateToProps = createStructuredSelector({});
+const mapDispatchToProps = (dispatch) => ({
+  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
+  setCameraJob: (job) => dispatch(setCameraJob(job)),
+});
+
+export function JobListItem({ setCameraJob, setCameraJobId, item }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const theme = useTheme();
+  const onPress = () => {
+    logImEXEvent("imexmobile_view_job_detail");
+    router.navigate({
+      pathname: `/jobs/${item.id}`,
+      params: {
+        title: item.ro_number || t("general.labels.na"),
+      },
+    });
+  };
+
+  const handleUpload = () => {};
+
+  return (
+    <List.Item
+    onPress={onPress}
+      title={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
+        item.ownr_co_nm || ""
+      }`}
+      description={`$${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
+        item.v_model_desc || ""
+      }`}
+      left={(props) => (
+        <Text variant="titleMedium" style={{ padding: 10 }}>
+          {item.ro_number || t("general.labels.na")}
+        </Text>
+      )}
+      right={() => (
+        <Button onPress={handleUpload}>
+          <List.Icon color={theme.colors.primary} icon="cloud-upload-outline" />
+        </Button>
+      )}
+    />
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobListItem);

components/jobs-list/jobs-list.jsx

@@ -0,0 +1,82 @@
+import { useQuery } from "@apollo/client";
+import { useLocalSearchParams } from "expo-router";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FlatList, RefreshControl, Text, View } from "react-native";
+import { ActivityIndicator, Button } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+//import ErrorDisplay from "../error-display/error-display.component";
+import JobListItem from "./job-list-item";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function JobListComponent({ bodyshop }) {
+  const { t } = useTranslation();
+  const { search } = useLocalSearchParams();
+
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    variables: {
+      statuses: bodyshop?.md_ro_statuses?.active_statuses || ["Open", "Open*"],
+    },
+    skip: !bodyshop,
+    notifyOnNetworkStatusChange: true,
+  });
+
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  if (loading) return <ActivityIndicator />;
+  if (error) return <Text>{error.message}</Text>;
+  if (data && data.jobs && data.jobs.length === 0)
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>
+          <Text>{t("joblist.labels.nojobs")}</Text>
+        </Text>
+        <Button onPress={() => refetch()}>
+          {t("joblist.actions.refresh")}
+        </Button>
+      </View>
+    );
+
+  const jobs = data
+    ? search === "" || !search
+      ? data.jobs
+      : data.jobs.filter(
+          (j) =>
+            (j.ro_number || "")
+              .toString()
+              .toLowerCase()
+              .includes(search.toLowerCase()) ||
+            (j.ownr_co_nm || "").toLowerCase().includes(search.toLowerCase()) ||
+            (j.ownr_fn || "").toLowerCase().includes(search.toLowerCase()) ||
+            (j.ownr_ln || "").toLowerCase().includes(search.toLowerCase()) ||
+            (j.v_model_desc || "")
+              .toLowerCase()
+              .includes(search.toLowerCase()) ||
+            (j.v_make_desc || "").toLowerCase().includes(search.toLowerCase())
+        )
+    : [];
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+        style={{ flex: 1 }}
+        data={jobs}
+        renderItem={(object) => <JobListItem item={object.item} />}
+      />
+    </SafeAreaView>
+  );
+}
+
+export default connect(mapStateToProps, null)(JobListComponent);