@k-int/stripes-kint-components 2.2.0 → 2.3.0

package/src/lib/CustomProperties/Filter/useValueProps.js

@@ -0,0 +1,45 @@
+import { Datepicker, Select, TextField } from '@folio/stripes/components';
+import * as CUSTPROP_TYPES from '../../constants/customProperties';
+import { invalidNumber as invalidNumberValidator, required as requiredValidator } from '../../utils/validators';
+
+const {
+  REFDATA_CLASS_NAME: REFDATA,
+  DECIMAL_CLASS_NAME: DECIMAL,
+  INTEGER_CLASS_NAME: INTEGER,
+  DATE_CLASS_NAME: DATE,
+  TEXT_CLASS_NAME: TEXT,
+} = CUSTPROP_TYPES;
+
+const useValueProps = (custPropDefinition) => {
+  const props = {
+    validate: requiredValidator
+  };
+
+  switch (custPropDefinition.type) {
+    case INTEGER:
+    case DECIMAL:
+      props.component = TextField;
+      props.type = 'number';
+      props.validate = invalidNumberValidator;
+      break;
+    case REFDATA:
+      props.component = Select;
+      props.dataOptions = custPropDefinition.category.values.map(rdv => ({ label: rdv.label, value: rdv.id }));
+      props.placeholder = ' ';
+      break;
+    case DATE:
+      props.component = Datepicker;
+      props.backendDateStandard = 'YYYY-MM-DD';
+      props.timeZone = 'UTC';
+      props.usePortal = true;
+      break;
+    case TEXT:
+    default:
+      props.component = TextField;
+      break;
+  }
+
+  return props;
+};
+
+export default useValueProps;

package/src/lib/CustomProperties/View/CustomPropertiesView.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import CustomPropertiesViewCtx from './CustomPropertiesViewCtx';
+
+const CustomPropertiesView = ({
+  contexts = [],
+  customProperties,
+  customPropertiesEndpoint,
+  id,
+  labelOverrides = {},
+}) => {
+  return (
+    contexts.map(ctx => (
+      <CustomPropertiesViewCtx
+        key={`customPropertiesView-${ctx}`}
+        {...{
+          ctx,
+          customProperties,
+          customPropertiesEndpoint,
+          id,
+          labelOverrides
+        }}
+      />
+    ))
+  );
+};
+
+CustomPropertiesView.propTypes = {
+  contexts: PropTypes.arrayOf(PropTypes.string),
+  customProperties: PropTypes.object,
+  customPropertiesEndpoint: PropTypes.string,
+  id: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  nameOverride: PropTypes.string
+};
+
+export default CustomPropertiesView;

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Accordion, Badge, Spinner } from '@folio/stripes/components';
+
+import { useCustomProperties } from '../../hooks';
+
+import CustomPropertyCard from './CustomPropertyCard';
+
+const CustomPropertiesViewCtx = ({
+  ctx,
+  customProperties,
+  customPropertiesEndpoint,
+  id,
+  labelOverrides
+}) => {
+  // Deal with all the possible label override options
+  const getAccordionLabel = () => {
+    // Special case for null context
+    if (ctx === 'isNull') {
+      return (
+        labelOverrides.noContext ??
+        <FormattedMessage id="stripes-kint-components.customProperties" />
+      );
+    }
+
+    // Label overrides for specific contexts
+    if (labelOverrides[ctx]) {
+      return labelOverrides[ctx];
+    }
+
+    // Label override for default title, taking ctx into account
+    if (labelOverrides.defaultTitle && typeof labelOverrides.defaultTitle === 'function') {
+      return (
+        labelOverrides.defaultTitle(ctx)
+      );
+    }
+
+    // Label override for default title or finally built in default
+    return (
+      labelOverrides.defaultTitle ??
+      <FormattedMessage id="stripes-kint-components.customProperties.ctx.title" values={{ ctx }} />
+    );
+  };
+
+  const { data: custprops, isLoading } = useCustomProperties({
+    ctx,
+    endpoint: customPropertiesEndpoint,
+    returnQueryObject: true,
+    options: {
+      sort: [
+        { path: 'retired' }, // Place retired custprops at the end
+        { path: 'primary', direction: 'desc' }, // Primary properties should display before optional
+        { path: 'label' } // Within those groups, sort by label
+      ]
+    }
+  });
+
+  if (isLoading) {
+    return (
+      <Accordion
+        closedByDefault
+        displayWhenClosed={<Spinner />}
+        displayWhenOpen={<Spinner />}
+        id={`${id}-accordion-${ctx}`}
+        label={getAccordionLabel()}
+      >
+        <Spinner />
+      </Accordion>
+    );
+  }
+
+  // We need to display any set properties, along with any non-set primary properties
+  const primaryCount = custprops?.filter(cp => cp.primary === true)?.length ?? 0;
+  const optionalCount = Object.entries(customProperties)?.filter(
+    ([_key, cp]) => (
+      (cp[0]?.type?.ctx === ctx || (ctx === 'isNull' && !cp[0]?.type?.ctx)) && // Either the ctx string matches, or isNull matches blank
+      cp[0]?.type?.primary === false // Only count non-primary set custprops
+    )
+  )?.length ?? 0;
+
+  return (
+    (primaryCount + optionalCount) > 0 &&
+    <Accordion
+      closedByDefault
+      displayWhenClosed={<Badge>{primaryCount + optionalCount}</Badge>}
+      displayWhenOpen={<Badge>{primaryCount + optionalCount}</Badge>}
+      id={`${id}-accordion-${ctx}`}
+      label={getAccordionLabel()}
+    >
+      {custprops.map((cp, index) => (
+        <CustomPropertyCard
+          key={`custom-property-card-${ctx}[${index}]`}
+          ctx={ctx}
+          customProperty={customProperties?.[cp.name]?.[0]}
+          customPropertyDefinition={cp}
+          index={index}
+          labelOverrides={labelOverrides}
+        />
+      ))}
+    </Accordion>
+  );
+};
+
+CustomPropertiesViewCtx.propTypes = {
+  ctx: PropTypes.string,
+  customProperties: PropTypes.object,
+  customPropertiesEndpoint: PropTypes.string,
+  id: PropTypes.string,
+  labelOverrides: PropTypes.object,
+};
+
+export default CustomPropertiesViewCtx;

