feature/IO-3499-React-19: Bug Fixes / Checkpoint
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user