@k-int/stripes-kint-components 1.6.0 → 2.0.1

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

@@ -0,0 +1,150 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Col, KeyValue, NoValue, Row } from '@folio/stripes/components';
+
+import { REFDATA_CLASS_NAME } from '../../constants/customProperties';
+
+// A default option for CustProp view pane, with the ability to override labels for fields
+const CustomPropertiesView = ({
+  customProperty,
+  labelOverrides
+}) => {
+  return (
+    <>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.label ??
+              <FormattedMessage id="stripes-kint-components.customProperties.label" />
+            }
+            value={customProperty?.label}
+          />
+        </Col>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.name ??
+              <FormattedMessage id="stripes-kint-components.customProperties.name" />
+            }
+            value={customProperty?.name}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <KeyValue
+            label={
+              labelOverrides?.description ??
+              <FormattedMessage id="stripes-kint-components.customProperties.description" />
+            }
+            value={customProperty?.description}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.weight ??
+              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+            }
+            value={customProperty?.weight}
+          />
+        </Col>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.primary ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              />
+            }
+            value={
+              <FormattedMessage
+                id={
+                  customProperty?.primary
+                    ? 'stripes-kint-components.yes'
+                    : 'stripes-kint-components.no'
+                }
+              />
+            }
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.defaultVisibility ??
+              <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />
+            }
+            value={
+              <FormattedMessage
+                id={
+                  customProperty?.defaultInternal
+                    ? 'stripes-kint-components.customProperties.internalTrue'
+                    : 'stripes-kint-components.customProperties.internalFalse'
+                }
+              />
+            }
+          />
+        </Col>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.ctx ??
+              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
+            }
+            value={customProperty?.ctx ?? <NoValue />}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={6}>
+          {customProperty?.type && (
+            <KeyValue
+              label={
+                labelOverrides?.type ??
+                <FormattedMessage id="stripes-kint-components.customProperties.type" />
+              }
+              value={<FormattedMessage id={`stripes-kint-components.customProperties.type.${customProperty?.type}`} />}
+            />
+          )}
+        </Col>
+        <Col xs={6}>
+          {customProperty?.type === REFDATA_CLASS_NAME && (
+            <KeyValue
+              label={
+                labelOverrides?.category ??
+                <FormattedMessage id="stripes-kint-components.customProperties.category" />
+              }
+              value={customProperty?.category?.desc ?? <NoValue />}
+            />
+          )}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+CustomPropertiesView.propTypes = {
+  customProperty: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    weight: PropTypes.number,
+    primary: PropTypes.bool,
+    defaultInternal: PropTypes.bool,
+    ctx: PropTypes.string,
+    type: PropTypes.string,
+    category: PropTypes.shape({
+      desc: PropTypes.string
+    })
+
+  }),
+  labelOverrides: PropTypes.object
+};
+
+export default CustomPropertiesView;

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -0,0 +1,296 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Field, useFormState, useForm } from 'react-final-form';
+
+import {
+  Col,
+  InfoPopover,
+  MultiSelection,
+  Row,
+  Select,
+  TextArea,
+  TextField
+} from '@folio/stripes/components';
+import { requiredValidator } from '@folio/stripes-erm-components';
+
+const CustomPropertyForm = ({
+  contextFilterOptions,
+  helpPopovers,
+  labelOverrides,
+  refdata
+}) => {
+  const { values } = useFormState();
+  const { change } = useForm();
+  const intl = useIntl();
+
+  const booleanToString = booleanValue => booleanValue?.toString();
+  const stringToBoolean = stringValue => stringValue === 'true';
+
+  const [contextOptions, setContextOptions] = useState(contextFilterOptions?.filter(ctx => ctx.value !== '' && ctx?.value !== 'isNull'));
+
+  const addCtx = ({ _r, _e, filterText }) => {
+    const newOption = { value: filterText, label: filterText };
+    setContextOptions([newOption, ...contextOptions]);
+    change('ctx', [newOption]);
+  };
+
+  const renderAddCtx = ({ filterValue, exactMatch }) => {
+    if (!filterValue || exactMatch) {
+      return null;
+    } else {
+      return <FormattedMessage id="stripes-kint-components.customProperties.ctx.addContext" values={{ value: filterValue }} />;
+    }
+  };
+
+  return (
+    <>
+      <Row>
+        <Col xs={6}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.label ??
+              <FormattedMessage id="stripes-kint-components.customProperties.label" />
+            }
+            name="label"
+            required
+            startControl={helpPopovers?.label ?
+              <InfoPopover
+                content={helpPopovers?.label}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={6}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.name ??
+              <FormattedMessage id="stripes-kint-components.customProperties.name" />
+            }
+            name="name"
+            required
+            startControl={helpPopovers?.name ?
+              <InfoPopover
+                content={helpPopovers?.name}
+              /> : null
+            }
+            validate={v => {
+              if (v && v.length) {
+                return /^[a-z][a-z0-9]*$/i.test(v) ? (
+                  undefined
+                ) : (
+                  <FormattedMessage id="stripes-kint-components.errors.hasNonAlphaName" />
+                );
+              }
+
+              return requiredValidator(v);
+            }}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <Field
+            component={TextArea}
+            label={labelOverrides?.description ??
+              <FormattedMessage id="stripes-kint-components.customProperties.description" />
+            }
+            name="description"
+            required
+            startControl={helpPopovers?.description ?
+              <InfoPopover
+                content={helpPopovers?.description}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={3}>
+          <Field
+            component={TextField}
+            label={labelOverrides?.weight ??
+              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+            }
+            name="weight"
+            required
+            startControl={helpPopovers?.weight ?
+              <InfoPopover
+                content={helpPopovers?.weight}
+              /> : null
+            }
+            type="number"
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.yes',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.no',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.primary ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              />
+            }
+            name="primary"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.primary ?
+              <InfoPopover
+                content={helpPopovers?.primary}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id:
+                    'stripes-kint-components.customProperties.internalTrue',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id:
+                    'stripes-kint-components.customProperties.internalFalse',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.defaultVisibility ??
+              <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />
+            }
+            name="defaultInternal"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.defaultVisibility ?
+              <InfoPopover
+                content={helpPopovers?.defaultVisibility}
+              /> : null
+            }
+            validate={requiredValidator}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            actions={[{ onSelect: addCtx, render: renderAddCtx }]}
+            component={MultiSelection}
+            dataOptions={contextOptions}
+            emptyMessage={intl.formatMessage({ id: 'stripes-kint-components.customProperties.noCtxFound' })}
+            label={labelOverrides?.ctx ??
+              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
+            }
+            name="ctx"
+            onChange={(selectedItems) => {
+              if (selectedItems.length) {
+                change('ctx', [selectedItems?.[selectedItems?.length - 1]]);
+              } else {
+                change('ctx', undefined);
+              }
+            }}
+            validate={value => (value?.length > 1 ? <FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /> : null)}
+          />
+        </Col>
+      </Row>
+      {/* Users can only configure the type of a custom property when creating it, not when editing it */}
+      {!values?.id && (
+        <Row>
+          <Col xs={6}>
+            <Field
+              component={Select}
+              dataOptions={[
+                { label: '', value: '' },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal',
+                  }),
+                  value: 'Decimal',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyInteger',
+                  }),
+                  value: 'Integer',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyText',
+                  }),
+                  value: 'Text',
+                },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata',
+                  }),
+                  value: 'Refdata',
+                },
+              ]
+              }
+              label={labelOverrides?.type ??
+                <FormattedMessage id="stripes-kint-components.customProperties.type" />
+              }
+              name="type"
+              required
+              startControl={helpPopovers?.type ?
+                <InfoPopover
+                  content={helpPopovers?.type}
+                /> : null
+              }
+              validate={requiredValidator}
+            />
+          </Col>
+          <Col xs={6}>
+            {values?.type === 'Refdata' && (
+              <Field
+                component={Select}
+                dataOptions={[{ label: '', value: '' }, ...refdata]}
+                label={labelOverrides?.category ??
+                  <FormattedMessage id="stripes-kint-components.customProperties.category" />
+                }
+                name="category"
+                required
+                startControl={helpPopovers?.category ?
+                  <InfoPopover
+                    content={helpPopovers?.category}
+                  /> : null
+                }
+                validate={requiredValidator}
+              />
+            )}
+          </Col>
+        </Row>
+      )}
+    </>
+  );
+};
+
+CustomPropertyForm.propTypes = {
+  contextFilterOptions: PropTypes.arrayOf(PropTypes.string),
+  helpPopovers: PropTypes.object,
+  labelOverrides: PropTypes.object,
+  refdata: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default CustomPropertyForm;

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

@@ -0,0 +1,4 @@
+export { default as CustomPropertiesLookup } from './CustomPropertiesLookup';
+export { default as CustomPropertiesView } from './CustomPropertiesLookup';
+export { default as CustomPropertiesSettings } from './CustomPropertiesSettings';
+export { default as CustomPropertyForm } from './CustomPropertyForm';

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { useMutateRefdataValue, useRefdata } from '../hooks';
+
 import ActionList from '../ActionList';
 
 const propTypes = {
@@ -21,18 +22,19 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
   });
 
   const [contentData, setContentData] = useState([]);
