feat(warehouseTransfer): add warehouseTransfer.

2026-02-21 15:20:34 +00:00 · 2022-01-23 14:07:23 +02:00
parent a958c6088a
commit 13da985864
43 changed files with 1787 additions and 10 deletions
--- a/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.js
+++ b/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.js
@@ -0,0 +1,212 @@
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import {
+  AccountsSelectList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
+import { inputIntent, handleDateChange } from 'utils';
+import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import { useObserveTransferNoSettings } from './utils';
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+/**
+ * Warehouse transfer form header fields.
+ */
+function WarehouseTransferFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  warehouseTransferAutoIncrement,
+  warehouseTransferNextNumber,
+  warehouseTransferNumberPrefix,
+}) {
+  const { accounts } = useWarehouseTransferFormContext();
+
+  // Handle warehouse transfer number changing.
+  const handleTransferNumberChange = () => {
+    openDialog('warehouse-transfer-no-form');
+  };
+
+  // Handle transfer no. field blur.
+  const handleTransferNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && warehouseTransferAutoIncrement) {
+      openDialog('warehouse-transfer-no-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs transfer number settings with form.
+  useObserveTransferNoSettings(
+    warehouseTransferNumberPrefix,
+    warehouseTransferNextNumber,
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Date ----------- */}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Transfer number ----------- */}
+      <Field name={'transfer_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'warehouse_transfer.label.transfer_no'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames('form-group--transfer-no', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transfer_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleTransferNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleTransferNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T
+                      id={
+                        'warehouse_transfer.setting_your_auto_generated_transfer_no'
+                      }
+                    />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </Field>
+      {/* ----------- Form Warehouse ----------- */}
+      <FastField name={'form_warehouse'} accounts={accounts}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'warehouse_transfer.label.form_warehouse'} />}
+            className={classNames(
+              'form-group--warehouse-transfer',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'form_warehouse'} />}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              onAccountSelected={(account) => {
+                form.setFieldValue('form_warehouse', account.id);
+              }}
+              defaultSelectText={'Select Warehouse Transfer'}
+              selectedAccountId={value}
+              popoverFill={true}
+              allowCreate={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- To Warehouse ----------- */}
+      <FastField name={'to_warehouse'} accounts={accounts}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'warehouse_transfer.label.to_warehouse'} />}
+            className={classNames(
+              'form-group--warehouse-transfer',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'to_warehouse'} />}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              onAccountSelected={(account) => {
+                form.setFieldValue('to_warehouse', account.id);
+              }}
+              defaultSelectText={'Select Warehouse Transfer'}
+              selectedAccountId={value}
+              popoverFill={true}
+              allowCreate={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ reason -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reason'} />}
+            className={'form-group--reason'}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ warehouseTransferSettings }) => ({
+    warehouseTransferAutoIncrement: warehouseTransferSettings?.autoIncrement,
+    warehouseTransferNextNumber: warehouseTransferSettings?.nextNumber,
+    warehouseTransferNumberPrefix: warehouseTransferSettings?.numberPrefix,
+  })),
+)(WarehouseTransferFormHeaderFields);