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

package/src/lib/CustomProperties/Edit/CustomPropertiesEditCtx.js

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Accordion } from '@folio/stripes/components';
+
+import CustomPropertiesListField from './CustomPropertiesListField';
+import { useCustomProperties } from '../../hooks';
+
+const CustomPropertiesEditCtx = ({
+  ctx,
+  customPropertiesEndpoint,
+  id,
+  labelOverrides,
+  nameOverride
+}) => {
+  // 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: {
+      filters: [{
+        path: 'retired',
+        comparator: '!=',
+        value: 'true'
+      }]
+    }
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    custprops.length > 0 &&
+    <Accordion
+      id={`${id}-accordion-${ctx}`}
+      label={getAccordionLabel()}
+    >
+      <CustomPropertiesListField
+        ctx={ctx}
+        customProperties={custprops}
+        labelOverrides={labelOverrides}
+        name={nameOverride ?? 'customProperties'}
+      />
+    </Accordion>
+  );
+};
+
+CustomPropertiesEditCtx.propTypes = {
+  ctx: PropTypes.string,
+  customPropertiesEndpoint: PropTypes.string,
+  id: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  nameOverride: PropTypes.string
+};
+
+export default CustomPropertiesEditCtx;

package/src/lib/CustomProperties/Edit/CustomPropertiesListField.js