+  const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
 
   useEffect(() => {
     if (!isRefdataLoading) {
-      setContentData(refdata?.values ?? []);
+      setContentData(refdata?.values?.sort(sortByLabel) ?? []);
     }
   }, [isRefdataLoading, refdata]);
 
   // Edit and Create will use the same PUT mutation
   const { delete: deleteRefdataValue, put: editRefdataValue } = useMutateRefdataValue({
     afterQueryCalls: {
-      delete: json => setContentData(json?.values ?? []),
-      put: json => setContentData(json?.values ?? [])
+      delete: json => setContentData(json?.values?.sort(sortByLabel) ?? []),
+      put: json => setContentData(json?.values?.sort(sortByLabel) ?? [])
     },
     endpoint: refdataEndpoint,
     id: refdata?.id,
@@ -51,7 +53,6 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
   }
 
   // This is the function which will take a row in the table and assign the relevant actions to it
-  // TODO make these 'labels' into ARIA labels
   const actionAssigner = () => {
     const actionArray = [
       { name: 'edit', label: <FormattedMessage id="stripes-kint-components.editableRefdataList.edit" />, icon: 'edit' },
@@ -78,8 +79,11 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
         value: <FormattedMessage id="stripes-kint-components.editableRefdataList.value" />
       }}
       contentData={contentData}
+      creatableFields={{
+        value: () => false
+      }}
       editableFields={{
-        value: () => !refdata?.internal,
+        value: () => false
       }}
       visibleFields={['label', 'value']}
       // TODO add a field validator/fieldType as options?

package/src/lib/FormModal/FormModal.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+
+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 }) => {
+  return (
+    <Form
+      onSubmit={onSubmit}
+      {...formProps}
+    >
+      {({ handleSubmit, form: { restart } }) => {
+        const handleClose = (e) => {
+          onClose(e);
+          restart();
+        };
+
+        const handleSubmitAndClear = () => {
+          handleSubmit();
+          restart();
+        };
+
+        const renderFooter = () => (
+          <ModalFooter>
+            <Button
+              buttonStyle="primary"
+              onClick={handleSubmitAndClear}
+            >
+              <FormattedMessage id="stripes-kint-components.save" />
+            </Button>
+            <Button
+              onClick={handleClose}
+            >
+              <FormattedMessage id="stripes-kint-components.cancel" />
+            </Button>
+          </ModalFooter>
+        );
+
+        return (
+          <form
+            onSubmit={handleSubmitAndClear}
+          >
+            <Modal
+              enforceFocus={false}
+              footer={renderFooter()}
+              onClose={handleClose}
+              {...modalProps}
+            >
+              {children}
+            </Modal>
+          </form>
+        );
+      }}
+    </Form>
+  );
+};
+
+FormModal.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  modalProps: PropTypes.shape({
+    onClose: PropTypes.func
+  }),
+  onSubmit: PropTypes.func
+};
+
+export default FormModal;

