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

package/src/index.js

@@ -1,10 +1,12 @@
 // Useful hooks
 export {
   useActiveElement,
+  useCustomProperties,
   useHelperApp,
   useKiwtFieldArray,
   useKiwtSASQuery,
   useLocalStorageState,
+  useMutateCustomProperties,
   useMutateRefdataValue,
   useQIndex,
   useRefdata,
@@ -36,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';
@@ -73,3 +71,15 @@ export { default as NoResultsMessage } from './lib/NoResultsMessage';
 
 // RefdataButtons
 export { default as RefdataButtons } from './lib/RefdataButtons';
+
+// FormModal
+export { default as FormModal } from './lib/FormModal';
+
+// Custom properties
+export {
+  CustomPropertiesLookup,
+  CustomPropertiesSettings,
+  CustomPropertiesView
+} from './lib/CustomProperties/Config';
+
+export * as customPropertyContants from './lib/constants/customProperties';

package/src/lib/ActionList/ActionList.js

@@ -14,6 +14,7 @@ const propTypes = {
   contentData: PropTypes.arrayOf(PropTypes.object),
   creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
+  fieldComponents: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -24,31 +25,37 @@ const ActionList = ({
   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 }}
-    >
-      {() => (
-        <form onSubmit={e => { e.preventDefault(); }}>
-          <FieldArray
-            actionAssigner={actionAssigner}
-            actionCalls={actionCalls}
-            columnMapping={columnMapping}
-            component={ActionListFieldArray}
-            creatableFields={creatableFields}
-            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

@@ -18,6 +18,8 @@ const propTypes = {
   creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
+  fieldComponents: PropTypes.object,
+  formatter: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -28,7 +30,9 @@ const ActionListFieldArray = ({
   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();
@@ -92,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);
@@ -106,6 +111,7 @@ const ActionListFieldArray = ({
           <Button
             key={`cancel[${data.rowIndex}]`}
             data-type-button="cancel"
+            marginBottom0
             onClick={() => {
               if (!data.id && editing === 'NEW_ROW') {
                 fields.remove(data.rowIndex);
@@ -138,6 +144,7 @@ const ActionListFieldArray = ({
                 key={`action-${action.name}[${data.rowIndex}]`}
                 disabled={editing}
                 icon={action.icon}
+                marginBottom0
                 onClick={actionFunction}
               />
             );
@@ -148,6 +155,7 @@ const ActionListFieldArray = ({
             <Button
               key={`action-${action.name}[${data.rowIndex}]`}
               disabled={editing}
+              marginBottom0
               onClick={actionFunction}
             >
               {action.label ?? action.name}
@@ -191,10 +199,16 @@ const ActionListFieldArray = ({
                 (editFunction(cd))
             ) {
               returnObj[key] =
+                fieldComponents[key] ?
+                fieldComponents[key]({
+                  name: `${fieldName}.${key}`
+                }) :
                 <Field
                   autofocus={fieldIndex === 0}
                   component={TextField}
+                  marginBottom0
                   name={`${fieldName}.${key}`}
+                  parse={v => v}
                 />;
             }
           }
@@ -204,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
@@ -224,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

@@ -62,5 +62,8 @@ actionCalls | object<function> | An object with keys matching any "actions" the
 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 | | ✓ |
 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. | | ✕ |
+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: 'label'
+  });
+  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;