@@ -0,0 +1,194 @@
+import { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Field, useFormState } from 'react-final-form';
+
+import { Button, KeyValue } from '@folio/stripes/components';
+import { FormattedMessage } from 'react-intl';
+import { useAvailableCustomProperties } from '../../hooks';
+import CustomPropertyFormCard from './CustomPropertyFormCard';
+
+const CustomPropertiesList = ({
+  availableCustomProperties = [],
+  input: {
+    name,
+    onChange,
+    value
+  },
+  labelOverrides,
+  meta: {
+    pristine
+  },
+}) => {
+  const [customProperties, setCustomProperties] = useState([]); // This is the list of customProperties we're currently displaying for edit.
+  const [dirtying, setDirtying] = useState(false);
+
+  useEffect(() => {
+    // When the user loads this form, we want to init the list of customProperties
+    // we're displaying (state.customProperties) with the list of customProperties that have been set
+    // either via defaults or previously-saved data. Since that data may come in
+    // _after_ we have mounted this component, we need to check if new data has come in
+    // while the form is still marked as pristine.
+    //
+    // final-form unsets `pristine` after its `onChange` is called, but we also dirty
+    // the component when we add/remove rows. That happens _before_ `onChange` is called,
+    // so internally we use `state.dirtying` to show that we just initiated an action
+    // that will result in a dirty component.
+    if (pristine && !dirtying) {
+      setCustomProperties(availableCustomProperties.filter(
+        customProperty => value[customProperty.value] !== undefined
+      ));
+    }
+    return null;
+  }, [availableCustomProperties, dirtying, pristine, value]);
+
+  const handleDeleteCustomProperty = (customProperty, i) => {
+    const currentValue = value[customProperty.value]?.[0] ?? {};
+
+    const newCustomProperties = [...customProperties];
+    newCustomProperties.splice(i, 1);
+    setCustomProperties(newCustomProperties);
+    setDirtying(true);
+
+    onChange({
+      ...value,
+      [customProperty.value]: [{
+        ...currentValue,
+        _delete: true,
+      }],
+    });
+  };
+
+  const renderCustomProperties = (customPropertyType) => {
+    // This is necessary to track individually since "index" will span primary/optional for a given set
+    let internalPropertyCounter = 0;
+    return customProperties.map((customProperty, index) => {
+      if (customPropertyType === 'primary' && !customProperty.primary) return undefined;
+      if (customPropertyType === 'optional' && customProperty.primary) return undefined;
+
+      internalPropertyCounter += 1;
+
+      return (
+        <CustomPropertyFormCard
+          key={`customPropertyField-${customProperty.value}-${index}`}
+          {...{
+            availableCustomProperties,
+            customProperty,
+            customPropertyType,
+            customProperties,
+            handleDeleteCustomProperty,
+            index,
+            internalPropertyCounter,
+            labelOverrides,
+            name,
+            onChange,
+            setCustomProperties,
+            value
+          }}
+        />
+      );
+    }).filter(cp => cp !== undefined);
+  };
+
+  return (
+    <>
+      {
+        availableCustomProperties.some((customProperty = {}) => customProperty.primary) &&
+          <KeyValue
+            label={labelOverrides.primaryProperties ?? <FormattedMessage id="stripes-kint-components.customProperties.primaryProperties" />}
+            value={renderCustomProperties('primary')}
+          />
+      }
+      {
+        availableCustomProperties.some((customProperty = {}) => !customProperty.primary) &&
+          <KeyValue
+            label={labelOverrides.optionalProperties ?? <FormattedMessage id="stripes-kint-components.customProperties.optionalProperties" />}
+            value={renderCustomProperties('optional')}
+          />
+      }
+      {
+        availableCustomProperties.some((customProperty = {}) => !customProperty.primary) &&
+        <Button
+          id="add-customproperty-btn"
+          onClick={() => {
+            setCustomProperties([...customProperties, {}]);
+            setDirtying(true);
+          }}
+        >
+          {
+            labelOverrides.addProperty ??
+            <FormattedMessage id="stripes-kint-components.customProperties.addProperty" />
+          }
+        </Button>
+      }
+    </>
+  );
+};
+
+const CustomPropertiesListField = ({
+  ctx,
+  customProperties,
+  labelOverrides,
+  ...fieldProps
+}) => {
+  const fieldRef = useRef();
+  const availableCustomProperties = useAvailableCustomProperties(customProperties);
+
+  const { initialValues } = useFormState();
+  const getInitialValue = () => {
+    const cps = {};
+    (customProperties || [])
+      .filter(cp => cp.primary)
+      // Change default to be an ignored customProperty.
+      // This means any changes without setting the value will be ignored
+      .forEach(cp => { cps[cp.name] = [{ _delete: true }]; });
+
+    // IMPORTANT -- All customproperty ctx sections are adding to the same "initialValue" field
+    // Ensure that we don't already have initialValues for this particular set before setting them,
+    // to ensure no looping behaviour
+    if (Object.keys(cps).every(key => initialValues.customProperties?.[key] !== undefined)) {
+      return initialValues.customProperties;
+    }
+
+    // Ensure that if we already had these values in initialvalues they're not overwritten
+    return ({ ...cps, ...initialValues.customProperties });
+  };
+
+  return (
+    <Field
+      {...fieldProps}
+      initialValue={getInitialValue()}
+      render={p => {
+        return (
+          <CustomPropertiesList
+            ref={fieldRef}
+            availableCustomProperties={availableCustomProperties}
+            ctx={ctx}
+            labelOverrides={labelOverrides}
+            {...p}
+          />
+        );
+      }}
+    />
+  );
+};
+
+CustomPropertiesListField.propTypes = {
+  ctx: PropTypes.string,
+  customProperties: PropTypes.arrayOf(PropTypes.object),
+  labelOverrides: PropTypes.object,
+};
+
+CustomPropertiesList.propTypes = {
+  availableCustomProperties: PropTypes.arrayOf(PropTypes.object),
+  ctx: PropTypes.string,
+  input: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    onChange: PropTypes.func,
+  }),
+  labelOverrides: PropTypes.object,
+  meta: PropTypes.object,
+};
+
+
+export default CustomPropertiesListField;

package/src/lib/CustomProperties/Edit/CustomPropertyField.js

