@k-int/stripes-kint-components 1.3.0 → 1.4.0

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,66 +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,
-    ...rest
-  } = 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');
-  }
-
-  for (const [key, value] of Object.entries(rest)) {
-    paramsArray.push(`${key}=${value}`);
-  }
+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/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

@@ -15,5 +15,7 @@
   "editableRefdataList.label": "Label",
   "editableRefdataList.value": "Value",
 
-  "sasqLookupComponent.mainPane.found": "{total} records found"
+  "sasqLookupComponent.mainPane.found": "{total} records found",
+
+  "noResultsMessage.showFilters": "Show filters"
 }