@k-int/stripes-kint-components 2.3.3 → 2.5.0

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import {
+  MultiColumnList,
+} from '@folio/stripes/components';
+import NoResultsMessage from '../../NoResultsMessage';
+
+const TableBody = ({
+  data,
+  error,
+  fetchNextPage,
+  filterPaneVisible,
+  isError,
+  isLoading,
+  match,
+  mclProps,
+  onSort,
+  path,
+  resultColumns,
+  toggleFilterPane,
+  query,
+}) => {
+  const sortOrder = query.sort ?? '';
+  const history = useHistory();
+  const location = useLocation();
+
+  const onNeedMoreData = (_askAmount, index) => {
+    fetchNextPage({ pageParam: index });
+  };
+
+  // Build the map of column definitions
+  const columnMapping = Object.fromEntries(
+    resultColumns.map(e => [e.propertyPath, e.label])
+  );
+
+  // Build the list of visible columns
+  const visibleColumns = resultColumns.map(e => e.propertyPath);
+
+  return (
+    <MultiColumnList
+      autosize
+      columnMapping={columnMapping}
+      contentData={data?.results}
+      hasMargin
+      isEmptyMessage={
+        <NoResultsMessage
+          {...{
+            error,
+            isError,
+            isLoading,
+            filterPaneIsVisible: filterPaneVisible,
+            searchTerm: query.query,
+            toggleFilterPane
+          }}
+        />
+      }
+      isSelected={({ item }) => item.id === match?.params?.id}
+      onHeaderClick={onSort}
+      onNeedMoreData={onNeedMoreData}
+      onRowClick={(_e, rowData) => {
+        history.push(`${path}/${rowData?.id}${location?.search}`);
+      }}
+      pagingType="click"
+      sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
+      sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
+      totalCount={data.totalRecords}
+      visibleColumns={visibleColumns}
+      {...mclProps}
+    />
+  );
+};
+
+TableBody.propTypes = {
+  data: PropTypes.shape({
+    totalRecords: PropTypes.number,
+    results: PropTypes.arrayOf(PropTypes.object)
+  }),
+  error: PropTypes.object,
+  fetchNextPage: PropTypes.func,
+  filterPaneVisible: PropTypes.bool,
+  history: PropTypes.object,
+  isError: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  location: PropTypes.object,
+  match: PropTypes.object,
+  mclProps: PropTypes.object,
+  onSort: PropTypes.func,
+  path: PropTypes.string.isRequired,
+  query: PropTypes.object,
+  resultColumns: PropTypes.arrayOf(PropTypes.object),
+  toggleFilterPane: PropTypes.func
+};
+
+export default TableBody;

package/src/lib/SASQLookupComponent/TableBody/index.js

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

package/src/lib/SASQLookupComponent/index.js

@@ -1 +1,2 @@
-export { default } from './SASQLookupComponent';
+export { default as SASQLookupComponent } from './SASQLookupComponent';
+export { default as TableBody } from './TableBody';

package/src/lib/SASQRoute/SASQRoute.js

@@ -6,7 +6,7 @@ import {
   Switch
 } from 'react-router-dom';
 
