Minor cleanup and add KeyboardAvoidingView to global search.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 }} />;
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -107,6 +107,7 @@ export const JobStatusSelector = ({
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
alignSelf: "flex-start",
|
||||
paddingTop: 4,
|
||||
},
|
||||
trigger: {
|
||||
minWidth: 140,
|
||||
|
||||
@@ -107,7 +107,7 @@ function JobTombstone({ bodyshop }) {
|
||||
<JobStatusSelector
|
||||
statuses={availableStatuses}
|
||||
currentStatus={job.status}
|
||||
label={t("jobdetail.labels.jobstatus")}
|
||||
label={t("jobdetail.labels.status")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -136,6 +136,7 @@ function Tab({ bodyshop, currentUser, signOutStart }) {
|
||||
<Card.Actions>
|
||||
<Button
|
||||
icon="bell-outline"
|
||||
disabled={permissionState?.granted === true}
|
||||
onPress={async () => {
|
||||
try {
|
||||
await registerForPushNotificationsAsync();
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -46,7 +46,8 @@
|
||||
"lines_price": "$",
|
||||
"lines_qty": "Qty.",
|
||||
"nojobnotes": "There are no notes.",
|
||||
"notes": "Notes"
|
||||
"notes": "Notes",
|
||||
"status": "Status"
|
||||
},
|
||||
"lbr_types": {
|
||||
"LA1": "LA1",
|
||||
|
||||
@@ -46,7 +46,8 @@
|
||||
"lines_price": "",
|
||||
"lines_qty": "",
|
||||
"nojobnotes": "",
|
||||
"notes": ""
|
||||
"notes": "",
|
||||
"status": ""
|
||||
},
|
||||
"lbr_types": {
|
||||
"LA1": "",
|
||||
|
||||
@@ -46,7 +46,8 @@
|
||||
"lines_price": "",
|
||||
"lines_qty": "",
|
||||
"nojobnotes": "",
|
||||
"notes": ""
|
||||
"notes": "",
|
||||
"status": ""
|
||||
},
|
||||
"lbr_types": {
|
||||
"LA1": "",
|
||||
|
||||
Reference in New Issue
Block a user