Add liquid search & jobs list.

2025-10-08 12:53:58 -07:00
parent 091606f1ca
commit 820da94a9f
8 changed files with 208 additions and 27 deletions
--- a/components/jobs-list/jobs-list.jsx
+++ b/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);