@k-int/stripes-kint-components 5.2.3 → 5.3.1

package/src/lib/RefdataCategoriesSettings/RefdataCategoriesSettings.js

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Col, KeyValue, Pane, PaneHeader, PaneMenu, Row } from '@folio/stripes/components';
+
+import { useActionListRef, useKintIntl } from '../hooks';
+
+import EditableRefdataCategoryList from '../EditableRefdataCategoryList';
+import EditableRefdataList from '../EditableRefdataList';
+import FormattedKintMessage from '../FormattedKintMessage';
+
+
+const propTypes = {
+  afterQueryCalls: PropTypes.object,
+  catchQueryCalls: PropTypes.object,
+  displayConditions: PropTypes.shape({
+    create: PropTypes.bool,
+    delete: PropTypes.bool,
+    view: PropTypes.bool,
+  }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node
+  ]),
+  labelOverrides: PropTypes.object,
+  onClose: PropTypes.func,
+  refdataEndpoint: PropTypes.string
+};
+
+const RefdataCategoriesSettings = ({
+  /*
+   * Set of extra booleans for controlling access to actions
+   * create/delete (View should be handled externally)
+   * This will not overwrite "internal" behaviour, ie setting
+   * delete to 'true' here would still not render a delete button
+   * for a refdata category that has refdata values.
+   */
+  displayConditions = {
+    create: true,
+    delete: true,
+    edit: true
+  },
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {}, // An object containing translation alternatives
+  onClose,
+  refdataEndpoint
+}) => {
+  /* A component that allows for editing of refdata categories */
+  const [refdataCategory, setRefdataCategory] = useState();
+  const [refState, rdclRef, passedRef] = useActionListRef();
+
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  const handleRefdataCategoryClick = (rc) => {
+    setRefdataCategory(rc);
+  };
+
+  const pickListValuesLabel = kintIntl.formatKintMessage({
+    id: 'settings.pickListValues',
+    overrideValue: labelOverrides?.pickListValues
+  });
+
+  const renderViewPaneHeader = renderProps => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      onClose={() => setRefdataCategory()}
+      paneTitle={
+        kintIntl.formatKintMessage(
+          {
+            id: 'refdataCategories.config.viewPaneTitle',
+            overrideValue: labelOverrides?.viewPaneTitle,
+            fallbackMessage: refdataCategory?.desc,
+          },
+          {
+            name: refdataCategory?.desc,
+          }
+        )
+      }
+    />
+  );
+
+  const renderLookupPaneHeader = renderProps => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      lastMenu={
+        <PaneMenu>
+          <Button
+            disabled={!!refState?.editing}
+            marginBottom0
+            onClick={() => rdclRef?.current?.create()}
+          >
+            <FormattedKintMessage id="new" />
+          </Button>
+        </PaneMenu>
+      }
+      onClose={onClose}
+      paneTitle={kintIntl.formatKintMessage({
+        id: 'settings.pickLists',
+        overrideValue: labelOverrides?.pickLists
+      })}
+    />
+  );
+
+  return (
+    <>
+      <Pane
+        defaultWidth="fill"
+        id="edit-refdata-desc"
+        renderHeader={renderLookupPaneHeader}
+      >
+        <EditableRefdataCategoryList
+          ref={passedRef}
+          afterQueryCalls={{
+            post: (json) => { setRefdataCategory(json); }
+          }}
+          displayConditions={displayConditions}
+          handleRefdataCategoryClick={handleRefdataCategoryClick}
+          hideCreateButton
+          onConfirmDelete={(id) => {
+            if (refdataCategory?.id === id) {
+              setRefdataCategory();
+            }
+          }}
+          refdataEndpoint={refdataEndpoint}
+        />
+      </Pane>
+      {refdataCategory?.desc &&
+        <Pane
+          defaultWidth="fill"
+          id="settings-refdataCategories-viewPane"
+          renderHeader={renderViewPaneHeader}
+        >
+          <Row>
+            <Col xs={8}>
+              <KeyValue
+                label={kintIntl.formatKintMessage({
+                  id: 'refdataCategory.refdataCategory',
+                  overrideValue: labelOverrides?.refdataCategory
+                })}
+                value={refdataCategory.desc}
+              />
+            </Col>
+            <Col xs={4}>
+              <KeyValue
+                label={kintIntl.formatKintMessage({
+                  id: 'refdataCategory.noOfValues',
+                  overrideValue: labelOverrides?.noOfValues
+                })}
+                value={refdataCategory?.values?.length}
+              />
+            </Col>
+          </Row>
+          <EditableRefdataList
+            afterQueryCalls={{
+              put: json => setRefdataCategory(json),
+              delete: (json) => setRefdataCategory(json)
+            }}
+            desc={refdataCategory?.desc}
+            displayConditions={displayConditions}
+            label={pickListValuesLabel}
+            refdataEndpoint={refdataEndpoint}
+          />
+        </Pane>
+      }
+    </>
+  );
+};
+
+RefdataCategoriesSettings.propTypes = propTypes;
+
+export default RefdataCategoriesSettings;

