feat(ui): Add filter about publications types

dataesr · Oct 23, 2023 · 080ceee · 080ceee
1 parent c35f801
commit 080ceee
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/client/src/pages/home/index.jsx b/client/src/pages/home/index.jsx
@@ -103,18 +103,22 @@ const getData = async (options) => {
 };
 
 export default function Home() {
+  const [affiliationsNotice, setAffiliationsNotice] = useState(true);
   const [allAffiliations, setAllAffiliations] = useState([]);
   const [allDatasets, setAllDatasets] = useState([]);
   const [allPublications, setAllPublications] = useState([]);
   const [filteredDatasources, setFilteredDatasources] = useState(DATASOURCES.map((datasource) => datasource.key));
   const [filteredFosmIdentifiers, setFilteredFosmIdentifiers] = useState(FOSM_IDENTIFIERS);
+  const [filteredPublications, setFilteredPublications] = useState([]);
+  const [filteredTypes, setFilteredTypes] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [options, setOptions] = useState({});
   const [regexp, setRegexp] = useState();
   const [selectedAffiliations, setSelectedAffiliations] = useState([]);
   const [selectedDatasets, setSelectedDatasets] = useState([]);
   const [selectedPublications, setSelectedPublications] = useState([]);
-  const [affiliationsNotice, setAffiliationsNotice] = useState(true);
+  const [types, setTypes] = useState([]);
+
   const { data, isFetching, refetch } = useQuery({
     queryKey: ['data'],
     queryFn: () => getData(options),
@@ -215,7 +219,6 @@ export default function Home() {
           status: STATUS_TO_BE_DECIDED,
         }));
       allPublicationsTmp = data.publications
-        .filter((publication) => filteredDatasources.includes(publication.datasource) && ((!publication.datasource.includes('bso')) || (publication?.external_ids.map((id) => id.id_type).every((type) => filteredFosmIdentifiers.includes(type)))))
         .map((publication) => ({
           ...publication,
           affiliationsHtml: getAffiliationsHtmlField(publication, regexp),
@@ -228,7 +231,16 @@ export default function Home() {
     }
     setAllDatasets(allDatasetsTmp);
     setAllPublications(allPublicationsTmp);
-  }, [data, filteredDatasources, filteredFosmIdentifiers, regexp]);
+    const allTypes = [...new Set(allPublicationsTmp.map((publication) => publication?.type))];
+    setTypes(allTypes);
+    setFilteredTypes(allTypes);
+    setFilteredPublications(allPublicationsTmp);
+  }, [data, regexp]);
+
+  useEffect(() => {
+    const tmp = allPublications.filter((publication) => filteredDatasources.includes(publication.datasource) && ((!publication.datasource.includes('bso')) || (publication?.external_ids.map((id) => id.id_type).every((type) => filteredFosmIdentifiers.includes(type)))) && filteredTypes.includes(publication.type));
+    setFilteredPublications(tmp);
+  }, [allPublications, filteredDatasources, filteredFosmIdentifiers, filteredTypes]);
 
   useEffect(() => {
     groupByAffiliations(allPublications, regexp);
@@ -343,6 +355,14 @@ export default function Home() {
     }
   };
 
+  const onTypesChange = (type) => {
+    if (filteredTypes.includes(type)) {
+      setFilteredTypes(filteredTypes.filter((filteredType) => filteredType !== type));
+    } else {
+      setFilteredTypes(filteredTypes.concat([type]));
+    }
+  };
+
   return (
     <>
       <Container className="fr-my-5w" as="section" fluid>
@@ -449,10 +469,24 @@ export default function Home() {
                       />
                     ))}
                   </CheckboxGroup>
+                  <CheckboxGroup
+                    hint="Filter results on selected types"
+                    legend="Types"
+                  >
+                    {types.map((type) => (
+                      <Checkbox
+                        checked={filteredTypes.includes(type)}
+                        key={type}
+                        label={type}
+                        onChange={() => onTypesChange(type)}
+                        size="sm"
+                      />
+                    ))}
+                  </CheckboxGroup>
                 </Col>
                 <Col>
                   <WorksView
-                    allPublications={allPublications}
+                    allPublications={filteredPublications}
                     selectedPublications={selectedPublications}
                     setSelectedPublications={setSelectedPublications}
                   />

diff --git a/client/src/pages/home/views/works.jsx b/client/src/pages/home/views/works.jsx
@@ -8,7 +8,6 @@ import {
   authorsTemplate,
   statusFilterTemplate,
   statusTemplate,
-  typeFilterTemplate,
 } from '../../../utils/templates';
 
 export default function WorksView({
@@ -40,7 +39,7 @@ export default function WorksView({
       <Column field="status" header="Status" body={statusTemplate} filter showFilterMenu={false} filterElement={statusFilterTemplate} style={{ minWidth: '10px' }} />
       <Column field="allIdsHtml" header="Ids" body={allIdsTemplate} filter filterMatchMode="contains" filterPlaceholder="Search by id" />
       <Column field="datasource" header="Source" />
-      <Column field="type" header="Type" filter showFilterMenu={false} filterElement={typeFilterTemplate} filterMatchMode="equals" />
+      <Column field="type" header="Type" />
       <Column field="affiliationsHtml" header="Affiliations" body={affiliationsTemplate} filter filterField="affiliationsSearch" filterMatchMode="contains" filterPlaceholder="Search by affiliation" style={{ minWidth: '300px' }} />
       <Column field="authorsHtml" header="Authors" body={authorsTemplate} filter filterMatchMode="contains" filterPlaceholder="Search by author" style={{ minWidth: '10px' }} />
       <Column field="title" header="Title" filter filterMatchMode="contains" showFilterMenu={false} filterPlaceholder="Search by title" style={{ minWidth: '10px' }} />

diff --git a/client/src/utils/templates.jsx b/client/src/utils/templates.jsx
@@ -111,18 +111,6 @@ const statusFilterTemplate = (options) => (
   />
 );
 
-const typeFilterTemplate = (options) => (
-  <Dropdown
-    className="p-column-filter"
-    onChange={(e) => options.filterApplyCallback(e.value)}
-    options={['book-chapter', 'comm', 'dataset', 'image', 'journal-article', 'other', 'physicalobject', 'preprint', 'proceedings-article', 'text', 'thesis']}
-    placeholder="Type"
-    style={{ width: '5rem', overflow: 'scroll' }}
-    showClear
-    value={options.value}
-  />
-);
-
 export {
   affiliationsTemplate,
   allIdsTemplate,
@@ -136,5 +124,4 @@ export {
   nameTemplate,
   statusFilterTemplate,
   statusTemplate,
-  typeFilterTemplate,
 };