Dashboard improvements (#1511)

* New migration to add permissions to roles that have incomplete permissions * Added checks for permissions in the front-end so it automatically hides the component for the user when it doesn't have the right permissions * Fixed broken links and some other tweaks for the dashboard
bcgov · Sep 30, 2019 · 4607fbd · 4607fbd
1 parent 51a7b0d
commit 4607fbd
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 26 deletions.
diff --git a/frontend/src/dashboard/DashboardContainer.js b/frontend/src/dashboard/DashboardContainer.js
@@ -10,16 +10,21 @@ import PropTypes from 'prop-types';
 import { complianceReporting } from '../actions/complianceReporting';
 import { getCreditTransfersIfNeeded } from '../actions/creditTransfersActions';
 import { getDocumentUploads } from '../actions/documentUploads';
+import { exclusionReports } from '../actions/exclusionReports';
 import { getFuelCodes } from '../actions/fuelCodes';
 import { getOrganization, getOrganizations } from '../actions/organizationActions';
 import saveTableState from '../actions/stateSavingReactTableActions';
+import history from '../app/History';
 import DashboardPage from './components/DashboardPage';
 import PERMISSIONS_COMPLIANCE_REPORT from '../constants/permissions/ComplianceReport';
 import PERMISSIONS_CREDIT_TRANSACTIONS from '../constants/permissions/CreditTransactions';
 import PERMISSIONS_FUEL_CODES from '../constants/permissions/FuelCodes';
 import PERMISSIONS_ORGANIZATIONS from '../constants/permissions/Organizations';
 import PERMISSIONS_SECURE_DOCUMENT_UPLOAD from '../constants/permissions/SecureDocumentUpload';
+import COMPLIANCE_REPORTING from '../constants/routes/ComplianceReporting';
+import EXCLUSION_REPORTS from '../constants/routes/ExclusionReports';
 import CONFIG from '../config';
+import toastr from '../utils/toastr';
 
 class DashboardContainer extends Component {
   constructor (props) {
@@ -30,6 +35,8 @@ class DashboardContainer extends Component {
       unreadNotificationsCount: 0
     };
 
+    this._createComplianceReport = this._createComplianceReport.bind(this);
+    this._createExclusionReport = this._createExclusionReport.bind(this);
     this._selectOrganization = this._selectOrganization.bind(this);
     this._selectedOrganization = this._selectedOrganization.bind(this);
     this._setFilter = this._setFilter.bind(this);
@@ -48,6 +55,52 @@ class DashboardContainer extends Component {
     if (nextProps.unreadNotificationsCount) {
       this._getUnreadNotificationCount(nextProps);
     }
+
+    if (this.props.complianceReporting.isCreating && !nextProps.complianceReporting.isCreating) {
+      if (nextProps.complianceReporting.success) {
+        history.push(COMPLIANCE_REPORTING.EDIT
+          .replace(':id', nextProps.complianceReporting.item.id)
+          .replace(':tab', 'intro'));
+        toastr.complianceReporting('Created');
+      }
+    }
+
+    if (this.props.exclusionReports.isCreating && !nextProps.exclusionReports.isCreating) {
+      if (nextProps.exclusionReports.success) {
+        history.push(EXCLUSION_REPORTS.EDIT
+          .replace(':id', nextProps.exclusionReports.item.id)
+          .replace(':tab', 'intro'));
+        toastr.exclusionReports('Created');
+      }
+    }
+  }
+
+  _createComplianceReport (compliancePeriodDescription) {
+    const currentYear = new Date().getFullYear();
+
+    const payload = {
+      status: {
+        fuelSupplierStatus: 'Draft'
+      },
+      type: 'Compliance Report',
+      compliancePeriod: currentYear
+    };
+
+    this.props.createComplianceReport(payload);
+  }
+
+  _createExclusionReport (compliancePeriodDescription) {
+    const currentYear = new Date().getFullYear();
+
+    const payload = {
+      status: {
+        fuelSupplierStatus: 'Draft'
+      },
+      type: 'Exclusion Report',
+      compliancePeriod: currentYear
+    };
+
+    this.props.createExclusionReport(payload);
   }
 
   _getComplianceReports () {
@@ -132,6 +185,8 @@ class DashboardContainer extends Component {
     return (
       <DashboardPage
         complianceReports={this.props.complianceReports}
+        createComplianceReport={this._createComplianceReport}
+        createExclusionReport={this._createExclusionReport}
         creditTransfers={this.props.creditTransfers}
         documentUploads={this.props.documentUploads}
         fuelCodes={this.props.fuelCodes}
@@ -147,6 +202,8 @@ class DashboardContainer extends Component {
 }
 
 DashboardContainer.defaultProps = {
+  complianceReporting: {},
+  exclusionReports: {},
   organization: null,
   unreadNotificationsCount: null
 };
@@ -156,11 +213,39 @@ DashboardContainer.propTypes = {
     items: PropTypes.arrayOf(PropTypes.shape()),
     isFinding: PropTypes.bool
   }).isRequired,
+  complianceReporting: PropTypes.shape({
+    isCreating: PropTypes.bool,
+    success: PropTypes.bool,
+    item: PropTypes.shape({
+      compliancePeriod: PropTypes.oneOfType([
+        PropTypes.shape({
+          description: PropTypes.string
+        }),
+        PropTypes.string
+      ]),
+      id: PropTypes.number
+    })
+  }),
+  createComplianceReport: PropTypes.func.isRequired,
+  createExclusionReport: PropTypes.func.isRequired,
   creditTransfers: PropTypes.shape().isRequired,
   documentUploads: PropTypes.shape({
     isFetching: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.shape())
   }).isRequired,
+  exclusionReports: PropTypes.shape({
+    isCreating: PropTypes.bool,
+    success: PropTypes.bool,
+    item: PropTypes.shape({
+      compliancePeriod: PropTypes.oneOfType([
+        PropTypes.shape({
+          description: PropTypes.string
+        }),
+        PropTypes.string
+      ]),
+      id: PropTypes.number
+    })
+  }),
   fuelCodes: PropTypes.shape({
     isFetching: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.shape())
@@ -188,6 +273,8 @@ DashboardContainer.propTypes = {
 };
 
 const mapDispatchToProps = ({
+  createComplianceReport: complianceReporting.create,
+  createExclusionReport: exclusionReports.create,
   getComplianceReports: complianceReporting.find,
   getCreditTransfersIfNeeded,
   getDocumentUploads,
@@ -199,6 +286,12 @@ const mapDispatchToProps = ({
 
 const mapStateToProps = (state, ownProps) => ({
   complianceReports: state.rootReducer.complianceReporting,
+  complianceReporting: {
+    errorMessage: state.rootReducer.complianceReporting.errorMessage,
+    isCreating: state.rootReducer.complianceReporting.isCreating,
+    item: state.rootReducer.complianceReporting.item,
+    success: state.rootReducer.complianceReporting.success
+  },
   creditTransfers: {
     items: state.rootReducer.creditTransfers.items,
     isFetching: state.rootReducer.creditTransfers.isFetching
@@ -207,6 +300,12 @@ const mapStateToProps = (state, ownProps) => ({
     isFetching: state.rootReducer.documentUploads.isFetching,
     items: state.rootReducer.documentUploads.items
   },
+  exclusionReports: {
+    errorMessage: state.rootReducer.exclusionReports.errorMessage,
+    isCreating: state.rootReducer.exclusionReports.isCreating,
+    item: state.rootReducer.exclusionReports.item,
+    success: state.rootReducer.exclusionReports.success
+  },
   fuelCodes: {
     isFetching: state.rootReducer.fuelCodes.isFetching,
     items: state.rootReducer.fuelCodes.items

diff --git a/frontend/src/dashboard/components/Balance.js b/frontend/src/dashboard/components/Balance.js
@@ -26,7 +26,7 @@ const Balance = props => (
       </div>
     ]}
 
-    <div>Show transactions involving:</div>
+    <div>Show balance for:</div>
 
     <select
       id="organizationFilterSelect"
@@ -38,7 +38,20 @@ const Balance = props => (
       value={props.organization.id}
     >
       <option value="-1">All Organizations</option>
-      {props.organizations.map(organization =>
+      {props.organizations.sort((a, b) => {
+        const nameA = a.name.toUpperCase();
+        const nameB = b.name.toUpperCase();
+
+        if (nameA < nameB) {
+          return -1;
+        }
+
+        if (nameA > nameB) {
+          return 1;
+        }
+
+        return 0;
+      }).map(organization =>
         (organization.id !== DEFAULT_ORGANIZATION.id &&
           <option
             key={organization.id.toString(10)}

diff --git a/frontend/src/dashboard/components/ComplianceReportsBCEID.js b/frontend/src/dashboard/components/ComplianceReportsBCEID.js
@@ -267,11 +267,21 @@ const ComplianceReportsBCEID = (props) => {
       <div className="add-button">
         <FontAwesomeIcon icon="play" />
         {` Start a new `}
-        <button type="button">
+        <button
+          onClick={() => {
+            props.createComplianceReport();
+          }}
+          type="button"
+        >
           compliance report
         </button>
         {` or `}
-        <button type="button">
+        <button
+          onClick={() => {
+            props.createExclusionReport();
+          }}
+          type="button"
+        >
           exclusion report
         </button>
       </div>
@@ -288,6 +298,8 @@ ComplianceReportsBCEID.propTypes = {
     isFetching: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.shape())
   }).isRequired,
+  createComplianceReport: PropTypes.func.isRequired,
+  createExclusionReport: PropTypes.func.isRequired,
   loggedInUser: PropTypes.shape({
     hasPermission: PropTypes.func,
     organization: PropTypes.shape({

diff --git a/frontend/src/dashboard/components/CreditTradingValue.js b/frontend/src/dashboard/components/CreditTradingValue.js
@@ -5,16 +5,20 @@ import ORGANIZATIONS from '../../constants/routes/Organizations';
 
 const CreditTradingValue = props => (
   <div className="dashboard-card">
-    <div>
+    <a
+      href={ORGANIZATIONS.CREDIT_MARKET_REPORT}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Credit Market Report
+    </a>
+    <a
+      href={ORGANIZATIONS.CREDIT_MARKET_REPORT}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
       <FontAwesomeIcon icon={['far', 'file-pdf']} />
-      <a
-        href={ORGANIZATIONS.CREDIT_MARKET_REPORT}
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Credit Market Report
-      </a>
-    </div>
+    </a>
   </div>
 );
 

diff --git a/frontend/src/dashboard/components/CreditTransactions.js b/frontend/src/dashboard/components/CreditTransactions.js
@@ -36,12 +36,12 @@ const CreditTransactions = (props) => {
     }
 
     if (['Buy', 'Sell'].indexOf(item.type.theType) >= 0) {
-      if (item.status.status === 'Submitted') {
+      if (item.status.status === 'Accepted' && !item.isRescinded) {
         awaitingReview.creditTransfers.analyst += 1;
         awaitingReview.creditTransfers.total += 1;
       }
 
-      if (['Recommended', 'Not Recommended'].indexOf(item.status.status) >= 0) {
+      if (['Recommended', 'Not Recommended'].indexOf(item.status.status) >= 0 && !item.isRescinded) {
         awaitingReview.creditTransfers.director += 1;
         awaitingReview.creditTransfers.total += 1;
       }

diff --git a/frontend/src/dashboard/components/CreditTransactionsBCEID.js b/frontend/src/dashboard/components/CreditTransactionsBCEID.js
@@ -99,9 +99,6 @@ const CreditTransactions = (props) => {
       </div>
 
       <div>
-        <div className="value">
-          <FontAwesomeIcon icon={['far', 'file-pdf']} />
-        </div>
         <div className="content">
           <a
             href={ORGANIZATIONS.BULLETIN}
@@ -111,11 +108,23 @@ const CreditTransactions = (props) => {
           >
             Part 3 Fuel Suppliers Report (PDF)
           </a>
+          <a
+            href={ORGANIZATIONS.BULLETIN}
+            key="bulletin"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <FontAwesomeIcon icon={['far', 'file-pdf']} />
+          </a>
         </div>
       </div>
 
       {props.loggedInUser.hasPermission(PERMISSIONS_CREDIT_TRANSACTIONS.PROPOSE) &&
-        <button className="add-button" type="button">
+        <button
+          className="add-button"
+          onClick={() => history.push(CREDIT_TRANSACTIONS.ADD)}
+          type="button"
+        >
           <FontAwesomeIcon icon="play" /> Start a new credit transfer proposal
         </button>
       }

diff --git a/frontend/src/dashboard/components/DashboardPage.js b/frontend/src/dashboard/components/DashboardPage.js
@@ -52,6 +52,8 @@ const BCEIDDashboardPage = obj => (
       obj.loggedInUser.hasPermission(PERMISSIONS_COMPLIANCE_REPORT.VIEW)) &&
         <ComplianceReportsBCEID
           complianceReports={obj.complianceReports}
+          createComplianceReport={obj.createComplianceReport}
+          createExclusionReport={obj.createExclusionReport}
           loggedInUser={obj.loggedInUser}
           setFilter={obj.setFilter}
         />
@@ -193,6 +195,8 @@ DashboardPage.defaultProps = {
 
 DashboardPage.propTypes = {
   complianceReports: PropTypes.shape().isRequired,
+  createComplianceReport: PropTypes.func.isRequired,
+  createExclusionReport: PropTypes.func.isRequired,
   creditTransfers: PropTypes.shape().isRequired,
   documentUploads: PropTypes.shape().isRequired,
   fuelCodes: PropTypes.shape().isRequired,

diff --git a/frontend/src/dashboard/components/FileSubmissions.js b/frontend/src/dashboard/components/FileSubmissions.js
@@ -57,7 +57,7 @@ const FileSubmissions = (props) => {
               type="button"
             >
               {`${awaitingReview.documentUploads.submitted} `}
-              awaiting Director review and statutory decision
+              awaiting to be marked as received
             </button>
           </div>
 
@@ -73,7 +73,7 @@ const FileSubmissions = (props) => {
               }}
               type="button"
             >
-              {awaitingReview.documentUploads.received} awaiting to be archived
+              {awaitingReview.documentUploads.received} awaiting review and archive
             </button>
           </div>
         </div>

diff --git a/frontend/src/dashboard/components/OrganizationDetails.js b/frontend/src/dashboard/components/OrganizationDetails.js
@@ -4,10 +4,10 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
 
 import history from '../../app/History';
-import { USERS } from '../../constants/routes/Admin';
-import ORGANIZATIONS from '../../constants/routes/Organizations';
-import PERMISSIONS_USERS from '../../constants/permissions/Users';
 import PERMISSIONS_ORGANIZATIONS from '../../constants/permissions/Organizations';
+import PERMISSIONS_USERS from '../../constants/permissions/Users';
+import ORGANIZATIONS from '../../constants/routes/Organizations';
+import USERS from '../../constants/routes/Users';
 
 const OrganizationDetails = props => (
   <div className="dashboard-fieldset organization-details">

diff --git a/frontend/src/dashboard/components/Part3Agreements.js b/frontend/src/dashboard/components/Part3Agreements.js
@@ -26,6 +26,14 @@ const Part3Agreements = props => (
         >
           Part 3 Agreement application information
         </a>
+        <a
+          href={ORGANIZATIONS.PART_3}
+          key="bulletin"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <FontAwesomeIcon icon="external-link-alt" />
+        </a>
       </div>
     </div>