UIU-2729/UIU-2730: Number generator usage for user barcode

package.json

@@ -847,6 +847,14 @@
           "ui-inventory.instance.view"
         ],
         "visible": true
+      },
+      {
+        "permissionName": "ui-users.settings.numberGenerator.manage",
+        "displayName": "Settings (Users): Manage number generator options",
+        "subPermissions": [
+          "settings.users.enabled"
+        ],
+        "visible": true
       }
     ]
   },
@@ -905,7 +913,8 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.0",
     "regenerator-runtime": "^0.13.9",
-    "sinon": "^7.1.1"
+    "sinon": "^7.1.1",
+    "@folio/service-interaction": "^1.0.0"
   },
   "dependencies": {
     "final-form-set-field-data": "^1.0.2",
@@ -928,7 +937,8 @@
     "react": "^17.0.2",
     "react-intl": "^5.8.0",
     "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "@folio/service-interaction": "^1.0.0"
   },
   "optionalDependencies": {
     "@folio/plugin-find-user": "^6.0.0"

src/components/EditSections/EditUserInfo/EditUserInfo.js

@@ -7,6 +7,8 @@ import moment from 'moment-timezone';
 import { OnChange } from 'react-final-form-listeners';
 
 import { ViewMetaData } from '@folio/stripes/smart-components';
+import { NumberGeneratorModalButton } from '@folio/service-interaction';
+
 import {
   Button,
   Select,
@@ -32,6 +34,7 @@ class EditUserInfo extends React.Component {
     intl: PropTypes.object.isRequired,
     onToggle: PropTypes.func,
     patronGroups: PropTypes.arrayOf(PropTypes.object),
+    settings: PropTypes.arrayOf(PropTypes.object),
     stripes: PropTypes.shape({
       timezone: PropTypes.string.isRequired,
       store: PropTypes.shape({
@@ -111,8 +114,14 @@ class EditUserInfo extends React.Component {
       accordionId,
       intl,
       uniquenessValidator,
+      form: { change },
+      settings
     } = this.props;
 
+
+    const numberGeneratorSettings = JSON.parse((settings?.find(sett => sett.configName === 'number_generator') ?? { value: '{}' }).value);
+    const barcodeGeneratorSetting = numberGeneratorSettings?.barcodeGeneratorSetting;
+
     const { barcode } = initialValues;
 
     const isUserExpired = () => {
@@ -305,14 +314,30 @@ class EditUserInfo extends React.Component {
               )}
             </Col>
             <Col xs={12} md={3}>
-              <Field
-                label={<FormattedMessage id="ui-users.information.barcode" />}
-                name="barcode"
-                id="adduser_barcode"
-                component={TextField}
-                validate={asyncValidateField('barcode', barcode, uniquenessValidator)}
-                fullWidth
-              />
+              <Row>
+                <Col xs={12}>
+                  <Field
+                    disabled={barcodeGeneratorSetting === 'useGenerator'}
+                    label={<FormattedMessage id="ui-users.information.barcode" />}
+                    name="barcode"
+                    id="adduser_barcode"
+                    component={TextField}
+                    validate={asyncValidateField('barcode', barcode, uniquenessValidator)}
+                    fullWidth
+                  />
+                </Col>
+                {(
+                  barcodeGeneratorSetting === 'useGenerator' ||
+                  barcodeGeneratorSetting === 'useBoth'
+                ) &&
+                  <Col xs={12}>
+                    <NumberGeneratorModalButton
+                      callback={(generated) => change('barcode', generated)}
+                      generator="Patron"
+                    />
+                  </Col>
+                }
+              </Row>
             </Col>
           </Row>
         </Accordion>

src/components/EditSections/EditUserInfo/EditUserInfo.test.js

@@ -8,6 +8,10 @@ import '__mock__/stripesComponents.mock';
 import renderWithRouter from 'helpers/renderWithRouter';
 import EditUserInfo from './EditUserInfo';
 
+jest.mock('@folio/service-interaction', () => ({
+  NumberGeneratorModalButton: () => <div>NumberGeneratorModalButton</div>
+}));
+
 const onSubmit = jest.fn();
 
 const arrayMutators = {

src/routes/UserRecordContainer.js

@@ -159,7 +159,7 @@ class UserRecordContainer extends React.Component {
     settings: {
       type: 'okapi',
       records: 'configs',
-      path: 'configurations/entries?query=(module==USERS and configName==profile_pictures)',
+      path: 'configurations/entries?query=(module==USERS and (configName==profile_pictures or configName==number_generator))',
     },
     requestPreferences: {
       type: 'okapi',

src/settings/NumberGeneratorOptions.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Field } from 'react-final-form';
+
+import { stripesConnect, withStripes } from '@folio/stripes/core';
+import { ConfigManager } from '@folio/stripes/smart-components';
+
+import { Col, RadioButton, Row } from '@folio/stripes/components';
+
+class NumberGeneratorOptions extends React.Component {
+  static propTypes = {
+    stripes: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    this.connectedConfigManager = stripesConnect(ConfigManager);
+  }
+
+  defaultValues = {
+    barcodeGeneratorSetting: 'useTextField'
+  };
+
+  beforeSave(data) {
+    return JSON.stringify(data);
+  }
+
+  getInitialValues = (settings) => {
+    let loadedValues = {};
+    try {
+      const value = settings.length === 0 ? '' : settings[0].value;
+      loadedValues = JSON.parse(value);
+    } catch (e) { } // eslint-disable-line no-empty
+    return {
+      ...this.defaultValues,
+      ...loadedValues,
+    };
+  }
+
+  render() {
+    return (
+      <this.connectedConfigManager
+        configName="number_generator"
+        getInitialValues={this.getInitialValues}
+        label={<FormattedMessage id="ui-users.settings.numberGeneratorOptions" />}
+        moduleName="USERS"
+        onBeforeSave={this.beforeSave}
+        stripes={this.props.stripes}
+        formType="final-form"
+      >
+        <Row>
+          <Col xs={12}>
+            <Field
+              component={RadioButton}
+              id="useGenerator"
+              name="barcodeGeneratorSetting"
+              label={<FormattedMessage id="ui-users.settings.numberGeneratorOptions.useGeneratorForBarcode" />}
+              type="radio"
+              value="useGenerator"
+            />
+            <Field
+              component={RadioButton}
+              id="useTextField"
+              name="barcodeGeneratorSetting"
+              label={<FormattedMessage id="ui-users.settings.numberGeneratorOptions.useTextFieldForBarcode" />}
+              type="radio"
+              value="useTextField"
+            />
+            <Field
+              component={RadioButton}
+              id="useBoth"
+              name="barcodeGeneratorSetting"
+              label={<FormattedMessage id="ui-users.settings.numberGeneratorOptions.useBothForBarcode" />}
+              type="radio"
+              value="useBoth"
+            />
+          </Col>
+        </Row>
+      </this.connectedConfigManager>
+    );
+  }
+}
+
+export default withStripes(NumberGeneratorOptions);

src/settings/NumberGeneratorOptions.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+
+import '__mock__/stripesCore.mock';
+import '__mock__/stripesSmartComponent.mock';
+import '__mock__/intl.mock';
+
+import renderWithRouter from 'helpers/renderWithRouter';
+import NumberGeneratorOptions from './NumberGeneratorOptions';
+
+jest.unmock('@folio/stripes/components');
+
+const renderNumberGeneratorSettings = (props) => renderWithRouter(<NumberGeneratorOptions {...props} />);
+
+describe('Number generator settings', () => {
+  it('renders', () => {
+    renderNumberGeneratorSettings();
+
+    expect(screen.getByTestId('config-manager')).toBeTruthy();
+  });
+});

src/settings/sections.js

@@ -18,6 +18,7 @@ import LimitsSettings from './LimitsSettings';
 import DepartmentsSettings from './DepartmentsSettings';
 import BlockTemplates from './patronBlocks/BlockTemplates';
 import TransferCriteriaSettings from './TransferCriteriaSettings';
+import NumberGeneratorOptions from './NumberGeneratorOptions';
 
 const settingsGeneral = [
   {
@@ -44,6 +45,12 @@ const settingsGeneral = [
     component: DepartmentsSettings,
     perm: 'ui-users.settings.departments.view'
   },
+  {
+    route: 'numbergeneratoroptions',
+    label: <FormattedMessage id="ui-users.settings.numberGeneratorOptions" />,
+    component: NumberGeneratorOptions,
+    perm: 'ui-users.settings.numberGenerator.manage'
+  },
   //   Profile pictures are currently unsupported in Folio and the existence of this setting has
   //   confused implementers. Commenting out for now as opposed to deleting it so the existing
   //   files and components aren't orphaned.

src/views/UserEdit/UserEdit.js

@@ -117,6 +117,7 @@ class UserEdit extends React.Component {
       'addressTypes',
       'servicePoints',
       'departments',
+      'settings'
     );
 
     return formData;

src/views/UserEdit/UserForm.js

@@ -362,6 +362,7 @@ class UserForm extends React.Component {
                     accordionId="editUserInfo"
                     initialValues={initialValues}
                     patronGroups={formData.patronGroups}
+                    settings={formData.settings}
                     stripes={stripes}
                     form={form}
                     selectedPatronGroup={selectedPatronGroup}

test/jest/__mock__/stripesSmartComponent.mock.js

@@ -47,6 +47,7 @@ jest.mock('@folio/stripes/smart-components', () => {
     ...jest.requireActual('@folio/stripes/smart-components'),
     AddressEditList: () => <div data-testid="address-edit-list">AddressEditList</div>,
     ChangeDueDateDialog: (props) => <div data-testid="change-duedate-dialog">ChangeDueDateDialog</div>,
+    ConfigManager: () => <div data-testid="config-manager">ConfigManager</div>,
     ControlledVocab: ({ validate }) => <div data-testid="controlled-vocab">ControlledVocab</div>,
     DueDatePicker: () => <div data-testid="due-date-picker">DueDatePicker</div>,
     LocationLookup: () => <div>LocationLookup</div>,

translations/ui-users/en.json

@@ -153,6 +153,10 @@
   "settings.departments.users": "Users",
   "settings.manualBlockTemplates": "Templates",
   "settings.manualBlockTemplates.paneTitle": "Patron block templates",
+  "settings.numberGeneratorOptions": "Number generator options",
+  "settings.numberGeneratorOptions.useGeneratorForBarcode": "Use number generator for user barcode.",
+  "settings.numberGeneratorOptions.useTextFieldForBarcode": "Use text field for user barcode.",
+  "settings.numberGeneratorOptions.useBothForBarcode": "Use number generator for user barcode but allow editing via text field.",
   "manualBlockTemplates.templateInformation": "Template information",
   "manualBlockTemplates.templateName": "Template name",
   "manualBlockTemplates.blockCode": "Block code",