package/src/lib/CustomProperties/View/CustomPropertyCard.js

@@ -0,0 +1,177 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
+
+import {
+  Card,
+  Col,
+  FormattedUTCDate,
+  InfoPopover,
+  KeyValue,
+  NoValue,
+  Row,
+} from '@folio/stripes/components';
+
+import * as CUSTPROP_TYPES from '../../constants/customProperties';
+
+const CustomPropertyCard = ({
+  ctx,
+  customProperty,
+  customPropertyDefinition,
+  index,
+  labelOverrides
+}) => {
+  // We only need to display primary and set properties
+  const toDisplay = !!(customPropertyDefinition.primary || customProperty);
+
+  if (!toDisplay) {
+    return null;
+  }
+
+  const internalFalse = customProperty?.internal === false ||
+                        (customProperty?.internal === undefined && customPropertyDefinition.defaultInternal === false);
+
+  // Deal with all the possible label override options
+  const getRetiredCardTitle = () => {
+    // Label override for default card title,
+    if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
+      return (
+        labelOverrides.retiredName(customPropertyDefinition)
+      );
+    }
+
+    // Label override for default title or finally built in default
+    return (
+      labelOverrides.retiredName ??
+      <FormattedMessage id="stripes-kint-components.customProperty.retiredName" values={{ name: customPropertyDefinition.label }} />
+    );
+  };
+
+  const getInternalLabel = () => {
+    if (internalFalse) {
+      return (
+        labelOverrides.internalFalse ??
+        <FormattedMessage id="stripes-kint-components.customProperty.internalFalse" />
+      );
+    }
+
+    return (
+      labelOverrides.internalTrue ??
+      <FormattedMessage id="stripes-kint-components.customProperty.internalTrue" />
+    );
+  };
+
+  const renderValue = () => {
+    if (!customProperty) {
+      return (
+        labelOverrides.notSet ??
+        <FormattedMessage id="stripes-kint-components.customProperty.notSet" />
+      );
+    }
+
+    switch (customPropertyDefinition.type) {
+      case CUSTPROP_TYPES.REFDATA_CLASS_NAME:
+        return customProperty.value?.label ?? customProperty.value?.value;
+      case CUSTPROP_TYPES.DECIMAL_CLASS_NAME:
+      case CUSTPROP_TYPES.INTEGER_CLASS_NAME:
+        return <FormattedNumber value={customProperty.value} />;
+      case CUSTPROP_TYPES.DATE_CLASS_NAME:
+        return <FormattedUTCDate value={customProperty.value} />;
+      case CUSTPROP_TYPES.TEXT_CLASS_NAME:
+      default:
+        return customProperty.value;
+    }
+  };
+
+  return (
+    <Card
+      key={`customPropertyCard-${ctx}[${index}]`}
+      headerStart={
+        <>
+          <strong>
+            {customPropertyDefinition.retired ?
+              getRetiredCardTitle() :
+              customPropertyDefinition.label
+            }
+          </strong>
+          {customPropertyDefinition.description ? (
+            <InfoPopover
+              content={customPropertyDefinition.description}
+            />
+          ) : null}
+        </>
+      }
+      id={`customproperty-card-${index}`}
+    >
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides.value ??
+              <FormattedMessage id="stripes-kint-components.customProperty.value" />
+            }
+          >
+            {renderValue()}
+          </KeyValue>
+        </Col>
+        {customProperty?.internalNote ? (
+          <Col xs={6}>
+            <KeyValue
+              label={
+                labelOverrides.internalNote ??
+                <FormattedMessage id="stripes-kint-components.customProperty.internalNote" />
+              }
+            >
+              <span
+                style={{ whiteSpace: 'pre-wrap' }}
+              >
+                {customProperty.internalNote}
+              </span>
+            </KeyValue>
+          </Col>
+        ) : null}
+      </Row>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides.visibility ??
+              <FormattedMessage id="stripes-kint-components.customProperty.visibility" />
+            }
+          >
+            {getInternalLabel()}
+          </KeyValue>
+        </Col>
+        {internalFalse &&
+          <Col xs={6}>
+            <KeyValue
+              label={
+                labelOverrides.publicNote ??
+                <FormattedMessage id="stripes-kint-components.customProperty.publicNote" />
+              }
+            >
+              {customProperty?.publicNote ? (
+                <span
+                  style={{ whiteSpace: 'pre-wrap' }}
+                >
+                  {customProperty.publicNote}
+                </span>
+              ) : (
+                <NoValue />
+              )}
+            </KeyValue>
+          </Col>
+        }
+      </Row>
+    </Card>
+  );
+};
+
+CustomPropertyCard.propTypes = {
+  ctx: PropTypes.string,
+  customProperty: PropTypes.object,
+  customPropertyDefinition: PropTypes.object,
+  index: PropTypes.number,
+  labelOverrides: PropTypes.object,
+};
+
+export default CustomPropertyCard;

