diff --git a/src/apps/advanced-search/AdvancedSearch.tsx b/src/apps/advanced-search/AdvancedSearch.tsx index 072632736..16994c68a 100644 --- a/src/apps/advanced-search/AdvancedSearch.tsx +++ b/src/apps/advanced-search/AdvancedSearch.tsx @@ -2,7 +2,10 @@ import React, { useEffect, useState } from "react"; import { useEffectOnce } from "react-use"; import AdvancedSearchHeader from "./AdvancedSearchHeader"; import AdvancedSearchResult from "./AdvancedSearchResults"; -import { translateSearchObjectToCql } from "./helpers"; +import { + commaSeparatedStringToArray, + translateSearchObjectToCql +} from "./helpers"; import { AdvancedSearchQuery } from "./types"; import { getUrlQueryParam, @@ -30,10 +33,11 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { const [executedQuery, setExecutedQuery] = useState(null); const [locationFilter, setLocationFilter] = useState({}); + const handleLocationChange = (location: string) => { setLocationFilter((prevFilter) => ({ ...prevFilter, - location: [location] + location: commaSeparatedStringToArray(location) })); if (location) { setQueryParametersInUrl({ location }); @@ -41,10 +45,11 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { removeQueryParametersFromUrl("location"); } }; + const handleSublocationChange = (sublocation: string) => { setLocationFilter((prevFilter) => ({ ...prevFilter, - sublocation: [sublocation] + sublocation: commaSeparatedStringToArray(sublocation) })); if (sublocation) { setQueryParametersInUrl({ sublocation }); @@ -98,7 +103,7 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { if (locationParam) { setLocationFilter((prevFilter) => ({ ...prevFilter, - location: [locationParam] + location: commaSeparatedStringToArray(locationParam) })); } @@ -106,7 +111,7 @@ const AdvancedSearch: React.FC = ({ pageSize }) => { if (sublocationParam) { setLocationFilter((prevFilter) => ({ ...prevFilter, - sublocation: [sublocationParam] + sublocation: commaSeparatedStringToArray(sublocationParam) })); } }); diff --git a/src/apps/advanced-search/AdvancedSearchResults.tsx b/src/apps/advanced-search/AdvancedSearchResults.tsx index e44b23bb9..ed0ce6b8f 100644 --- a/src/apps/advanced-search/AdvancedSearchResults.tsx +++ b/src/apps/advanced-search/AdvancedSearchResults.tsx @@ -70,8 +70,10 @@ const AdvancedSearchResult: React.FC = ({ filters: { branchId: cleanBranches, status: onShelf ? [HoldingsStatus.OnShelf] : [], - ...(locationFilter?.location && { location: locationFilter.location }), - ...(locationFilter?.sublocation && { + ...(locationFilter?.location?.length && { + location: locationFilter.location + }), + ...(locationFilter?.sublocation?.length && { sublocation: locationFilter.sublocation }) } diff --git a/src/apps/advanced-search/CqlSearchHeader.tsx b/src/apps/advanced-search/CqlSearchHeader.tsx index 12e69bd9a..0ca9de982 100644 --- a/src/apps/advanced-search/CqlSearchHeader.tsx +++ b/src/apps/advanced-search/CqlSearchHeader.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useText } from "../../core/utils/text"; import CheckBox from "../../components/checkbox/Checkbox"; import TextInput from "../../components/atoms/input/TextInput"; @@ -33,6 +33,31 @@ const CqlSearchHeader: React.FC = ({ } }, [initialCql, setCql]); + // Local state is needed to track input values as plain strings, + // since onLocationChange expects a comma-separated string, + // while locationFilter location and sublocation are provided as arrays. + const [inputValues, setInputValues] = useState({ + location: locationFilter?.location?.join(", ") ?? "", + sublocation: locationFilter?.sublocation?.join(", ") ?? "" + }); + + const handleInputChange = ( + name: "location" | "sublocation", + value: string + ) => { + setInputValues((prevValues) => ({ + ...prevValues, + [name]: value + })); + + if (name === "location") { + onLocationChange(value); + } + if (name === "sublocation") { + onSublocationChange(value); + } + }; + return ( <>

= ({ id="location" label="Location" type="text" - onChange={(location) => onLocationChange(location)} - value={locationFilter?.location?.[0] ?? ""} + onChange={(location) => handleInputChange("location", location)} + value={inputValues.location} /> onSublocationChange(sublocation)} - value={locationFilter?.sublocation?.[0] ?? ""} + onChange={(sublocation) => + handleInputChange("sublocation", sublocation) + } + value={inputValues.sublocation} /> { + return input + .split(",") + .map((s) => s.trim()) + .filter((s) => s.length > 0); +}; + export default {};