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

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

@@ -0,0 +1,5 @@
+export { default as CustomPropertiesEdit } from './CustomPropertiesEdit';
+export { default as CustomPropertiesEditCtx } from './CustomPropertiesEditCtx';
+export { default as CustomPropertiesListField } from './CustomPropertiesListField';
+export { default as CustomPropertyFormCard } from './CustomPropertyFormCard';
+export { default as CustomPropertyField } from './CustomPropertyField';

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

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Accordion,
+  FilterAccordionHeader,
+  Layout,
+  Spinner
+} from '@folio/stripes/components';
+import { useCustomProperties } from '../../hooks';
+import useParseActiveFilterStrings from './useParseActiveFilterStrings';
+import CustomPropertiesFilterForm from './CustomPropertiesFilterForm';
+
+const CustomPropertiesFilter = ({
+  activeFilters: {
+    customProperties: custPropFilters,
+    ...restOfFilters
+  },
+  customPropertiesEndpoint,
+  filterHandlers,
+  labelOverrides
+ }) => {
+  const [editingFilters, setEditingFilters] = useState(false);
+  const openEditModal = () => setEditingFilters(true);
+  const closeEditModal = () => setEditingFilters(false);
+
+  const { data: custprops, isLoading } = useCustomProperties({
+    endpoint: customPropertiesEndpoint,
+    returnQueryObject: true,
+    options: {
+      sort: [
+        { path: 'ctx' }, // Group by ctx
+        { path: 'retired' }, // Place retired custprops at the end
+        { path: 'label' } // Within those groups, sort by label
+      ],
+    }
+  });
+  const parsedFilterData = useParseActiveFilterStrings(custPropFilters || []);
+
+  const getFiltersApplied = () => {
+    if (labelOverrides.filtersApplied && typeof labelOverrides.filtersApplied === 'function') {
+      return labelOverrides.filtersApplied((parsedFilterData?.numberOfFilters ?? 0));
+    }
+
+    return (
+      labelOverrides.filtersApplied ??
+      <FormattedMessage
+        id="stripes-kint-components.customProperty.filtersApplied"
+        values={{ count: (parsedFilterData?.numberOfFilters ?? 0) }}
+      />
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <Accordion
+        closedByDefault
+        header={FilterAccordionHeader}
+        id="clickable-custprop-filter"
+        label={
+          labelOverrides.customProperties ??
+          <FormattedMessage id="stripes-kint-components.customProperties" />
+        }
+        separator={false}
+      >
+        <Spinner />
+      </Accordion>
+    );
+  }
+
+  const handleSubmit = values => {
+    const { filters = [] } = values;
+
+    const filterStrings = filters
+      .filter(filter => filter.rules)
+      .map(filter => filter.rules
+        .map(rule => `customProperties.${filter.customProperty}.value${rule.operator}${rule.value ?? ''}`)
+        .join('||'));
+
+    filterHandlers.state({ ...restOfFilters, customProperties: filterStrings });
+    setEditingFilters(false);
+
+    return Promise.resolve();
+  };
+
+  return (
+    <Accordion
+      closedByDefault
+      displayClearButton={(parsedFilterData?.numberOfFilters ?? 0) > 0}
+      header={FilterAccordionHeader}
+      id="clickable-custprop-filter"
+      label={
+        labelOverrides.customProperties ??
+        <FormattedMessage id="stripes-kint-components.customProperties" />
+      }
+      onClearFilter={() => filterHandlers.state({ ...restOfFilters, customProperties: [] })}
+      separator={false}
+    >
+      <Layout className="padding-bottom-gutter">
+        {getFiltersApplied()}
+      </Layout>
+      <CustomPropertiesFilterForm
+        customProperties={custprops}
+        editingFilters={editingFilters}
+        filters={parsedFilterData?.filters}
+        handlers={{
+          closeEditModal,
+          openEditModal
+        }}
+        labelOverrides={labelOverrides}
+        onSubmit={handleSubmit}
+      />
+    </Accordion>
+  );
+};
+
+CustomPropertiesFilter.propTypes = {
+  activeFilters: PropTypes.object,
+  customPropertiesEndpoint: PropTypes.string,
+  filterHandlers: PropTypes.object,
+  labelOverrides: PropTypes.object
+};
+
+export default CustomPropertiesFilter;

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