package/src/lib/CustomProperties/View/index.js

@@ -0,0 +1,3 @@
+export { default as CustomPropertiesView } from './CustomPropertiesView';
+export { default as CustomPropertiesViewCtx } from './CustomPropertiesViewCtx';
+export { default as CustomPropertyCard } from './CustomPropertyCard';

package/src/lib/CustomProperties/index.js

@@ -0,0 +1,30 @@
+export {
+  CustomPropertiesLookup,
+  CustomPropertyView,
+  CustomPropertiesSettings,
+  CustomPropertyForm
+} from './Config';
+
+export {
+  CustomPropertiesEdit,
+  CustomPropertiesEditCtx,
+  CustomPropertiesListField,
+  CustomPropertyFormCard,
+  CustomPropertyField
+} from './Edit';
+
+
+export {
+  CustomPropertiesView,
+  CustomPropertiesViewCtx,
+  CustomPropertyCard
+} from './View';
+
+export {
+  CustomPropertiesFilter,
+  CustomPropertiesFilterForm,
+  CustomPropertiesFilterField,
+  CustomPropertiesFilterFieldArray,
+  useOperators,
+  useParseActiveFilterStrings,
+} from './Filter';

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -55,25 +55,28 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
   // This is the function which will take a row in the table and assign the relevant actions to it
   const actionAssigner = () => {
     const actionArray = [
-      { name: 'edit', label: <FormattedMessage id="stripes-kint-components.editableRefdataList.edit" />, icon: 'edit' },
+      {
+        name: 'edit',
+        label: <FormattedMessage id="stripes-kint-components.editableRefdataList.edit" />,
+        icon: 'edit',
+        callback: (data) => editRefdataValue(data)
+      }
     ];
 
     if (!refdata?.internal) {
-      actionArray.push({ name: 'delete', label: <FormattedMessage id="stripes-kint-components.editableRefdataList.delete" />, icon: 'trash' });
+      actionArray.push({
+        name: 'delete',
+        label: <FormattedMessage id="stripes-kint-components.editableRefdataList.delete" />,
+        icon: 'trash',
+        callback: (data) => deleteRefdataValue(data.id)
+      });
     }
     return actionArray;
   };
 
