UIREQMED-3: Add Search field for Mediated requests activity page

Author: Dmitriy-Litvinenko

CHANGELOG.md

@@ -5,6 +5,8 @@
 * Add landing page actions: Confirm item arrival, Mediated requests activities and Send item in transit. Refs UIREQMED-2.
 * Hide permission that should not be visible. Refs UIREQMED-20.
 * Add caret to `react` peer dependency. Refs UIREQMED-23.
+* Add Search field for Mediated requests activity page. Refs UIREQMED-3.
+* Add Filters for Mediated requests actions page. Refs UIREQMED-4.
 
 ## 1.0.0
 * New app created with stripes-cli. Updated module after created with stripes-cli. Refs UIREQMED-1.

package.json

@@ -83,6 +83,10 @@
         "displayName": "Mediated requests: View",
         "subPermissions": [
           "module.requests-mediated.enabled",
+          "settings.circulation.enabled",
+          "mod-settings.global.read.circulation",
+          "mod-settings.entries.collection.get",
+          "mod-settings.entries.item.get",
           "settings.requests-mediated.enabled"
         ],
         "visible": true

src/components/MediatedRequestsActivities/MediatedRequestsActivities.js

@@ -1,13 +1,22 @@
+import { useState } from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 import { AppIcon } from '@folio/stripes/core';
 
 import {
   Pane,
+  PaneMenu,
   Paneset,
 } from '@folio/stripes/components';
+import {
+  SearchAndSortQuery,
+  ExpandFilterPaneButton,
+  CollapseFilterPaneButton,
+} from '@folio/stripes/smart-components';
 
 import NavigationMenu from '../NavigationMenu';
