Feat: enable to filter codes table in Codelists (#771)

* create fields to search codes in table * enable cross search * factorize code * fix dict * upgrade names * make clearer --------- Co-authored-by: Vasseur Pierre <[email protected]>
InseeFr · Apr 19, 2024 · 2b20098 · 2b20098
1 parent e228b0a
commit 2b20098
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 49 deletions.
diff --git a/packages/codelists/src/apis/codelists-api.js b/packages/codelists/src/apis/codelists-api.js
@@ -35,6 +35,15 @@ const api = {
 		(res) => res.text(),
 	],
 	getCodesDetailedCodelist: (id, page) => [`detailed/${id}/codes?page=${page}`],
+	getCodesByCode: (id, value) => [
+		`detailed/${id}/codes?page=1&search=code:${value}`,
+	],
+	getCodesByLabel: (id, value) => [
+		`detailed/${id}/codes?page=1&search=labelLg1:${value}`,
+	],
+	getCodesByCodeAndLabel: (id, valueCode, valueLabel) => [
+		`detailed/${id}/codes?page=1&search=code:${valueCode}&search=labelLg1:${valueLabel}`,
+	],
 	getPartialsByParent: (parentCode) => [`partials/parent/${parentCode}`],
 	getCodelistsForSearch: () => ['search'],
 	getCodelistCode: (id, code) => [`${id}/code/${code}`],

diff --git a/packages/codelists/src/components/codelist-detail/codes-panel.js b/packages/codelists/src/components/codelist-detail/codes-panel.js
@@ -166,6 +166,27 @@ export const CodesCollapsiblePanel = ({ codelist, hidden, editable }) => {
 	const [codes, setCodes] = useState([]);
 	const [currentPage, setCurrentPage] = useState(1);
 
+	const [searchCode, setSearchCode] = useState('');
+	const [searchLabel, setSearchLabel] = useState('');
+
+	const handleSearch = (type, valueCode, valueLabel) => {
+		const [handledValue, otherValue, setSearch, getCodesBySearch] =
+			type === 'code'
+				? [valueCode, searchLabel, setSearchCode, API.getCodesByCode]
+				: [valueLabel, searchCode, setSearchLabel, API.getCodesByLabel];
+
+		setSearch(handledValue);
+		otherValue
+			? API.getCodesByCodeAndLabel(codelist.id, valueCode, valueLabel).then(
+					(cl) => {
+						setCodes(cl ?? {});
+					}
+			  )
+			: getCodesBySearch(codelist.id, handledValue).then((cl) => {
+					setCodes(cl ?? {});
+			  });
+	};
+
 	useEffect(() => {
 		if (currentPage > 0) {
 			API.getCodesDetailedCodelist(codelist.id, currentPage).then((cl) => {
@@ -281,6 +302,33 @@ export const CodesCollapsiblePanel = ({ codelist, hidden, editable }) => {
 				collapsible={false}
 				children={
 					<Fragment>
+						<Row>
+							<div className="col-md-6 form-group">
+								<label htmlFor="search-code">{D.codesSearchByCode}</label>
+								<input
+									type="text"
+									className="form-control"
+									id="search-code"
+									value={searchCode}
+									onChange={(e) =>
+										handleSearch('code', e.target.value, searchLabel)
+									}
+								/>
+							</div>
+							<div className="col-md-6 form-group">
+								<label htmlFor="search-label">{D.codesSearchByLabel}</label>
+								<input
+									type="text"
+									className="form-control"
+									id="search-label"
+									value={searchLabel}
+									onChange={(e) =>
+										handleSearch('label', searchCode, e.target.value)
+									}
+								/>
+							</div>
+						</Row>
+
 						<Table rowParams={rowParams} data={codesWithActions} />
 
 						{numberOfPages > 1 && (

diff --git a/packages/codelists/src/i18n/dictionary.js b/packages/codelists/src/i18n/dictionary.js
@@ -259,6 +259,14 @@ const dictionary = {
 		fr: 'Libellé...',
 		en: 'Label...',
 	},
+	codesSearchByCode: {
+		fr: 'Rechercher sur les codes :',
+		en: 'Search on codes :',
+	},
+	codesSearchByLabel: {
+		fr: 'Rechercher sur les libellés :',
+		en: 'Search on labels :',
+	},
 	//TODO find a solution in order to avoid this duplicated key
 	mandatoryProperty: {
 		fr: (propertyName) =>

diff --git a/packages/utilities/src/components/pagination/index.js b/packages/utilities/src/components/pagination/index.js
@@ -13,10 +13,10 @@ function checkInvalidPage(targetPage, listSize) {
 }
 
 const numberPerPageOptions = [
-	{value: 10, label: 10},
-	{value: 25, label: 25},
-	{value: 100, label: 100}
-	]
+	{ value: 10, label: 10 },
+	{ value: 25, label: 25 },
+	{ value: 100, label: 100 },
+];
 /**
  * Component used to display a pagination block for a list.
  *	itemEls: The list of item we want to paginate
@@ -26,21 +26,21 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 
 	const [numberPerPage, setNumberPerPage] = useState(10);
 	const paginationD = D.pagination || {};
-	const ariaLabel = number => `${paginationD.goTo} ${number}`;
+	const ariaLabel = (number) => `${paginationD.goTo} ${number}`;
 
 	const queryParams = queryString.parse(search);
 	let currentPage = parseInt(queryParams.page || '1', 10);
 
-	const url = document.URL
+	const url = document.URL;
 	useEffect(() => {
 		const search = new URL(url).searchParams;
 
-		if(search.has('perPage')){
+		if (search.has('perPage')) {
 			setNumberPerPage(parseInt(search.get('perPage'), 10));
 		}
-	}, [url])
+	}, [url]);
 
-	if (itemEls.length < (numberPerPage * (currentPage - 1))) {
+	if (itemEls.length < numberPerPage * (currentPage - 1)) {
 		currentPage = 1;
 	}
 	const indexOfLastItem = currentPage * numberPerPage;
@@ -61,22 +61,22 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 		return checkInvalidPage(targetPage, pageNumbers.length);
 	}
 
-	let pathnamePrefix = pathname + "?";
+	let pathnamePrefix = pathname + '?';
 	const searchParams = new URLSearchParams(window.location.search);
-	searchParams.delete("page");
+	searchParams.delete('page');
 	const queryParameters = searchParams.toString();
-	if (queryParameters !== "") {
-		pathnamePrefix += (queryParameters + "&");
+	if (queryParameters !== '') {
+		pathnamePrefix += queryParameters + '&';
 	}
 	const onItemPerPageChange = (option) => {
 		const searchParams = new URLSearchParams(window.location.search);
 		searchParams.set('perPage', option?.value);
-		history.replace(pathname + "?" + searchParams.toString());
-	}
+		history.replace(pathname + '?' + searchParams.toString());
+	};
 
 	const renderPageNumbers = pageNumbers
-		.filter(number => number - 3 < currentPage && number + 3 > currentPage)
-		.map(number => {
+		.filter((number) => number - 3 < currentPage && number + 3 > currentPage)
+		.map((number) => {
 			return (
 				<li className={isActivePage(number) ? 'active' : ''} key={number}>
 					<Link
@@ -95,7 +95,7 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 			<ul className="list-group">{currentItems}</ul>
 			{pageNumbers.length > 1 && (
 				<div>
-					<div className='col-md-3 pull-left wilco-pagination'>
+					<div className="col-md-3 pull-left wilco-pagination">
 						<ReactSelect
 							placeholder={D1.itemPerPagePlaceholder}
 							value={numberPerPageOptions.find(
@@ -106,7 +106,7 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 							clearable={false}
 						/>
 					</div>
-					<div className='col-md-9' style={ { padding: 0 }}>
+					<div className="col-md-9" style={{ padding: 0 }}>
 						<ul className={`wilco-pagination pull-right`}>
 							<li>
 								<Link
@@ -119,7 +119,9 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 							</li>
 							<li>
 								<Link
-									to={`${pathnamePrefix}page=${currentPage - 1}&perPage${numberPerPage}`}
+									to={`${pathnamePrefix}page=${
+										currentPage - 1
+									}&perPage${numberPerPage}`}
 									aria-label={ariaLabel(currentPage - 1)}
 									disabled={isDisabled(currentPage - 1)}
 								>
@@ -129,7 +131,9 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 							{renderPageNumbers}
 							<li>
 								<Link
-									to={`${pathnamePrefix}page=${currentPage + 1}&perPage${numberPerPage}`}
+									to={`${pathnamePrefix}page=${
+										currentPage + 1
+									}&perPage${numberPerPage}`}
 									aria-label={ariaLabel(currentPage + 1)}
 									disabled={isDisabled(currentPage + 1)}
 								>
@@ -139,7 +143,9 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 							<li>
 								<Link
 									aria-label={ariaLabel(pageNumbers[pageNumbers.length - 1])}
-									to={`${pathnamePrefix}page=${pageNumbers[pageNumbers.length - 1]}&perPage${numberPerPage}`}
+									to={`${pathnamePrefix}page=${
+										pageNumbers[pageNumbers.length - 1]
+									}&perPage${numberPerPage}`}
 									disabled={isDisabled(currentPage + 1)}
 								>
 									<span aria-hidden="true">&raquo;</span>
@@ -150,7 +156,7 @@ export const Index = ({ location: { pathname, search }, itemEls }) => {
 				</div>
 			)}
 		</Fragment>
-	)
+	);
 };
 
 Index.propTypes = {

diff --git a/packages/utilities/src/components/searchable-list/index.js b/packages/utilities/src/components/searchable-list/index.js
@@ -5,47 +5,43 @@ import Pagination from '../pagination';
 import { filterKeyDeburr, nbResults } from '../../utils/array-utils';
 import D from '../../i18n/build-dictionary';
 
-
-
 const useUrlQueryParameter = (key, defaultValue = '') => {
 	const history = useHistory();
 	const location = useLocation();
 
 	const [search, setSearch] = useState(defaultValue);
 
-	const url = document.URL
+	const url = document.URL;
 	useEffect(() => {
 		const searchQuery = new URL(url).searchParams;
 
-		if(searchQuery.has(key)){
+		if (searchQuery.has(key)) {
 			setSearch(searchQuery.get(key));
 		}
-	}, [url, key])
+	}, [url, key]);
 
-	const setValueToQueryParameters = value => {
+	const setValueToQueryParameters = (value) => {
 		const searchParams = new URLSearchParams(window.location.search);
 		searchParams.set('search', value);
-		history.replace(location.pathname + "?" + searchParams.toString());
-	}
-	return [search, setValueToQueryParameters]
-}
-
-const SearchableList = ({
-													items = [],
-													advancedSearch = false,
-													searchUrl,
-													placeholder,
-													childPath,
-													col,
-													colOff,
-													label,
-													autoFocus,
-													itemFormatter = (content) => content,
-												}) => {
-
-	const [search, handleSearch] = useUrlQueryParameter('search')
+		history.replace(location.pathname + '?' + searchParams.toString());
+	};
 
+	return [search, setValueToQueryParameters];
+};
 
+const SearchableList = ({
+	items = [],
+	advancedSearch = false,
+	searchUrl,
+	placeholder,
+	childPath,
+	col,
+	colOff,
+	label,
+	autoFocus,
+	itemFormatter = (content) => content,
+}) => {
+	const [search, handleSearch] = useUrlQueryParameter('search');
 
 	const filter = filterKeyDeburr(
 		Object.keys(items[0] || {}).filter((k) => k !== 'id')
@@ -95,7 +91,7 @@ const SearchableList = ({
 				</div>
 			)}
 			<p aria-live="assertive">{nbResults(hits, D.results, D.result)}</p>
-			<Pagination itemEls={hitEls} itemsPerPage="10"/>
+			<Pagination itemEls={hitEls} itemsPerPage="10" />
 		</div>
 	);
 };