merge: estimate work branch to master

client/src/containers/Purchases/Bill/BillForm.js

@@ -207,7 +207,7 @@ function BillForm({
   }, [bill]);
 
   const formik = useFormik({
-    enableReinitialize: true,
+    // enableReinitialize: true,
     validationSchema,
     initialValues: {
       ...initialValues,
@@ -291,7 +291,7 @@ function BillForm({
     },
     [setDeletedFiles, deletedFiles],
   );
-
+  
   const onClickCleanAllLines = () => {
     formik.setFieldValue(
       'entries',

client/src/containers/Purchases/PaymentMades/PaymentMade.js

@@ -10,6 +10,7 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withBillActions from '../Bill/withBillActions';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
@@ -27,6 +28,9 @@ function PaymentMade({
   requestFetchPaymentMade,
 
   //#withBillActions
+
+  // #withSettingsActions
+  requestFetchOptions,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -51,6 +55,8 @@ function PaymentMade({
     { enabled: !!id },
   );
 
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+
   const handleFormSubmit = useCallback(
     (payload) => {
       payload.redirect && history.push('/payment-mades');
@@ -90,4 +96,5 @@ export default compose(
   withAccountsActions,
   withBillActions,
   withPaymentMadeActions,
+  withSettingsActions
 )(PaymentMade);

client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js

@@ -64,19 +64,7 @@ function PaymentMadeDataTable({
     }
   }, [paymentMadeLoading, setInitialMount]);
 
-  // useEffect(() => {
-  //   if (customViewId) {
-  //     changeCurrentView(customViewId);
-  //     setTopbarEditView(customViewId);
-  //   }
-  //   changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  // }, [
-  //   customViewId,
-  //   changeCurrentView,
-  //   changePageSubtitle,
-  //   setTopbarEditView,
-  //   viewMeta,
-  // ]);
+
 
   const handleEditPaymentMade = useCallback(
     (paymentMade) => () => {
@@ -95,9 +83,13 @@ function PaymentMadeDataTable({
   const actionMenuList = useCallback(
     (paymentMade) => (
       <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_payment_made' })}
           onClick={handleEditPaymentMade(paymentMade)}
         />

client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js

@@ -28,6 +28,7 @@ import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 
 import { compose, repeatValue } from 'utils';
+import withSettings from 'containers/Settings/withSettings';
 
 const MIN_LINES_NUMBER = 5;
 
@@ -35,10 +36,18 @@ function PaymentMadeForm({
   //#withMedia
   requestSubmitMedia,
   requestDeleteMedia,
-  //#withPaymentMadesActions
 
+  //#withPaymentMadesActions
   requestSubmitPaymentMade,
   requestEditPaymentMade,
+  setPaymentNumberChange,
+
+  // #withPaymentMade
+  nextPaymentNumberChanged,
+
+  // #withSettings
+  paymentNextNumber,
+  paymentNumberPrefix,
 
   //#withDashboard
   changePageTitle,
@@ -92,7 +101,7 @@ function PaymentMadeForm({
     payment_account_id: Yup.number()
       .required()
       .label(formatMessage({ id: 'payment_account_' })),
-    payment_number: Yup.number()
+    payment_number: Yup.string()
       .required()
       .label(formatMessage({ id: 'payment_no_' })),
     reference: Yup.string().min(1).max(255).nullable(),
@@ -133,13 +142,17 @@ function PaymentMadeForm({
     [],
   );
 
+  const paymentNumber = paymentNumberPrefix
+    ? `${paymentNumberPrefix}-${paymentNextNumber}`
+    : paymentNextNumber;
+
   const defaultInitialValues = useMemo(
     () => ({
       vendor_id: '',
       payment_account_id: '',
       payment_date: moment(new Date()).format('YYYY-MM-DD'),
       reference: '',
-      payment_number: '',
+      payment_number: paymentNumber,
       // receive_amount: '',
       description: '',
       entries: [...repeatValue(defaultPaymentMade, MIN_LINES_NUMBER)],
@@ -188,7 +201,6 @@ function PaymentMadeForm({
   }, [paymentMade]);
 
   const formik = useFormik({
-    enableReinitialize: true,
     validationSchema,
     initialValues: {
       ...initialValues,
@@ -282,7 +294,11 @@ function PaymentMadeForm({
       orderingIndex([...repeatValue(defaultPaymentMade, MIN_LINES_NUMBER)]),
     );
   };
-  console.log(formik.errors, 'ERROR');
+
+  useEffect(() => {
+    formik.setFieldValue('payment_number', paymentNumber);
+    setPaymentNumberChange(false);
+  }, [nextPaymentNumberChanged, paymentNumber]);
 
   return (
     <div className={'payment_made_form'}>
@@ -291,7 +307,7 @@ function PaymentMadeForm({
         <PaymentMadeItemsTable
           formik={formik}
           entries={formik.values.entries}
-          // vendor_id={formik.values.vendor_id}
+          vendor_id={formik.values.vendor_id}
           onClickAddNewRow={handleClickAddNewRow}
           onClickClearAllLines={handleClearAllLines}
         />
@@ -317,4 +333,11 @@ export default compose(
   withDashboardActions,
   withMediaActions,
   withPaymentMadeDetail(),
+  withPaymentMade(({ nextPaymentNumberChanged }) => ({
+    nextPaymentNumberChanged,
+  })),
+  withSettings(({ billPaymentSettings }) => ({
+    paymentNextNumber: billPaymentSettings?.next_number,
+    paymentNumberPrefix: billPaymentSettings?.number_prefix,
+  })),
 )(PaymentMadeForm);

client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js

@@ -20,18 +20,24 @@ import {
   ListSelect,
   ErrorMessage,
   FieldRequiredHint,
+  Icon,
+  InputPrependButton,
 } from 'components';
 
 import withVender from 'containers/Vendors/withVendors';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 function PaymentMadeFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
 
   //#withVender
   vendorsCurrentPage,
+  vendorItems,
   //#withAccouts
   accountsList,
+  // #withDialogActions
+  openDialog,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -79,10 +85,14 @@ function PaymentMadeFormHeader({
     [accountsList],
   );
 
+  const handlePaymentNumberChange = useCallback(() => {
+    openDialog('payment-number-form', {});
+  }, [openDialog]);
+
   return (
     <div>
       <div>
-        {/* Vend name */}
+        {/* Vendor name */}
         <FormGroup
           label={<T id={'vendor_name'} />}
           inline={true}
@@ -94,7 +104,7 @@ function PaymentMadeFormHeader({
           }
         >
           <ListSelect
-            items={vendorsCurrentPage}
+            items={vendorItems}
             noResults={<MenuItem disabled={true} text="No results." />}
             itemRenderer={handleVenderRenderer}
             itemPredicate={handleFilterVender}
@@ -144,6 +154,20 @@ function PaymentMadeFormHeader({
               errors.payment_number && touched.payment_number && Intent.DANGER
             }
             minimal={true}
+            rightElement={
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handlePaymentNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated payment number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            }
+            minimal={true}
             {...getFieldProps('payment_number')}
           />
         </FormGroup>
@@ -199,10 +223,12 @@ function PaymentMadeFormHeader({
 }
 
 export default compose(
-  withVender(({ vendorsCurrentPage }) => ({
+  withVender(({ vendorsCurrentPage, vendorItems }) => ({
     vendorsCurrentPage,
+    vendorItems,
   })),
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
+  withDialogActions,
 )(PaymentMadeFormHeader);

client/src/containers/Purchases/PaymentMades/withPaymentMade.js

@@ -7,7 +7,6 @@ import {
   getPaymentMadeTableQuery,
 } from 'store/PaymentMades/paymentMade.selector';
 
-
 export default (mapState) => {
   const getPyamentMadesItems = getPaymentMadeCurrentPageFactory();
   const getPyamentMadesPaginationMeta = getPaymentMadePaginationMetaFactory();
@@ -18,8 +17,14 @@ export default (mapState) => {
       paymentMadeViews: getResourceViews(state, props, 'bill_payments'),
       paymentMadeItems: state.paymentMades.items,
       paymentMadeTableQuery: query,
-      paymentMadePageination: getPyamentMadesPaginationMeta(state, props, query),
+      paymentMadePageination: getPyamentMadesPaginationMeta(
+        state,
+        props,
+        query,
+      ),
       paymentMadesLoading: state.paymentMades.loading,
+      nextPaymentNumberChanged:
+        state.paymentMades.nextPaymentNumberChanged,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js

@@ -27,5 +27,10 @@ const mapDispatchToProps = (dispatch) => ({
       type: t.PAYMENT_MADE_TABLE_QUERIES_ADD,
       queries,
     }),
+  setPaymentNumberChange: (isChanged) =>
+    dispatch({
+      type: t.PAYMENT_MADES_NUMBER_CHANGED,
+      payload: { isChanged },
+    }),
 });
 export default connect(null, mapDispatchToProps);