@k-int/stripes-kint-components 1.7.0 → 2.0.0

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

@@ -0,0 +1,295 @@
+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}
+            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/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/Typedown/Typedown.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import get from 'lodash/get';
 
-import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
+import { EndOfList, IconButton, Label, Popper } from '@folio/stripes/components';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
@@ -17,19 +17,29 @@ import selectorSafe from '../utils/selectorSafe';
 
 const Typedown = ({
   dataOptions,
+  endOfList,
+  id,
   input,
+  isSelected,
   filterPath,
+  label,
   meta,
   onChange,
   onType,
   renderFooter = null,
   renderListItem = null,
+  required,
   uniqueIdentificationPath = 'id'
 }) => {
   const selectedUniqueId = get(input.value, uniqueIdentificationPath);
 
   // Display data needs to be in line with data options but also able to react to default handleType
   const [displayData, setDisplayData] = useState(dataOptions);
+
+  // keep track of what we've typed and whether we've typed an exact match or not
+  const [currentlyTyped, setCurrentlyTyped] = useState('');
+  const [exactMatch, setExactMatch] = useState(false);
+
   useEffect(() => {
     setDisplayData(dataOptions);
   }, [dataOptions]);
@@ -46,6 +56,14 @@ const Typedown = ({
     } else {
       setDisplayData(dataOptions);
     }
+
+    setCurrentlyTyped(e.target.value);
+
+    if (displayData.length === 1 && get(displayData[0], filterPath) === e.target.value) {
+      setExactMatch(true);
+    } else {
+      setExactMatch(false);
+    }
   };
 
   // Hook to set up all the essentials
@@ -74,11 +92,11 @@ const Typedown = ({
       className={css.listItem}
     >
       {renderListItem ?
-        renderListItem(option) :
+        renderListItem(option, currentlyTyped, exactMatch) :
         get(option, uniqueIdentificationPath)
       }
     </div>
-  ), [renderListItem, uniqueIdentificationPath]);
+  ), [currentlyTyped, exactMatch, renderListItem, uniqueIdentificationPath]);
 
   const handleChange = useCallback(value => {
     input.onChange(value);
@@ -101,7 +119,7 @@ const Typedown = ({
           id="typedown-list"
         >
           {displayData?.length ? displayData?.map((d, index) => {
-            const isSelected = get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
+            const isSelectedEval = isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
             return (
               <button
                 key={`typedown-button-[${index}]`}
@@ -110,7 +128,7 @@ const Typedown = ({
                   css.fullWidth,
                   css.menuButton
                 )}
-                data-selected={isSelected}
+                data-selected={isSelectedEval}
                 id={`typedown-button-[${index}]`}
                 onClick={() => {
                   handleChange(d);
@@ -123,8 +141,7 @@ const Typedown = ({
               </button>
             );
           }) :
-          // TODO test this
-          <EndOfList />
+            endOfList || <EndOfList />
           }
         </div>
         {renderFooter &&
@@ -133,17 +150,21 @@ const Typedown = ({
             className={css.footer}
             id={`typedown-footer-${selectorSafe(input.name)}`}
           >
-            {renderFooter()}
+            {renderFooter(displayData, currentlyTyped, exactMatch)}
           </div>
         }
       </div>
     );
   }, [
+    currentlyTyped,
     displayData,
+    endOfList,
+    exactMatch,
     footerRef,
     handleChange,
     handleNextFocus,
     input,
+    isSelected,
     listKeyDownHandler,
     listRef,
     renderFooter,
@@ -174,6 +195,15 @@ const Typedown = ({
     <div
       ref={resizeRef}
     >
+      {label &&
+        <Label
+          htmlFor={id}
+          id={`${id}-label`}
+          required={required}
+        >
+          {label}
+        </Label>
+      }
       {renderSearchField()}
       <Popper
         key="typedown-menu-toggle"
@@ -222,13 +252,25 @@ const Typedown = ({
 
 Typedown.propTypes = {
   dataOptions: PropTypes.arrayOf(PropTypes.object),
+  endOfList: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+    PropTypes.element
+  ]),
   filterPath: PropTypes.string,
+  id: PropTypes.string,
   input: PropTypes.object,
+  isSelected: PropTypes.func,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   meta: PropTypes.object,
   onChange: PropTypes.func,
   onType: PropTypes.func,
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
+  required: PropTypes.bool,
   uniqueIdentificationPath: PropTypes.string
 };
 

package/src/lib/constants/customProperties.js

@@ -0,0 +1,9 @@
+export const TYPE_CLASS_PREFIX = 'com.k_int.web.toolkit.custprops.types.CustomProperty';
+export const BLOB_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyBlob';
+export const BOOLEAN_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyBoolean';
+export const CONTAINER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyContainer';
+export const DECIMAL_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal';
+export const INTEGER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyInteger';
+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';

package/src/lib/hooks/index.js

@@ -8,3 +8,5 @@ export { default as useLocalStorageState } from './useLocalStorageState';
 export { default as useQIndex } from './useQIndex';
 export { useSettings, useSettingSection } from './settingsHooks';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
+export { default as useCustomProperties } from './useCustomProperties';
+export { default as useMutateCustomProperties } from './useMutateCustomProperties';

package/src/lib/hooks/useCustomProperties.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { generateKiwtQuery } from '../utils';
+
+const useCustomProperties = ({
+  endpoint,
+  ctx,
+  nsValues = {
+    sort: 'id'
+  },
+  options = {
+    searchKey: 'label,name,description',
+    filterKeys: {
+      ContextKey: 'ctx'
+    },
+    stats: false,
+    max: 100
+  },
+  queryParams,
+  returnQueryObject = false,
+}) => {
+  const ky = useOkapiKy();
+
+  // Allow passing of 'false' for isNull
+  if (Array.isArray(ctx)) {
+    // If we have an array, append a context filter for each ctx given
+    nsValues.filters = ctx.map(c => {
+      if (c === 'isNull') {
+        return 'ContextWithoutKey.ctx isNull';
+      } else {
+        return `ContextKey.${c}`;
+      }
+    }).join(',');
+  } else if (ctx === 'isNull') { // isNull is a special case
+    nsValues.filters = 'ContextWithoutKey.ctx isNull';
+  } else if (ctx) {
+    // If we just have a string, append a single ctx filter
+    nsValues.filters = `ContextKey.${ctx}`;
+  } else {
+    nsValues.filters = null;
+  }
+
+  const query = generateKiwtQuery(options, nsValues);
+  const path = `${endpoint}${query}`;
+
+  const queryObject = useQuery(
+    ['stripes-kint-components', 'useCustomProperties', 'custprops', ctx, path],
+    () => ky(path).json(),
+    queryParams
+  );
+
+  if (returnQueryObject) {
+    return queryObject || {};
+  }
+
+  const { data: custprops } = queryObject;
+  return custprops || [];
+};
+
+useCustomProperties.propTypes = {
+  endpoint: PropTypes.string,
+  ctx: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  queryParams: PropTypes.object,
+  returnQueryObject: PropTypes.bool
+};
+
+export default useCustomProperties;

package/src/lib/hooks/useMutateCustomProperties.js

@@ -0,0 +1,62 @@
+import { useMutation } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+
+const useMutateCustomProperties = ({
+  afterQueryCalls,
+  endpoint,
+  id,
+  queryParams,
+  returnQueryObject = {
+    post: false,
+    put: false,
+    delete: false
+  }
+}) => {
+  const returnObj = {};
+
+  const ky = useOkapiKy();
+
+  const deleteQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'delete', id],
+    async () => ky.delete(`${endpoint}/${id}`).json()
+      .then(afterQueryCalls?.delete),
+    queryParams?.delete
+  );
+
+  const putQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'put', id],
+    async (data) => ky.put(`${endpoint}/${id}`, { json: data }).json()
+      .then(afterQueryCalls?.put),
+    queryParams?.put
+  );
+
+  const postQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'post'],
+    async (data) => ky.post(`${endpoint}`, { json: data }).json()
+      .then(afterQueryCalls?.post),
+    queryParams?.post
+  );
+
+  if (returnQueryObject?.delete) {
+    returnObj.delete = deleteQueryObject;
+  } else {
+    returnObj.delete = deleteQueryObject.mutateAsync;
+  }
+
+  if (returnQueryObject?.put) {
+    returnObj.put = putQueryObject;
+  } else {
+    returnObj.put = putQueryObject.mutateAsync;
+  }
+
+  if (returnQueryObject?.post) {
+    returnObj.post = postQueryObject;
+  } else {
+    returnObj.post = postQueryObject.mutateAsync;
+  }
+
+  return returnObj;
+};
+
+export default useMutateCustomProperties;