+import MediatedRequestsFilters from './components/MediatedRequestsFilters';
 
 import {
   APP_ICON_NAME,
@@ -16,21 +25,59 @@ import {
 } from '../../constants';
 
 const MediatedRequestsActivities = () => {
+  const [filterPaneIsVisible, setFilterPaneIsVisible] = useState(true);
+
+  const toggleFilterPane = () => {
+    setFilterPaneIsVisible(!filterPaneIsVisible);
+  };
+
+  const renderResultsFirstMenu = () => {
+    if (filterPaneIsVisible) {
+      return null;
+    }
+
+    return (
+      <PaneMenu>
+        <ExpandFilterPaneButton
+          onClick={toggleFilterPane}
+        />
+      </PaneMenu>
+    );
+  };
+
   return (
-    <Paneset data-testid="mediatedRequestsActivitiesPaneSet">
-      <Pane
-        data-testid="mediatedRequestsActivitiesPane"
-        defaultWidth={FILTER_PANE_WIDTH}
-        paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
-      >
-        <NavigationMenu value={getMediatedRequestsActivitiesUrl()} />
-      </Pane>
-      <Pane
-        defaultWidth="fill"
-        appIcon={<AppIcon app={APP_ICON_NAME} />}
-        paneTitle={<FormattedMessage id="ui-requests-mediated.app.mediatedRequestsActivities.paneTitle" />}
-      />
-    </Paneset>
+    <SearchAndSortQuery>
+      {() => {
+        return (
+          <Paneset data-testid="mediatedRequestsActivitiesPaneSet">
+            {filterPaneIsVisible &&
+              <Pane
+                data-testid="mediatedRequestsActivitiesPane"
+                defaultWidth={FILTER_PANE_WIDTH}
+                paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+                lastMenu={
+                  <PaneMenu>
+                    <CollapseFilterPaneButton onClick={toggleFilterPane} />
+                  </PaneMenu>
+                }
+              >
+                <NavigationMenu
+                  value={getMediatedRequestsActivitiesUrl()}
+                  separator
+                />
+                <MediatedRequestsFilters />
+              </Pane>
+            }
+            <Pane
+              defaultWidth="fill"
+              appIcon={<AppIcon app={APP_ICON_NAME} />}
+              paneTitle={<FormattedMessage id="ui-requests-mediated.app.mediatedRequestsActivities.paneTitle" />}
+              firstMenu={renderResultsFirstMenu()}
+            />
+          </Paneset>
+        );
+      }}
+    </SearchAndSortQuery>
   );
 };
 

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/MediatedRequestsFilters.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+
+import { stripesConnect } from '@folio/stripes/core';
+
+import {
+  MediatedRequestLevelFilter,
+  MediatedRequestStatusFilter,
+  Search,
+} from './components';
+
+import {
+  getIsTitleLevelRequestsFeatureEnabled,
+} from '../../../../utils';
+
+const SETTINGS_SCOPES = {
+  CIRCULATION: 'circulation',
+};
+const SETTINGS_KEYS = {
+  GENERAL_TLR: 'generalTlr',
+};
+
+const MediatedRequestsFilters = ({
+  resources,
+}) => {
+  const isTitleLevelRequestsFeatureEnabled = getIsTitleLevelRequestsFeatureEnabled(resources);
+
+  return (
+    <form>
+      <Search />
+      <MediatedRequestStatusFilter />
+      {isTitleLevelRequestsFeatureEnabled && (
+        <MediatedRequestLevelFilter />
+      )}
+    </form>
+  );
+};
+
+MediatedRequestsFilters.manifest = {
+  configs: {
+    type: 'okapi',
+    records: 'items',
+    path: 'settings/entries',
+    params: {
+      query: `(scope==${SETTINGS_SCOPES.CIRCULATION} and key==${SETTINGS_KEYS.GENERAL_TLR})`,
+    },
+  },
+};
+
+MediatedRequestsFilters.propTypes = {
+  resources: PropTypes.object.isRequired,
+};
+
+export default stripesConnect(MediatedRequestsFilters);

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestLevelFilter/MediatedRequestLevelFilter.js

@@ -0,0 +1,45 @@
+import { useIntl } from 'react-intl';
+
+import {
+  Accordion,
+  AccordionSet,
+  FilterAccordionHeader,
+} from '@folio/stripes/components';
+import {
+  CheckboxFilter,
+} from '@folio/stripes/smart-components';
+
+import {
+  transformRequestFilterOptions,
+} from '../../../../../../utils';
+import {
+  MEDIATED_REQUEST_FILTER_TYPES,
+  MEDIATED_REQUEST_LEVEL_TRANSLATIONS,
+} from '../../../../../../constants';
+
+const MediatedRequestLevelFilter = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <AccordionSet>
+      <Accordion
+        id={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+        data-testid={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+        header={FilterAccordionHeader}
+        label={formatMessage({ id:'ui-requests-mediated.filters.mediatedRequestLevel.accordionTitle' })}
+        name={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+        separator={false}
+        onClearFilter={() => {}}
+      >
+        <CheckboxFilter
+          data-testid={`${MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}Filter`}
+          dataOptions={transformRequestFilterOptions(MEDIATED_REQUEST_LEVEL_TRANSLATIONS, formatMessage)}
+          name={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+          onChange={() => {}}
+        />
+      </Accordion>
+    </AccordionSet>
+  );
+};
+
+export default MediatedRequestLevelFilter;

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestLevelFilter/index.js

@@ -0,0 +1 @@
+export { default } from './MediatedRequestLevelFilter';

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestStatusFilter/MediatedRequestStatusFilter.js

@@ -0,0 +1,45 @@
+import { useIntl } from 'react-intl';
+
+import {
+  Accordion,
+  AccordionSet,
+  FilterAccordionHeader,
+} from '@folio/stripes/components';
+import {
+  CheckboxFilter,
+} from '@folio/stripes/smart-components';
+
+import {
+  transformRequestFilterOptions,
+} from '../../../../../../utils';
+import {
+  MEDIATED_REQUEST_FILTER_TYPES,
+  MEDIATED_REQUEST_STATUS_TRANSLATIONS,
+} from '../../../../../../constants';
+
+const MediatedRequestStatusFilter = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <AccordionSet>
+      <Accordion
+        id={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_STATUS}
+        data-testid={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_STATUS}
+        header={FilterAccordionHeader}
+        label={formatMessage({ id:'ui-requests-mediated.filters.mediatedRequestStatus.accordionTitle' })}
+        name={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_STATUS}
+        separator={false}
+        onClearFilter={() => {}}
+      >
+        <CheckboxFilter
+          data-testid={`${MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_STATUS}Filter`}
+          dataOptions={transformRequestFilterOptions(MEDIATED_REQUEST_STATUS_TRANSLATIONS, formatMessage)}
+          name={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_STATUS}
+          onChange={() => {}}
+        />
+      </Accordion>
+    </AccordionSet>
+  );
+};
+
+export default MediatedRequestStatusFilter;

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestStatusFilter/index.js

@@ -0,0 +1 @@
+export { default } from './MediatedRequestStatusFilter';

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/Search/Search.css

@@ -0,0 +1,10 @@
+.searchField {
+  margin-bottom: calc(var(--control-margin-bottom) / 2);
+}
+
+.searchForm {
+  & .resetButton {
+    padding: 0 6px 0 3px;
+    margin-left: 0;
+  }
+}

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/Search/Search.js

@@ -0,0 +1,52 @@
+import {
+  FormattedMessage,
+} from 'react-intl';
+
+import {
+  Button,
+  SearchField,
+  Icon,
+} from '@folio/stripes/components';
+
+import {
+  ICONS,
+} from '../../../../../../constants';
+
+import styles from './Search.css';
+
+const Search = () => {
+  return (
+    <form
+      onSubmit={() => {}}
+      className={styles.searchForm}
+    >
+      <SearchField
+        autoFocus
+        autoComplete="off"
+        name="query"
+        className={styles.searchField}
+        marginBottom0
+      />
+      <Button
+        type="submit"
+        buttonStyle="primary"
+        fullWidth
+      >
+        <FormattedMessage id="stripes-smart-components.search" />
+      </Button>
+      <Button
+        buttonStyle="none"
+        buttonClass={styles.resetButton}
+      >
+        <Icon
+          icon={ICONS.TIMES_CIRCLE_SOLID}
+          size="small"
+        >
+          <FormattedMessage id="stripes-smart-components.resetAll" />
+        </Icon>
+      </Button>
+    </form>
+  );
+};
+
+export default Search;