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

package/src/index.js

@@ -1,10 +1,12 @@
 // Useful hooks
 export {
   useActiveElement,
+  useCustomProperties,
   useHelperApp,
   useKiwtFieldArray,
   useKiwtSASQuery,
   useLocalStorageState,
+  useMutateCustomProperties,
   useMutateRefdataValue,
   useQIndex,
   useRefdata,
@@ -16,6 +18,7 @@ export {
 export {
   generateKiwtQuery,
   generateKiwtQueryParams,
+  refdataOptions,
   selectorSafe
 } from './lib/utils';
 
@@ -35,10 +38,6 @@ export { default as ActionList } from './lib/ActionList';
 export { default as EditableRefdataList } from './lib/EditableRefdataList';
 
 // Typedown
-export {
-  default as TypeDown
-} from './lib/TypeDown';
-
 export {
   default as Typedown
 } from './lib/Typedown';
@@ -72,3 +71,12 @@ export { default as NoResultsMessage } from './lib/NoResultsMessage';
 
 // RefdataButtons
 export { default as RefdataButtons } from './lib/RefdataButtons';
+
+// Custom properties
+export {
+  CustomPropertiesLookup,
+  CustomPropertiesSettings,
+  CustomPropertiesView
+} from './lib/CustomProperties/Config';
+
+export * as customPropertyContants from './lib/constants/customProperties';

package/src/lib/ActionList/ActionList.js

@@ -12,7 +12,9 @@ const propTypes = {
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
+  fieldComponents: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -21,31 +23,39 @@ const ActionList = ({
   actionCalls = {},
   columnMapping,
   contentData,
+  creatableFields = {},
   editableFields = {},
-  visibleFields
+  fieldComponents = {},
+  visibleFields,
+  ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
   return (
-    <Form
-      enableReinitialize
-      initialValues={{ contentData }}
-      mutators={arrayMutators}
-      onSubmit={actionCalls.edit}
-      subscription={{ contentData: true }}
-    >
-      {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <FieldArray
-            actionAssigner={actionAssigner}
-            actionCalls={actionCalls}
-            columnMapping={columnMapping}
-            component={ActionListFieldArray}
-            editableFields={editableFields}
-            name="contentData"
-            visibleFields={visibleFields}
-          />
-        </form>
-      )}
-    </Form>
+    <>
+      <Form
+        enableReinitialize
+        initialValues={{ contentData }}
+        mutators={arrayMutators}
+        onSubmit={actionCalls.edit}
+        subscription={{ contentData: true }}
+      >
+        {() => (
+          <form onSubmit={e => { e.preventDefault(); }}>
+            <FieldArray
+              actionAssigner={actionAssigner}
+              actionCalls={actionCalls}
+              columnMapping={columnMapping}
+              component={ActionListFieldArray}
+              creatableFields={creatableFields}
+              editableFields={editableFields}
+              fieldComponents={fieldComponents}
+              name="contentData"
+              visibleFields={visibleFields}
+              {...mclProps}
+            />
+          </form>
+        )}
+      </Form>
+    </>
   );
 };
 

package/src/lib/ActionList/ActionListFieldArray.js

@@ -15,8 +15,11 @@ const propTypes = {
   actionAssigner: PropTypes.func,
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
+  fieldComponents: PropTypes.object,
+  formatter: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -24,9 +27,12 @@ const ActionListFieldArray = ({
   actionAssigner,
   actionCalls,
   columnMapping,
+  creatableFields,
   editableFields,
   fields,
-  visibleFields
+  fieldComponents,
+  visibleFields,
+  ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
   // Grab finalForm functions/values from form hooks
   const { change } = useForm();
@@ -54,7 +60,7 @@ const ActionListFieldArray = ({
   };
 
   const handleCreate = (index) => {
-    const rowData = fields.value[index];
+    const { actionListActions: _a, ...rowData } = fields.value[index];
     actionCalls.create(rowData);
   };
 
@@ -90,6 +96,7 @@ const ActionListFieldArray = ({
             key={`save[${data.rowIndex}]`}
             buttonStyle="primary"
             disabled={submitting || pristine}
+            marginBottom0
             onClick={() => {
               if (!data.id && editing === 'NEW_ROW') {
                 handleCreate(data.rowIndex);
@@ -104,9 +111,15 @@ const ActionListFieldArray = ({
           <Button
             key={`cancel[${data.rowIndex}]`}
             data-type-button="cancel"
+            marginBottom0
             onClick={() => {
-              change(fieldName, get(initialValues, fieldName));
-              toggleEditing(data.id);
+              if (!data.id && editing === 'NEW_ROW') {
+                fields.remove(data.rowIndex);
+                toggleEditing('NEW_ROW');
+              } else {
+                change(fieldName, get(initialValues, fieldName));
+                toggleEditing(data.id);
+              }
             }}
           >
             <FormattedMessage id="stripes-kint-components.actionList.cancel" />
@@ -131,6 +144,7 @@ const ActionListFieldArray = ({
                 key={`action-${action.name}[${data.rowIndex}]`}
                 disabled={editing}
                 icon={action.icon}
+                marginBottom0
                 onClick={actionFunction}
               />
             );
@@ -141,6 +155,7 @@ const ActionListFieldArray = ({
             <Button
               key={`action-${action.name}[${data.rowIndex}]`}
               disabled={editing}
+              marginBottom0
               onClick={actionFunction}
             >
               {action.label ?? action.name}
@@ -153,7 +168,7 @@ const ActionListFieldArray = ({
 
   const formatContent = () => {
     return (
-      fields.map(fieldName => {
+      fields.map((fieldName, fieldIndex) => {
         // Fetch the content from the field Values
         const cd = get(values, fieldName);
         cd.actionListActions = actionAssigner(cd);
@@ -170,19 +185,30 @@ const ActionListFieldArray = ({
           */
           for (const key of visibleFields) {
             const editFunction = editableFields[key] ?? (() => true);
+            const createFunction = creatableFields[key] ?? (() => true);
             /*
-              Next check if this is a new row, if so we should edit it in a Field
-              If it does, then we check if the property has an editableField function,
-              if it does we run it with the data. If not then we just return the Field
+              Next check if this is a new row, if so we should run the createableField function with the data.
+              If it is not a new row, then we run the editableField function with the data,
+              and it should return true/false
+
+              For both checks
+              true => Field, false => display value
             */
             if (
-                !cd.id ||
+                (!cd.id && createFunction(cd)) ||
                 (editFunction(cd))
             ) {
               returnObj[key] =
+                fieldComponents[key] ?
+                fieldComponents[key]({
+                  name: `${fieldName}.${key}`
+                }) :
                 <Field
+                  autofocus={fieldIndex === 0}
                   component={TextField}
+                  marginBottom0
                   name={`${fieldName}.${key}`}
+                  parse={v => v}
                 />;
             }
           }
@@ -192,6 +218,28 @@ const ActionListFieldArray = ({
     );
   };
 
+  const { formatter, ...restOfMclProps } = mclProps; // Destructure formatter part of mclProps
+  const fieldAwareFormatter = () => {
+    const returnObj = {};
+    // For each visible field, if it's being edited then ignore passed formatters, else use them
+    visibleFields.forEach(key => {
+      returnObj[key] = cd => {
+         // Row is being edited if it has no id, or its id is in the editing string
+        const editingRow = cd.id === editing || !cd.id;
+        // If not editing, use the passed formatter values
+
+        let returnValue = cd[key];
+
+        if (!editingRow && formatter?.[key]) {
+          returnValue = formatter[key](cd);
+        }
+
+        return returnValue;
+      };
+    });
+    return returnObj;
+  };
+
   return (
     <>
       <Button
@@ -212,10 +260,12 @@ const ActionListFieldArray = ({
         columnWidths={getColumnWidths()}
         contentData={formatContent()}
         formatter={{
-          actionListActions: renderActionButtons
+          actionListActions: renderActionButtons,
+          ...fieldAwareFormatter()
         }}
         interactive={false}
         visibleColumns={[...visibleFields, 'actionListActions']}
+        {...restOfMclProps}
       />
     </>
   );

package/src/lib/ActionList/README.md

@@ -61,5 +61,9 @@ actionAssigner | function | A function which will be passed the entire row objec
 actionCalls | object<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |
-editableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. | | ✕ |
+creatableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not. | | ✕ |
+editableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. No key for a given field will be interpreted as () => true, so a field is editable by default. | | ✕ |
+fieldComponents | object<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (currently only the name of the field `name`), and returns a Field component to be used in "edit mode" for the visible field specified. | | ✕ |
+formatter | object<function> | A "formatter" object that takes the same shape as an MCL formatter, and is used in the same way whilst a row is NOT being edited. While editing a given row, this formatter entry is ignored. | | ✕ |
 visibleFields | array<String> | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList | | ✓ |
+...mclProps | any | Any other props supplied to ActionList will be applied to the MCL directly. *WARNING* Some MCL props may override important functionality within ActionList | | ✕ |

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

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import debounce from 'lodash/debounce';
+
+import { Col, MultiColumnList, Row, Spinner, Select } from '@folio/stripes/components';
+
+import SearchField from '../../SearchField';
+import { useCustomProperties } from '../../hooks';
+
+const DEBOUNCE_TIME = 500;
+
+const CustomPropertiesLookup = ({
+  contextFilterOptions, // expects an array of the form [{value: "OpenAccess", label: "Open Access"}, {value: false, label: "None"}]
+  customPropertiesEndpoint: endpoint,
+  labelOverrides,
+  mclProps,
+  onSelectCustomProperty,
+  queryParams
+}) => {
+  const [nsValues, setNsValues] = useState({
+    sort: 'id'
+  });
+  const [selectedContext, setSelectedContext] = useState();
+
+  const { data: custprops, isLoading } = useCustomProperties({
+    endpoint,
+    nsValues,
+    queryParams,
+    returnQueryObject: true,
+    ctx: selectedContext
+  });
+
+  const handleSearch = debounce((query) => {
+    setNsValues({
+      ...nsValues,
+      query,
+    });
+  }, DEBOUNCE_TIME);
+
+  return (
+    <>
+      <SearchField fullWidth onChange={e => handleSearch(e.target.value)} />
+      <Row>
+        <Col xs={6}>
+          <Select
+            dataOptions={contextFilterOptions}
+            onChange={(e) => {
+              setSelectedContext(e.target.value);
+            }}
+            value={selectedContext}
+          />
+        </Col>
+      </Row>
+      {isLoading ?
+        <Spinner /> :
+        <MultiColumnList
+          columnMapping={{
+            'label': labelOverrides?.label ?? <FormattedMessage id="stripes-kint-components.customProperties.label" />,
+            'primary': labelOverrides?.primary ?? <FormattedMessage id="stripes-kint-components.customProperties.primary" />,
+            'ctx': labelOverrides?.ctx ?? <FormattedMessage id="stripes-kint-components.customProperties.ctx" />,
+            'weight': labelOverrides?.weight ?? <FormattedMessage id="stripes-kint-components.customProperties.weight" />,
+            'type': labelOverrides?.type ?? <FormattedMessage id="stripes-kint-components.customProperties.type" />,
+            'category': labelOverrides?.category ?? <FormattedMessage id="stripes-kint-components.customProperties.category" />
+          }}
+          contentData={custprops}
+          formatter={{
+            primary: data => {
+              if (data?.primary) {
+                return (
+                  <FormattedMessage id="stripes-kint-components.yes" />
+                );
+              } else {
+                return (
+                  <FormattedMessage id="stripes-kint-components.no" />
+                );
+              }
+            },
+            type: data => (
+              <FormattedMessage id={`stripes-kint-components.customProperties.type.${data?.type}`} />
+            ),
+            category: data => data?.category?.desc
+          }}
+          onRowClick={onSelectCustomProperty}
+          visibleColumns={['label', 'primary', 'ctx', 'weight', 'type', 'category']}
+          {...mclProps}
+        />
+      }
+    </>
+  );
+};
+
+CustomPropertiesLookup.propTypes = {
+  contextFilterOptions: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string
+    ])
+  })),
+  customPropertiesEndpoint: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  mclProps: PropTypes.object,
+  onSelectCustomProperty: PropTypes.func,
+  queryParams: PropTypes.object,
+  refdataEndpoint: PropTypes.string,
+};
+
+export default CustomPropertiesLookup;

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

@@ -0,0 +1,240 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import compose from 'compose-function';
+
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useQueryClient } from 'react-query';
+
+import SafeHTMLMessage from '@folio/react-intl-safe-html';
+
+import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
+
+import FormModal from '../../FormModal/FormModal';
+
+import CustomPropertiesLookup from './CustomPropertiesLookup';
+import CustomPropertiesView from './CustomPropertiesView';
+import CustomPropertiesForm from './CustomPropertyForm';
+import { useMutateCustomProperties, useRefdata } from '../../hooks';
+
+const EDITING = 'edit';
+const CREATING = 'create';
+const VIEWING = 'view';
+
+// A default option for setting up panes manually
+const CustomPropertiesSettings = ({
+  afterQueryCalls,
+  contextFilterOptions,
+  customPropertiesEndpoint,
+  helpPopovers,
+  labelOverrides,
+  refdataEndpoint,
+}) => {
+  const queryClient = useQueryClient();
+
+  const intl = useIntl();
+  const [customProperty, setCustomProperty] = useState();
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  const refdata = useRefdata({
+    endpoint: refdataEndpoint,
+  });
+
+  const [mode, setMode] = useState(VIEWING);
+
+  // Default props that need hooks are hard
+  let renderContextFilterOptions = contextFilterOptions;
+  if (!contextFilterOptions) {
+    /*
+      Default is {value: '', label: 'All'}, empty string will map to ALL contexts
+      If null context is needed, use
+      {value: 'isNull', label: ...}
+    */
+    renderContextFilterOptions = [
+      {
+        value: '', // empty string is all custoprop contexts
+        label: intl.formatMessage({ id: 'stripes-kint-components.customProperties.all' })
+      }
+    ];
+  }
+
+  let renderViewPaneTitle = labelOverrides?.viewPaneTitle;
+  if (renderViewPaneTitle instanceof Function) {
+    renderViewPaneTitle = renderViewPaneTitle(customProperty);
+  }
+
+  // Defaulting is hard
+  const afterQueryCallsSafe = {
+    put: () => null,
+    post: () => null,
+    delete: () => null,
+    ...afterQueryCalls
+  };
+
+  const {
+    post: createCustprop,
+    put: editCustProp,
+    delete: deleteCustProp
+  } = useMutateCustomProperties({
+    afterQueryCalls: {
+      put: () => {
+        setMode(VIEWING);
+        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        afterQueryCallsSafe.put();
+      },
+      post: () => {
+        setMode(VIEWING);
+        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        afterQueryCallsSafe.post();
+      },
+      delete: () => {
+        setMode(VIEWING);
+        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);
+        afterQueryCallsSafe.delete();
+      }
+    },
+    endpoint: customPropertiesEndpoint,
+    id: customProperty?.id
+  });
+
+  const handeContextSubmit = (submitData) => {
+    return {
+      ...submitData,
+      ctx: submitData?.ctx?.[0]?.value
+    };
+  };
+
+  return (
+    <>
+      <Pane
+        defaultWidth="fill"
+        id="settings-customProperties.lookupPane"
+        lastMenu={
+          <Button
+            marginBottom0
+            onClick={() => setMode(CREATING)} // TODO do we need to clear form here too?
+          >
+            <FormattedMessage id="stripes-kint-components.create" />
+          </Button>
+        }
+        paneTitle={labelOverrides.paneTitle ??
+          <FormattedMessage id="stripes-kint-components.customProperties" /> // This should be configurable?
+        }
+      >
+        <CustomPropertiesLookup
+          contextFilterOptions={renderContextFilterOptions}
+          customPropertiesEndpoint={customPropertiesEndpoint}
+          labelOverrides={labelOverrides}
+          onSelectCustomProperty={(_e, cp) => setCustomProperty(cp)}
+        />
+      </Pane>
+      {customProperty &&
+        <Pane
+          actionMenu={({ onToggle }) => (
+            [
+              <Button
+                buttonStyle="dropdownItem"
+                marginBottom0
+                onClick={() => setMode(EDITING)}
+              >
+                <FormattedMessage id="stripes-kint-components.edit" />
+              </Button>,
+              <Button
+                buttonStyle="dropdownItem"
+                marginBottom0
+                onClick={() => {
+                  setDeleteModal(true);
+                  onToggle();
+                }}
+              >
+                <FormattedMessage id="stripes-kint-components.delete" />
+              </Button>
+            ]
+          )}
+          defaultWidth="fill"
+          dismissible
+          id="settings-customProperties-viewPane"
+          onClose={() => setCustomProperty()}
+          paneTitle={
+            renderViewPaneTitle ?? customProperty?.label ?? customProperty?.name
+          }
+        >
+          <CustomPropertiesView
+            customProperty={customProperty}
+            labelOverrides={labelOverrides}
+          />
+        </Pane>
+      }
+      <FormModal
+        initialValues={mode === CREATING ?
+          {
+            weight: 0,
+            primary: true,
+            defaultInternal: true
+          } :
+          {
+            ...customProperty,
+            ctx: customProperty?.ctx ? [{ value: customProperty.ctx, label: customProperty.ctx }] : null
+          }
+        }
+        modalProps={{
+          dismissible: true,
+          onClose: () => setMode(VIEWING),
+          open: (mode === CREATING || mode === EDITING)
+        }}
+        onSubmit={mode === CREATING ?
+          compose(createCustprop, handeContextSubmit) :
+          compose(editCustProp, handeContextSubmit)
+        }
+      >
+        <CustomPropertiesForm
+          contextFilterOptions={renderContextFilterOptions}
+          helpPopovers={helpPopovers}
+          labelOverrides={labelOverrides}
+          refdata={refdata.map(rdc => ({ label: rdc.desc, value: rdc.id }))}
+        />
+      </FormModal>
+      <ConfirmationModal
+        buttonStyle="danger"
+        confirmLabel={
+          labelOverrides?.confirmLabel ??
+          <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmLabel" />
+        }
+        heading={
+          labelOverrides?.confirmHeading ??
+          <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmHeading" />
+        }
+        id="delete-job-confirmation"
+        message={
+          labelOverrides?.confirmMessage ??
+          <SafeHTMLMessage id="stripes-kint-components.customProperties.delete.confirmMessage" values={{ name: customProperty?.name }} />
+        }
+        onCancel={() => setDeleteModal(false)}
+        onConfirm={() => {
+          deleteCustProp();
+          setCustomProperty();
+          setDeleteModal(false);
+        }}
+        open={deleteModal}
+      />
+    </>
+  );
+};
+
+CustomPropertiesSettings.propTypes = {
+  afterQueryCalls: PropTypes.object,
+  contextFilterOptions: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string
+    ])
+  })),
+  customPropertiesEndpoint: PropTypes.string,
+  helpPopovers: PropTypes.object,
+  labelOverrides: PropTypes.object,
+  refdataEndpoint: PropTypes.string,
+};
+
+export default CustomPropertiesSettings;