Add series entry field to form (series=true)

specifyweb/frontend/js_src/lib/components/FormFields/Field.tsx

@@ -13,6 +13,7 @@ import { resourceOn } from '../DataModel/resource';
 import type { LiteralField, Relationship } from '../DataModel/specifyField';
 import { raise } from '../Errors/Crash';
 import { fetchPathAsString } from '../Formatters/formatters';
+import { SeriesFormContext } from '../Forms/BulkCarryForward';
 import { collectionPreferences } from '../Preferences/collectionPreferences';
 import { userPreferences } from '../Preferences/userPreferences';
 
@@ -24,10 +25,13 @@ export function UiField({
   readonly name: string | undefined;
   readonly resource: SpecifyResource<AnySchema> | undefined;
   readonly field: LiteralField | Relationship | undefined;
+  readonly isSeries: boolean | undefined;
   readonly parser?: Parser;
 }): JSX.Element {
   return field?.isRelationship === true ? (
     <RelationshipField field={field} {...props} />
+  ) : props.isSeries === true ? (
+    <SeriesField field={field} {...props} />
   ) : (
     <Field field={field} {...props} />
   );
@@ -90,18 +94,26 @@ function RelationshipField({
   );
 }
 
+type FieldSeriesInput = (props: {
+  readonly name: string | undefined;
+  readonly placeholder: string | undefined;
+  readonly validationAttributes: ReturnType<typeof getValidationAttributes>;
+}) => React.ReactNode;
+
 function Field({
   resource,
   id,
   name,
   field,
   parser: defaultParser,
+  seriesInput,
 }: {
   readonly resource: SpecifyResource<AnySchema> | undefined;
   readonly id: string | undefined;
   readonly name: string | undefined;
   readonly field: LiteralField | undefined;
   readonly parser?: Parser;
+  readonly seriesInput?: FieldSeriesInput;
 }): JSX.Element {
   const { value, updateValue, validationRef, parser } = useResourceValue(
     resource,
@@ -217,36 +229,116 @@ function Field({
     validationAttributes;
 
   return (
-    <Input.Generic
-      forwardRef={validationRef}
-      key={parser.title}
-      max={Number.MAX_SAFE_INTEGER}
-      name={name}
-      placeholder={customPlaceholder ?? parserPlaceholder}
-      {...restValidationAttributes}
-      className={rightAlignClassName}
-      id={id}
-      isReadOnly={isReadOnly}
-      required={'required' in validationAttributes && !isInSearchDialog}
-      tabIndex={isReadOnly ? -1 : undefined}
-      value={value?.toString() ?? ''}
-      onBlur={
-        isReadOnly ? undefined : ({ target }): void => updateValue(target.value)
-      }
-      onValueChange={(value): void => updateValue(value, false)}
-      /*
-       * Update data model value before onBlur, as onBlur fires after onSubmit
-       * if form is submitted using the ENTER key
-       */
-      onChange={(event): void => {
-        const input = event.target as HTMLInputElement;
+    <>
+      <Input.Generic
+        forwardRef={validationRef}
+        key={parser.title}
+        max={Number.MAX_SAFE_INTEGER}
+        name={name}
+        placeholder={customPlaceholder ?? parserPlaceholder}
+        {...restValidationAttributes}
+        className={rightAlignClassName}
+        id={id}
+        isReadOnly={isReadOnly}
+        required={'required' in validationAttributes && !isInSearchDialog}
+        tabIndex={isReadOnly ? -1 : undefined}
+        value={value?.toString() ?? ''}
+        onBlur={
+          isReadOnly
+            ? undefined
+            : ({ target }): void => updateValue(target.value)
+        }
+        onValueChange={(value): void => updateValue(value, false)}
         /*
-         * Don't show validation errors on value change for input fields until
-         * field is blurred, unless user tried to paste a date (see definition
-         * of Input.Generic)
+         * Update data model value before onBlur, as onBlur fires after onSubmit
+         * if form is submitted using the ENTER key
          */
-        updateValue(input.value, event.type === 'paste');
-      }}
+        onChange={(event): void => {
+          const input = event.target as HTMLInputElement;
+          /*
+           * Don't show validation errors on value change for input fields until
+           * field is blurred, unless user tried to paste a date (see definition
+           * of Input.Generic)
+           */
+          updateValue(input.value, event.type === 'paste');
+        }}
+      />
+      {seriesInput?.({
+        name,
+        placeholder: customPlaceholder,
+        validationAttributes,
+      })}
+    </>
+  );
+}
+
+function SeriesField({
+  resource,
+  field,
+  id,
+  name,
+  isSeries,
+  parser,
+}: {
+  readonly id: string | undefined;
+  readonly name: string | undefined;
+  readonly resource: SpecifyResource<AnySchema> | undefined;
+  readonly field: LiteralField | undefined;
+  readonly isSeries: boolean | undefined;
+  readonly parser?: Parser;
+}): JSX.Element {
+  const {
+    seriesEnd: seriesRangeEnd,
+    setSeriesEnd: setSeriesRangeEnd,
+    setUsingSeries,
+  } = React.useContext(SeriesFormContext);
+  const tableName = resource?.specifyTable.name;
+  const [enableCarryForward] = userPreferences.use(
+    'form',
+    'preferences',
+    'enableCarryForward'
+  );
+  const [enableBulkCarryForwardRange] = userPreferences.use(
+    'form',
+    'preferences',
+    'enableBulkCarryForwardRange'
+  );
+  const showSeriesInput =
+    isSeries === true &&
+    tableName !== undefined &&
+    enableCarryForward.includes(tableName) &&
+    enableBulkCarryForwardRange.includes(tableName) &&
+    resource?.isNew() === true;
+  const handleSeriesRangeEndChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    const input = event.target as HTMLInputElement;
+    setSeriesRangeEnd(input.value);
+    setUsingSeries(true);
+  };
+
+  return (
+    <Field
+      field={field}
+      id={id}
+      name={name}
+      parser={parser}
+      resource={resource}
+      seriesInput={({ name, placeholder, validationAttributes }) =>
+        showSeriesInput ? (
+          <Input.Generic
+            id="formSeriesRangeEnd"
+            key="formSeriesRangeEnd"
+            max={Number.MAX_SAFE_INTEGER}
+            name={name}
+            placeholder={placeholder}
+            value={seriesRangeEnd}
+            onChange={handleSeriesRangeEndChange}
+            {...validationAttributes}
+            required={false}
+          />
+        ) : null
+      }
     />
   );
 }

specifyweb/frontend/js_src/lib/components/FormFields/index.tsx

@@ -187,6 +187,7 @@ const fieldRenderers: {
       maxLength,
       minLength,
       whiteSpaceSensitive,
+      isSeries,
     },
   }) {
     const parser = React.useMemo<Parser>(
@@ -218,6 +219,7 @@ const fieldRenderers: {
         name={name}
         parser={parser}
         resource={resource}
+        isSeries={isSeries}
       />
     );
   },

specifyweb/frontend/js_src/lib/components/FormParse/__tests__/cells.test.ts

@@ -117,6 +117,7 @@ describe('parseFormCell', () => {
         fieldDefinition: {
           defaultValue: undefined,
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           min: undefined,
           step: undefined,
@@ -145,6 +146,7 @@ describe('parseFormCell', () => {
         fieldDefinition: {
           defaultValue: undefined,
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           min: undefined,
           step: undefined,
@@ -170,6 +172,7 @@ describe('parseFormCell', () => {
         fieldDefinition: {
           defaultValue: undefined,
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           maxLength: undefined,
           min: undefined,
@@ -203,6 +206,7 @@ describe('parseFormCell', () => {
         fieldDefinition: {
           defaultValue: undefined,
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           maxLength: undefined,
           min: undefined,
@@ -253,6 +257,7 @@ describe('parseFormCell', () => {
         fieldDefinition: {
           defaultValue: 'A',
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           min: undefined,
           step: undefined,
@@ -281,6 +286,7 @@ describe('parseFormCell', () => {
         fieldDefinition: {
           defaultValue: undefined,
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           min: undefined,
           step: undefined,

specifyweb/frontend/js_src/lib/components/FormParse/__tests__/fields.test.ts

@@ -31,6 +31,7 @@ describe('parseFormField', () => {
     expect(parse('<cell uiType="text" />', {})).toEqual({
       defaultValue: undefined,
       isReadOnly: false,
+      isSeries: false,
       max: undefined,
       min: undefined,
       step: undefined,
@@ -46,6 +47,7 @@ describe('parseFormField', () => {
     ).toEqual({
       defaultValue: 'a',
       isReadOnly: true,
+      isSeries: false,
       max: -10,
       min: 4,
       step: 3.2,
@@ -61,6 +63,7 @@ describe('parseFormField', () => {
     ).toEqual({
       defaultValue: 'abc',
       isReadOnly: true,
+      isSeries: false,
       max: -10,
       min: 4,
       step: 3.2,
@@ -72,6 +75,7 @@ describe('parseFormField', () => {
     expect(parse('<cell uiType="formattedtext" default="abc" />', {})).toEqual({
       defaultValue: 'abc',
       isReadOnly: false,
+      isSeries: false,
       max: undefined,
       min: undefined,
       step: undefined,
@@ -83,6 +87,7 @@ describe('parseFormField', () => {
     expect(parse('<cell uiType="label" default="abc" />', {})).toEqual({
       defaultValue: 'abc',
       isReadOnly: false,
+      isSeries: false,
       max: undefined,
       min: undefined,
       step: undefined,
@@ -197,6 +202,7 @@ describe('parseFormField', () => {
     expect(parse('<cell uiType="combobox"/>', {})).toEqual({
       defaultValue: undefined,
       isReadOnly: false,
+      isSeries: false,
       type: 'Text',
       max: undefined,
       min: undefined,
@@ -299,6 +305,7 @@ describe('parseFormField', () => {
     expect(parse('<cell uiType="browse" initialize="min=3" />', {})).toEqual({
       defaultValue: undefined,
       isReadOnly: false,
+      isSeries: false,
       type: 'Text',
       max: undefined,
       maxLength: undefined,

specifyweb/frontend/js_src/lib/components/FormParse/__tests__/index.test.ts

@@ -104,6 +104,7 @@ const parsedFormView = {
           minLength: undefined,
           step: undefined,
           isReadOnly: false,
+          isSeries: false,
           defaultValue: undefined,
           whiteSpaceSensitive: false,
         },
@@ -561,6 +562,7 @@ test('parseRows', async () => {
         fieldDefinition: {
           defaultValue: undefined,
           isReadOnly: false,
+          isSeries: false,
           max: undefined,
           maxLength: undefined,
           min: undefined,

specifyweb/frontend/js_src/lib/components/FormParse/__tests__/postProcessFormDef.test.ts

@@ -94,6 +94,7 @@ const missingLabelTextField = ensure<FormCellDefinition>()({
   fieldDefinition: {
     defaultValue: undefined,
     isReadOnly: false,
+    isSeries: false,
     min: undefined,
     max: undefined,
     step: undefined,

specifyweb/frontend/js_src/lib/components/FormParse/fields.ts

@@ -82,6 +82,7 @@ export type FieldTypes = {
       readonly minLength: number | undefined;
       readonly maxLength: number | undefined;
       readonly whiteSpaceSensitive: boolean | undefined;
+      readonly isSeries: boolean | undefined;
     }
   >;
   readonly Plugin: State<
@@ -218,6 +219,7 @@ const processFieldType: {
       minLength: f.parseInt(getProperty('minLength')),
       maxLength: f.parseInt(getProperty('maxLength')),
       whiteSpaceSensitive,
+      isSeries: getProperty('series')?.toLowerCase() === 'true',
     };
   },
   QueryComboBox({ getProperty, fields }) {