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

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,36 @@ import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
+import { generateKiwtQuery, refdataOptions } from '../utils';
+
 const useRefdata = ({
   endpoint,
   desc,
+  options = refdataOptions,
   queryParams,
-  returnQueryObject = false
+  returnQueryObject = false,
 }) => {
   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,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,12 @@
 export { default as generateKiwtQuery } from './generateKiwtQuery';
+export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';
+export { default as selectorSafe } from './selectorSafe';
+
 export { default as buildUrl } from './buildUrl';
+
+export { default as refdataOptions } from './refdataOptions';
+
+// Settings utils
+export { default as renderHelpText } from './renderHelpText';
+export { default as sortByLabel } from './sortByLabel';
+export { default as toCamelCase } from './toCamelCase'; // I hate that this exists

package/src/lib/utils/refdataOptions.js

@@ -0,0 +1,7 @@
+export default {
+  filterKeys: {
+    DescKey: 'desc'
+  },
+  stats: false,
+  max: 100
+};

package/src/lib/{Settings/utils → utils}/renderHelpText.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import css from '../../../../styles/renderHelpText.css';
+import css from '../../../styles/renderHelpText.css';
 
 const renderHelpText = (id) => {
   return (

package/src/lib/{Settings/utils → utils}/sortByLabel.js

@@ -12,4 +12,4 @@ const sortByLabel = (a, b) => {
   return 0;
 };
 
-export default sortByLabel;
+export default sortByLabel;

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/test/helpers/index.js

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

package/test/helpers/translationsProperties.js

@@ -0,0 +1,40 @@
+import translations from '../../translations/stripes-kint-components/en';
+
+const translationsProperties = [
+  {
+    prefix: 'stripes-kint-components',
+    translations,
+  },
+  /* Don't think we're using any of the below rn */
+  {
+    prefix: 'stripes-core',
+    translations: {
+      'label.missingRequiredField': 'Please fill this in to continue',
+      'button.save': 'Save',
+    }
+  },
+  {
+    prefix: 'stripes-components',
+    translations: {
+      'saveAndClose': 'Save and close',
+      'cancel': 'Cancel',
+      'paneMenuActionsToggleLabel': 'Actions',
+      'collapseAll': 'Collapse all',
+      'button.edit': 'Edit'
+    },
+  },
+  {
+    prefix: 'stripes-smart-components',
+    translations: {
+      'permissionError': 'Sorry - your permissions do not allow access to this page.',
+      'searchAndFilter': 'Search and filter',
+      'hideSearchPane': 'Hide search pane',
+      'search': 'Search',
+      'resetAll': 'Reset all',
+      'searchResultsCountHeader': '"{count, number} {count, plural, one {record found} other {records found}}"',
+      'new': 'New'
+    },
+  }
+];
+
+export default translationsProperties;

package/test/jest/helpers/KintHarness.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Harness } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { SettingsContext } from '../../../src/lib/contexts';
+import translationsProperties from '../../helpers';
+
+
+export default function KintHarness({
+  children,
+  settingsValues = {
+    intlKey: 'stripes-kint-components',
+    refdataEndpoint: 'path/to/refdata',
+    settingEndpoint: 'path/to/settings',
+    templateEndpoint: 'path/to/templates'
+  },
+  translations = translationsProperties,
+  ...harnessProps
+}) {
+  return (
+    <SettingsContext.Provider value={settingsValues}>
+      <Harness
+        translations={translations}
+        {...harnessProps}
+      >
+        {children}
+      </Harness>
+    </SettingsContext.Provider>
+  );
+}
+
+KintHarness.propTypes = {
+  children: PropTypes.node,
+  settingsValues: PropTypes.object,
+  translations: PropTypes.object
+};

package/test/jest/helpers/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as renderWithKintHarness } from './renderWithKintHarness';

package/test/jest/helpers/renderWithKintHarness.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import KintHarness from './KintHarness';
+
+const renderWithKintHarness = (children, context, translations, renderer = render) => renderer(
+  <KintHarness
+    settingsValues={context}
+    translations={translations}
+  >
+    {children}
+  </KintHarness>
+);
+
+export default renderWithKintHarness;

package/test/jest/jest-transformer.js

@@ -0,0 +1,4 @@
+const babelJest = require('babel-jest');
+const babelConf = require('../../.babelrc');
+
+module.exports = babelJest.createTransformer(babelConf);

package/test/jest/setupTests.js

@@ -0,0 +1 @@
+import 'regenerator-runtime/runtime';

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

@@ -4,6 +4,7 @@
   "settings.edit": "Edit",
   "settings.settingLoading": "Loading",
   "settings.finishEditing": "Finish editing",
+  "settings.valueFor": "Value for setting {name}",
 
   "actionList.save": "Save",
   "actionList.cancel": "Cancel",
@@ -15,5 +16,7 @@
   "editableRefdataList.label": "Label",
   "editableRefdataList.value": "Value",
 
-  "sasqLookupComponent.mainPane.found": "{total} records found"
+  "sasqLookupComponent.mainPane.found": "{total} records found",
+
+  "noResultsMessage.showFilters": "Show filters"
 }

