refactoring: sales tables.

refacoring: purchases tables.
2026-02-17 05:10:31 +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/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
@@ -0,0 +1,182 @@
+import React, { useCallback } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { FastField, ErrorMessage } from 'formik';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  Row,
+  Col,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { inputIntent, handleDateChange } from 'utils';
+import { formatMessage } from 'services/intl';
+
+function EstimateFormHeader({
+  //#withCustomers
+  customers,
+  // #withDialogActions
+  openDialog,
+  // #ownProps
+  onEstimateNumberChanged,
+}) {
+  const handleEstimateNumberChange = useCallback(() => {
+    openDialog('estimate-number-form', {});
+  }, [openDialog]);
+
+  const handleEstimateNumberChanged = (event) => {
+    saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField name={'customer_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--customer')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Estimate date ----------- */}
+      <FastField name={'estimate_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'estimate_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL, 'form-group--estimate-date')}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="estimate_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('estimate_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Expiration date ----------- */}
+      <FastField name={'expiration_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'expiration_date'} />}
+            inline={true}
+            className={classNames(
+              CLASSES.FORM_GROUP_LIST_SELECT,
+              CLASSES.FILL,
+              'form-group--expiration-date',
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="expiration_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('expiration_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Estimate number ----------- */}
+      <FastField name={'estimate_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'estimate'} />}
+            inline={true}
+            className={('form-group--estimate-number', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="estimate_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                {...field}
+                onBlur={handleEstimateNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleEstimateNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated estimate number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference'}>
+        {({ form, 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(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withDialogActions,
+)(EstimateFormHeader);