@@ -0,0 +1,148 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Field, useForm, useFormState } from 'react-final-form';
+import { FieldArray } from 'react-final-form-arrays';
+
+import {
+  Button,
+  Col,
+  Label,
+  Row,
+  Select
+} from '@folio/stripes/components';
+
+import { groupCustomPropertiesByCtx } from '../../utils';
+import { required as requiredValidator } from '../../utils/validators';
+
+import CustomPropertiesRule from './CustomPropertiesRule';
+
+const CustomPropertiesFilterField = ({
+  customProperties,
+  fields,
+  index,
+  labelOverrides = {},
+  name,
+}) => {
+  const groupedCustomProperties = groupCustomPropertiesByCtx(customProperties);
+  const { change, mutators: { push } } = useForm();
+  const { values } = useFormState();
+
+    // Deal with all the possible label override options
+    const getRetiredName = (customProperty) => {
+      // Label override for default card title,
+      if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
+        return (
+          labelOverrides.retiredName(customProperty.label)
+        );
+      }
+
+      // Label override for default title or finally built in default
+      return (
+        labelOverrides.retiredName ??
+        <FormattedMessage id="stripes-kint-components.customProperty.retiredName" values={{ name: customProperty.label }} />
+      );
+    };
+
+  return (
+    <>
+      <Field
+        id={`input-custprop-${index}`}
+        label={labelOverrides.customProperty ?? <FormattedMessage id="stripes-kint-components.customProperty" />}
+        name={`${name}.customProperty`}
+        placeholder=" "
+        render={fieldProps => {
+          return (
+            <Select
+              {...fieldProps}
+              placeholder={null} // placeholder default causes issues
+            >
+              <option value=""> </option>
+              {
+                Object.entries(groupedCustomProperties)?.sort((a, b) => {
+                  if (a[0] === 'isNull') return -1; // Make sure noContext is at top
+
+                  if (a[0].toLowerCase() < b[0].toLowerCase()) return -1;
+                  if (a[0].toLowerCase() > b[0].toLowerCase()) return 1;
+                  return 0;
+                }).map(([key, value]) => {
+                  return (
+                    <optgroup
+                      label={key === 'isNull' ? '-' : key}
+                    >
+                      {value.map(v => {
+                        return (
+                          <option
+                            key={v.id}
+                            value={v.name}
+                          >
+                            {v.retired ? getRetiredName(v) : v.label}
+                          </option>
+                        );
+                      })}
+                    </optgroup>
+                  );
+                })
+              }
+            </Select>
+          );
+        }}
+        required
+        validate={requiredValidator}
+      />
+      {/* This next div is rendered so that it can be referred to using aria-labelledby */}
+      <div
+        id={`selected-custprop-name-${index}`}
+        style={{ display: 'none' }}
+      >
+        {customProperties.find(t => t.name === fields.value[index]?.customProperty)?.label ?? ''}
+      </div>
+      <Row>
+        <Col xs={2} />
+        <Col xs={4}>
+          <Label id="rule-column-header-comparator" required>
+            <FormattedMessage id="stripes-erm-components.customProperty.filters.comparator" />
+          </Label>
+        </Col>
+        <Col xs={4}>
+          <Label id="rule-column-header-value" required>
+            <FormattedMessage id="stripes-erm-components.customProperty.filters.value" />
+          </Label>
+        </Col>
+        <Col xs={2} />
+      </Row>
+      <FieldArray name={`${name}.rules`}>
+        {({ fields: ruleFields }) => ruleFields.map((ruleFieldName, ruleFieldIndex) => (
+          <CustomPropertiesRule
+            key={ruleFieldName}
+            ariaLabelledby={`selected-custprop-name-${index}`}
+            clearRuleValue={() => change(`filters[${index}].rules[${ruleFieldIndex}].value`, '')}
+            custPropDefinition={customProperties.find(t => t.name === fields.value[index].customProperty)}
+            index={ruleFieldIndex}
+            name={ruleFieldName}
+            onDelete={() => ruleFields.remove(ruleFieldIndex)}
+            value={values.filters[index]?.rules[ruleFieldIndex]}
+          />
+        ))}
+      </FieldArray>
+      <Button
+        data-test-add-rule-btn
+        disabled={!fields.value[index]?.customProperty}
+        onClick={() => push(`${name}.rules`)}
+      >
+        <FormattedMessage id="stripes-erm-components.customProperty.filters.addRule" />
+      </Button>
+    </>
+  );
+};
+
+CustomPropertiesFilterField.propTypes = {
+  customProperties: PropTypes.arrayOf(PropTypes.object),
+  fields: PropTypes.object,
+  index: PropTypes.number,
+  labelOverrides: PropTypes.object,
+  name: PropTypes.string
+};
+
+export default CustomPropertiesFilterField;

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