package/babelOptions.js

@@ -1,30 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env'], // No preset means ES5, { targets: '> 0.25%, not dead' }],
-//    ['@babel/preset-flow', { all: true }],
-    ['@babel/preset-react', {
-      // "runtime": "automatic",
-      "absoluteRuntime": false
-    }]
-  ],
-  plugins: [
-    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
-    // when building a platform directly, i.e. outside a workspace,
-    // babel complains loudly and repeatedly that when these modules are enabled:
-    // * @babel/plugin-proposal-class-properties,
-    // * @babel/plugin-proposal-private-methods and
-    // * @babel/plugin-proposal-private-property-in-object
-    // the "loose" option must be the same for all three.
-    // but @babel/preset-env sets it to false for ...private-methods.
-    // overriding it here silences the complaint. STRWEB-12
-    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
-    ['@babel/plugin-proposal-private-methods', { 'loose': true }],
-    ['@babel/plugin-proposal-private-property-in-object', { 'loose': true }],
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-proposal-function-sent',
-    '@babel/plugin-proposal-numeric-separator',
-    '@babel/plugin-proposal-throw-expressions',
-    '@babel/plugin-syntax-import-meta',
-//    [require.resolve('react-hot-loader/babel')],
-  ],
-};

package/es/lib/Settings/EditableSettingsList.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactFinalFormArrays = require("react-final-form-arrays");
-
-var _reactFinalForm = require("react-final-form");
-
-var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));
-
-var _EditableSettingsListFieldArray = _interopRequireDefault(require("./EditableSettingsListFieldArray"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var EditableSettingsList = function EditableSettingsList(_ref) {
-  var data = _ref.data,
-      initialValues = _ref.initialValues,
-      onSave = _ref.onSave;
-  return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Form, {
-    enableReinitialize: true,
-    initialValues: initialValues,
-    keepDirtyOnReinitialize: true,
-    mutators: _finalFormArrays["default"],
-    navigationCheck: true,
-    onSubmit: onSave,
-    subscription: {
-      value: true
-    }
-  }, function (_ref2) {
-    var handleSubmit = _ref2.handleSubmit;
-    return /*#__PURE__*/_react["default"].createElement("form", {
-      onSubmit: handleSubmit
-    }, /*#__PURE__*/_react["default"].createElement(_reactFinalFormArrays.FieldArray, {
-      component: _EditableSettingsListFieldArray["default"],
-      data: data,
-      name: "settings",
-      onSave: onSave
-    }));
-  });
-};
-
-EditableSettingsList.propTypes = {
-  onSave: _propTypes["default"].func,
-  data: _propTypes["default"].shape({
-    refdatavalues: _propTypes["default"].arrayOf(_propTypes["default"].object)
-  }),
-  initialValues: _propTypes["default"].object
-};
-var _default = EditableSettingsList;
-exports["default"] = _default;

package/es/lib/Settings/EditableSettingsListFieldArray.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactFinalForm = require("react-final-form");
-
-var _SettingField = _interopRequireDefault(require("./SettingField"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var EditableSettingsListFieldArray = function EditableSettingsListFieldArray(_ref) {
-  var data = _ref.data,
-      fields = _ref.fields,
-      onSave = _ref.onSave;
-
-  var handleSave = function handleSave(index) {
-    var setting = fields.value[index];
-    return onSave(setting);
-  };
-
-  return fields.map(function (setting, i) {
-    return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, {
-      key: setting,
-      component: _SettingField["default"],
-      name: setting,
-      onSave: function onSave() {
-        return handleSave(i);
-      },
-      settingData: _objectSpread({
-        currentSetting: fields.value[i]
-      }, data)
-    });
-  });
-};
-
-EditableSettingsListFieldArray.propTypes = {
-  fields: _propTypes["default"].object,
-  onSave: _propTypes["default"].func,
-  data: _propTypes["default"].shape({
-    refdatavalues: _propTypes["default"].arrayOf(_propTypes["default"].object)
-  }),
-  mutators: _propTypes["default"].object,
-  initialValues: _propTypes["default"].object
-};
-var _default = EditableSettingsListFieldArray;
-exports["default"] = _default;