UIREC-269, UIREC-279, UIREC-284: Number generator functionality

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## 5.1.0 (IN PROGRESS)
 
+* UIREC-269: Receiving Settings options for using the number generator for item barcode, accession number and call number
+* UIREC-279: Creating item barcode, accession number, call number using number generators in Receiving App
+* UIREC-284: Settings options for number generator - accessing number equals call number (Receiving)
 * UX Consistency: Update HTML Page Title display when third pane (detail record) displays. Refs UIREC-319.
 * Add "Display to public" toggle on piece form. Refs UIREC-333.
 

package.json

@@ -7,7 +7,8 @@
   "license": "Apache-2.0",
   "stripes": {
     "actsAs": [
-      "app"
+      "app",
+      "settings"
     ],
     "displayName": "ui-receiving.meta.title",
     "route": "/receiving",
@@ -38,6 +39,9 @@
       "titles": "1.2",
       "users": "16.0"
     },
+    "optionalOkapiInterfaces": {
+      "servint": "2.0 3.0"
+    },
     "queryResource": "query",
     "icons": [
       {
@@ -204,6 +208,7 @@
     "@babel/preset-react": "^7.7.4",
     "@folio/eslint-config-stripes": "^7.0.0",
     "@folio/jest-config-stripes": "^2.0.0",
+    "@folio/service-interaction": "^3.0.0",
     "@folio/stripes": "^9.0.0",
     "@folio/stripes-cli": "^3.0.0",
     "@formatjs/cli": "^6.1.3",
@@ -244,6 +249,7 @@
     "@folio/plugin-find-po-line": "^5.0.0"
   },
   "peerDependencies": {
+    "@folio/service-interaction": "^3.0.0",
     "@folio/stripes": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/Receiving.js

@@ -1,3 +1,5 @@
+import Proptypes from 'prop-types';
+
 import {
   Switch,
   Route,
@@ -27,6 +29,8 @@ import { TitleExpectContainer } from './TitleExpect';
 import { TitleReceiveContainer } from './TitleReceive';
 import { TitleUnreceiveContainer } from './TitleUnreceive';
 
+import Settings from './settings';
+
 const receivingCommands = [
   {
     name: 'receive',
@@ -41,8 +45,10 @@ const receivingCommands = [
 ];
 const shortcutCommands = [...receivingCommands, ...defaultKeyboardShortcuts];
 
-const Receiving = () => {
+const Receiving = (props) => {
   const [isOpen, toggleModal] = useModalToggle();
+  const { showSettings } = props;
+
   const focusSearchField = () => {
     const el = document.getElementById('input-record-search');
 
@@ -63,6 +69,10 @@ const Receiving = () => {
     },
   ];
 
+  if (showSettings) {
+    return <Settings {...props} />;
+  }
+
   return (
     <>
       <CommandList commands={shortcutCommands}>
@@ -139,4 +149,8 @@ const Receiving = () => {
   );
 };
 
+Receiving.propTypes = {
+  showSettings: Proptypes.bool,
+};
+
 export default Receiving;

src/TitleDetails/AddPieceModal/ItemFields/ItemFields.js

@@ -1,5 +1,7 @@
+import { useMemo, useState } from 'react';
+
 import PropTypes from 'prop-types';
-import { Field, useFormState } from 'react-final-form';
+import { Field, useForm, useFormState } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -10,9 +12,28 @@ import {
   TextField,
 } from '@folio/stripes/components';
 import { getItemStatusLabel } from '@folio/stripes-acq-components';
+import { useConfigurationQuery } from '../../../common/hooks';
+import { ACCESSION_NUMBER_SETTING, BARCODE_SETTING, CALL_NUMBER_SETTING, NUM_GEN_CONFIG_SETTING, USE_BOTH, USE_GENERATOR } from '../../../common/constants';
+import { NumberGeneratorButton, NumberGeneratorModal } from '../../../common/components';
 
 export const ItemFields = ({ disabled }) => {
   const { values } = useFormState();
+  const { change } = useForm();
+  const { configs } = useConfigurationQuery(NUM_GEN_CONFIG_SETTING);
+
+  const barcodeFieldDisabled = useMemo(() => {
+    return disabled || configs[BARCODE_SETTING] === USE_GENERATOR;
+  }, [configs, disabled]);
+
+  const callNumberFieldDisabled = useMemo(() => {
+    return disabled || configs[CALL_NUMBER_SETTING] === USE_GENERATOR;
+  }, [configs, disabled]);
+
+  const accessionNumberFieldDisabled = useMemo(() => {
+    return disabled || configs[ACCESSION_NUMBER_SETTING] === USE_GENERATOR;
+  }, [configs, disabled]);
+
+  const [openGenerateModal, setOpenGenerateModal] = useState(false);
 
   return (
     <>
@@ -25,7 +46,7 @@ export const ItemFields = ({ disabled }) => {
             name="barcode"
             component={TextField}
             label={<FormattedMessage id="ui-receiving.piece.barcode" />}
-            disabled={disabled}
+            disabled={barcodeFieldDisabled}
             fullWidth
           />
         </Col>
@@ -37,7 +58,7 @@ export const ItemFields = ({ disabled }) => {
             name="callNumber"
             component={TextField}
             label={<FormattedMessage id="ui-receiving.piece.callNumber" />}
-            disabled={disabled}
+            disabled={callNumberFieldDisabled}
             fullWidth
           />
         </Col>
@@ -49,10 +70,37 @@ export const ItemFields = ({ disabled }) => {
             name="accessionNumber"
             component={TextField}
             label={<FormattedMessage id="ui-receiving.piece.accessionNumber" />}
-            disabled={disabled}
+            disabled={accessionNumberFieldDisabled}
             fullWidth
           />
         </Col>
+        <Col
+          xs={6}
+          md={3}
+        >
+          <KeyValue
+            label={<FormattedMessage id="ui-receiving.numberGenerator.generateNumbers" />}
+            value={
+              <NumberGeneratorButton
+                disabled={
+                  disabled || (
+                    configs[BARCODE_SETTING] !== USE_GENERATOR &&
+                    configs[BARCODE_SETTING] !== USE_BOTH &&
+                    configs[ACCESSION_NUMBER_SETTING] !== USE_GENERATOR &&
+                    configs[ACCESSION_NUMBER_SETTING] !== USE_BOTH &&
+                    configs[CALL_NUMBER_SETTING] !== USE_GENERATOR &&
+                    configs[CALL_NUMBER_SETTING] !== USE_BOTH
+                  )
+                }
+                onClick={() => setOpenGenerateModal(true)}
+                tooltipId="generate-numbers-btn"
+                tooltipLabel={
+                  <FormattedMessage id="ui-receiving.numberGenerator.generateNumbers" />
+                }
+              />
+            }
+          />
+        </Col>
       </Row>
       <Row>
         <Col
@@ -79,6 +127,21 @@ export const ItemFields = ({ disabled }) => {
           />
         </Col>
       </Row>
+      <NumberGeneratorModal
+        configs={configs}
+        modalLabel={<FormattedMessage id="ui-receiving.numberGenerator.generateNumbers" />}
+        open={openGenerateModal}
+        onClose={() => setOpenGenerateModal(false)}
+        onGenerateAccessionNumber={val => {
+          change('accessionNumber', val);
+        }}
+        onGenerateBarcode={val => {
+          change('barcode', val);
+        }}
+        onGenerateCallNumber={val => {
+          change('callNumber', val);
+        }}
+      />
     </>
   );
 };