package/src/lib/FormModal/index.js

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

package/src/lib/NoResultsMessage/NoResultsMessage.js

@@ -66,11 +66,11 @@ NoResultsMessage.propTypes = {
   icon: PropTypes.string,
   isLoading: PropTypes.bool,
   isError: PropTypes.bool,
-  label: PropTypes.oneOfType(
+  label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
     PropTypes.func
-  ),
+  ]),
   searchTerm: PropTypes.string.isRequired,
   toggleFilterPane: PropTypes.func.isRequired,
 };

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -31,6 +31,7 @@ import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 const SASQLookupComponent = ({
   children,
   fetchParameters = {},
+  FilterPaneHeaderComponent = () => null,
   FilterComponent = () => null,
   history,
   id,
@@ -185,6 +186,7 @@ const SASQLookupComponent = ({
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
                 >
                   <form onSubmit={onSubmitSearch}>
+                    <FilterPaneHeaderComponent />
                     {!noSearchField &&
                       <>
                         <SearchField
@@ -262,6 +264,10 @@ SASQLookupComponent.propTypes = {
     PropTypes.func,
     PropTypes.node
   ]),
+  FilterPaneHeaderComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
   history: PropTypes.object,
   id: PropTypes.string.isRequired,
   location: PropTypes.object,