Add liquid search & jobs list.

.gitignore

@@ -16,4 +16,7 @@ yarn-error.log
 
 *.ipa
 *.aab
-.expo
+.expo
+
+android/**
+ios/**

app/_layout.tsx

@@ -17,7 +17,7 @@ import "../translations/i18n";
 function AuthenticatedLayout() {
   const { t } = useTranslation();
   return (
-    <NativeTabs>
+    <NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
       <NativeTabs.Trigger name="jobs">
         <Label>{t("joblist.labels.activejobs")}</Label>
         <Icon sf="checklist" drawable="custom_android_drawable" />
@@ -26,6 +26,9 @@ function AuthenticatedLayout() {
         <Icon sf="gear" drawable="custom_settings_drawable" />
         <Label>{t("settings.titles.settings")}</Label>
       </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="search" role="search">
+        <Label>Search</Label>
+      </NativeTabs.Trigger>
     </NativeTabs>
   );
 }

app/jobs/_layout.tsx

@@ -1,6 +1,10 @@
-import { Stack } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 
 function JobsStack() {
+  const router = useRouter();
+  const params = useLocalSearchParams();
+  console.log("*** ~ JobsStack ~ params:", params);
+
   return (
     <Stack
       screenOptions={{
@@ -9,8 +13,27 @@ function JobsStack() {
         },
       }}
     >
-      <Stack.Screen name="index" options={{ title: "Active Jobs" }} />
+      <Stack.Screen
-      <Stack.Screen name="[jobId]" options={{ title: "Job Details" }} />
+        name="index"
+        options={{
+          title: "Search",
+          headerSearchBarOptions: {
+            placement: "automatic",
+            placeholder: "Search",
+            onChangeText: (event) => {
+              router.setParams({
+                search: event?.nativeEvent?.text,
+              });
+            },
+          },
+        }}
+      />
+      <Stack.Screen
+        name="[jobId]"
+        options={({ route }) => ({
+          title: (route.params as any)?.title || "Job Details",
+        })}
+      />
     </Stack>
   );
 }

app/jobs/index.tsx

@@ -1,24 +1,4 @@
-import { Link } from "expo-router";
+import JobsList from "../../components/jobs-list/jobs-list";
-import { StyleSheet, Text, View } from "react-native";
-
 export default function Tab() {
-  return (
+  return <JobsList />;
-    <View style={styles.container}>
-      <Text>Jobs Screen.</Text>
-      <Link
-        href={{ pathname: "/jobs/[jobId]", params: { jobId: 123 } }}
-        withAnchor
-      >
-        Go to detail
-      </Link>
-    </View>
-  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});

app/search/_layout.tsx

@@ -0,0 +1,24 @@
+import { Stack, useRouter } from "expo-router";
+
+export default function SearchLayout() {
+  const router = useRouter();
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Search",
+          headerSearchBarOptions: {
+            placement: "automatic",
+            placeholder: "Search",
+            onChangeText: (event) => {
+              router.setParams({
+                globalSearch: event?.nativeEvent?.text,
+              });
+            },
+          },
+        }}
+      />
+    </Stack>
+  );
+}

app/search/index.tsx

@@ -0,0 +1,12 @@
+import { useLocalSearchParams } from "expo-router";
+import { ScrollView } from "react-native";
+import { Text } from "react-native-paper";
+
+export default function SearchIndex() {
+  const { globalSearch } = useLocalSearchParams();
+  return (
+    <ScrollView>
+      <Text>Some search results here for: {globalSearch}</Text>
+    </ScrollView>
+  );
+}

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);