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

package/es/lib/utils/generateKiwtQueryParams.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _excluded = ["searchKey", "filterKeys", "sortKeys", "stats"];
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues) {
+  var qindex = nsValues.qindex,
+      query = nsValues.query,
+      filters = nsValues.filters,
+      sort = nsValues.sort;
+
+  var _options$searchKey = options.searchKey,
+      searchKey = _options$searchKey === void 0 ? '' : _options$searchKey,
+      _options$filterKeys = options.filterKeys,
+      filterKeys = _options$filterKeys === void 0 ? {} : _options$filterKeys,
+      _options$sortKeys = options.sortKeys,
+      sortKeys = _options$sortKeys === void 0 ? {} : _options$sortKeys,
+      _options$stats = options.stats,
+      stats = _options$stats === void 0 ? true : _options$stats,
+      rest = _objectWithoutProperties(options, _excluded);
+
+  var paramsArray = [];
+
+  if (query) {
+    var _split;
+
+    paramsArray.push.apply(paramsArray, _toConsumableArray((_split = (qindex || searchKey).split(',')) === null || _split === void 0 ? void 0 : _split.map(function (m) {
+      return "match=".concat(m);
+    })));
+    paramsArray.push("term=".concat(query));
+  }
+
+  if (filters) {
+    var filterMap = {};
+    filters.split(',').forEach(function (filter) {
+      var _filter$split = filter.split('.'),
+          _filter$split2 = _toArray(_filter$split),
+          filterName = _filter$split2[0],
+          filterRest = _filter$split2.slice(1);
+
+      var 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(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          filterName = _ref2[0],
+          filterValues = _ref2[1];
+
+      var filterKey = filterKeys[filterName];
+
+      if (!filterKey) {
+        // These filters have no key mapping so we just pass the values to the backend as-is.
+        paramsArray.push.apply(paramsArray, _toConsumableArray(filterValues === null || filterValues === void 0 ? void 0 : filterValues.map(function (f) {
+          return "filters=".concat(f);
+        })));
+      } else {
+        var filterString = filterValues.map(function (v) {
+          return "".concat(filterKey, "==").concat(v);
+        }).join('||');
+        paramsArray.push("filters=".concat(filterString));
+      }
+    });
+  }
+
+  if (sort) {
+    paramsArray.push.apply(paramsArray, _toConsumableArray(sort.split(',').map(function (sortKey) {
+      var descending = sortKey.startsWith('-');
+      var term = sortKey.replace('-', '');
+
+      if (term in sortKeys) {
+        term = term.replace(term, sortKeys[term]);
+      }
+
+      return "sort=".concat(term, ";").concat(descending ? 'desc' : 'asc');
+    })));
+  }
+
+  if (stats) {
+    paramsArray.push('stats=true');
+  }
+
+  for (var _i2 = 0, _Object$entries = Object.entries(rest); _i2 < _Object$entries.length; _i2++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+
+    paramsArray.push("".concat(key, "=").concat(value));
+  }
+
+  return paramsArray;
+};
+
+var _default = generateKiwtQueryParams;
+exports["default"] = _default;

package/es/lib/utils/index.js

@@ -15,9 +15,25 @@ Object.defineProperty(exports, "generateKiwtQuery", {
     return _generateKiwtQuery["default"];
   }
 });
+Object.defineProperty(exports, "generateKiwtQueryParams", {
+  enumerable: true,
+  get: function get() {
+    return _generateKiwtQueryParams["default"];
+  }
+});
+Object.defineProperty(exports, "selectorSafe", {
+  enumerable: true,
+  get: function get() {
+    return _selectorSafe["default"];
+  }
+});
 
 var _generateKiwtQuery = _interopRequireDefault(require("./generateKiwtQuery"));
 
