Dev-4347 account spending tables

package.json

@@ -80,7 +80,7 @@
         "d3-interpolate": "^1.1.4",
         "d3-scale": "^1.0.4",
         "d3-time": "^1.0.11",
-        "data-transparency-ui": "github:fedspendingtransparency/data-transparency-ui#v1.1.1",
+        "data-transparency-ui": "github:fedspendingtransparency/data-transparency-ui#master",
         "file-loader": "^3.0.1",
         "fixed-data-table": "0.6.3",
         "history": "^4.6.1",

src/_scss/pages/agency/v2/_tabs.scss

@@ -66,6 +66,11 @@
                     line-height: rem(20);
                 }
             }
+
+            &:disabled {
+                color: $color-gray-medium;
+                background-color: $color-gray-lightest;
+            }
         }
     }
 }

src/_scss/pages/agency/v2/index.scss

@@ -191,6 +191,77 @@
             @media(min-width: $tablet-screen) {
                 width: 70%;
             }
+            .body__content {
+                @import '../../search/results/table/tableMessages';
+                .results-table-message-container {
+                    position: relative;
+                    background-color: rgb(246, 246, 246);
+                    .results-table-loading {
+                        margin-bottom: rem(100);
+                    }
+                    .no-results-container {
+                        text-align: center;
+                        margin-top: rem(100);
+                        margin-bottom: rem(100);
+                        .no-results-title {
+                            h4 {
+                            margin-bottom: 0;
+                            vertical-align: bottom;
+                            }
+                        }
+                        .no-results-message {
+                            p {
+                            margin-top: 0;
+                            vertical-align: top;
+                            }
+                        }
+                        }
+                        .loading-animation {
+                            @import "../../search/results/screens/loading";
+                        }
+                        .results-table-error {
+                        .icon {
+                            width: rem(36);
+                            height: rem(36);
+                            svg {
+                            width: rem(36);
+                            height: rem(36);
+                            }
+                        }
+                        .title {
+                            font-size: rem(20);
+                        line-height: rem(45);
+                        }
+                        .description {
+                            font-size: rem(16);
+                            line-height: rem(10);
+                        }
+                    }
+                }
+                .usda-table {
+                    td {
+                        &:first-child {
+                            @include span-columns(6 of 12, table);
+                            text-align: left;
+                        }
+                        @include span-columns(2 of 12, table);
+                        text-align: right;
+                        word-break: break-word;
+                    }
+
+                    .table-header {
+                        .table-header__label {
+                            @include flex(0 1 auto);
+                            text-align: right;
+                        }
+
+                        .table-header__sort {
+                            margin-top: auto;
+                            margin-bottom: auto;
+                        }
+                    }
+                }
+            }
             .body__section {
                 @import './tabs';
                 @include display(flex);

src/js/app.jsx

@@ -11,8 +11,10 @@ import {
     faBook,
     faBuilding,
     faCalendarAlt,
+    faCaretDown,
     faCaretLeft,
     faCaretRight,
+    faCaretUp,
     faChartArea,
     faChartBar,
     faChartPie,
@@ -65,8 +67,10 @@ library.add(
     faBook,
     faBuilding,
     faCalendarAlt,
+    faCaretDown,
     faCaretLeft,
     faCaretRight,
+    faCaretUp,
     faChartArea,
     faChartBar,
     faChartPie,

src/js/components/agency/v2/CountTab.jsx

@@ -13,28 +13,37 @@ const propTypes = {
     setActiveTab: PropTypes.func.isRequired,
     active: PropTypes.bool,
     count: PropTypes.number,
-    subCount: PropTypes.number
+    subCount: PropTypes.number,
+    disabled: PropTypes.bool
 };
 
-const CountTab = (props) => (
-    <button
-        className={`count-tabs__button${props.active ? ' count-tabs__button_active' : ''}`}
-        onClick={() => props.setActiveTab(props.type)}>
-        <div className="count-button">
-            <div className="count-button__label">
-                {props.label}
-            </div>
-            <div className="count-button__count">
-                {(props.count || props.count === 0) ? `${props.count}` : '--'}
-            </div>
-            {props.subHeading ? (
-                <div className="count-button__sub-heading">
-                    With {(props.subCount || props.subCount === 0) ? `${props.subCount}` : '--'} {props.subHeading}
+
+const CountTab = (props) => {
+    const setActiveTab = () => {
+        props.setActiveTab(props.type);
+    };
+
+    return (
+        <button
+            className={`count-tabs__button${props.active ? ' count-tabs__button_active' : ''}`}
+            onClick={setActiveTab}
+            disabled={props.disabled}>
+            <div className="count-button">
+                <div className="count-button__label">
+                    {props.label}
                 </div>
-            ) : <>&nbsp;</>}
-        </div>
-    </button>
-);
+                <div className="count-button__count">
+                    {(props.count || props.count === 0) ? `${props.count}` : '--'}
+                </div>
+                {props.subHeading ? (
+                    <div className="count-button__sub-heading">
+                    With {(props.subCount || props.subCount === 0) ? `${props.subCount}` : '--'} {props.subHeading}
+                    </div>
+                ) : <>&nbsp;</>}
+            </div>
+        </button>
+    );
+};
 
 CountTab.propTypes = propTypes;
 export default CountTab;

src/js/components/agency/v2/accountSpending/AccountSpending.jsx

@@ -6,6 +6,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import CountTabContainer from 'containers/agency/v2/accountSpending/CountTabContainer';
+import TableContainer from 'containers/agency/v2/accountSpending/TableContainer';
 
 const propTypes = {
     fy: PropTypes.string,
@@ -45,6 +46,7 @@ const tabs = [
 
 const AccountSpending = ({ agencyId, fy }) => {
     const [activeTab, setActiveTab] = useState('budget_function');
+    const subHeading = tabs.find((tab) => tab.type === activeTab).subHeading;
     return (
         <div className="body__content">
             <div className="count-tabs">
@@ -66,6 +68,11 @@ const AccountSpending = ({ agencyId, fy }) => {
                             active={activeTab === tab.type} />
                     ))}
                 </div>
+                <TableContainer
+                    agencyId={agencyId}
+                    fy={fy}
+                    type={activeTab}
+                    subHeading={subHeading} />
             </div>
         </div>
     );

src/js/containers/agency/v2/AgencyContainerV2.jsx

@@ -3,19 +3,19 @@
  * Created by Maxwell Kendall 01/31/2020
  */
 
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/prop-types */
-
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { startCase, snakeCase } from "lodash";
 import {
     TooltipWrapper,
     Picker
 } from 'data-transparency-ui';
 
-import { setAgencyOverview, resetAgency } from 'redux/actions/agency/agencyActions';
+import { setBudgetaryResources } from 'redux/actions/agencyV2/agencyV2Actions';
+import { fetchBudgetaryResources } from 'helpers/agencyV2Helper';
+import BaseAgencyBudgetaryResources from 'models/v2/agency/BaseAgencyBudgetaryResources';
 
 import { agencyPageMetaTags } from 'helpers/metaTagHelper';
 import { scrollToY } from 'helpers/scrollToHelper';
@@ -32,10 +32,10 @@ import { defaultSortFy } from 'components/sharedComponents/pickers/FYPicker';
 import ShareIcon from 'components/sharedComponents/stickyHeader/ShareIcon';
 
 import AccountSpending from 'components/agency/v2/accountSpending/AccountSpending';
+import Error from '../../../components/sharedComponents/Error';
 
 require('pages/agency/v2/index.scss');
 
-// document.querySelector('.site-navigation').offsetHeight + document.querySelector('.site-navigation').offsetTop
 const scrollPositionOfSiteHeader = 96;
 
 const TooltipComponent = () => (
@@ -70,15 +70,39 @@ const ComingSoon = () => (
     </div>
 );
 
+const propTypes = {
+    params: PropTypes.shape({
+        agencyId: PropTypes.string
+    })
+};
+
 export const AgencyProfileV2 = ({
-    agencyOverview,
-    agencyId,
-    params,
-    clearAgency,
-    setOverview
+    params
 }) => {
+    const dispatch = useDispatch();
     const [activeSection, setActiveSection] = useState('overview');
     const [selectedFy, setSelectedFy] = useState(FiscalYearHelper.defaultFiscalYear());
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        setLoading(true);
+        // request budgetary resources data for this agency
+        const budgetaryResourcesRequest = fetchBudgetaryResources(params.agencyId);
+        budgetaryResourcesRequest.promise
+            .then((res) => {
+                // parse the response using our data model
+                setLoading(false);
+                const budgetaryResources = Object.create(BaseAgencyBudgetaryResources);
+                budgetaryResources.populate(res.data);
+                // store the data model object in Redux
+                dispatch(setBudgetaryResources(budgetaryResources));
+            }).catch((err) => {
+                setError(true);
+                setLoading(false);
+                console.error(err);
+            });
+    }, [params.agencyId]);
 
     const componentByAgencySection = {
         overview: <ComingSoon />,
@@ -154,7 +178,8 @@ export const AgencyProfileV2 = ({
                         <ShareIcon
                             slug={slug}
                             email={{
-                                subject: `USAspending.gov Agency Profile: ${agencyOverview.name}`,
+                                // TODO - add agency name when the data is available
+                                subject: 'USAspending.gov Agency Profile: ',
                                 body: `View the spending activity of this agency on USAspending.gov: ${getBaseUrl(slug)}`
                             }} />
                         <div className="sticky-header__toolbar-item">
@@ -166,7 +191,7 @@ export const AgencyProfileV2 = ({
                     </div>
                 </>
             </StickyHeader>
-            <LoadingWrapper isLoading={false} >
+            <LoadingWrapper isLoading={loading} >
                 <main id="main-content" className="main-content usda__flex-row">
                     <div className="sidebar usda__flex-col">
                         <Sidebar
@@ -180,28 +205,26 @@ export const AgencyProfileV2 = ({
                                 label: startCase(section)
                             }))} />
                     </div>
-                    <div className="body usda__flex-col">
-                        {Object.keys(componentByAgencySection).map((section) => (
-                            <AgencySection key={section} section={section} >
-                                {componentByAgencySection[section]}
-                            </AgencySection>
-                        ))}
-                    </div>
+                    {error &&
+                        <div className="body usda__flex-col">
+                            <Error />
+                        </div>}
+                    {!error &&
+                        <div className="body usda__flex-col">
+                            {Object.keys(componentByAgencySection).map((section) => (
+                                <AgencySection key={section} section={section} >
+                                    {componentByAgencySection[section]}
+                                </AgencySection>
+                            ))}
+                        </div>
+                    }
                 </main>
             </LoadingWrapper>
             <Footer />
         </div>
     );
 };
 
-const mapStateToProps = (state) => ({
-    agencyOverview: state.agency.overview,
-    agencyId: state.agency.id
-});
-
-const mapDispatchToProps = (dispatch) => ({
-    clearAgency: () => dispatch(resetAgency()),
-    setOverview: (agency) => dispatch(setAgencyOverview(agency))
-});
+AgencyProfileV2.propTypes = propTypes;
 
-export default connect(mapStateToProps, mapDispatchToProps)(AgencyProfileV2);
+export default AgencyProfileV2;

src/js/containers/agency/v2/accountSpending/CountTabContainer.jsx

@@ -5,7 +5,7 @@
 
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { fetchSpendingCount } from 'helpers/agencyHelper';
+import { fetchSpendingCount } from 'helpers/agencyV2Helper';
 import CountTab from 'components/agency/v2/CountTab';
 
 const propTypes = {
@@ -45,6 +45,7 @@ const CountTabContainer = (props) => {
             subHeading={props.subHeading}
             setActiveTab={props.setActiveTab}
             active={props.active}
+            disabled={count === 0}
             type={props.type} />
     );
 };