feat: DocumentFilter labelling

Allow for default and custom labelling of DocumentFilters. Also added centralised "core documents" and "supplementary documents" labels as we use those terms in multiple modules ERM-3332
folio-org · Oct 21, 2024 · b3d0534 · b3d0534
1 parent bd1658e
commit b3d0534
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git a/lib/DocumentFilter/DocumentFilter.js b/lib/DocumentFilter/DocumentFilter.js
@@ -14,9 +14,15 @@ import {
 
 import DocumentFilterForm from './DocumentFilterForm';
 
-const DocumentFilter = ({ activeFilters, atTypeValues = [], filterHandlers, filterName = }) => {
+const DocumentFilter = ({
+  activeFilters,
+  atTypeValues = [],
+  filterLabel,
+  filterModalProps = {},
+  filterHandlers,
+  filterName = 'docs'
+}) => {
   // atTypeValues are only passed for SupplementaryDocumentFilter
-  const filterType = atTypeValues.length > 0 ? 'supplementaryDocuments' : 'documents';
   const [editingFilters, setEditingFilters] = useState(false);
   const openEditModal = () => setEditingFilters(true);
   const closeEditModal = () => setEditingFilters(false);
@@ -55,7 +61,7 @@ const DocumentFilter = ({ activeFilters, atTypeValues = [], filterHandlers, filt
     return [];
   };
 
-  const parsedFilterData = parseQueryString(activeFilters?.[filterType] || []);
+  const parsedFilterData = parseQueryString(activeFilters?.[filterName] || []);
 
   const handleSubmit = (values) => {
     // In order to convert the form values into the shape for them to be deparsed we do the inverse of the above
@@ -84,7 +90,7 @@ const DocumentFilter = ({ activeFilters, atTypeValues = [], filterHandlers, filt
 
     filterHandlers.state({
       ...activeFilters,
-      [filterType]: [
+      [filterName]: [
         // Currently the deparse function returns a query string containing whitespace which leads to grouping errors
         // This regex removes all whitespace from the querystring
         deparseKiwtQueryFilters(kiwtQueryShape),
@@ -98,9 +104,10 @@ const DocumentFilter = ({ activeFilters, atTypeValues = [], filterHandlers, filt
       closedByDefault
       displayClearButton={!!parsedFilterData?.length}
       header={FilterAccordionHeader}
-      id={`clickable-agreement-${filterType}-filter`}
-      label={<FormattedMessage id={`stripes-erm-components.documentFilter.${filterType}`} />}
-      onClearFilter={() => filterHandlers.state({ ...activeFilters, [filterType]: [] })
+      id={`clickable-agreement-${filterName}-filter`}
+      // TODO ADD WAY TO LABEL THIS
+      label={filterLabel ?? <FormattedMessage id="stripes-erm-components.documentFilter.documents" />}
+      onClearFilter={() => filterHandlers.state({ ...activeFilters, [filterName]: [] })
       }
       separator={false}
     >
@@ -115,6 +122,8 @@ const DocumentFilter = ({ activeFilters, atTypeValues = [], filterHandlers, filt
       <DocumentFilterForm
         atTypeValues={atTypeValues}
         editingFilters={editingFilters}
+        filterModalProps={filterModalProps}
+        filterName={filterName}
         filters={parsedFilterData}
         handlers={{
           closeEditModal,

diff --git a/lib/DocumentFilter/DocumentFilterForm.js b/lib/DocumentFilter/DocumentFilterForm.js
@@ -8,11 +8,12 @@ import DocumentFilterFieldArray from './DocumentFilterFieldArray';
 const DocumentFilterForm = ({
   atTypeValues,
   editingFilters,
+  filterModalProps,
+  filterName,
   filters,
   handlers: { openEditModal, closeEditModal },
   onSubmit,
 }) => {
-  const filterBuilder = atTypeValues.length > 0 ? 'supplementaryDocumentFilterBuilder' : 'coreDocumentFilterBuilder';
   return (
     <>
       <Button onClick={openEditModal}>
@@ -25,10 +26,11 @@ const DocumentFilterForm = ({
         modalProps={{
           dismissible: true,
           enforceFocus: false,
-          label: <FormattedMessage id={`stripes-erm-components.documentFilter.${filterBuilder}`} />,
+          label: <FormattedMessage id="stripes-erm-components.documentFilter.documentFilterBuilder" />,
           onClose: closeEditModal,
           open: editingFilters,
           size: 'medium',
+          ...filterModalProps
         }}
         mutators={{ ...arrayMutators }}
         onSubmit={onSubmit}
@@ -42,6 +44,8 @@ const DocumentFilterForm = ({
 DocumentFilterForm.propTypes = {
   atTypeValues: PropTypes.arrayOf(PropTypes.object),
   editingFilters: PropTypes.bool,
+  filterModalProps: PropTypes.object.isRequired,
+  filterName: PropTypes.string.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object),
   handlers: PropTypes.shape({
     closeEditModal: PropTypes.func.isRequired,

diff --git a/translations/stripes-erm-components/en.json b/translations/stripes-erm-components/en.json
@@ -203,12 +203,14 @@
   "doc.error.docsMustHaveLocationOrURL": "Each document must specify a file, location, or URL.",
   "url.error.invalidURL": "Please enter a valid URL (including \"http\" or \"https\").",
   "url.error.invalidSize": "The URL may only be {size} characters long",
-  "documentFilter.documents": "Core documents",
-  "documentFilter.supplementaryDocuments": "Supplementary documents",
+  "documentFilter.filterName.coreDocuments": "Core documents",
+  "documentFilter.filterName.supplementaryDocuments": "Supplementary documents",
+  "documentFilter.filterBuilder.coreDocuments": "Core document filter builder",
+  "documentFilter.filterBuilder.supplementaryDocuments": "Supplementary document filter builder",
+  "documentFilter.documents": "Documents",
   "documentFilter.filtersApplied": "{filtersLength} document filters applied",
   "documentFilter.editDocumentFilters": "Edit document filters",
-  "documentFilter.supplementaryDocumentFilterBuilder": "Supplementary document filter builder",
-  "documentFilter.coreDocumentFilterBuilder": "Core document filter builder",
+  "documentFilter.documentFilterBuilder": "Document filter builder",
   "documentFilter.deleteFilterIndex": "Delete filter {number}",
   "documentFilter.documentFilterIndex": "Document filter {number}",
   "documentFilter.addFilter": "Add filter",

diff --git a/translations/stripes-erm-components/en_US.json b/translations/stripes-erm-components/en_US.json
@@ -223,12 +223,14 @@
     "export": "Export",
     "errorLog": "Error log",
     "infoLog": "Info log",
-    "documentFilter.documents": "Core documents",
-    "documentFilter.supplementaryDocuments": "Supplementary documents",
+    "documentFilter.filterName.coreDocuments": "Core documents",
+    "documentFilter.filterName.supplementaryDocuments": "Supplementary documents",
+    "documentFilter.filterBuilder.coreDocuments": "Core document filter builder",
+    "documentFilter.filterBuilder.supplementaryDocuments": "Supplementary document filter builder",
+    "documentFilter.documents": "Documents",
     "documentFilter.filtersApplied": "{filtersLength} document filters applied",
     "documentFilter.editDocumentFilters": "Edit document filters",
-    "documentFilter.supplementaryDocumentFilterBuilder": "Supplementary document filter builder",
-    "documentFilter.coreDocumentFilterBuilder": "Core document filter builder",
+    "documentFilter.documentFilterBuilder": "Document filter builder",
     "documentFilter.deleteFilterIndex": "Delete filter {number}",
     "documentFilter.documentFilterIndex": "Document filter {number}",
     "documentFilter.addFilter": "Add filter",