fix: Make Journal & Floating action.

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -1,10 +1,11 @@
-import React, { useMemo, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
 import { pick } from 'lodash';
 import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from 'common/classes';
 import {
@@ -50,6 +51,7 @@ const defaultInitialValues = {
   description: '',
   reference: '',
   currency_code: '',
+  status: '',
   entries: [...repeatValue(defaultEntry, 4)],
 };
 
@@ -84,7 +86,9 @@ function MakeJournalEntriesForm({
   onCancelForm,
 }) {
   const isNewMode = !manualJournalId;
+  const [submitPayload, setSubmitPayload] = useState({});
   const { formatMessage } = useIntl();
+  const history = useHistory();
 
   const journalNumber = isNewMode
     ? `${journalNumberPrefix}-${journalNextNumber}`
@@ -120,7 +124,7 @@ function MakeJournalEntriesForm({
               ...pick(entry, Object.keys(defaultEntry)),
             })),
           }
-          : {
+        : {
             ...defaultInitialValues,
             journal_number: journalNumber,
             entries: orderingLinesIndexes(defaultInitialValues.entries),
@@ -172,10 +176,10 @@ function MakeJournalEntriesForm({
       setSubmitting(false);
       return;
     }
-    const form = { ...values, entries };
+    const form = { ...values, status: submitPayload.publish, entries };
 
     const handleError = (error) => {
-    transformErrors(error, { setErrors });
+      transformErrors(error, { setErrors });
       setSubmitting(false);
     };
 
@@ -191,8 +195,15 @@ function MakeJournalEntriesForm({
         ),
         intent: Intent.SUCCESS,
       });
+
       setSubmitting(false);
-      resetForm();
+
+      if (submitPayload.redirect) {
+        history.push('/manual-journals');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
     };
 
     if (isNewMode) {
@@ -203,12 +214,24 @@ function MakeJournalEntriesForm({
         .catch(handleError);
     }
   };
+
+  const handleCancelClick = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
+  console.log(submitPayload, 'RR');
   return (
     <div
       className={classNames(
         CLASSES.PAGE_FORM,
         CLASSES.PAGE_FORM_STRIP_STYLE,
-        CLASSES.PAGE_FORM_MAKE_JOURNAL
+        CLASSES.PAGE_FORM_MAKE_JOURNAL,
       )}
     >
       <Formik
@@ -228,6 +251,9 @@ function MakeJournalEntriesForm({
             <MakeJournalFormFloatingActions
               isSubmitting={isSubmitting}
               manualJournal={manualJournalId}
+              manualJournalPublished={values.status}
+              onCancelClick={handleCancelClick}
+              onSubmitClick={handleSubmitClick}
             />
           </Form>
         )}

client/src/containers/Accounting/MakeJournalFormFloatingActions.js

@@ -1,63 +1,202 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'react-intl';
 import { saveInvoke } from 'utils';
 import { CLASSES } from 'common/classes';
+import { Icon, If } from 'components';
 
+/**
+ * Make Journal floating actions bar.
+ */
 export default function MakeJournalFloatingAction({
   isSubmitting,
   onSubmitClick,
   onCancelClick,
-  manualJournalId,
+  manualJournal,
+  manualJournalPublished,
 }) {
-  const { submitForm } = useFormikContext();
+  const { submitForm, resetForm } = useFormikContext();
+
+
+
+  const handleSubmitPublishBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true,
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    submitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    resetForm();
+  };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!manualJournal || !manualJournalPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save_publish'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'publish_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            type="submit"
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={manualJournal && manualJournalPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
       <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
-        name={'save'}
-        onClick={() => {
-          submitForm();
-          saveInvoke(onSubmitClick, { publish: true, redirect: true });
-        }}
-      >
-        {manualJournalId ? <T id={'edit'} /> : <T id={'save'} />}
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        intent={Intent.PRIMARY}
         className={'ml1'}
-        name={'save_and_new'}
-        onClick={() => {
-          saveInvoke(onSubmitClick, { publish: true, redirect: false });
-        }}
-      >
-        <T id={'save_new'} />
-      </Button>
-
-      <Button
         disabled={isSubmitting}
-        className={'button-secondary ml1'}
-        onClick={() => {
-          saveInvoke(onSubmitClick, { publish: false, redirect: true });
-        }}
-      >
-        <T id={'save_as_draft'} />
-      </Button>
-
+        onClick={handleClearBtnClick}
+        text={manualJournal ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
       <Button
-        className={'button-secondary ml1'}
-        onClick={() => {
-          saveInvoke(onCancelClick);
-        }}
-      >
-        <T id={'cancel'} />
-      </Button>
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
     </div>
   );
 }