@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useForm } from 'react-final-form';
+import { FieldArray } from 'react-final-form-arrays';
+
+import {
+  Button,
+  Card,
+  IconButton,
+  Layout,
+  Tooltip
+} from '@folio/stripes/components';
+
+import CustomPropertiesFilterField from './CustomPropertiesFilterField';
+
+const CustomPropertiesFilterFieldArray = ({
+  customProperties,
+  labelOverrides,
+}) => {
+  const { mutators: { push } } = useForm();
+
+  const getCardTitle = (index) => {
+    if (labelOverrides.customPropertyFilter && typeof labelOverrides.customPropertyFilter === 'function') {
+      return labelOverrides.customPropertyFilter(index);
+    }
+
+    return (
+      labelOverrides.customPropertyFilter ??
+      <FormattedMessage id="stripes-kint-components.customProperty.filterIndex" values={{ index: index + 1 }} />
+    );
+  };
+
+  const getTooltipText = (index) => {
+    if (labelOverrides.removeFilter && typeof labelOverrides.removeFilter === 'function') {
+      return labelOverrides.removeFilter(index);
+    }
+
+    return (
+      labelOverrides.removeFilter ??
+      <FormattedMessage
+        id="stripes-kint-components.customProperty.removeFilter"
+        values={{ number: index + 1 }}
+      />
+    );
+  };
+  return (
+    <>
+      <FieldArray name="filters">
+        {({ fields }) => fields.map((name, index) => {
+          return (
+            <>
+              <Card
+                key={`custom-property-filter-card[${index}]`}
+                headerEnd={
+                  <Tooltip
+                    id={`custom-property-filter-card-delete-[${index}]-tooltip`}
+                    text={getTooltipText(index)}
+                  >
+                    {({ ref, ariaIds }) => (
+                      <IconButton
+                        ref={ref}
+                        aria-labelledby={ariaIds.text}
+                        icon="trash"
+                        id={`custom-property-filter-card-delete-[${index}]`}
+                        onClick={() => fields.remove(index)}
+                      />
+                    )}
+                  </Tooltip>
+                }
+                headerStart={
+                  <strong>
+                    {getCardTitle(index)}
+                  </strong>
+                }
+                marginBottom0={index !== fields.length - 1}
+              >
+                <CustomPropertiesFilterField
+                  customProperties={customProperties}
+                  fields={fields}
+                  index={index}
+                  labelOverrides={labelOverrides}
+                  name={name}
+                />
+              </Card>
+              {index < fields.value.length - 1 && (
+                <Layout className="textCentered">
+                  <FormattedMessage id="stripes-kint-components.AND" />
+                </Layout>
+              )}
+            </>
+          );
+        })}
+      </FieldArray>
+      <Button
+        onClick={() => push('filters', { rules: [{}] })}
+      >
+        {
+          labelOverrides.addFilter ??
+          <FormattedMessage id="stripes-kint-components.customProperty.addFilter" />
+        }
+      </Button>
+    </>
+  );
+};
+
+CustomPropertiesFilterFieldArray.propTypes = {
+  customProperties: PropTypes.arrayOf(PropTypes.object),
+  labelOverrides: PropTypes.object
+};
+
+export default CustomPropertiesFilterFieldArray;

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

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import arrayMutators from 'final-form-arrays';
+
+import {
+  Button,
+} from '@folio/stripes/components';
+
+import FormModal from '../../FormModal';
+import CustomPropertiesFilterFieldArray from './CustomPropertiesFilterFieldArray';
+
+const CustomPropertyFiltersForm = ({
+  customProperties,
+  editingFilters,
+  filters,
+  handlers: {
+    closeEditModal,
+    openEditModal,
+  },
+  labelOverrides,
+  onSubmit,
+}) => {
+  return (
+    <>
+      <Button
+        onClick={openEditModal}
+      >
+        {
+          labelOverrides.editCustomPropertyFilters ??
+          <FormattedMessage id="stripes-kint-components.customProperty.editCustomPropertyFilters" />
+        }
+      </Button>
+      <FormModal
+        initialValues={{ filters: filters.length ? filters : [{ rules: [{}] }] }}
+        labelOverrides={{
+          save: <FormattedMessage id="stripes-kint-components.apply" />
+        }}
+        modalProps={{
+          dismissible: true,
+          enforceFocus: false,
+          label:
+            labelOverrides.filterBuilder ??
+            <FormattedMessage id="stripes-kint-components.customProperty.filterbuilder" />,
+          onClose: closeEditModal,
+          open: editingFilters,
+          size: 'medium'
+        }}
+        mutators={{ ...arrayMutators }}
+        onSubmit={onSubmit}
+      >
+        <CustomPropertiesFilterFieldArray
+          customProperties={customProperties}
+          labelOverrides={labelOverrides}
+        />
+      </FormModal>
+    </>
+  );
+};
+
+CustomPropertyFiltersForm.propTypes = {
+  customProperties: PropTypes.arrayOf(PropTypes.object),
+  editingFilters: PropTypes.bool,
+  filters: PropTypes.arrayOf(PropTypes.object),
+  handlers: PropTypes.shape({
+    closeEditModal: PropTypes.func.isRequired,
+    openEditModal: PropTypes.func.isRequired
+  }),
+  labelOverrides: PropTypes.object,
+  onSubmit: PropTypes.func.isRequired
+};
+
+export default CustomPropertyFiltersForm;

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { uniqueId } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { Field } from 'react-final-form';
+
+import {
+  Col,
+  IconButton,
+  Layout,
+  Row,
+  Select,
+  Tooltip,
+} from '@folio/stripes/components';
+
+import { required as requiredValidator } from '../../utils/validators';
+
+import useValueProps from './useValueProps';
+import useOperators from './useOperators';
+
+const propTypes = {
+  ariaLabelledby: PropTypes.string.isRequired,
+  clearRuleValue: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  custPropDefinition: PropTypes.shape({
+    type: PropTypes.string,
+    category: PropTypes.shape({
+      values: PropTypes.arrayOf(PropTypes.object),
+    }),
+  }),
+  value: PropTypes.shape({
+    operator: PropTypes.string,
+    value: PropTypes.string,
+  }),
+};
+
+const CustomPropertiesRule = ({
+  ariaLabelledby,
+  clearRuleValue,
+  index,
+  name,
+  onDelete,
+  custPropDefinition = {},
+  value,
+}) => {
+  const operators = useOperators(custPropDefinition.type);
+  const valueProps = useValueProps(custPropDefinition);
+  const selectedOperator = operators.find(o => o.value === value?.operator);
+
+  return (
+    <Row
+      key={name}
+    >
+      <Col xs={2}>
+        <Layout className="textCentered">
+          {index === 0 ? null : <FormattedMessage id="stripes-kint-components.OR" />}
+        </Layout>
+      </Col>
+      <Col xs={4}>
+        <Field
+          name={`${name}.operator`}
+          validate={requiredValidator}
+        >
+          {({ input, meta }) => (
+            <Select
+              {...input}
+              aria-labelledby={`${ariaLabelledby}-rule-column-header-comparator`}
+              dataOptions={operators}
+              error={meta?.touched && meta?.error}
+              onChange={e => {
+                input.onChange(e);
+
+                const newlySelectedOperator = operators.find(o => o.value === e.target.value);
+                if (newlySelectedOperator?.noValueAllowed) {
+                  clearRuleValue();
+                }
+              }}
+              placeholder=" "
+              required
+            />
+          )}
+        </Field>
+      </Col>
+      <Col xs={4}>
+        { selectedOperator?.noValueAllowed ?
+          null
+          :
+          <Field
+            aria-labelledby={`${ariaLabelledby}-rule-column-header-value`}
+            name={`${name}.value`}
+            required
+            validate={requiredValidator}
+            {...valueProps}
+          />
+        }
+      </Col>
+      <Col xs={2}>
+        { index ? (
+          <Tooltip
+            id={uniqueId('delete-rule-btn')}
+            text={<FormattedMessage id="stripes-kint-components.customProperty.removeRule" values={{ number: index + 1 }} />}
+          >
+            {({ ref, ariaIds }) => (
+              <IconButton
+                ref={ref}
+                aria-labelledby={ariaIds.text}
+                icon="trash"
+                onClick={onDelete}
+              />
+            )}
+          </Tooltip>
+        ) : null}
+      </Col>
+    </Row>
+  );
+};
+
+CustomPropertiesRule.propTypes = propTypes;
+
+export default CustomPropertiesRule;

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

