feature/IO-3499-React-19: Bug Fixes / Checkpoint

This commit is contained in:
Dave
2026-01-13 22:28:43 -05:00
parent 7bdfbfabe9
commit 53d556a621
171 changed files with 1128 additions and 954 deletions

View File

@@ -2,7 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
import { useLazyQuery } from "@apollo/client/react";
import { Select, Space, Spin, Tag } from "antd";
import _ from "lodash";
import { forwardRef, useEffect, useState } from "react";
import { forwardRef, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import AlertComponent from "../alert/alert.component";
@@ -16,33 +16,45 @@ const JobSearchSelect = (
) => {
const { t } = useTranslation();
const [theOptions, setTheOptions] = useState([]);
const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_JOBS_FOR_AUTOCOMPLETE, {});
const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_JOBS_FOR_AUTOCOMPLETE);
const [callIdSearch, { loading: idLoading, error: idError, data: idData }] = useLazyQuery(
SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE
);
const executeSearch = (v) => {
if (v && v.variables?.search !== "" && v.variables.search.length >= 2) callSearch(v);
};
const debouncedExecuteSearch = _.debounce(executeSearch, 500);
const debouncedExecuteSearch = useMemo(() => {
return _.debounce((value) => {
if (value == null || value === "" || value.length < 2) return;
const variables = {
search: value,
...(convertedOnly || notExported
? {
...(convertedOnly ? { isConverted: true } : {}),
...(notExported ? { notExported: true } : {}),
...(notInvoiced ? { notInvoiced: true } : {})
}
: {})
};
callSearch({ variables });
}, 500);
}, [callSearch, convertedOnly, notExported, notInvoiced]);
useEffect(() => {
return () => {
debouncedExecuteSearch.cancel();
};
}, [debouncedExecuteSearch]);
const handleSearch = (value) => {
debouncedExecuteSearch({
search: value,
...(convertedOnly || notExported
? {
...(convertedOnly ? { isConverted: true } : {}),
...(notExported ? { notExported: true } : {}),
...(notInvoiced ? { notInvoiced: true } : {})
}
: {})
});
debouncedExecuteSearch(value);
};
useEffect(() => {
// Keep OLD "truthy" semantics (only fetch by id when value is truthy)
if (restProps.value) {
callIdSearch({ id: restProps.value }); // Sometimes results in a no-op. Not sure how to fix.
callIdSearch({ variables: { id: restProps.value } });
}
}, [restProps.value, callIdSearch]);
@@ -58,6 +70,7 @@ const JobSearchSelect = (
return (
<div>
<Select
{...restProps}
ref={ref}
disabled={disabled}
showSearch={{
@@ -65,25 +78,19 @@ const JobSearchSelect = (
onSearch: handleSearch
}}
autoFocus
allowClear={!loading}
style={{
width: "100%"
}}
//loading={loading || idLoading}
suffixIcon={(loading || idLoading) && <Spin />}
notFoundContent={loading ? <LoadingOutlined /> : null}
{...restProps}
allowClear={!loading} // matches OLD
style={{ width: "100%" }}
suffixIcon={(loading || idLoading) && <Spin />} // matches OLD spinner semantics
notFoundContent={loading ? <LoadingOutlined /> : null} // matches OLD (loading only)
>
{theOptions
? theOptions.map((o) => (
<Option key={o.id} value={o.id} status={o.status}>
<Space align="center">
<span>
{`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
o.ro_number || t("general.labels.na")
} | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
o.v_model_desc || ""
}`}
{`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${o.ro_number || t("general.labels.na")} | ${OwnerNameDisplayFunction(
o
)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
</span>
<Tag>
<strong>{o.status}</strong>
@@ -99,4 +106,5 @@ const JobSearchSelect = (
</div>
);
};
export default forwardRef(JobSearchSelect);