Minor cleanup and add KeyboardAvoidingView to global search.

This commit is contained in:
Patrick Fic
2025-10-29 10:22:31 -07:00
parent 9c5ee8ed16
commit 0ae416cc90
12 changed files with 129 additions and 51 deletions

View File

@@ -639,6 +639,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>status</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>
</folder_node>
<folder_node>

View File

@@ -3,7 +3,7 @@ import { useLocalSearchParams } from "expo-router";
import debounce from "lodash/debounce";
import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { FlatList, View } from "react-native";
import { FlatList, KeyboardAvoidingView, Platform } from "react-native";
import { ActivityIndicator, Icon, Text } from "react-native-paper";
import env from "../../env";
import ErrorDisplay from "../error/error-display";
@@ -40,7 +40,7 @@ export default function GlobalSearch() {
const [error, setError] = useState(null);
const [results, setResults] = useState([]);
const { t } = useTranslation();
// Placeholder: Replace with actual API call (e.g., Apollo client query, REST fetch, Redux saga dispatch)
const performSearch = useCallback(async (query) => {
// Defensive trimr
const q = (query || "").trim();
@@ -57,7 +57,7 @@ export default function GlobalSearch() {
?.filter((hit) => hit._index === "jobs")
.map((hit) => hit._source);
setResults(jobResults);
setResults([...jobResults, { id: "footer-spacer", height: 128 }]);
} else {
setError("No results available. Try again.");
}
@@ -79,23 +79,35 @@ export default function GlobalSearch() {
if (globalSearch === undefined || globalSearch.trim() === "") {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Icon size={64} source="cloud-search" />
<Text variant="bodyMedium" style={{ margin: 12, textAlign: "center" }}>
{t("globalsearch.labels.entersearch")}
</Text>
</View>
</KeyboardAvoidingView>
);
}
return (
<View style={{ flex: 1 }}>
{loading && <ActivityIndicator size="large" />}
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
{loading && <ActivityIndicator size="large" style={{ margin: 24 }} />}
{error && <ErrorDisplay errorMessage={error} />}
{!loading && (
<Text variant="titleSmall" style={{ margin: 12, alignSelf: "center" }}>
{results.length} results found
</Text>
)}
<FlatList
style={{ flex: 1 }}
@@ -103,6 +115,6 @@ export default function GlobalSearch() {
keyExtractor={(item) => item.id?.toString()}
renderItem={(object) => <JobListItem item={object.item} />}
/>
</View>
</KeyboardAvoidingView>
);
}

View File

@@ -3,10 +3,16 @@ import { useQuery } from "@apollo/client";
import { AntDesign } from "@expo/vector-icons";
import { useGlobalSearchParams } from "expo-router";
import { DateTime } from "luxon";
import React, { useCallback, useState } from "react";
import React, { memo, useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, View } from "react-native";
import { ActivityIndicator, Button, Card, Text } from "react-native-paper";
import {
ActivityIndicator,
Button,
Card,
Divider,
Text,
} from "react-native-paper";
import ErrorDisplay from "../error/error-display";
import NewNoteModal from "./new-note-modal";
@@ -33,17 +39,41 @@ export default function JobNotes() {
return refetch();
};
const job = data?.jobs_by_pk;
// Memoized list data (only when job & notes exist)
const listData = useMemo(() => {
if (!job?.notes) return [];
const notes = job.notes;
const pinnedNotes = [];
const otherNotes = [];
for (const n of notes) {
(n.pinned ? pinnedNotes : otherNotes).push(n);
}
pinnedNotes.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
otherNotes.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
const DIVIDER_ID = "__divider__";
return pinnedNotes.length > 0 && otherNotes.length > 0
? [...pinnedNotes, { id: DIVIDER_ID, type: "divider" }, ...otherNotes]
: [...pinnedNotes, ...otherNotes];
}, [job?.notes]);
const keyExtractor = useCallback((item) => item.id, []);
const renderItem = useCallback(
({ item }) =>
item.type === "divider" ? <DividerItem /> : <NoteListItem item={item} />,
[]
);
if (loading) {
return <ActivityIndicator size="large" style={{ flex: 1 }} />;
}
if (error) {
return <ErrorDisplay message={JSON.stringify(error?.message)} />;
}
if (!data?.jobs_by_pk) {
if (!job) {
return <ErrorDisplay errorMessage={"Job is not defined."} />;
}
const job = data.jobs_by_pk;
return (
<View style={{ flex: 1, display: "flex" }}>
@@ -55,7 +85,7 @@ export default function JobNotes() {
>
{t("jobdetail.actions.addnote")}
</Button>
{job.notes.length === 0 ? (
{listData.length === 0 ? (
<Card>
<Card.Content>
<Text>{t("jobdetail.labels.nojobnotes")}</Text>
@@ -67,8 +97,13 @@ export default function JobNotes() {
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
style={{ flex: 1 }}
data={job.notes}
renderItem={(object) => <NoteListItem item={object.item} />}
data={listData}
keyExtractor={keyExtractor}
renderItem={renderItem}
removeClippedSubviews
initialNumToRender={12}
maxToRenderPerBatch={8}
windowSize={7}
/>
)}
<NewNoteModal
@@ -82,7 +117,7 @@ export default function JobNotes() {
);
}
function NoteListItem({ item }) {
const NoteListItem = memo(function NoteListItem({ item }) {
return (
<Card style={{ margin: 8 }}>
<Card.Content>
@@ -90,26 +125,20 @@ function NoteListItem({ item }) {
<Text>{item.text}</Text>
<View
style={{
flexDirection: "column",
flexDirection: "row",
alignSelf: "flex-end",
alignItems: "center",
gap: 8,
}}
>
{item.pinned && (
<AntDesign name="pushpin" size={24} color="dodgerblue" />
)}
{item.private && (
<AntDesign
name="eye-invisible"
style={{ margin: 4 }}
size={24}
color="black"
/>
<AntDesign name="eye-invisible" size={24} color="black" />
)}
{item.critical && (
<AntDesign
name="warning"
style={{ margin: 4 }}
size={24}
color="tomato"
/>
<AntDesign name="warning" size={24} color="tomato" />
)}
<Text style={{ fontSize: 12 }}>{item.created_by}</Text>
<Text style={{ fontSize: 12 }}>
@@ -122,4 +151,8 @@ function NoteListItem({ item }) {
</Card.Content>
</Card>
);
}
});
const DividerItem = memo(function DividerItem() {
return <Divider bold style={{ margin: 12 }} />;
});

View File

@@ -124,7 +124,7 @@ const NewNoteModal = ({
type: values.type,
created_by: currentUser?.email,
};
console.log("*** ~ handleSubmit ~ noteInput:", noteInput);
// TODO: If backend supports attaching note to multiple related ROs, perform additional mutation(s)
// here after creating the base note. This may involve an insert into a join table like note_jobs.
// values.relatedros contains boolean flags keyed by job id.
@@ -272,7 +272,12 @@ const NewNoteModal = ({
{ paddingBottom: Math.max(insets.bottom, 12) },
]}
>
<Button onPress={onDismiss} mode="text">
<Button
onPress={onDismiss}
mode="text"
disabled={loading}
icon="close"
>
{t("general.actions.cancel")}
</Button>
<Button
@@ -280,6 +285,7 @@ const NewNoteModal = ({
mode="contained"
loading={loading}
disabled={loading || !values.text.trim()}
icon="plus"
>
{existingNote
? t("general.actions.save")
@@ -361,6 +367,7 @@ const styles = StyleSheet.create({
flexDirection: "row",
justifyContent: "flex-end",
marginTop: 16,
gap: 12,
},
scrollContent: {
// paddingBottom: 24,

View File

@@ -107,6 +107,7 @@ export const JobStatusSelector = ({
const styles = StyleSheet.create({
root: {
alignSelf: "flex-start",
paddingTop: 4,
},
trigger: {
minWidth: 140,

View File

@@ -107,7 +107,7 @@ function JobTombstone({ bodyshop }) {
<JobStatusSelector
statuses={availableStatuses}
currentStatus={job.status}
label={t("jobdetail.labels.jobstatus")}
label={t("jobdetail.labels.status")}
/>
}
/>

View File

@@ -43,7 +43,7 @@ function JobListItemComponent({ openImagePicker, item }) {
const roNumber = item.ro_number || t("general.labels.na");
if (item.id === "footer-spacer") {
return <View style={{ height: 64 }} />;
return <View style={{ height: item.height || 64 }} />;
}
return (
<Pressable
@@ -76,7 +76,6 @@ function JobListItemComponent({ openImagePicker, item }) {
</View>
</View>
<View style={styles.body}>
{!!vehicle && (
<Text
variant="bodyMedium"
numberOfLines={1}
@@ -84,7 +83,7 @@ function JobListItemComponent({ openImagePicker, item }) {
>
{vehicle}
</Text>
)}
<Chip style>{item.status}</Chip>
</View>
</View>

View File

@@ -136,6 +136,7 @@ function Tab({ bodyshop, currentUser, signOutStart }) {
<Card.Actions>
<Button
icon="bell-outline"
disabled={permissionState?.granted === true}
onPress={async () => {
try {
await registerForPushNotificationsAsync();

View File

@@ -1,4 +1,4 @@
import gql from "graphql-tag";
import { gql } from "graphql-tag";
export const QUERY_ALL_ACTIVE_JOBS = gql`
query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!) {
@@ -208,6 +208,7 @@ export const GET_JOB_BY_PK = gql`
text
critical
private
pinned
created_at
updated_at
created_by

View File

@@ -46,7 +46,8 @@
"lines_price": "$",
"lines_qty": "Qty.",
"nojobnotes": "There are no notes.",
"notes": "Notes"
"notes": "Notes",
"status": "Status"
},
"lbr_types": {
"LA1": "LA1",

View File

@@ -46,7 +46,8 @@
"lines_price": "",
"lines_qty": "",
"nojobnotes": "",
"notes": ""
"notes": "",
"status": ""
},
"lbr_types": {
"LA1": "",

View File

@@ -46,7 +46,8 @@
"lines_price": "",
"lines_qty": "",
"nojobnotes": "",
"notes": ""
"notes": "",
"status": ""
},
"lbr_types": {
"LA1": "",