@k-int/stripes-kint-components 1.2.4 → 1.5.0

package/src/lib/hooks/useLocalStorageState.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
+
+
+const useLocalStorageState = (key, defaultValue) => {
+  const [local] = useLocalStorage(key, defaultValue);
+  const [localState, setLocalState] = useState(local);
+
+  const setLocalStorageState = (newValue) => {
+    setLocalState(newValue);
+    writeStorage(key, newValue);
+  };
+
+  return [localState, setLocalStorageState];
+};
+
+export default useLocalStorageState;

package/src/lib/hooks/useQIndex.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+
+const useQIndex = () => {
+  const history = useHistory();
+  const location = useLocation();
+
+  const query = queryString.parse(location.search);
+  const [currentQindex, setCurrentQindex] = useState(query?.qindex);
+
+  const handleQindexChange = (newQindex) => {
+    setCurrentQindex(newQindex);
+    if (newQindex !== query?.qindex) {
+      const newQuery = {
+        ...query,
+        qindex: newQindex
+      };
+
+      history.push({
+        pathname: location.pathname,
+        search: `?${queryString.stringify(newQuery)}`
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (currentQindex !== query?.qindex) {
+      setCurrentQindex(query?.qindex);
+    }
+  }, [
+    currentQindex,
+    history,
+    location,
+    query
+  ]);
+
+  return [currentQindex, handleQindexChange];
+};
+
+export default useQIndex;

package/src/lib/hooks/useRefdata.js

@@ -4,25 +4,42 @@ import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
+import { generateKiwtQuery } from '../utils';
+
 const useRefdata = ({
   endpoint,
   desc,
   queryParams,
-  returnQueryObject = false
+  returnQueryObject = false,
+  options = {
+    filterKeys: {
+      DescKey: 'desc'
+    },
+    stats: false,
+    max: 100
+  }
 }) => {
   const ky = useOkapiKy();
-  let path = endpoint;
+
+  const nsValues = {};
+
+  /* Desc will tend to contain a '.', which will throw off generateKiwtQuery.
+   * To combat this we can insert another Desc. at the beginning to act as the filtername, so
+   * Funder.Name => Desc.desc=Funder.Name. This way "Desc" acts as the filterName, and without a filterKey
+   * "desc=Funder.Name" is passed wholesale to the query.
+   */
 
   if (Array.isArray(desc)) {
     // If we have an array, append a desc filter for each desc given
-    desc.forEach((d, index) => {
-      path += `${index === 0 ? '?filters=' : '%7C%7C'}desc=${d}`;
-    });
+    nsValues.filters = desc.map(d => `DescKey.${d}`).join(',');
   } else if (desc) {
     // If we just have a string, append a single desc filter
-    path += `?filters=desc=${desc}`;
+    nsValues.filters = `DescKey.${desc}`;
   }
 
+  const query = generateKiwtQuery(options, nsValues);
+  const path = `${endpoint}${query}`;
+
   const queryObject = useQuery(
     ['stripes-kint-components', 'useRefdata', 'refdata', desc ?? ''],
     () => ky(path).json(),

package/src/lib/utils/README.md

@@ -29,5 +29,43 @@ import { generateKiwtQuery } from '@k-int/stripes-kint-components'
 ### Props
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to a KIWT query. | | ✓ |
+options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to a KIWT query. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
+nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+
+## generateKiwtQueryParams
+A util function for generating an array of "KIWT" (K-Int Web-Toolkit) style backend query parameters from a SASQ query object
+### Basic usage
+```
+import { generateKiwtQueryParams } from '@k-int/stripes-kint-components'
+...
+  const nsValues = {
+    query: 'test',
+    filters: 'requestStatus.completed,journalVolume.test1,startDate.startDate>=2021-10-28'
+  }
+
+  const options = {
+    searchKey: 'request.name',
+    filterKeys: {
+      requestStatus: 'requestStatus.value,
+      journalVolume: 'journalVolume'
+    }
+  }
+
+  const queryArray = generateKiwtQueryParams(options, nsValues)
+
+  // We'd expect queryArray === [
+    "match=request.name",
+    "term=test",
+    "filters=requestStatus.value==completed",
+    "filters=journalVolume==test1",
+    "filters=startDate%3E=2021-10-28",
+    "stats=true"
+  ]
+...
+```
+
+### Props
+Name | Type | Description | default | required
+--- | --- | --- | --- | ---
+options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to an KIWT query array. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
 nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |

package/src/lib/utils/generateKiwtQuery.js

@@ -1,61 +1,7 @@
-const generateKiwtQuery = (options, nsValues) => {
-  const { query, filters, sort } = nsValues;
-  const {
-    searchKey = '',
-    /* 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 = {},
-    stats = true,
-  } = options;
-
-  const paramsArray = [];
-
-  if (query) {
-    paramsArray.push(...searchKey.split(',')?.map(m => `match=${m}`));
-    paramsArray.push(`term=${query}`);
-  }
-
-  if (filters) {
-    const filterMap = {};
-    filters.split(',').forEach(filter => {
-      const [filterName, ...rest] = filter.split('.');
-      const filterValue = rest.join('.');
-
-      if (filterMap[filterName] === undefined) filterMap[filterName] = [];
-      filterMap[filterName].push(filterValue);
-    });
-
-    // We now have a filterMap of shape { status: ['active', 'cancelled'], type: ['local'] }
-    Object.entries(filterMap).forEach(([filterName, filterValues]) => {
-      const filterKey = filterKeys[filterName];
-
-      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 {
-        const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
-        paramsArray.push(`filters=${filterString}`);
-      }
-    });
-  }
-
-  if (sort) {
-    paramsArray.push(...sort.split(',').map(sortKey => {
-      const descending = sortKey.startsWith('-');
-      let term = sortKey.replace('-', '');
-
-      if (term in sortKeys) {
-        term = term.replace(term, sortKeys[term]);
-      }
-
-      return `sort=${term};${descending ? 'desc' : 'asc'}`;
-    }));
-  }
-
-  if (stats) {
-    paramsArray.push('stats=true');
-  }
+import generateKiwtQueryParams from './generateKiwtQueryParams';
 
+const generateKiwtQuery = (options, nsValues) => {
+  const paramsArray = generateKiwtQueryParams(options, nsValues);
   return paramsArray.length ? '?' + paramsArray.map(p => encodeURI(p)).join('&') : '';
 };
 

package/src/lib/utils/generateKiwtQueryParams.js

@@ -0,0 +1,67 @@
+const generateKiwtQueryParams = (options, nsValues) => {
+  const { qindex, query, filters, sort } = nsValues;
+  const {
+    searchKey = '',
+    /* 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 = {},
+    stats = true,
+    ...rest
+  } = options;
+
+  const paramsArray = [];
+
+  if (query) {
+    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${m}`));
+    paramsArray.push(`term=${query}`);
+  }
+
+  if (filters) {
+    const filterMap = {};
+    filters.split(',').forEach(filter => {
+      const [filterName, ...filterRest] = filter.split('.');
+      const filterValue = filterRest.join('.');
+
+      if (filterMap[filterName] === undefined) filterMap[filterName] = [];
+      filterMap[filterName].push(filterValue);
+    });
+
+    // We now have a filterMap of shape { status: ['active', 'cancelled'], type: ['local'] }
+    Object.entries(filterMap).forEach(([filterName, filterValues]) => {
+      const filterKey = filterKeys[filterName];
+
+      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 {
+        const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
+        paramsArray.push(`filters=${filterString}`);
+      }
+    });
+  }
+
+  if (sort) {
+    paramsArray.push(...sort.split(',').map(sortKey => {
+      const descending = sortKey.startsWith('-');
+      let term = sortKey.replace('-', '');
+
+      if (term in sortKeys) {
+        term = term.replace(term, sortKeys[term]);
+      }
+
+      return `sort=${term};${descending ? 'desc' : 'asc'}`;
+    }));
+  }
+
+  if (stats) {
+    paramsArray.push('stats=true');
+  }
+
+  for (const [key, value] of Object.entries(rest)) {
+    paramsArray.push(`${key}=${value}`);
+  }
+
+  return paramsArray;
+};
+
+export default generateKiwtQueryParams;

package/src/lib/utils/index.js

@@ -1,2 +1,5 @@
 export { default as generateKiwtQuery } from './generateKiwtQuery';
+export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';
+export { default as selectorSafe } from './selectorSafe';
+
 export { default as buildUrl } from './buildUrl';

package/src/lib/utils/selectorSafe.js

@@ -1,5 +1,5 @@
 const selectorSafe = (string) => {
-  return string.replaceAll(/[^a-zA-Z0-9\-_]/, '_');
+  return string.replaceAll(/[^a-zA-Z0-9\-_]/g, '_');
 };
 
 export default selectorSafe;

package/styles/NoResultsMessage.css

@@ -0,0 +1,38 @@
+/**
+ * No Results Message
+ */
+
+ @import '@folio/stripes-components/lib/variables.css';
+
+ /* Empty Message */
+ .noResultsMessage {
+   padding: 15px;
+   color: var(--color-text-p2);
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   left: 0;
+   right: 0;
+   background: var(--color-fill);
+   flex-direction: column;
+ }
+ 
+ .noResultsMessage,
+ .noResultsMessageLabelWrap {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+ }
+ 
+ .noResultsMessageLabelWrap {
+   font-size: var(--font-size-large);
+ }
+ 
+ .noResultsMessageIcon,
+ .noResultsMessageLabel {
+   margin: 0 4px;
+ }
+ 
+ .noResultsMessageButton {
+   margin-top: 15px;
+ }

package/translations/stripes-kint-components/en.json

@@ -13,5 +13,9 @@
   "editableRefdataList.edit": "Edit",
   "editableRefdataList.delete": "Delete",
   "editableRefdataList.label": "Label",
-  "editableRefdataList.value": "Value"
+  "editableRefdataList.value": "Value",
+
+  "sasqLookupComponent.mainPane.found": "{total} records found",
+
+  "noResultsMessage.showFilters": "Show filters"
 }