-import SASQLookupComponent from '../SASQLookupComponent';
+import { SASQLookupComponent } from '../SASQLookupComponent';
 import SASQViewComponent from '../SASQViewComponent';
 
 const SASQRoute = ({ children, path, fetchParameters, ...props }) => {

package/src/lib/Typedown/Typedown.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import get from 'lodash/get';
 
-import { EndOfList, IconButton, Label, Popper } from '@folio/stripes/components';
+import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
 
 import SearchField from '../SearchField';
 import css from '../../../styles/TypeDown.css';
@@ -179,10 +179,12 @@ const Typedown = ({
         <SearchField
           // Pass meta through so correct styling gets applied to the TextField
           id={`typedown-searchField-${selectorSafe(input.name)}`}
+          label={label}
           marginBottom0
           meta={meta}
           onChange={handleType}
           onKeyDown={searchFieldKeyDownHandler}
+          required={required}
         />
       </div>
     );
@@ -195,16 +197,8 @@ const Typedown = ({
         css.typedown,
         className
       )}
+      id={`typedown-id-${id}`}
     >
-      {label &&
-        <Label
-          htmlFor={id}
-          id={`${id}-label`}
-          required={required}
-        >
-          {label}
-        </Label>
-      }
       {renderSearchField()}
       <Popper
         key="typedown-menu-toggle"

package/src/lib/hooks/settingsHooks/useSettingSection.js

@@ -1,15 +1,32 @@
 import React from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
+import { generateKiwtQueryParams } from '../../utils';
 
 const useSettingSection = ({
   sectionName,
   settingEndpoint
 }) => {
   const ky = useOkapiKy();
+  const queryParams = generateKiwtQueryParams({
+    filters: [
+      {
+        path: 'section',
+        value: sectionName
+      }
+    ],
+    sort: [
+      {
+        path: 'key'
+      }
+    ],
+    perPage: 100,
+    stats: false
+  }, {});
+
   const { data: settings = [] } = useQuery(
-    ['stripes-kint-components', 'useSetting', 'appSettings', sectionName],
-    () => ky(`${settingEndpoint}?filters=section=${sectionName}&sort=key;asc`).json()
+    ['stripes-kint-components', 'useSetting', 'appSettings', queryParams, sectionName],
+    () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json()
   );
 
   const { mutateAsync: putSetting } = useMutation(

package/src/lib/hooks/settingsHooks/useSettings.js

@@ -10,7 +10,7 @@ import { Settings } from '@folio/stripes/smart-components';
 import { SettingPage, SettingPagePane } from '../../SettingPage';
 import { SettingsContext } from '../../contexts';
 
-import { sortByLabel, toCamelCase } from '../../utils';
+import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../utils';
 
 const useSettings = ({
   dynamicPageExclusions,
@@ -22,12 +22,19 @@ const useSettings = ({
 }) => {
   const ky = useOkapiKy();
   const intl = useIntl();
-  const extraPathItems = dynamicPageExclusions.map(dpe => `filters=section!=${dpe}`);
-  extraPathItems.push('max=500');
+  const queryParams = generateKiwtQueryParams({
+      filters: dynamicPageExclusions?.map(dpe => ({
+        path: 'section',
+        comparator: '!=',
+        value: dpe
+      })),
+      perPage: 100,
+      stats: false
+  }, {});
 
   const { data: appSettings = [], isLoading } = useQuery(
-    ['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint],
-    () => ky(`${settingEndpoint}?${extraPathItems.join('&')}`).json()
+    ['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint, queryParams],
+    () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json()
   );
 
   const sections = [...new Set(appSettings.map(s => s.section))];

package/src/lib/utils/generateKiwtQueryParams.js

@@ -2,6 +2,7 @@ const generateKiwtQueryParams = (options, nsValues) => {
   const { qindex, query, filters, sort } = nsValues;
   const {
     searchKey = '',
+    filterConfig = [],
     /* Assumtion made that if no filterKey is provided then the given filterValues for that key are standalaone, ie require no comparator or key */
     filterKeys = {},
     sortKeys = {},
@@ -74,9 +75,17 @@ const generateKiwtQueryParams = (options, nsValues) => {
 
     // We now have a filterMap of shape { status: ['active', 'cancelled'], type: ['local'] }
     Object.entries(filterMap).forEach(([filterName, filterValues]) => {
+      const filterConfigEntry = filterConfig.find(conf => conf.name === filterName);
       const filterKey = filterKeys[filterName];
+      if (filterConfigEntry) {
+        // We have a direct mapping instruction, use it
+        const filterString = filterValues.map(v => {
+          const fceValue = filterConfigEntry?.values?.find(fce => fce.name === v)?.value;
+          return `${filterName}==${fceValue ?? v}`;
+        }).join('||');
 
-      if (!filterKey) {
+        paramsArray.push(`filters=${filterString}`);
+      } else if (!filterKey) {
         // These filters have no key mapping so we just pass the values to the backend as-is.
         paramsArray.push(...filterValues?.map(f => `filters=${f}`));
       } else {

package/src/lib/utils/highlightString.js

@@ -0,0 +1,42 @@
+import matchString from './matchString';
+
+const highlightString = (match, str, ignoreNull = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull);
+
+  return (
+    parts.filter(part => part).map((part, i) => (
+      regex.test(part) ?
+        <mark
+          key={i}
+        >
+          {part}
+        </mark> :
+        <span key={i}>
+          {part}
+        </span>
+    ))
+  );
+};
+
+const boldString = (match, str, ignoreNull = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull);
+
+  return (
+    parts.filter(part => part).map((part, i) => (
+      regex.test(part) ?
+        <strong
+          key={i}
+        >
+          {part}
+        </strong> :
+        <span key={i}>
+          {part}
+        </span>
+    ))
+  );
+};
+
+export {
+  boldString,
+  highlightString
+};

package/src/lib/utils/index.js

@@ -15,3 +15,7 @@ export { default as groupCustomPropertiesByCtx } from './groupCustomPropertiesBy
 export { default as renderHelpText } from './renderHelpText';
 export { default as sortByLabel } from './sortByLabel';
 export { default as toCamelCase } from './toCamelCase'; // I hate that this exists
+
+
+export { default as matchString } from './matchString';
+export { boldString, highlightString } from './highlightString';

package/src/lib/utils/matchString.js

@@ -0,0 +1,14 @@
+import escapeRegExp from 'lodash/escapeRegExp';
+
+const matchString = (match, str, ignoreNull = true) => {
+  const regex = new RegExp(`${match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + escapeRegExp(hl) + ')').join('|')}`, 'gi');
+  if (ignoreNull && !match) {
+    const nullRegex = /a^/gi; // Should match nothing
+
+    return [[str], nullRegex];
+  }
+
+  return [str.split(regex), regex];
+};
+
+export default matchString;

package/styles/ActionListFieldArray.css

@@ -1,3 +1,11 @@
-.buttonRight {
-  float: right;
+@import '@folio/stripes-components/lib/variables.css';
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--gutter)
+}
+
+.headerText {
+  margin-bottom: 0;
 }