UIF-526 Implement action for download allocation worksheet

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 7.1.0 (IN PROGRESS)
 
 * Replace deprecated transaction API. Refs UIF-519.
+* Implement action for download allocation worksheet. Refs UIF-526.
 
 ## 7.0.1 (IN PROGRESS)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/finance",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Description for ui-finance",
   "main": "src/index.js",
   "repository": "",
@@ -22,6 +22,7 @@
       "configuration": "2.0",
       "finance.budgets": "1.3 2.0",
       "finance.expense-classes": "2.0 3.0",
+      "finance.finance-data": "1.0",
       "finance.fiscal-years": "1.0 2.0",
       "finance.fund-types": "1.0 2.0",
       "finance.funds": "3.0",
@@ -162,6 +163,7 @@
           "module.finance.enabled",
           "acquisitions-units.units.collection.get",
           "finance.budgets.collection.get",
+          "finance.finance-data.collection.get",
           "finance.funds.collection.get",
           "finance.group-fiscal-year-summaries.collection.get",
           "finance.group-fund-fiscal-years.collection.get",
@@ -227,6 +229,7 @@
           "module.finance.enabled",
           "acquisitions-units.units.collection.get",
           "finance.budgets.collection.get",
+          "finance.finance-data.collection.get",
           "finance.fiscal-years.collection.get",
           "finance.funds.collection.get",
           "finance.group-fiscal-year-summaries.collection.get",

src/Groups/GroupDetails/GroupDetails.js

@@ -35,6 +35,10 @@ import {
   DetailsRemoveAction,
 } from '../../common/DetailsActions';
 import FinancialSummary from '../../common/FinancialSummary';