@@ -0,0 +1,299 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { Field } from 'react-final-form';
+
+import {
+  Col,
+  Datepicker,
+  Row,
+  Select,
+  TextArea,
+  TextField
+} from '@folio/stripes/components';
+
+import * as CUSTOM_PROPERTY_TYPES from '../../constants/customProperties';
+
+import { customPropertyValidator } from '../../utils/validators';
+
+const CustomPropertyField = ({
+  availableCustomProperties,
+  customProperty,
+  customPropertyType,
+  customProperties,
+  index,
+  labelOverrides,
+  name,
+  onChange,
+  value,
+  setCustomProperties
+}) => {
+  const intl = useIntl();
+
+  const getCustomProperty = (customPropertyValue) => {
+    return availableCustomProperties.find(cp => cp.value === customPropertyValue);
+  };
+
+  const renderCustomPropertyName = () => {
+    const unsetCustomProperties = availableCustomProperties.filter(t => {
+      // Only optional properties can be set
+      if (t.primary) return false;
+
+      const custPropValue = value[t.value];
+
+      // The customProperty is unset and has no value.
+      if (custPropValue === undefined) return true;
+
+      // The customProperty is set but is marked for deletion. Allow reuse.
+      if (custPropValue[0]?._delete) return true;
+      return false;
+    });
+
+    const customPropertyValue = value[customProperty.value];
+    const id = customPropertyValue?.[0]?.id;
+
+    return (
+      <Select
+        autoFocus={!id}
+        dataOptions={[customProperty, ...unsetCustomProperties]} // The selected customProperty, and the available unset customProperties
+        id={`edit-customproperty-${index}-name`}
+        label={
+          labelOverrides.name ??
+          <FormattedMessage id="stripes-kint-components.customProperty.name" />
+        }
+        onChange={e => {
+          const newValue = e.target.value;
+
+          // Update `state.customProperties` which controls what customProperties are being edited.
+          const newCustomProperties = [...customProperties];
+          newCustomProperties[index] = getCustomProperty(newValue);
+          setCustomProperties(newCustomProperties);
+
+          // Update final-form (which tracks what the values for a given customProperty are) because
+          // in essence we're deleting a customProperty and creating a new customProperty.
+          // We do this by 1) marking the current customProperty for deletion and 2) initing
+          // the new customProperty to an empty object.
+          const currentValue = value[customProperty.value] ? value[customProperty.value][0] : {};
+          onChange({
+            ...value,
+            [customProperty.value]: [{
+              id: currentValue.id,
+              _delete: true,
+            }],
+            [newValue]: [{}],
+          });
+        }}
+        required
+        value={customProperty.value}
+      />
+    );
+  };
+
+  const renderCustomPropertyValue = () => {
+    const currentValue = value[customProperty.value] ? value[customProperty.value][0] : {};
+    const min = Number.MIN_SAFE_INTEGER;
+    const max = Number.MAX_SAFE_INTEGER;
+
+    const handleChange = e => {
+      onChange({
+        ...value,
+        [customProperty.value]: [{
+          ...currentValue,
+          _delete: e.target.value === '' ? true : undefined, // Delete customProperty if removing the value.
+          value: (customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME ||
+            customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME) ?
+            parseFloat(e.target.value) : e.target.value // send down the number for integers and decimal types
+        }],
+      });
+    };
+
+    // Figure out which component we're rendering and specify its unique props.
+    let fieldProps;
+
+    switch (customProperty.type) {
+      case CUSTOM_PROPERTY_TYPES.REFDATA_CLASS_NAME:
+        fieldProps = {
+          component: Select,
+          dataOptions: customProperty.options,
+          format: (v) => v?.value,
+        };
+        break;
+      case CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME:
+      case CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME:
+        fieldProps = {
+          badInput: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyInvalidNumber' }),
+          component: TextField,
+          max,
+          min,
+          rangeOverflow: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyDecimalValueNotInRange' }, { min, max }),
+          rangeUnderflow: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyDecimalValueNotInRange' }, { min, max }),
+          step: 'any',
+          type: 'number',
+        };
+        break;
+      case CUSTOM_PROPERTY_TYPES.TEXT_CLASS_NAME:
+        fieldProps = {
+          component: TextArea,
+          parse: v => v  // Lets us send an empty string instead of `undefined`
+        };
+        break;
+      case CUSTOM_PROPERTY_TYPES.DATE_CLASS_NAME:
+          fieldProps = {
+            component: Datepicker,
+            backendDateStandard: 'YYYY-MM-DD',
+            timeZone: 'UTC',
+            usePortal: true
+          };
+          break;
+      default:
+        fieldProps = { component: TextField };
+        break;
+    }
+
+    return (
+      <Field
+        data-test-customproperty-value
+        id={`edit-customproperty-${index}-value`}
+        label={
+          labelOverrides.value ??
+          <FormattedMessage id="stripes-kint-components.customProperty.value" />
+        }
+        name={`${name}.${customProperty.value}[0].value`}
+        onChange={handleChange}
+        required={!customProperty.primary}
+        validate={(fieldValue, allValues) => customPropertyValidator(fieldValue, allValues, customProperty)}
+        valueMissing={intl.formatMessage({ id: 'stripes-core.label.missingRequiredField' })}
+        {...fieldProps}
+      />
+    );
+  };
+
+  const renderCustomPropertyVisibility = () => {
+    const customPropertyObject = value[customProperty.value]?.[0] ?? {};
+
+    const handleChange = e => {
+      onChange({
+        ...value,
+        [customProperty.value]: [{
+          ...customPropertyObject,
+          internal: e.target.value
+        }],
+      });
+    };
+
+    return (
+      <Select
+        data-test-customproperty-visibility
+        dataOptions={[
+          { value: true, label: intl.formatMessage({ id: 'stripes-kint-components.customProperty.internalTrue' }) },
+          { value: false, label: intl.formatMessage({ id: 'stripes-kint-components.customProperty.internalFalse' }) }
+        ]}
+        id={`edit-customproperty-${index}-visibility`}
+        label={
+          labelOverrides.visibility ??
+          <FormattedMessage id="stripes-kint-components.customProperty.visibility" />
+        }
+        onChange={handleChange}
+        value={customPropertyObject?.internal ?? customProperty.defaultInternal}
+      />
+    );
+  };
+
+  const renderCustomPropertyNoteInternal = () => {
+    const customPropertyObject = value[customProperty.value]?.[0] ?? {};
+
+    const handleChange = e => {
+      onChange({
+        ...value,
+        [customProperty.value]: [{
+          ...customPropertyObject,
+          note: e.target.value
+        }],
+      });
+    };
+
+    return (
+      <TextArea
+        data-test-customproperty-note
+        id={`edit-customproperty-${index}-internal-note`}
+        label={
+          labelOverrides.internalNote ??
+          <FormattedMessage id="stripes-kint-components.customProperty.internalNote" />}
+        onChange={handleChange}
+        value={customPropertyObject?.note}
+      />
+    );
+  };
+
+  const renderCustomPropertyNotePublic = () => {
+    const customPropertyObject = value[customProperty.value]?.[0] ?? {};
+
+    const handleChange = e => {
+      onChange({
+        ...value,
+        [customProperty.value]: [{
+          ...customPropertyObject,
+          publicNote: e.target.value
+        }],
+      });
+    };
+
+    return (
+      <TextArea
+        data-test-customproperty-public-note
+        id={`edit-customproperty-${index}-public-note`}
+        label={
+          labelOverrides.publicNote ??
+          <FormattedMessage id="stripes-kint-components.customProperty.publicNote" />
+        }
+        onChange={handleChange}
+        value={customPropertyObject?.publicNote}
+      />
+    );
+  };
+
+  return (
+    <>
+      {
+        customPropertyType === 'optional' &&
+        <Row>
+          <Col xs={12}>
+            {renderCustomPropertyName()}
+          </Col>
+        </Row>
+      }
+      <Row>
+        <Col md={6} xs={12}>
+          {renderCustomPropertyValue()}
+        </Col>
+        <Col md={6} xs={12}>
+          {renderCustomPropertyNoteInternal()}
+        </Col>
+      </Row>
+      <Row>
+        <Col md={6} xs={12}>
+          {renderCustomPropertyVisibility()}
+        </Col>
+        <Col md={6} xs={12}>
+          {renderCustomPropertyNotePublic()}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+CustomPropertyField.propTypes = {
+  availableCustomProperties: PropTypes.arrayOf(PropTypes.object),
+  customProperty: PropTypes.object,
+  customPropertyType: PropTypes.string,
+  customProperties: PropTypes.arrayOf(PropTypes.object),
+  index: PropTypes.number,
+  labelOverrides: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  setCustomProperties: PropTypes.func,
+  value: PropTypes.object
+};
+
+export default CustomPropertyField;

package/src/lib/CustomProperties/Edit/CustomPropertyFormCard.js

@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Card,
+  IconButton,
+  InfoPopover,
+  Tooltip
+} from '@folio/stripes/components';
+
+import CustomPropertyField from './CustomPropertyField';
+
+const CustomPropertyFormCard = ({
+  availableCustomProperties,
+  customProperty,
+  customPropertyType,
+  customProperties,
+  handleDeleteCustomProperty,
+  index,
+  internalPropertyCounter,
+  labelOverrides,
+  name,
+  onChange,
+  setCustomProperties,
+  value
+}) => {
+  const getHeader = () => {
+    if (customPropertyType === 'optional') {
+      if (labelOverrides.optionalPropertyHeader && typeof labelOverrides.optionalPropertyHeader === 'function') {
+        return labelOverrides.optionalPropertyHeader(internalPropertyCounter);
+      }
+
+      // Label override for optionalPropertyHeader or finally built in default
+      return (
+        labelOverrides.optionalPropertyHeader ??
+        <FormattedMessage
+          id="stripes-kint-components.customProperty.optionalPropertyHeader"
+          values={{ number: internalPropertyCounter }}
+        />
+      );
+    }
+
+    // Label override for primaryPropertyHeader or finally built in default
+    return (
+      labelOverrides.primaryPropertyHeader ??
+      customProperty.label
+    );
+  };
+
+  const getTooltipText = () => {
+    if (labelOverrides.remove && typeof labelOverrides.remove === 'function') {
+      return labelOverrides.remove(internalPropertyCounter);
+    }
+
+    // Label override for optionalPropertyHeader or finally built in default
+    return (
+      labelOverrides.remove ??
+      <FormattedMessage
+        id="stripes-kint-components.customProperty.remove"
+        values={{ number: internalPropertyCounter }}
+      />
+    );
+  };
+
+  return (
+    <Card
+      key={customProperty.value}
+      headerEnd={customPropertyType === 'optional' ?
+        <Tooltip
+          id={`customProperty-${customProperty.value}-${index}`}
+          text={getTooltipText()}
+        >
+          {({ ref, ariaIds }) => (
+            <IconButton
+              ref={ref}
+              aria-labelledby={ariaIds.text}
+              icon="trash"
+              id={`edit-customproperty-${index}-delete`}
+              onClick={() => handleDeleteCustomProperty(customProperty, index)}
+            />
+          )}
+        </Tooltip> :
+        null
+      }
+      headerStart={
+        <strong>
+          {getHeader()}
+          {customProperty.description ? (
+            <InfoPopover
+              content={customProperty.description}
+            />
+          ) : null}
+        </strong>
+      }
+    >
+      <CustomPropertyField
+        {...{
+          availableCustomProperties,
+          customProperty,
+          customPropertyType,
+          customProperties,
+          index,
+          internalPropertyCounter,
+          labelOverrides,
+          name,
+          onChange,
+          setCustomProperties,
+          value
+        }}
+      />
+    </Card>
+  );
+};
+
+CustomPropertyFormCard.propTypes = {
+  availableCustomProperties: PropTypes.arrayOf(PropTypes.object),
+  customProperty: PropTypes.object,
+  customPropertyType: PropTypes.string,
+  customProperties: PropTypes.arrayOf(PropTypes.object),
+  handleDeleteCustomProperty: PropTypes.func,
+  index: PropTypes.number,
+  internalPropertyCounter: PropTypes.number,
+  labelOverrides: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  setCustomProperties: PropTypes.func,
+  value: PropTypes.object
+};
+
+export default CustomPropertyFormCard;