package/src/lib/RefdataCategoriesSettings/index.js

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

package/src/lib/hooks/__mocks__/index.js

@@ -3,11 +3,15 @@ import customProperties from '../../../../test/jest/customProperties';
 
 import useKintIntl from '../useKintIntl';
 
+/* EXAMPLE Grab actual hooks for anything not mocked here */
+const hooks = jest.requireActual('../index');
+
 // We have to do this up here too so that our passed useKintIntl
 // ALSO has a mocked useIntlKeyStore... I think anyway
 jest.mock('../useIntlKeyStore', () => () => () => 'ui-test-implementor');
 
 module.exports = {
+  ...hooks,
   useRefdata: () => refdata,
   useTemplates: () => [], // We should set up some templates to test this properly
   useCustomProperties: () => ({ data: customProperties, isLoading: false }),

package/src/lib/hooks/index.js

@@ -17,3 +17,4 @@ export { default as useIntlKey } from './useIntlKey';
 export { default as useSASQQueryMeta } from './useSASQQueryMeta';
 export { default as useModConfigEntries } from './useModConfigEntries';
 export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';
+export { default as useActionListRef } from './useActionListRef';

package/src/lib/hooks/useActionListRef.js

@@ -0,0 +1,36 @@
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+
+// Using the passed actionListRef in a stateful way
+// is somewhat complicated, so here's a hook to simplify that work
+const useActionListRef = () => {
+  const actionListRef = useRef();
+  const [editing, setEditing] = useState();
+
+  const passedRef = useCallback(node => {
+    // All functions must be present on here
+    actionListRef.current = node;
+    if (node?.editing) {
+      setEditing(node.editing);
+    } else {
+      setEditing();
+    }
+  }, []);
+
+// We don't need this for actionListRef, but it serves as an example for building a stateful ref object (sans functions)
+  const refState = useMemo(() => ({
+    editing
+  }), [editing]);
+
+  return [
+    refState, // This is a state containing up to date "editing" state from within ActionList
+    actionListRef, // This is the ref which will contain the create function
+    passedRef // This is the ref to pass to ActionList
+  ];
+};
+
+export default useActionListRef;

package/src/lib/hooks/useQIndex.js

@@ -12,10 +12,18 @@ const useQIndex = () => {
   const handleQindexChange = (newQindex) => {
     setCurrentQindex(newQindex);
     if (newQindex !== query?.qindex) {
-      const newQuery = {
-        ...query,
-        qindex: newQindex
-      };
+      let newQuery;
+      if (newQindex !== '') {
+        newQuery = {
+          ...query,
+          qindex: newQindex
+        };
+      } else {
+        newQuery = {
+          ...query,
+          qindex: undefined
+        };
+      }
 
       history.push({
         pathname: location.pathname,