+var _generateKiwtQueryParams = _interopRequireDefault(require("./generateKiwtQueryParams"));
+
+var _selectorSafe = _interopRequireDefault(require("./selectorSafe"));
+
 var _buildUrl = _interopRequireDefault(require("./buildUrl"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/index.js

@@ -5,13 +5,16 @@ export {
   useKiwtSASQuery,
   useLocalStorageState,
   useMutateRefdataValue,
+  useQIndex,
   useRefdata,
   useTemplates,
 } from './lib/hooks';
 
 // Useful utility functions
 export {
-  generateKiwtQuery
+  generateKiwtQuery,
+  generateKiwtQueryParams,
+  selectorSafe
 } from './lib/utils';
 
 // Settings Components
@@ -58,3 +61,6 @@ export {
 export {
   default as SASQViewComponent
 } from './lib/SASQViewComponent';
+
+// NoResultsMessage
+export { NoResultsMessage } from './lib/NoResultsMessage';

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Button, Icon } from '@folio/stripes/components';
+import css from '../../../styles/NoResultsMessage.css';
+
+const NoResultsMessage = ({
+  icon: userIcon,
+  isLoading,
+  isError,
+  error,
+  filterPaneIsVisible,
+  label: userLabel,
+  searchTerm,
+  toggleFilterPane,
+}) => {
+  let icon = 'search';
+  let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
+
+  // No search term but no results
+  if (!searchTerm) {
+    icon = 'search';
+    label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
+  }
+
+  // Loading results
+  if (isLoading) {
+    icon = 'spinner-ellipsis';
+    label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
+  }
+
+  // Request failure
+  if (isError) {
+    icon = 'exclamation-circle';
+    label = error?.message;
+  }
+
+  return (
+    <div className={css.noResultsMessage}>
+      <div className={css.noResultsMessageLabelWrap}>
+        {(icon || userIcon) &&
+          <Icon
+            icon={userIcon ?? icon}
+            iconRootClass={css.noResultsMessageIcon}
+          />
+        }
+        <span className={css.noResultsMessageLabel}>{userLabel ?? label}</span>
+      </div>
+      {/* If the filter pane is closed we show a button that toggles filter pane */}
+      {!filterPaneIsVisible && (
+        <Button
+          buttonClass={css.noResultsMessageButton}
+          marginBottom0
+          onClick={toggleFilterPane}
+        >
+          <FormattedMessage id="stripes-kint-components.noResultsMessage.showFilters" />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+NoResultsMessage.propTypes = {
+  error: PropTypes.object,
+  filterPaneIsVisible: PropTypes.bool.isRequired,
+  icon: PropTypes.string,
+  isLoading: PropTypes.bool,
+  isError: PropTypes.bool,
+  label: PropTypes.oneOfType(
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.func
+  ),
+  searchTerm: PropTypes.string.isRequired,
+  toggleFilterPane: PropTypes.func.isRequired,
+};
+
+export default NoResultsMessage;

package/src/lib/NoResultsMessage/index.js

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

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -20,12 +20,14 @@ import {
   MultiColumnList,
   Pane,
   PaneMenu,
-  SearchField
+  SearchField,
 } from '@folio/stripes/components';
+import { NoResultsMessage } from '../NoResultsMessage';
 
 import { generateKiwtQuery } from '../utils';
 import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 
+
 const SASQLookupComponent = ({
   children,
   fetchParameters = {},
@@ -55,7 +57,15 @@ const SASQLookupComponent = ({
   };
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
-  const { data: totalData = {}, fetchNextPage } = useInfiniteQuery(
+  const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
+
+  const {
+    data: totalData = {},
+    error,
+    isError,
+    isLoading,
+    fetchNextPage,
+  } = useInfiniteQuery(
     [namespace, id, 'data', query],
     fetchPageData
   );
@@ -88,13 +98,13 @@ const SASQLookupComponent = ({
     fetchNextPage({ pageParam: index });
   };
 
-    // Build the map of column definitions
-    const columnMapping = Object.fromEntries(
-      resultColumns.map(e => [e.propertyPath, e.label])
-    );
+  // 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);
+  // Build the list of visible columns
+  const visibleColumns = resultColumns.map(e => e.propertyPath);
 
   return (
     <SearchAndSortQuery
@@ -126,6 +136,18 @@ const SASQLookupComponent = ({
               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}

package/src/lib/SASQRoute/README.md

@@ -6,7 +6,7 @@ A component designed to speed up the basic 3-pane layout setup process, SASQRout
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import SASQRoute from '@k-int/stripes-kint-components/src/lib/SASQRoute/SASQRoute';
+import { SASQRoute } from '@k-int/stripes-kint-components';
 import ActionItem from '../components/ActionItem';
 
 const ActionedRoute = ({ path }) => {

package/src/lib/TypeDown/README.md

@@ -1,115 +1 @@
-```
-import React from 'react';
-
-import { Button, Col, Pane, Row, TextField } from '@folio/stripes/components';
-import { AppIcon } from '@folio/stripes/core';
-import { generateKiwtQuery, TypeDown } from '@k-int/stripes-kint-components';
-
-import { Form, Field, useFormState } from 'react-final-form';
-
-const TestField = () => {
-  const pathMutator = (input, path) => {
-    const query = generateKiwtQuery(
-      {
-        searchKey: 'name,alternateNames.name',
-        stats: false
-      }, {
-        sort: 'name',
-        query: input,
-      }
-    );
-
-    return `${path}${query}`;
-  };
-
-  console.log("Current values: %o", useFormState()?.values)
-  return (
-    <Field
-      component={TypeDown}
-      name="test"
-      path="erm/sas"
-      pathMutator={pathMutator}
-      renderFooter={() => (
-        <>
-          <Button
-            id="footer button 1"
-            marginBottom0
-            onClick={() => {
-              alert('sup')
-            }}
-            type="button"
-          >
-            Hello 1
-          </Button>
-          <Button
-            id="footer button 2"
-            marginBottom0
-            onClick={() => {
-              alert('sup 2')
-            }}
-            type="button"
-          >
-            Hello 2
-          </Button>
-        </>
-      )}
-      renderListItem={agreement => {
-        return (
-          <>
-            <AppIcon
-              app="agreements"
-              size="small"
-            >
-              {agreement.name}
-            </AppIcon>
-          </>
-        );
-      }}
-    />
-    );
-};
-
-
-const TestComponent = () => {
-  return (
-    <Pane
-      defaultWidth="fill"
-      dismissible
-      id="test-typedown"
-      paneTitle={"Test typedown"}
-    >
-      <Form
-        enableReinitialize
-        navigationCheck
-        onSubmit={(values) => console.log("submitting: %o", values)}
-        subscription={{ values: true }}
-      >
-        {({ handleSubmit }) => {
-          return (
-            <form onSubmit={handleSubmit}>
-              <Row>
-                <Col xs={6}>
-                  <TestField />
-                </Col>
-                <Col xs={6}>
-                  <Field
-                    component={TextField}
-                    name="test2"
-                  />
-                </Col>
-              </Row>
-              <Button
-                type="submit"
-              >
-                submit
-              </Button>
-            </form>
-          );
-        }}
-      </Form>
-    </Pane>
-  );
-};
-
-export default TestComponent;
-```
+DEPRECATED - DO NOT USE. You probably want Typedown

package/src/lib/hooks/README.md

@@ -21,6 +21,7 @@ endpoint | string | The endpoint to fetch refdataValues from | | ✓ |
 desc | string | The refdataCategory (usually of the form `DomainClass.Field`) | | ✕ |
 queryParams | object | A set of queryParameters to hand to react-query's `useQuery` | | ✕ |
 returnQueryObject | bool | A switch to return the entirety of the queryObject from useQuery. If `false`, the data will be destructured, if `true` the return will be the full object returned by react-query's `useQuery` | false | ✕ |
+options | object | An object of the shape SASQ_MAP (See generateKiwtQuery) to pass to the generateKiwtQuery inside. Any passed desc "d" will be passed as a filter `DescKey.${d}`, with DescKey acting as FilterName, assuming `filterKeys: { DescKey: "desc" }` in options, so `desc==${d}` is passed directly to the backend. | `{filterKeys: {DescKey: "desc" }, stats: false, max: 100}` | ✕ |
 
 ## useMutateRefdataValue
 A hook for mutations (Create/Delete/Edit) of refdataValues.
@@ -117,6 +118,8 @@ A hook which takes an object containing various helper components to render, and
 When the url contains a query of the form `helper={name}`, this hook will check the helpers object it was handed for a key matching `{name}`, and if there is one it will return the component value for that key.
 
 The hook also returns an object `helperToggleFunctions`, which will have the same keys as were handed to the hook, and values corresponding to "toggle" functions for that key. These functions are a simple way to change the helper query in the url.
+
+Finally the hook also returns an ease-of-use function `isOpen`, which takes a string input and returns a boolean if the current helper in the URL matches that string or not.
 ### Basic usage
 ```
 import { useHelperApp } from '@k-int/stripes-kint-components'
@@ -181,3 +184,34 @@ import { useQuery } from 'react-query';
     </SearchAndSortQuery>
 
 ```
+
+## useQIndex
+A hook with a similar API to setState, but instead stores a value in the `qindex` parameter in the URL.
+Returns an array `[qindex, setQindex]`. There is no way to set an initialValue with the hook, as the state is derived from the URL rather than the other way around. This means that multiple `useQIndex` hooks can exist at once.
+
+### BasicUsage
+```
+import {
+  Button,
+} from '@folio/stripes/components';
+import useQindex from '../../../../stripes-kint-components/src/lib/hooks/useQIndex';
+
+const Test() {
+  const [qindex, setQindex] = useQindex();
+
+  return (
+    <>
+      <Button
+        onClick={() => setQindex(qindex + "1")}
+      >
+        change the qindex
+      </Button>
+      <div>
+        {`The current qindex is: ${qindex}`
+      </div>
+    </>
+  );
+}
+
+export default Test;
+```

package/src/lib/hooks/index.js

@@ -5,3 +5,5 @@ export { default as useActiveElement } from './useActiveElement';
 export { default as useKiwtSASQuery } from './useKiwtSASQuery';
 export { default as useHelperApp } from './useHelperApp';
 export { default as useLocalStorageState } from './useLocalStorageState';
+export { default as useQIndex } from './useQIndex';
+

package/src/lib/hooks/useHelperApp.js

@@ -13,6 +13,10 @@ const useHelperApp = (helpers) => {
     setCurrentHelper(helper !== currentHelper ? helper : undefined);
   }, [currentHelper]);
 
+  const isOpen = (hlp) => {
+    return currentHelper === hlp;
+  };
+
   useEffect(() => {
     if (currentHelper !== query?.helper) {
       const newQuery = {
@@ -56,7 +60,7 @@ const useHelperApp = (helpers) => {
     helperToggleFunctions[h] = () => handleToggleHelper(h);
   });
 
-  return { HelperComponent, helperToggleFunctions };
+  return { HelperComponent, helperToggleFunctions, isOpen };
 };
 
 export default useHelperApp;

package/src/lib/hooks/useKiwtSASQuery.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 
 import buildUrl from '../utils/buildUrl';
+import useQindex from './useQIndex';
 
 const locationQuerySetter = ({ location, history, nsValues }) => {
   const url = buildUrl(location, nsValues);
@@ -13,8 +14,15 @@ const useKiwtSASQuery = () => {
   const location = useLocation();
   const [query, setQuery] = useState({});
   const queryGetter = () => query;
+
+  const [qindex] = useQindex();
+  // Ensure we update the query along with the querySetter
+  if (query.qindex !== qindex) {
+    setQuery({ ...query, qindex });
+  }
+
   const querySetter = ({ nsValues }) => {
-    setQuery(nsValues);
+    setQuery({ ...query, ...nsValues, qindex });
     locationQuerySetter({ location, history, nsValues });
   };
   return { query, queryGetter, querySetter };

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(),