@@ -0,0 +1,6 @@
+export { default as CustomPropertiesFilter } from './CustomPropertiesFilter';
+export { default as CustomPropertiesFilterForm } from './CustomPropertiesFilterForm';
+export { default as useOperators } from './useOperators';
+export { default as useParseActiveFilterStrings } from './useParseActiveFilterStrings';
+export { default as CustomPropertiesFilterField } from './CustomPropertiesFilterField';
+export { default as CustomPropertiesFilterFieldArray } from './CustomPropertiesFilterFieldArray';

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

@@ -0,0 +1,55 @@
+import { useIntl } from 'react-intl';
+import * as CUSTPROP_TYPES from '../../constants/customProperties';
+
+const {
+  REFDATA_CLASS_NAME: REFDATA,
+  DECIMAL_CLASS_NAME: DECIMAL,
+  INTEGER_CLASS_NAME: INTEGER,
+  DATE_CLASS_NAME: DATE,
+  TEXT_CLASS_NAME: TEXT,
+} = CUSTPROP_TYPES;
+
+const useOperators = (type) => {
+  const intl = useIntl();
+  const getLabel = id => intl.formatMessage({ id });
+  const operators = [
+    { value: ' isSet', label: getLabel('stripes-kint-components.operator.isSet'), noValueAllowed: true },
+    { value: ' isNotSet', label: getLabel('stripes-kint-components.operator.isNotSet'), noValueAllowed: true },
+  ];
+
+  if (!type || type === INTEGER || type === DECIMAL) {
+    operators.push(
+      { value: '==', label: getLabel('stripes-kint-components.operator.equals') },
+      { value: '!=', label: getLabel('stripes-kint-components.operator.doesNotEqual') },
+      { value: '>=', label: getLabel('stripes-kint-components.operator.isGreaterThanOrEqual') },
+      { value: '<=', label: getLabel('stripes-kint-components.operator.isLessThanOrEqual') },
+    );
+  }
+
+  if (type === DATE) { // Basically the same as the "number" types above, so no need to reassign if there is no type
+    operators.push(
+      { value: '==', label: getLabel('stripes-kint-components.operator.equals') },
+      { value: '!=', label: getLabel('stripes-kint-components.operator.doesNotEqual') },
+      { value: '>=', label: getLabel('stripes-kint-components.operator.isOnOrAfter') },
+      { value: '<=', label: getLabel('stripes-kint-components.operator.isOnOrBefore') },
+    );
+  }
+
+  if (!type || type === REFDATA) {
+    operators.push(
+      { value: '==', label: getLabel('stripes-kint-components.operator.is') },
+      { value: '!=', label: getLabel('stripes-kint-components.operator.isNot') },
+    );
+  }
+
+  if (!type || type === TEXT) {
+    operators.push(
+      { value: '=~', label: getLabel('stripes-kint-components.operator.contains') },
+      { value: '!~', label: getLabel('stripes-kint-components.operator.doesNotContain') },
+    );
+  }
+
+  return operators;
+};
+
+export default useOperators;

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

@@ -0,0 +1,35 @@
+import useOperators from './useOperators';
+
+const useParseActiveFilterStrings = (filterStrings) => {
+  const operators = useOperators().map(o => o.value);
+
+  let numberOfFilters = 0;
+  const filters = filterStrings.map(filter => {
+    let customProperty;
+    const rules = filter.split('||').map(ruleString => {
+      // ruleString is constructed in this.handleSubmit passed to CustomPropertyFiltersForm
+      // and has shape "customProperties.foo.value!=42"
+      const [customPropertyPath, rule] = ruleString.split('.value');
+      customProperty = customPropertyPath.replace('customProperties.', '');
+
+      const operator = operators.find(o => rule.startsWith(o)) ?? '';
+      const value = rule.substring(operator.length);
+
+      numberOfFilters += 1;
+
+      return { operator, value };
+    });
+
+    return {
+      customProperty,
+      rules,
+    };
+  });
+
+  return {
+    filters,
+    numberOfFilters
+  };
+};
+
+export default useParseActiveFilterStrings;