@k-int/stripes-kint-components 2.3.2 → 2.4.1

package/src/index.js

@@ -18,9 +18,12 @@ export {
 
 // Useful utility functions
 export {
+  boldString,
   generateKiwtQuery,
   generateKiwtQueryParams,
   groupCustomPropertiesByCtx,
+  highlightString,
+  matchString,
   refdataOptions,
   refdataQueryKey,
   selectorSafe,
@@ -59,6 +62,7 @@ export {
   default as QueryTypedown
 } from './lib/QueryTypedown';
 
+/* SASQ Stuff */
 // SearchField
 export {
   default as SearchField
@@ -71,7 +75,8 @@ export {
 
 // SASQLookupComponent
 export {
-  default as SASQLookupComponent
+  SASQLookupComponent,
+  TableBody as SASQTableBody
 } from './lib/SASQLookupComponent';
 
 // SASQViewComponent

package/src/lib/ActionList/ActionListFieldArray.js

@@ -228,7 +228,7 @@ const ActionListFieldArray = ({
                   name: `${fieldName}.${key}`
                 }) :
                 <Field
-                  autofocus={fieldIndex === 0}
+                  autoFocus={fieldIndex === 0}
                   component={TextField}
                   marginBottom0
                   name={`${fieldName}.${key}`}

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -78,20 +78,23 @@ const CustomPropertiesSettings = ({
     delete: deleteCustProp
   } = useMutateCustomProperties({
     afterQueryCalls: {
-      put: () => {
+      put: res => {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
-        afterQueryCallsSafe.put();
+        setCustomProperty(res);
+        afterQueryCallsSafe.put(res);
       },
-      post: () => {
+      post: res => {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
-        afterQueryCallsSafe.post();
+        setCustomProperty(res);
+        afterQueryCallsSafe.post(res);
       },
-      delete: () => {
+      delete: res => {
         setMode(VIEWING);
         queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
-        afterQueryCallsSafe.delete();
+        setCustomProperty();
+        afterQueryCallsSafe.delete(res);
       }
     },
     endpoint: customPropertiesEndpoint,

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -69,21 +69,26 @@ const CustomPropertiesViewCtx = ({
     );
   }
 
+  const countSetProperties = (primary) => (
+    Object.entries(customProperties)?.filter(
+      ([_key, cp]) => (
+        (cp[0]?.type?.ctx === ctx || (ctx === 'isNull' && !cp[0]?.type?.ctx)) && // Either the ctx string matches, or isNull matches blank
+        cp[0]?.type?.primary === primary // Only count non-primary set custprops
+      )
+    )?.length ?? 0
+  );
+
   // We need to display any set properties, along with any non-set primary properties
   const primaryCount = custprops?.filter(cp => cp.primary === true)?.length ?? 0;
-  const optionalCount = Object.entries(customProperties)?.filter(
-    ([_key, cp]) => (
-      (cp[0]?.type?.ctx === ctx || (ctx === 'isNull' && !cp[0]?.type?.ctx)) && // Either the ctx string matches, or isNull matches blank
-      cp[0]?.type?.primary === false // Only count non-primary set custprops
-    )
-  )?.length ?? 0;
+  const optionalCount = countSetProperties(false);
+  const setPrimaryCount = countSetProperties(true);
 
   return (
     (primaryCount + optionalCount) > 0 &&
     <Accordion
       closedByDefault
-      displayWhenClosed={<Badge>{primaryCount + optionalCount}</Badge>}
-      displayWhenOpen={<Badge>{primaryCount + optionalCount}</Badge>}
+      displayWhenClosed={<Badge>{setPrimaryCount + optionalCount}</Badge>}
+      displayWhenOpen={<Badge>{setPrimaryCount + optionalCount}</Badge>}
       id={`${id}-accordion-${ctx}`}
       label={getAccordionLabel()}
     >

package/src/lib/CustomProperties/View/CustomPropertyCard.js

@@ -16,7 +16,7 @@ import * as CUSTPROP_TYPES from '../../constants/customProperties';
 const CustomPropertyCard = ({
   ctx,
   customProperty,
-  customPropertyDefinition,
+  customPropertyDefinition = {},
   index,
   labelOverrides
 }) => {
@@ -35,7 +35,7 @@ const CustomPropertyCard = ({
     // Label override for default card title,
     if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
       return (
-        labelOverrides.retiredName(customPropertyDefinition)
+        labelOverrides.retiredName(customPropertyDefinition.name)
       );
     }
 

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useInfiniteQuery } from 'react-query';
@@ -17,34 +16,30 @@ import {
   Button,
   IconButton,
   Icon,
-  MultiColumnList,
   Pane,
   PaneMenu,
   SearchField,
 } from '@folio/stripes/components';
-import NoResultsMessage from '../NoResultsMessage';
 
 import { generateKiwtQuery } from '../utils';
 import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 
+import TableBody from './TableBody';
+
+const SASQLookupComponent = (props) => {
+  const {
+    children,
+    fetchParameters = {},
+    FilterComponent = () => null,
+    FilterPaneHeaderComponent = () => null,
+    filterPaneProps,
+    id,
+    mainPaneProps,
+    noSearchField,
+    RenderBody,
+    sasqProps,
+  } = props;
 
-const SASQLookupComponent = ({
-  children,
-  fetchParameters = {},
-  FilterPaneHeaderComponent = () => null,
-  FilterComponent = () => null,
-  history,
-  id,
-  location,
-  mainPaneProps,
-  match,
-  mclProps,
-  noSearchField,
-  path,
-  resultColumns = [],
-  RenderBody,
-  sasqProps,
-}) => {
   const { query, queryGetter, querySetter } = useKiwtSASQuery();
   const { 0: namespace } = useNamespace();
   const ky = useOkapiKy();
@@ -62,10 +57,7 @@ const SASQLookupComponent = ({
 
   const {
     data: totalData = {},
-    error,
-    isError,
-    isLoading,
-    fetchNextPage,
+    ...restOfInfiniteQueryProps
   } = useInfiniteQuery(
     [namespace, id, 'data', query],
     fetchPageData
@@ -93,20 +85,6 @@ const SASQLookupComponent = ({
     {}
   ) ?? {};
 
-  // TODO focus handling to stop redraw movin to top
-
-  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 (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
@@ -115,56 +93,23 @@ const SASQLookupComponent = ({
       {...sasqProps}
     >
       {
-        ({
+        (sasqRenderProps) => {
+          const {
           activeFilters,
           filterChanged,
           getFilterHandlers,
           getSearchHandlers,
-          onSort,
           onSubmitSearch,
           resetAll,
           searchChanged,
           searchValue
-        }) => {
+        } = sasqRenderProps;
+
           const searchHandlers = getSearchHandlers();
-          const sortOrder = query.sort ?? '';
           const disableReset = !filterChanged && !searchChanged;
 
           const filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
 
-          const TableBody = () => (
-            <MultiColumnList
-              autosize
-              columnMapping={columnMapping}
-              contentData={data?.results}
-              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}
-              virtualize
-              visibleColumns={visibleColumns}
-              {...mclProps}
-            />
-          );
-
           const Body = RenderBody ?? TableBody;
 
           return (
@@ -184,6 +129,7 @@ const SASQLookupComponent = ({
                     </PaneMenu>
                   }
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
+                  {...filterPaneProps}
                 >
                   <form onSubmit={onSubmitSearch}>
                     <FilterPaneHeaderComponent />
@@ -192,7 +138,13 @@ const SASQLookupComponent = ({
                         <SearchField
                           autoFocus
                           name="query"
-                          onChange={searchHandlers.query}
+                          onChange={e => {
+                            if (e.target?.value) {
+                              searchHandlers.query(e); // SASQ needs the whole event here
+                            } else {
+                              searchHandlers.reset();
+                            }
+                          }}
                           onClear={searchHandlers.reset}
                           value={searchValue.query}
                         />
@@ -240,10 +192,19 @@ const SASQLookupComponent = ({
                   </PaneMenu>
                 :
                 null}
+                noOverflow
+                padContent={false}
                 paneSub={<FormattedMessage id="stripes-kint-components.sasqLookupComponent.mainPane.found" values={{ total: data?.total }} />}
                 {...mainPaneProps}
               >
-                <Body data={data} />
+                <Body
+                  data={data}
+                  query={query}
+                  toggleFilterPane={toggleFilterPane}
+                  {...restOfInfiniteQueryProps}
+                  {...sasqProps}
+                  {...props}
+                />
               </Pane>
               {children}
             </PersistedPaneset>
@@ -260,6 +221,7 @@ SASQLookupComponent.propTypes = {
     PropTypes.node
   ]),
   fetchParameters: PropTypes.object,
+  filterPaneProps: PropTypes.object,
   FilterComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node

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/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;