-  const actionCalls = {
-    create: refdata?.internal ? null : (data) => editRefdataValue(data),
-    edit: (data) => editRefdataValue(data),
-    delete: (data) => deleteRefdataValue(data.id)
-  };
-
   return (
     <ActionList
       actionAssigner={actionAssigner}
-      actionCalls={actionCalls}
       columnMapping={{
         label: <FormattedMessage id="stripes-kint-components.editableRefdataList.label" />,
         value: <FormattedMessage id="stripes-kint-components.editableRefdataList.value" />
@@ -82,11 +85,11 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
       creatableFields={{
         value: () => false
       }}
+      createCallback={refdata?.internal ? null : (data) => editRefdataValue(data)}
       editableFields={{
         value: () => false
       }}
       visibleFields={['label', 'value']}
-      // TODO add a field validator/fieldType as options?
     />
   );
 };

package/src/lib/FormModal/FormModal.js

@@ -4,7 +4,13 @@ import { Form } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 import { Button, Modal, ModalFooter } from '@folio/stripes/components';
 
-const FormModal = ({ children, modalProps: { onClose, ...modalProps }, onSubmit, ...formProps }) => {
+const FormModal = ({
+  children,
+  labelOverrides = {},
+  modalProps: { footer, onClose, ...modalProps },
+  onSubmit,
+  ...formProps
+}) => {
   return (
     <Form
       onSubmit={onSubmit}
@@ -16,21 +22,33 @@ const FormModal = ({ children, modalProps: { onClose, ...modalProps }, onSubmit,
           restart();
         };
 
-        const renderFooter = () => (
-          <ModalFooter>
-            <Button
-              buttonStyle="primary"
-              onClick={handleSubmit}
-            >
-              <FormattedMessage id="stripes-kint-components.save" />
-            </Button>
-            <Button
-              onClick={handleClose}
-            >
-              <FormattedMessage id="stripes-kint-components.cancel" />
-            </Button>
-          </ModalFooter>
-        );
+        const renderFooter = () => {
+          if (footer) {
+            return footer({ handleSubmit, handleClose });
+          }
+
+          return (
+            <ModalFooter>
+              <Button
+                buttonStyle="primary"
+                onClick={handleSubmit}
+              >
+                {
+                  labelOverrides.save ??
+                  <FormattedMessage id="stripes-kint-components.save" />
+                }
+              </Button>
+              <Button
+                onClick={handleClose}
+              >
+                {
+                  labelOverrides.cancel ??
+                  <FormattedMessage id="stripes-kint-components.cancel" />
+                }
+              </Button>
+            </ModalFooter>
+          );
+        };
 
         return (
           <form
@@ -57,8 +75,10 @@ FormModal.propTypes = {
     PropTypes.node,
     PropTypes.func,
   ]),
+  labelOverrides: PropTypes.object,
   modalProps: PropTypes.shape({
-    onClose: PropTypes.func
+    footer: PropTypes.func,
+    onClose: PropTypes.func,
   }),
   onSubmit: PropTypes.func
 };

package/src/lib/QueryTypedown/QueryTypedown.js

@@ -5,12 +5,13 @@ import Typedown from '../Typedown';
 import { useTypedownData } from '../hooks/typedownHooks';
 
 const QueryTypedown = ({
+  dataFormatter = d => d,
   path,
   pathMutator,
   ...rest
 }) => {
   const [callPath, setCallPath] = useState(pathMutator(null, path));
-  const data = useTypedownData(callPath);
+  const data = dataFormatter(useTypedownData(path, callPath));
 
   const onType = e => {
     setCallPath(pathMutator(e.target.value, path));
@@ -26,6 +27,7 @@ const QueryTypedown = ({
 };
 
 QueryTypedown.propTypes = {
+  dataFormatter: PropTypes.func,
   path: PropTypes.string,
   pathMutator: PropTypes.func
 };

package/src/lib/constants/customProperties.js

@@ -7,3 +7,4 @@ export const INTEGER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomP
 export const REFDATA_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata';
 export const REFDATA_DEFINITION_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition';
 export const TEXT_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyText';
+export const DATE_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyLocalDate';

package/src/lib/hooks/index.js

@@ -10,3 +10,5 @@ export { useSettings, useSettingSection } from './settingsHooks';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
 export { default as useCustomProperties } from './useCustomProperties';
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';
+export { default as useAvailableCustomProperties } from './useAvailableCustomProperties';
+export { default as useInvalidateRefdata } from './useInvalidateRefdata';

package/src/lib/hooks/typedownHooks/useTypedownData.js

@@ -2,16 +2,22 @@ import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
-const useTypedownData = (callPath) => {
+import { typedownQueryKey } from '../../utils';
+
+const useTypedownData = (path, callPath) => {
   const ky = useOkapiKy();
 
+  const queryKey = typedownQueryKey(path);
+  if (callPath) {
+    queryKey.push(callPath);
+  }
+
   const { data, isLoading } = useQuery(
     // Ensure when multiple apps are using this function that each one gets memoized individually
-    ['stripes-kint-components', 'typedown', callPath],
+    queryKey,
     () => ky(callPath).json()
   );
 
-
   // Smooth out transitions while data changes by only displaying once call has been loaded.
   const [contentData, setContentData] = useState();
   useEffect(() => {

package/src/lib/hooks/useAvailableCustomProperties.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+const useAvailableCustomProperties = (customProperties = []) => {
+  const intl = useIntl();
+  const [custProps, setCustProps] = useState([]);
+
+  useEffect(() => {
+    if (customProperties.length !== custProps.length) {
+      setCustProps(customProperties.map(customProperty => {
+        let options = customProperty?.category?.values;
+        if (options) {
+          options = [
+            {
+              label: intl.formatMessage({
+                id: 'stripes-kint-components.notSet',
+              }),
+              value: '',
+            },
+            ...options,
+          ];
+        }
+
+        return {
+          description: customProperty.description,
+          label: customProperty.label,
+          primary: customProperty.primary,
+          type: customProperty.type,
+          options,
+          value: customProperty.name,
+          defaultInternal: customProperty.defaultInternal,
+        };
+      }));
+    }
+  }, [custProps, customProperties, intl]);
+
+  return custProps;
+};
+
+export default useAvailableCustomProperties;

package/src/lib/hooks/useInvalidateRefdata.js

@@ -0,0 +1,11 @@
+import { useQueryClient } from 'react-query';
+
+import { refdataQueryKey } from '../utils';
+
+const useInvalidateRefdata = (desc) => {
+  const queryClient = useQueryClient();
+
+  return () => queryClient.invalidateQueries(refdataQueryKey(desc));
+};
+
+export default useInvalidateRefdata;

package/src/lib/hooks/useMutateRefdataValue.js

@@ -1,8 +1,9 @@
-import React from 'react';
 import { useMutation } from 'react-query';
 
 import { useOkapiKy } from '@folio/stripes/core';
 
+import useInvalidateRefdata from './useInvalidateRefdata';
+
 const useMutateRefdataValue = ({
   afterQueryCalls,
   endpoint,
@@ -16,6 +17,7 @@ const useMutateRefdataValue = ({
   const returnObj = {};
 
   const ky = useOkapiKy();
+  const invalidateRefdata = useInvalidateRefdata();
 
   const deleteQueryObject = useMutation(
     ['stripes-kint-components', 'useMutateRefdataValue', 'delete', id],
@@ -33,7 +35,8 @@ const useMutateRefdataValue = ({
         }
       }
     ).json()
-      .then(afterQueryCalls?.delete),
+      .then(afterQueryCalls?.delete)
+      .then(() => invalidateRefdata()),
     queryParams?.delete
   );
 
@@ -50,7 +53,8 @@ const useMutateRefdataValue = ({
         }
       }
     ).json()
-      .then(afterQueryCalls?.put),
+      .then(afterQueryCalls?.put)
+      .then(() => invalidateRefdata()),
     queryParams?.put
   );