+import {
+  AllocationToolsMenuSection,
+  DownloadAllocationWorksheetModal,
+} from '../../common/components';
 import { GROUPS_ROUTE } from '../../common/const';
 import {
   GROUP_ACCORDION,
@@ -58,6 +62,7 @@ const GroupDetails = ({
   onRemoveFundFromGroup,
 }) => {
   const [isRemoveConfirmation, toggleRemoveConfirmation] = useModalToggle();
+  const [isDownloadAllocationWorksheetModalOpen, toggleDownloadAllocationWorksheetModal] = useModalToggle();
   const accordionStatusRef = useRef();
   const history = useHistory();
   const stripes = useStripes();
@@ -72,25 +77,38 @@ const GroupDetails = ({
   const renderActionMenu = useCallback(
     ({ onToggle }) => {
       return (
-        <MenuSection id="group-details-actions">
-          <DetailsEditAction
-            perm="finance.groups.item.put"
-            onEdit={editGroup}
-            toggleActionMenu={onToggle}
-            disabled={isRestrictionsLoading || restrictions.protectUpdate}
-          />
-          <DetailsRemoveAction
-            perm="finance.groups.item.delete"
-            toggleActionMenu={onToggle}
-            onRemove={toggleRemoveConfirmation}
-            disabled={isRestrictionsLoading || restrictions.protectDelete}
+        <>
+          <MenuSection id="group-details-actions">
+            <DetailsEditAction
+              perm="finance.groups.item.put"
+              onEdit={editGroup}
+              toggleActionMenu={onToggle}
+              disabled={isRestrictionsLoading || restrictions.protectUpdate}
+            />
+            <DetailsRemoveAction
+              perm="finance.groups.item.delete"
+              toggleActionMenu={onToggle}
+              onRemove={toggleRemoveConfirmation}
+              disabled={isRestrictionsLoading || restrictions.protectDelete}
+            />
+          </MenuSection>
+
+          <AllocationToolsMenuSection
+            onDownloadAllocationWorksheet={() => {
+              onToggle();
+              toggleDownloadAllocationWorksheetModal();
+            }}
           />
-        </MenuSection>
+        </>
       );
     },
     [
-      editGroup, toggleRemoveConfirmation, isRestrictionsLoading,
-      restrictions.protectDelete, restrictions.protectUpdate,
+      editGroup,
+      isRestrictionsLoading,
+      restrictions.protectUpdate,
+      restrictions.protectDelete,
+      toggleRemoveConfirmation,
+      toggleDownloadAllocationWorksheetModal,
     ],
   );
 
@@ -227,6 +245,16 @@ const GroupDetails = ({
             open
           />
         )}
+
+        {
+          isDownloadAllocationWorksheetModalOpen && (
+            <DownloadAllocationWorksheetModal
+              open
+              groupId={group.id}
+              toggle={toggleDownloadAllocationWorksheetModal}
+            />
+          )
+        }
       </Pane>
     </HasCommand>
   );

src/Ledger/LedgerDetails/LedgerDetails.js

@@ -38,6 +38,10 @@ import {
   DetailsRemoveAction,
 } from '../../common/DetailsActions';
 import FinancialSummary from '../../common/FinancialSummary';
+import {
+  AllocationToolsMenuSection,
+  DownloadAllocationWorksheetModal,
+} from '../../common/components';
 import { LEDGERS_ROUTE } from '../../common/const';
 import {
   LEDGER_ACCORDION,
@@ -63,6 +67,7 @@ const LedgerDetails = ({
 }) => {
   const [isExportConfirmation, toggleExportConfirmation] = useModalToggle();
   const [isRemoveConfirmation, toggleRemoveConfirmation] = useModalToggle();
+  const [isDownloadAllocationWorksheetModalOpen, toggleDownloadAllocationWorksheetModal] = useModalToggle();
   const accordionStatusRef = useRef();
   const history = useHistory();
   const stripes = useStripes();
@@ -75,55 +80,64 @@ const LedgerDetails = ({
   const renderActionMenu = useCallback(
     ({ onToggle }) => {
       return (
-        <MenuSection id="ledger-details-actions">
-          <DetailsEditAction
-            perm="finance.ledgers.item.put"
-            onEdit={onEdit}
-            toggleActionMenu={onToggle}
-            disabled={isRestrictionsLoading || restrictions.protectUpdate}
-          />
-          <DetailsExportAction
-            perm="ui-finance.exportCSV"
-            onExportCSV={toggleExportConfirmation}
-            toggleActionMenu={onToggle}
-          />
-          <DetailsRemoveAction
-            perm="finance.ledgers.item.delete"
-            toggleActionMenu={onToggle}
-            onRemove={toggleRemoveConfirmation}
-            disabled={isRestrictionsLoading || restrictions.protectDelete}
-          />
-          <IfPermission perm="ui-finance.ledger.rollover.execute">
-            <Button
-              buttonStyle="dropdownItem"
-              data-test-ledger-rollover-action
-              onClick={() => {
-                onRollover();
-                onToggle();
-              }}
-            >
-              <Icon
-                size="small"
-                icon="calendar"
+        <>
+          <MenuSection id="ledger-details-actions">
+            <DetailsEditAction
+              perm="finance.ledgers.item.put"
+              onEdit={onEdit}
+              toggleActionMenu={onToggle}
+              disabled={isRestrictionsLoading || restrictions.protectUpdate}
+            />
+            <DetailsExportAction
+              perm="ui-finance.exportCSV"
+              onExportCSV={toggleExportConfirmation}
+              toggleActionMenu={onToggle}
+            />
+            <DetailsRemoveAction
+              perm="finance.ledgers.item.delete"
+              toggleActionMenu={onToggle}
+              onRemove={toggleRemoveConfirmation}
+              disabled={isRestrictionsLoading || restrictions.protectDelete}
+            />
+            <IfPermission perm="ui-finance.ledger.rollover.execute">
+              <Button
+                buttonStyle="dropdownItem"
+                data-test-ledger-rollover-action
+                onClick={() => {
+                  onRollover();
+                  onToggle();
+                }}
               >
-                <FormattedMessage id="ui-finance.actions.rollover" />
-              </Icon>
-            </Button>
+                <Icon
+                  size="small"
+                  icon="calendar"
+                >
+                  <FormattedMessage id="ui-finance.actions.rollover" />
+                </Icon>
+              </Button>
 
-            <Button
-              data-testid="action-rollover-logs"
-              buttonStyle="dropdownItem"
-              onClick={onRolloverLogs}
-            >
-              <Icon
-                size="small"
-                icon="calendar"
+              <Button
+                data-testid="action-rollover-logs"
+                buttonStyle="dropdownItem"
+                onClick={onRolloverLogs}
               >
-                <FormattedMessage id="ui-finance.actions.rolloverLogs" />
-              </Icon>
-            </Button>
-          </IfPermission>
-        </MenuSection>
+                <Icon
+                  size="small"
+                  icon="calendar"
+                >
+                  <FormattedMessage id="ui-finance.actions.rolloverLogs" />
+                </Icon>
+              </Button>
+            </IfPermission>
+          </MenuSection>
+
+          <AllocationToolsMenuSection
+            onDownloadAllocationWorksheet={() => {
+              onToggle();
+              toggleDownloadAllocationWorksheetModal();
+            }}
+          />
+        </>
       );
     },
     [
@@ -133,6 +147,7 @@ const LedgerDetails = ({
       onRolloverLogs,
       restrictions,
       toggleExportConfirmation,
+      toggleDownloadAllocationWorksheetModal,
       toggleRemoveConfirmation,
     ],
   );
@@ -281,6 +296,15 @@ const LedgerDetails = ({
           />
         )}
 
+        {
+          isDownloadAllocationWorksheetModalOpen && (
+            <DownloadAllocationWorksheetModal
+              open
+              ledgerId={ledger?.id}
+              toggle={toggleDownloadAllocationWorksheetModal}
+            />
+          )
+        }
       </Pane>
     </HasCommand>
   );

src/common/components/AllocationToolsMenuSection/AllocationToolsMenuSection.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
+
+import { IfPermission } from '@folio/stripes/core';
+import {
+  Button,
+  Icon,
+  MenuSection,
+} from '@folio/stripes/components';
+
+export const AllocationToolsMenuSection = ({
+  disabled,
+  onDownloadAllocationWorksheet,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <MenuSection
+      id="allocation-tools-menu-section"
+      label={intl.formatMessage({ id: 'ui-finance.menuSection.allocationTools' })}
+    >
+      <IfPermission perm="finance.finance-data.collection.get">
+        <Button
+          buttonStyle="dropdownItem"
+          onClick={onDownloadAllocationWorksheet}
+          disabled={disabled}
+        >
+          <Icon
+            size="small"
+            icon="download"
+          >
+            <FormattedMessage id="ui-finance.actions.downloadAllocationWorksheet" />
+          </Icon>
+        </Button>
+      </IfPermission>
+    </MenuSection>
+  );
+};
+
+AllocationToolsMenuSection.propTypes = {
+  disabled: PropTypes.bool,
+  onDownloadAllocationWorksheet: PropTypes.func.isRequired,
+};

src/common/components/AllocationToolsMenuSection/index.js

@@ -0,0 +1 @@
+export { AllocationToolsMenuSection } from './AllocationToolsMenuSection';