Skip to content

Commit

Permalink
UIREC-284-settings-for-number-generator add NumberGeneratorSettingsFo…
Browse files Browse the repository at this point in the history 
…rm functionaltity
  • Loading branch information
@elsenhans
elsenhans committed Jan 28, 2025
1 parent 7afe93f commit 5f0b206
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 64 deletions.
9 changes: 9 additions & 0 deletions src/Settings/NumberGeneratorSettings/NumberGeneratorSettings.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import '@folio/stripes-components/lib/variables';

.marginBottomGutter {
margin-bottom: var(--gutter);
}

.greyLabel {
color: var(--checkable-disabled-fill);
}
178 changes: 114 additions & 64 deletions src/Settings/NumberGeneratorSettings/NumberGeneratorSettingsForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { Field } from 'react-final-form';
import { Field, useFormState } from 'react-final-form';
import { FormattedMessage } from 'react-intl';

import {
Expand All @@ -12,12 +12,28 @@ import {
PaneFooter,
PaneHeader,
RadioButton,
RadioButtonGroup,
Row,
} from '@folio/stripes/components';
import stripesFinalForm from '@folio/stripes/final-form';

import css from './NumberGeneratorSettings.css';

const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) => {
const { values } = useFormState();

const USE_TEXT_FIELD = 'useTextField';
const USE_GENERATOR = 'useGenerator';
const USE_BOTH = 'useBoth';

const ACCESSION_NUMBER_SETTING = 'accessionNumber';
const BARCODE_SETTING = 'barcode';
const CALL_NUMBER_SETTING = 'callNumber';

const USE_SHARED_NUMBER = 'useSharedNumber';

const disableSharedNumber = values?.accessionNumber === USE_TEXT_FIELD || values?.callNumber === USE_TEXT_FIELD;
const disableGeneratorOffOption = values?.useSharedNumber;

const paneHeader = (renderProps) => (
<PaneHeader
{...renderProps}
Expand All @@ -43,76 +59,110 @@ const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) =>

return (
<Pane defaultWidth="fill" footer={paneFooter} id="vendor-code-settings" renderHeader={paneHeader}>
<Row>
<Row className={css.marginBottomGutter}>
<Col xs={12}>
<div>
<MessageBanner>
<p><FormattedMessage id="ui-receiving.settings.numberGenerator.info" /></p>
</MessageBanner>
</div>
<MessageBanner>
<p><FormattedMessage id="ui-receiving.settings.numberGenerator.info" /></p>
</MessageBanner>
</Col>
</Row>
<Row>
<Row className={css.marginBottomGutter}>
<Col xs={12}>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.barcode" /></Label>
<Field
component={RadioButtonGroup}
name="barcode"
>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.barcode" /></Label>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'barcode' }} />}
type="radio"
/>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'barcode' }} />}
type="radio"
/>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'barcode' }} />}
type="radio"
/>
</Field>

component={RadioButton}
id={`${USE_TEXT_FIELD}Barcode`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'barcode' }} />}
name={BARCODE_SETTING}
type="radio"
value={USE_TEXT_FIELD}
/>
<Field
component={RadioButtonGroup}
name="accessionNumber"
>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.accessionNumber" /></Label>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'accession number' }} />}
type="radio"
/>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'accession number' }} />}
type="radio"
/>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'accession number' }} />}
type="radio"
/>
</Field>

component={RadioButton}
id={`${USE_BOTH}Barcode`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'barcode' }} />}
name={BARCODE_SETTING}
type="radio"
value={USE_BOTH}
/>
<Field
component={RadioButton}
id={`${USE_GENERATOR}Barcode`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'barcode' }} />}
name={BARCODE_SETTING}
type="radio"
value={USE_GENERATOR}
/>
</Col>
</Row>
<Row className={css.marginBottomGutter}>
<Col xs={12}>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.accessionNumber" /></Label>
<Field
className={disableGeneratorOffOption ? css.greyLabel : null}
component={RadioButton}
disabled={disableGeneratorOffOption}
id={`${USE_TEXT_FIELD}AccessionNumber`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'accession number' }} />}
name={ACCESSION_NUMBER_SETTING}
type="radio"
value={USE_TEXT_FIELD}
/>
<Field
component={RadioButton}
id={`${USE_BOTH}AccessionNumber`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'accession number' }} />}
name={ACCESSION_NUMBER_SETTING}
type="radio"
value={USE_BOTH}
/>
<Field
component={RadioButton}
id={`${USE_GENERATOR}AccessionNumber`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'accession number' }} />}
name={ACCESSION_NUMBER_SETTING}
type="radio"
value={USE_GENERATOR}
/>
</Col>
</Row>
<Row className={css.marginBottomGutter}>
<Col xs={12}>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.callNumber" /></Label>
<Field
className={disableGeneratorOffOption ? css.greyLabel : null}
component={RadioButton}
disabled={disableGeneratorOffOption}
id={`${USE_TEXT_FIELD}CallNumber`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'call number' }} />}
name={CALL_NUMBER_SETTING}
type="radio"
value={USE_TEXT_FIELD}
/>
<Field
component={RadioButton}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'call number' }} />}
name={CALL_NUMBER_SETTING}
type="radio"
value={USE_BOTH}
/>
<Field
component={RadioButton}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'call number' }} />}
name={CALL_NUMBER_SETTING}
type="radio"
value={USE_GENERATOR}
/>
</Col>
</Row>
<Row>
<Col xs={12}>
<Field
component={RadioButtonGroup}
name="callNumber"
>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.callNumber" /></Label>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'call number' }} />}
type="radio"
/>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'call number' }} />}
type="radio"
/>
<RadioButton
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'call number' }} />}
type="radio"
/>
</Field>
<Checkbox
component={Checkbox}
disabled={disableSharedNumber}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.accessionNumberEqualCallNumber" />}
checked
name={USE_SHARED_NUMBER}
type="checkbox"
/>
</Col>
</Row>
Expand Down

0 comments on commit 5f0b206

Please sign in to comment.