merge: estimate work branch to master

client/src/containers/Sales/Estimate/EstimateForm.js

@@ -21,6 +21,7 @@ import withEstimateActions from './withEstimateActions';
 import withEstimateDetail from './withEstimateDetail';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
+import withSettings from 'containers/Settings/withSettings';
 
 import AppToaster from 'components/AppToaster';
 import Dragzone from 'components/Dragzone';
@@ -43,6 +44,10 @@ const EstimateForm = ({
   changePageTitle,
   changePageSubtitle,
 
+  // #withSettings
+  estimateNextNumber,
+  estimateNumberPrefix,
+
   //#withEstimateDetail
   estimate,
 
@@ -92,7 +97,7 @@ const EstimateForm = ({
     expiration_date: Yup.date()
       .required()
       .label(formatMessage({ id: 'expiration_date_' })),
-    estimate_number: Yup.number()
+    estimate_number: Yup.string()
       .required()
       .nullable()
       .label(formatMessage({ id: 'estimate_number_' })),
@@ -110,18 +115,6 @@ const EstimateForm = ({
     entries: Yup.array().of(
       Yup.object().shape({
         quantity: Yup.number().nullable(),
-        //Cyclic dependency
-        rate: Yup.number().nullable(),
-        //   .when(['item_id'], {
-        //     is: (item_id) => item_id,
-        //     then: Yup.number().required(),
-        //   }),
-
-        // rate: Yup.number().test((value) => {
-        //   const { item_id } = this.parent;
-        //   if (!item_id) return value != null;
-        //   return false;
-        // }),
         item_id: Yup.number()
           .nullable()
           .when(['quantity', 'rate'], {
@@ -152,13 +145,16 @@ const EstimateForm = ({
     }),
     [],
   );
+  const estimateNumber = estimateNumberPrefix
+    ? `${estimateNumberPrefix}-${estimateNextNumber}`
+    : estimateNextNumber;
 
   const defaultInitialValues = useMemo(
     () => ({
       customer_id: '',
       estimate_date: moment(new Date()).format('YYYY-MM-DD'),
       expiration_date: moment(new Date()).format('YYYY-MM-DD'),
-      estimate_number: '',
+      estimate_number: estimateNumber,
       reference: '',
       note: '',
       terms_conditions: '',
@@ -208,7 +204,6 @@ const EstimateForm = ({
   }, [estimate]);
 
   const formik = useFormik({
-    enableReinitialize: true,
     validationSchema,
     initialValues: {
       ...initialValues,
@@ -226,9 +221,12 @@ const EstimateForm = ({
       if (estimate && estimate.id) {
         requestEditEstimate(estimate.id, requestForm).then((response) => {
           AppToaster.show({
-            message: formatMessage({
-              id: 'the_estimate_has_been_successfully_edited',
-            }),
+            message: formatMessage(
+              {
+                id: 'the_estimate_has_been_successfully_edited',
+              },
+              { number: values.estimate_number },
+            ),
             intent: Intent.SUCCESS,
           });
           setSubmitting(false);
@@ -255,7 +253,11 @@ const EstimateForm = ({
       }
     },
   });
-  console.log(formik.errors ,'ERROR');
+  
+  useEffect(() => {
+    formik.setFieldValue('estimate_number', estimateNumber);
+  }, [estimateNumber]);
+
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
@@ -353,7 +355,11 @@ const EstimateForm = ({
 
 export default compose(
   withEstimateActions,
+  withEstimateDetail(),
   withDashboardActions,
   withMediaActions,
-  withEstimateDetail(),
+  withSettings(({ estimatesSettings }) => ({
+    estimateNextNumber: estimatesSettings?.next_number,
+    estimateNumberPrefix: estimatesSettings?.number_prefix,
+  })),
 )(EstimateForm);

client/src/containers/Sales/Estimate/EstimateFormHeader.js

@@ -13,15 +13,24 @@ import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
-import { ListSelect, ErrorMessage, FieldRequiredHint, Hint } from 'components';
+import {
+  ListSelect,
+  ErrorMessage,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 function EstimateFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
 
   //#withCustomers
   customers,
+  // #withDialogActions
+  openDialog,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -67,6 +76,10 @@ function EstimateFormHeader({
     [setFieldValue],
   );
 
+  const handleEstimateNumberChange = useCallback(() => {
+    openDialog('estimate-number-form', {});
+  }, [openDialog]);
+
   return (
     <div className={'page-form page-form--estimate'}>
       <div className={'page-form__primary-section'}>
@@ -171,6 +184,19 @@ function EstimateFormHeader({
             errors.estimate_number && touched.estimate_number && Intent.DANGER
           }
           minimal={true}
+          rightElement={
+            <InputPrependButton
+              buttonProps={{
+                onClick: handleEstimateNumberChange,
+                icon: <Icon icon={'settings-18'} />,
+              }}
+              tooltip={true}
+              tooltipProps={{
+                content: 'Setting your auto-generated estimate number',
+                position: Position.BOTTOM_LEFT,
+              }}
+            />
+          }
           {...getFieldProps('estimate_number')}
         />
       </FormGroup>
@@ -196,4 +222,5 @@ export default compose(
   withCustomers(({ customers }) => ({
     customers,
   })),
+  withDialogActions,
 )(EstimateFormHeader);

client/src/containers/Sales/Estimate/EstimateList.js

@@ -42,15 +42,15 @@ function EstimateList({
   const [deleteEstimate, setDeleteEstimate] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
-  const fetchResourceViews = useQuery(
-    ['resource-views', 'sales_estimates'],
-    (key, resourceName) => requestFetchResourceViews(resourceName),
-  );
+  // const fetchResourceViews = useQuery(
+  //   ['resource-views', 'sales_estimates'],
+  //   (key, resourceName) => requestFetchResourceViews(resourceName),
+  // );
 
-  const fetchResourceFields = useQuery(
-    ['resource-fields', 'sales_estimates'],
-    (key, resourceName) => requestFetchResourceFields(resourceName),
-  );
+  // const fetchResourceFields = useQuery(
+  //   ['resource-fields', 'sales_estimates'],
+  //   (key, resourceName) => requestFetchResourceFields(resourceName),
+  // );
 
   const fetchEstimate = useQuery(['estimates-table', estimateTableQuery], () =>
     requestFetchEstimatesTable(),
@@ -86,16 +86,6 @@ function EstimateList({
     });
   }, [deleteEstimate, requestDeleteEstimate, formatMessage]);
 
-  // // Handle filter change to re-fetch data-table.
-  // const handleFilterChanged = useCallback(
-  //   (filterConditions) => {
-  //     addEstimatesTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //   },
-  //   [fetchEstimate],
-  // );
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchEstimate]);
 
@@ -136,7 +126,7 @@ function EstimateList({
   );
   return (
     <DashboardInsider
-      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      // loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
       name={'sales_estimates'}
     >
       <EstimateActionsBar

client/src/containers/Sales/Estimate/Estimates.js

@@ -8,13 +8,22 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withEstimateActions from './withEstimateActions';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
 function Estimates({
+  // #withCustomersActions
   requestFetchCustomers,
+
+  // #withItemsActions
   requestFetchItems,
+
+  // #withEstimateActions
   requsetFetchEstimate,
+
+  // #withSettingsActions
+  requestFetchOptions,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -33,7 +42,7 @@ function Estimates({
     requestFetchCustomers({}),
   );
 
-  // 
+  //
   const handleFormSubmit = useCallback(
     (payload) => {
       payload.redirect && history.push('/estimates');
@@ -44,6 +53,8 @@ function Estimates({
     history.goBack();
   }, [history]);
 
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+
   return (
     <DashboardInsider
       loading={
@@ -66,4 +77,5 @@ export default compose(
   withEstimateActions,
   withCustomersActions,
   withItemsActions,
+  withSettingsActions,
 )(Estimates);

client/src/containers/Sales/Estimate/EstimatesDataTable.js

@@ -94,9 +94,13 @@ function EstimatesDataTable({
   const actionMenuList = useCallback(
     (estimate) => (
       <Menu>
-        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuItem
+          icon={<Icon icon="reader-18" />}
+          text={formatMessage({ id: 'view_details' })}
+        />
         <MenuDivider />
         <MenuItem
+          icon={<Icon icon="pen-18" />}
           text={formatMessage({ id: 'edit_estimate' })}
           onClick={handleEditEstimate(estimate)}
         />