WIP / Feature & Fix Expense /Customer

client/src/containers/Customers/Customer.js

@@ -25,15 +25,31 @@ function Customer({
     requestFetchCustomers({}),
   );
 
-  const fetchCustomerDatails =useQuery(id && ['customer-detail',id],()=>requestFetchCustomers())
+  const fetchCustomerDatails = useQuery(id && ['customer-detail', id], () =>
+    requestFetchCustomers(),
+  );
+
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/customers');
+    },
+    [history],
+  );
+
+  const handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
 
   return (
     <DashboardInsider
-      // formik={formik}
-      loading={ fetchCustomerDatails.isFetching || fetchCustomers.isFetching}
+      loading={fetchCustomerDatails.isFetching || fetchCustomers.isFetching}
       name={'customer-form'}
     >
-      <CustomerForm customerId={id} />
+      <CustomerForm
+        onFormSubmit={handleFormSubmit}
+        customerId={id}
+        onCancelForm={handleCancel}
+      />
     </DashboardInsider>
   );
 }

client/src/containers/Customers/CustomerFooter.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function CustomerFloatingFooter({
+  formik: { isSubmitting, resetForm },
+  onSubmitClick,
+  onCancelClick,
+
+  customer,
+}) {
+  return (
+    <div className={'form__floating-footer'}>
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={isSubmitting}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ publish: true, redirect: true });
+        }}
+      >
+        {customer && customer.id ? <T id={'edit'} /> : <T id={'save'} />}
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save_and_new'}
+        onClick={() => {
+          onSubmitClick({ publish: true, redirect: false });
+        }}
+      >
+        <T id={'save_new'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={() => {
+          onSubmitClick({ publish: false, redirect: false });
+        }}
+      >
+        <T id={'save_as_draft'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}

client/src/containers/Customers/CustomerForm.js

@@ -31,6 +31,7 @@ import withCustomers from 'containers/Customers//withCustomers';
 import useMedia from 'hooks/useMedia';
 
 import { compose } from 'utils';
+import CustomerFloatingFooter from './CustomerFooter';
 
 function CustomerForm({
   // #withDashboardActions
@@ -40,7 +41,7 @@ function CustomerForm({
   customers,
 
   //#withCustomerDetail
-  customerDetail,
+  customer,
 
   //#withCustomersActions
   requestSubmitCustomer,
@@ -50,9 +51,13 @@ function CustomerForm({
   // #withMediaActions
   requestSubmitMedia,
   requestDeleteMedia,
+  //#Props
+  onFormSubmit,
+  onCancelForm,
 }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
+  const [payload, setPayload] = useState({});
 
   const {
     setFiles,
@@ -127,22 +132,30 @@ function CustomerForm({
 
   const initialValues = useMemo(
     () => ({
-      ...(customerDetail
+      ...(customer
         ? {
-            ...pick(customerDetail, Object.keys(defaultInitialValues)),
+            ...pick(customer, Object.keys(defaultInitialValues)),
           }
         : {
             ...defaultInitialValues,
           }),
     }),
-    [customerDetail, defaultInitialValues],
+    [customer, defaultInitialValues],
+  );
+
+  const saveInvokeSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+
+    [onFormSubmit],
   );
 
   useEffect(() => {
-    customerDetail && customerDetail.id
+    customer && customer.id
       ? changePageTitle(formatMessage({ id: 'edit_customer_details' }))
       : changePageTitle(formatMessage({ id: 'new_customer' }));
-  }, [changePageTitle, customerDetail, formatMessage]);
+  }, [changePageTitle, customer, formatMessage]);
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -152,9 +165,9 @@ function CustomerForm({
     },
 
     onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
-      const formValues = { ...values };
-      if (customerDetail && customerDetail.id) {
-        requestEditCustomer(customerDetail.id, formValues)
+      const formValues = { ...values, status: payload.publish };
+      if (customer && customer.id) {
+        requestEditCustomer(customer.id, formValues)
           .then((response) => {
             AppToaster.show({
               message: formatMessage({
@@ -163,8 +176,9 @@ function CustomerForm({
               intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            history.push('/customers');
+            // history.push('/customers');
             resetForm();
+            saveInvokeSubmit({ action: 'update', ...payload });
           })
           .catch((errors) => {
             setSubmitting(false);
@@ -178,7 +192,9 @@ function CustomerForm({
               }),
               intent: Intent.SUCCESS,
             });
-            history.push('/customers');
+            // history.push('/customers');
+            setSubmitting(false);
+            saveInvokeSubmit({ action: 'new', ...payload });
           })
           .catch((errors) => {
             setSubmitting(false);
@@ -202,8 +218,8 @@ function CustomerForm({
   );
 
   const initialAttachmentFiles = useMemo(() => {
-    return customerDetail && customerDetail.media
-      ? customerDetail.media.map((attach) => ({
+    return customer && customer.media
+      ? customer.media.map((attach) => ({
           preview: attach.attachment_file,
           upload: true,
           metadata: { ...attach },
@@ -224,11 +240,20 @@ function CustomerForm({
     },
     [setDeletedFiles, deletedFiles],
   );
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPayload(payload);
+      formik.handleSubmit();
+    },
+    [setPayload, formik],
+  );
 
-  const handleCancelClickBtn = () => {
-    history.goBack();
-  };
-
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
   return (
     <div className={'customer-form'}>
       <form onSubmit={formik.handleSubmit}>
@@ -396,34 +421,14 @@ function CustomerForm({
         </FormGroup>
 
         <CustomersTabs formik={formik} />
-
-        <div class="form__floating-footer">
-          <Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
-            {customerDetail && customerDetail.id ? (
-              <T id={'edit'} />
-            ) : (
-              <T id={'save'} />
-            )}
-          </Button>
-
-          <Button
-            disabled={isSubmitting}
-            intent={Intent.PRIMARY}
-            className={'ml1'}
-            name={'save_and_new'}
-          >
-            <T id={'save_new'} />
-          </Button>
-
-          <Button className={'ml1'} disabled={isSubmitting}>
-            <T id={'save_as_draft'} />
-          </Button>
-
-          <Button className={'ml1'} onClick={handleCancelClickBtn}>
-            <T id={'close'} />
-          </Button>
-        </div>
       </form>
+
+      <CustomerFloatingFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        customer={customer}
+        onCancelClick={handleCancelClick}
+      />
     </div>
   );
 }

client/src/containers/Customers/CustomersList.js

@@ -137,21 +137,21 @@ function CustomersList({
     [fetchCustomers],
   );
 
-  // Handle items bulk delete button click.,
+  // Handle Customers bulk delete button click.,
 
   const handleBulkDelete = useCallback(
-    (itemsIds) => {
-      setBulkDelete(itemsIds);
+    (customersIds) => {
+      setBulkDelete(customersIds);
     },
     [setBulkDelete],
   );
 
-  // Handle cancel accounts bulk delete.
+  // Handle cancel cusomters bulk delete.
   const handleCancelBulkDelete = useCallback(() => {
     setBulkDelete(false);
   }, []);
 
-  // Handle confirm items bulk delete.
+  // Handle confirm customers bulk delete.
   const handleConfirmBulkDelete = useCallback(() => {
     requestDeleteBulkCustomers(bulkDelete)
       .then(() => {
@@ -163,7 +163,7 @@ function CustomersList({
           intent: Intent.SUCCESS,
         });
       })
-      .catch((errors) => {
+      .catch((error) => {
         setBulkDelete(false);
       });
   }, [requestDeleteBulkCustomers, bulkDelete, formatMessage]);

client/src/containers/Customers/withCustomerDetail.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { getCustomerById } from 'store/customers/customers.reducer';
 
 const mapStateToProps = (state, props) => ({
-  customerDetail: getCustomerById(state, props.customerId),
+  customer: getCustomerById(state, props.customerId),
 });
 
 export default connect(mapStateToProps);

client/src/containers/Customers/withCustomersActions.js

@@ -4,13 +4,14 @@ import {
   submitCustomer,
   editCustomer,
   deleteCustomer,
+  deleteBulkCustomers
 } from 'store/customers/customers.actions';
 import t from 'store/types';
 
 export const mapDispatchToProps = (dispatch) => ({
   requestFetchCustomers: (query) => dispatch(fetchCustomers({ query })),
   requestDeleteCustomer: (id) => dispatch(deleteCustomer({ id })),
-  // requestDeleteBulkCustomers:(ids)=>dispatch(deleteBulkCustomers({ids})),
+  requestDeleteBulkCustomers:(ids)=>dispatch(deleteBulkCustomers({ids})),
   requestSubmitCustomer: (form) => dispatch(submitCustomer({ form })),
   requestEditCustomer: (id, form) => dispatch(editCustomer({ id, form })),