Fix: FloatingActions.

client/src/containers/Accounting/MakeJournalEntriesFooter.js

@@ -1,58 +1,199 @@
 import React from 'react';
-import { Intent, Button } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { saveInvoke } from 'utils';
+import { If, Icon } from 'components';
 
+/**
+ * Make Journal floating actions bar.
+ */
 export default function MakeJournalEntriesFooter({
   isSubmitting,
   onSubmitClick,
   onCancelClick,
   manualJournalId,
+  onSubmitForm,
+  onResetForm,
+  manualJournalPublished,
 }) {
+  const handleSubmitPublishBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: true,
+    });
+  };
+
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: true,
+    });
+  };
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      redirect: true,
+      publish: false,
+    });
+  };
+
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+      resetForm: true,
+    });
+  };
+
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    onSubmitForm();
+    saveInvoke(onSubmitClick, event, {
+      redirect: false,
+      publish: false,
+    });
+  };
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  const handleClearBtnClick = (event) => {
+    // saveInvoke(onClearClick, event);
+    onResetForm();
+  };
+
   return (
-    <div>
-      <div class="form__floating-footer">
-        <Button
-          disabled={isSubmitting}
-          intent={Intent.PRIMARY}
-          name={'save'}
-          onClick={() => {
-            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={() => {
-            onSubmitClick({ publish: true, redirect: false });
-          }}
-        >
-          <T id={'save_new'} />
-        </Button>
-
-        <Button
-          disabled={isSubmitting}
-          className={'button-secondary ml1'}
-          onClick={() => {
-            onSubmitClick({ publish: false, redirect: true });
-          }}
-        >
-          <T id={'save_as_draft'} />
-        </Button>
-
-        <Button
-          className={'button-secondary ml1'}
-          onClick={() => {
-            onCancelClick && onCancelClick();
-          }}
-        >
-          <T id={'cancel'} />
-        </Button>
-      </div>
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!manualJournalId || !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={manualJournalId && 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
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={manualJournalId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
     </div>
   );
 }

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -11,6 +11,7 @@ import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
 import { pick, setWith } from 'lodash';
+import { useHistory } from 'react-router-dom';
 
 import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
 import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
@@ -77,6 +78,9 @@ function MakeJournalEntriesForm({
   onCancelForm,
 }) {
   const { formatMessage } = useIntl();
+  const history = useHistory();
+  const [submitPayload, setSubmitPayload] = useState({});
+
   const {
     setFiles,
     saveMedia,
@@ -163,8 +167,6 @@ function MakeJournalEntriesForm({
     [onFormSubmit],
   );
 
-  const [payload, setPayload] = useState({});
-
   const defaultEntry = useMemo(
     () => ({
       index: 0,
@@ -183,6 +185,7 @@ function MakeJournalEntriesForm({
       date: moment(new Date()).format('YYYY-MM-DD'),
       description: '',
       reference: '',
+      status:'',
       currency_code: '',
       entries: [...repeatValue(defaultEntry, 4)],
     }),
@@ -289,6 +292,8 @@ function MakeJournalEntriesForm({
     setFieldValue,
     handleSubmit,
     getFieldProps,
+    submitForm,
+    resetForm,
     touched,
     isSubmitting,
   } = useFormik({
@@ -327,7 +332,7 @@ function MakeJournalEntriesForm({
         setSubmitting(false);
         return;
       }
-      const form = { ...values, status: payload.publish, entries };
+      const form = { ...values, status: submitPayload.publish, entries };
 
       const saveJournal = (mediaIds) =>
         new Promise((resolve, reject) => {
@@ -344,7 +349,7 @@ function MakeJournalEntriesForm({
                   intent: Intent.SUCCESS,
                 });
                 setSubmitting(false);
-                saveInvokeSubmit({ action: 'update', ...payload });
+                saveInvokeSubmit({ action: 'update', ...submitPayload });
                 clearSavedMediaIds([]);
                 resetForm();
                 resolve(response);
@@ -364,9 +369,11 @@ function MakeJournalEntriesForm({
                   intent: Intent.SUCCESS,
                 });
                 setSubmitting(false);
-                saveInvokeSubmit({ action: 'new', ...payload });
+                saveInvokeSubmit({ action: 'new', ...submitPayload });
                 clearSavedMediaIds();
-                resetForm();
+                if (submitPayload.resetForm) {
+                  resetForm();
+                }
                 resolve(response);
               })
               .catch((errors) => {
@@ -407,20 +414,15 @@ function MakeJournalEntriesForm({
   ]);
 
   const handleSubmitClick = useCallback(
-    (payload) => {
-      setPayload(payload);
-      // formik.resetForm();
-      handleSubmit();
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
     },
-    [setPayload, handleSubmit],
+    [setSubmitPayload],
   );
 
-  const handleCancelClick = useCallback(
-    (payload) => {
-      onCancelForm && onCancelForm(payload);
-    },
-    [onCancelForm],
-  );
+  const handleCancelClick = useCallback(() => {
+    history.goBack();
+  }, [history]);
 
   const handleDeleteFile = useCallback(
     (_deletedFiles) => {
@@ -453,11 +455,12 @@ function MakeJournalEntriesForm({
   const handleJournalNumberChanged = useCallback(
     (journalNumber) => {
       changePageSubtitle(
-        defaultToTransform(journalNumber, `No. ${journalNumber}`, '')
+        defaultToTransform(journalNumber, `No. ${journalNumber}`, ''),
       );
     },
     [changePageSubtitle],
   );
+
   return (
     <div class="make-journal-entries">
       <form onSubmit={handleSubmit}>
@@ -482,7 +485,10 @@ function MakeJournalEntriesForm({
           isSubmitting={isSubmitting}
           onSubmitClick={handleSubmitClick}
           onCancelClick={handleCancelClick}
-          manualJournal={manualJournalId}
+          manualJournalId={manualJournalId}
+          manualJournalPublished={values.status}
+          onSubmitForm={submitForm}
+          onResetForm={resetForm}
         />
       </form>