refactoring: sales tables.

refacoring: purchases tables.
2026-02-16 12:50:38 +00:00 · 2021-02-11 20:45:06 +02:00
parent 3901c336df
commit d48532a7e6
210 changed files with 2799 additions and 5392 deletions
--- a/client/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
+++ b/client/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
@@ -0,0 +1,153 @@
+import React from 'react';
+import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { FastField, ErrorMessage } from 'formik';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { ContactSelecetList, FieldRequiredHint, Icon } from 'components';
+
+import { useBillFormContext } from './BillFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+  saveInvoke,
+} from 'utils';
+
+/**
+ * Fill form header.
+ */
+function BillFormHeader({
+  onBillNumberChanged,
+}) {
+  // Bill form context.
+  const { vendors } = useBillFormContext();
+
+  const handleBillNumberBlur = (event) => {
+    saveInvoke(onBillNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ------- Vendor name ------ */}
+      <FastField name={'vendor_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--vendor')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'vendor_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Bill date ------- */}
+      <FastField name={'bill_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'bill_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="bill_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('bill_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{ leftIcon: <Icon icon={'date-range'} /> }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Due date ------- */}
+      <FastField name={'due_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'due_date'} />}
+            inline={true}
+            className={classNames(
+              'form-group--due-date',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="due_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('due_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Bill number ------- */}
+      <FastField name={'bill_number'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'bill_number'} />}
+            inline={true}
+            className={('form-group--bill_number', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="bill_number" />}
+          >
+            <InputGroup
+              minimal={true}
+              {...field}
+              onBlur={handleBillNumberBlur}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Reference ------- */}
+      <FastField name={'reference_no'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+)(BillFormHeader);