From 43ab103b60647fd8834c24681bc3b7b184304daf Mon Sep 17 00:00:00 2001 From: Conrad Date: Thu, 22 Feb 2018 13:46:32 -0500 Subject: [PATCH 01/13] Initial impact view without deemed savings --- src/containers/BGroup/BGroup.js | 256 +++++++++++++++++++++++++++----- src/utils/restServices.js | 1 + 2 files changed, 216 insertions(+), 41 deletions(-) diff --git a/src/containers/BGroup/BGroup.js b/src/containers/BGroup/BGroup.js index 211dbeee..faa06156 100644 --- a/src/containers/BGroup/BGroup.js +++ b/src/containers/BGroup/BGroup.js @@ -3,7 +3,10 @@ import { connect } from 'react-redux'; import { Link, browserHistory } from 'react-router'; import { bindActionCreators } from 'redux'; import PropTypes from 'prop-types'; -import { Button, Nav, NavItem, NavLink } from 'reactstrap'; +import { + Button, Nav, NavItem, NavLink, Input, Collapse, + UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, +} from 'reactstrap'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; import { Icon } from 'react-fa'; @@ -24,7 +27,7 @@ import { loadProjects } from '../Project/actions'; import AddressSearch from '../../components/AddressSearch/AddressSearch'; import userPropType from '../User/propTypes'; import request from '../../utils/request'; -import { getHeaders, accountURL, gatewayURL, contactsURL } from '../../utils/restServices'; +import { getHeaders, accountURL, gatewayURL, contactsURL, sfBuildingImpactURL } from '../../utils/restServices'; const UTILITY_TYPES = { 1: 'electric', @@ -51,11 +54,18 @@ export class BGroup extends Component { projectStatusBreakdown: {}, contactAccounts: {}, contactParentAccounts: {}, - contactNames: {}, contactLoading: false, contactError: false, + impactLoading: false, + impactError: false, + impact: {}, numRows: -1, overviewTab: this.props.user.permissions['view::bgroupProjectsSummary'] ? 'projects' : 'buildings', + displayContact: false, + displayAnalysis: true, + displayProjects: true, + displayImpact: true, + recommendedRetrofitsToggle: {}, } componentDidMount() { @@ -79,6 +89,7 @@ export class BGroup extends Component { this.getGatewayDates(buildingIds); } this.getSimulationDates(buildingIds); + this.getSfBuildingImpact(buildingIds); } } if ( @@ -118,6 +129,27 @@ export class BGroup extends Component { clearTimeout(this.updateNumRows); } + getSfBuildingImpact = (buildingIds) => { + // A function to determine dates of gateway install + this.setState({ impactLoading: true }); + const filterString = buildingIds.reduce((acc, val) => ( + `${acc}building_id[]=${val}&` + ), ''); + request(`${sfBuildingImpactURL}?${filterString}`, { + method: 'GET', + headers: getHeaders(), + }).then((res) => { + this.setState({ impactLoading: false }); + const data = res.data; + if (!res.err && data) { + this.setState({ impact: data }); + } else { + this.setState({ impactError: true }); + } + }); + + } + getContacts = (projects) => { // A function to get all of the contact information for buildings this.setState({ contactLoading: true }); @@ -143,15 +175,13 @@ export class BGroup extends Component { if (!res.err && data) { const contactAccounts = {}; const contactParentAccounts = {}; - const contactNames = {}; data.map((val) => { const buildingId = salesForceToBuilding[val.sales_force_id]; contactAccounts[buildingId] = val.account_name; contactParentAccounts[buildingId] = val.parent_account_name; - contactNames[buildingId] = val.contacts.map(contact => contact.name); return val; }); - this.setState({ contactAccounts, contactParentAccounts, contactNames }); + this.setState({ contactAccounts, contactParentAccounts }); } else { this.setState({ contactError: true }); } @@ -291,9 +321,6 @@ export class BGroup extends Component { ); } - renderProjectSummary = () => { - } - renderDeleteBuildingButton = (id) => { if (this.props.bGroup.deleteBGroupBuildingLoading[id]) { return ( @@ -322,6 +349,18 @@ export class BGroup extends Component { : false ); + const listFilterMethod = (filter, row) => { + if (row[filter.id]) { + + return row[filter.id].reduce((acc, val) => ( + val && (acc || val.toLowerCase().indexOf( + filter.value.toLowerCase() + ) !== -1) + ), false); + } + return false; + }; + const utilityBillFilterMethod = (filter, row) => { if (filter.value === 'all') { return true; @@ -377,7 +416,7 @@ export class BGroup extends Component { ), }, ], - }, { + }, ...(!this.state.displayContact) ? [] : [{ Header: () => ( Contact Info{' '} @@ -397,30 +436,9 @@ export class BGroup extends Component { Header: 'Parent Company', filterMethod: genericFilterMethod, accessor: 'contact_parent_account', - }, { - Header: 'Contact Names', - filterMethod: (filter, row) => { - // Handle this one differently because it's a list - if (row[filter.id]) { - return row[filter.id].reduce((acc, val) => ( - val && (acc || val.toLowerCase().indexOf( - filter.value.toLowerCase() - ) !== -1) - ), false); - } - return false; - }, - accessor: 'contact_names', - Cell: row => (row.value ? ( - - ) : null), }, ], - }, { + }], ...(!this.state.displayAnalysis) ? [] : [{ Header: () => ( Analysis{' '} @@ -473,7 +491,7 @@ export class BGroup extends Component { Cell: row => (row.value ? : null), }, ], - }, { + }], ...(!this.state.displayProjects) ? [] : [{ Header: () => ( Projects{' '} @@ -538,29 +556,104 @@ export class BGroup extends Component { accessor: 'num_projects', }, { Header: 'Project Types', + filterMethod: listFilterMethod, + accessor: 'project_types', + Cell: row => (row.value ? ( +
    + {row.value.map((type, index) => ( +
  • {type}
  • + ))} +
+ ) : null), + }, + ], + }], ...(!this.state.displayImpact) ? [] : [{ + Header: () => ( + + Impact{' '} + + + ), + columns: [ + { + Header: 'Recommended Retrofits', + filterMethod: listFilterMethod, + accessor: 'recommended_retrofits', + Cell: (row) => { + if (row.value && row.value.length > 0) { + const buildingId = row.original.building_id; + const toggleButton = ( + /* eslint-disable jsx-a11y/no-static-element-interactions */ +
{ + this.setState({ recommendedRetrofitsToggle: { + ...this.state.recommendedRetrofitsToggle, + [buildingId]: !this.state.recommendedRetrofitsToggle[buildingId], + } }); + }} + style={{ textAlign: 'center', backgroundColor: '#f7f7f9' }} + > + {' '} + {this.state.recommendedRetrofitsToggle[buildingId] ? 'Hide' : 'Show'} +
+ ); + return ( +
+ {toggleButton} + +
    + {row.value.map((val, index) => ( +
  • {val}
  • + ))} +
+
+
+ ); + } + return null; + }, + }, { + Header: 'Deemed Savings (recommended)', + filterable: false, + style: { textAlign: 'center' }, + accessor: 'recommended_deemed_savings', + }, { + Header: 'Completed Retrofits', filterMethod: (filter, row) => { - // Handle this one differently because it's a list if (row[filter.id]) { - return row[filter.id].reduce((acc, val) => ( - val && (acc || val.toLowerCase().indexOf( + val && (acc || val.completed.toLowerCase().indexOf( filter.value.toLowerCase() ) !== -1) ), false); } return false; }, - accessor: 'project_types', + accessor: 'completed_retrofits', Cell: row => (row.value ? (
    - {row.value.map((type, index) => ( -
  • {type}
  • + {row.value.map((val, index) => ( +
  • {val.completed} ({(new Date(val.completed_date)).toLocaleDateString('en-US')})
  • ))}
) : null), + }, { + Header: 'Deemed Savings (completed)', + filterable: false, + style: { textAlign: 'center' }, + accessor: 'completed_deemed_savings', }, ], - }]; + }]]; if (this.state.edit) { columns.push({ Header: '', @@ -588,7 +681,21 @@ export class BGroup extends Component { val.building_simulation = this.state.simulationDates[val.building_id]; val.contact_account = this.state.contactAccounts[val.building_id]; val.contact_parent_account = this.state.contactParentAccounts[val.building_id]; - val.contact_names = this.state.contactNames[val.building_id]; + if (this.state.impact[val.building_id]) { + const impactObjects = this.state.impact[val.building_id]; + if (impactObjects.diagnostic_recommendations.length > 0) { + val.recommended_retrofits = impactObjects.diagnostic_recommendations; + } else { + val.recommended_retrofits = impactObjects.pns_recommendations; + } + val.completed_retrofits = impactObjects.complete; + } else { + val.recommended_retrofits = []; + val.completed_retrofits = []; + } + val.recommended_deemed_savings = undefined; + val.completed_deemed_savings = undefined; + return val; }); return ( @@ -607,6 +714,73 @@ export class BGroup extends Component {
{this.state.numRows} buildings
+ + + Toggle Columns + + + { + this.setState({ displayContact: !this.state.displayContact }); + }} + > + + {' '} + Contact Info + + + { + this.setState({ displayAnalysis: !this.state.displayAnalysis }); + }} + > + + {' '} + Analysis + + + { + this.setState({ displayProjects: !this.state.displayProjects }); + }} + > + + {' '} + Projects + + + { + this.setState({ displayImpact: !this.state.displayImpact }); + }} + > + + {' '} + Impact + + + +
diff --git a/src/utils/restServices.js b/src/utils/restServices.js index a292d8a7..95747f90 100644 --- a/src/utils/restServices.js +++ b/src/utils/restServices.js @@ -36,6 +36,7 @@ export const disaggregateMetaURL = `${utilityService}/disaggregatemeta/`; export const projectURL = `${projectService}/project/`; export const contactsURL = `${projectService}/contact/`; export const projectDocumentURL = `${projectService}/project/document/`; +export const sfBuildingImpactURL = `${projectService}/sfbuildingimpact/`; export const lightingReportURL = `${reportService}/kissflowlighting/`; -- GitLab From 74435b0041c8c02cc21a3f4868f09d197db77efb Mon Sep 17 00:00:00 2001 From: Conrad Date: Thu, 22 Feb 2018 17:29:49 -0500 Subject: [PATCH 02/13] Add deemed columns --- src/containers/BGroup/BGroup.js | 174 +++++++++++++++++++++++++++----- src/styles.css | 36 +++++++ 2 files changed, 184 insertions(+), 26 deletions(-) diff --git a/src/containers/BGroup/BGroup.js b/src/containers/BGroup/BGroup.js index faa06156..d4307bf6 100644 --- a/src/containers/BGroup/BGroup.js +++ b/src/containers/BGroup/BGroup.js @@ -62,10 +62,12 @@ export class BGroup extends Component { numRows: -1, overviewTab: this.props.user.permissions['view::bgroupProjectsSummary'] ? 'projects' : 'buildings', displayContact: false, - displayAnalysis: true, - displayProjects: true, + displayAnalysis: false, + displayProjects: false, displayImpact: true, recommendedRetrofitsToggle: {}, + recommendedDeemedToggle: {}, + completedDeemedToggle: {}, } componentDidMount() { @@ -412,7 +414,9 @@ export class BGroup extends Component { ), accessor: 'first_address', Cell: row => ( - {row.value} +
+ {row.value} +
), }, ], @@ -432,10 +436,20 @@ export class BGroup extends Component { Header: 'Owner', filterMethod: genericFilterMethod, accessor: 'contact_account', + Cell: row => ( +
+ {row.value} +
+ ), }, { Header: 'Parent Company', filterMethod: genericFilterMethod, accessor: 'contact_parent_account', + Cell: row => ( +
+ {row.value} +
+ ), }, ], }], ...(!this.state.displayAnalysis) ? [] : [{ @@ -456,14 +470,22 @@ export class BGroup extends Component { Filter: utilityBillFilter, accessor: 'electric_bill', style: { textAlign: 'center' }, - Cell: row => (row.value ? : null), + Cell: row => ( +
+ {row.value ? : null} +
+ ), }, { Header: 'Gas Bill', filterMethod: utilityBillFilterMethod, Filter: utilityBillFilter, accessor: 'gas_bill', style: { textAlign: 'center' }, - Cell: row => (row.value ? : null), + Cell: row => ( +
+ {row.value ? : null} +
+ ), }, { Header: 'Energy Simulation', filterMethod: (filter, row) => { @@ -488,7 +510,11 @@ export class BGroup extends Component { ), accessor: 'building_simulation', style: { textAlign: 'center' }, - Cell: row => (row.value ? : null), + Cell: row => ( +
+ {row.value ? : null} +
+ ), }, ], }], ...(!this.state.displayProjects) ? [] : [{ @@ -543,11 +569,13 @@ export class BGroup extends Component { return d1 > d2 ? 1 : -1; }, Cell: row => (row.value ? ( -
    - {row.value.map((installDate, index) => ( -
  • {installDate}
  • - ))} -
+
+
    + {row.value.map((installDate, index) => ( +
  • {installDate}
  • + ))} +
+
) : null), }], { Header: '# Projects', @@ -559,11 +587,13 @@ export class BGroup extends Component { filterMethod: listFilterMethod, accessor: 'project_types', Cell: row => (row.value ? ( -
    - {row.value.map((type, index) => ( -
  • {type}
  • - ))} -
+
+
    + {row.value.map((type, index) => ( +
  • {type}
  • + ))} +
+
) : null), }, ], @@ -604,13 +634,13 @@ export class BGroup extends Component {
); return ( -
+
{toggleButton} -
    +
      {row.value.map((val, index) => (
    • {val}
    • ))} @@ -625,7 +655,45 @@ export class BGroup extends Component { Header: 'Deemed Savings (recommended)', filterable: false, style: { textAlign: 'center' }, - accessor: 'recommended_deemed_savings', + accessor: 'projected_deemed_savings', + Cell: (row) => { + if (row.value && row.value.length > 0) { + const buildingId = row.original.building_id; + const toggleButton = ( + /* eslint-disable jsx-a11y/no-static-element-interactions */ +
      { + this.setState({ recommendedDeemedToggle: { + ...this.state.recommendedDeemedToggle, + [buildingId]: !this.state.recommendedDeemedToggle[buildingId], + } }); + }} + style={{ textAlign: 'center', backgroundColor: '#f7f7f9' }} + > + {' '} + {this.state.recommendedDeemedToggle[buildingId] ? 'Hide' : 'Show'} +
      + ); + return ( +
      + {toggleButton} + +
        + {row.value.map((val, index) => ( +
      • {val}
      • + ))} +
      +
      +
      + ); + } + return null; + }, }, { Header: 'Completed Retrofits', filterMethod: (filter, row) => { @@ -640,17 +708,57 @@ export class BGroup extends Component { }, accessor: 'completed_retrofits', Cell: row => (row.value ? ( -
        - {row.value.map((val, index) => ( -
      • {val.completed} ({(new Date(val.completed_date)).toLocaleDateString('en-US')})
      • - ))} -
      +
      +
        + {row.value.map((val, index) => ( +
      • {val.completed} ({(new Date(val.completed_date)).toLocaleDateString('en-US')})
      • + ))} +
      +
      ) : null), }, { Header: 'Deemed Savings (completed)', filterable: false, style: { textAlign: 'center' }, accessor: 'completed_deemed_savings', + Cell: (row) => { + if (row.value && row.value.length > 0) { + const buildingId = row.original.building_id; + const toggleButton = ( + /* eslint-disable jsx-a11y/no-static-element-interactions */ +
      { + this.setState({ completedDeemedToggle: { + ...this.state.completedDeemedToggle, + [buildingId]: !this.state.completedDeemedToggle[buildingId], + } }); + }} + style={{ textAlign: 'center', backgroundColor: '#f7f7f9' }} + > + {' '} + {this.state.completedDeemedToggle[buildingId] ? 'Hide' : 'Show'} +
      + ); + return ( +
      + {toggleButton} + +
        + {row.value.map((val, index) => ( +
      • {val}
      • + ))} +
      +
      +
      + ); + } + return null; + }, }, ], }]]; @@ -689,12 +797,26 @@ export class BGroup extends Component { val.recommended_retrofits = impactObjects.pns_recommendations; } val.completed_retrofits = impactObjects.complete; + // Create a list of all of the projected deemed values + val.projected_deemed_savings = Object.keys(impactObjects.deemed.projected).reduce( + (acc, key) => ([ + ...acc, + ...(impactObjects.deemed.projected[key]) ? [`${key}: ${impactObjects.deemed.projected[key]}`] : [], + ]), [] + ); + // Create a list of all of the completed deemed values + val.completed_deemed_savings = Object.keys(impactObjects.deemed.completed).reduce( + (acc, key) => ([ + ...acc, + ...(impactObjects.deemed.completed[key]) ? [`${key}: ${impactObjects.deemed.completed[key]}`] : [], + ]), [] + ); } else { val.recommended_retrofits = []; val.completed_retrofits = []; + val.projected_deemed_savings = []; + val.completed_deemed_savings = []; } - val.recommended_deemed_savings = undefined; - val.completed_deemed_savings = undefined; return val; }); diff --git a/src/styles.css b/src/styles.css index a0391599..ffb65d3c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -57,3 +57,39 @@ h6 { right: 0; background-color: white; } + + +/* + * These two hovers work in conjunction to + * provide a more detailed view when + * you hover a list item in a react table, + * assuming the cell you are hovering over + * is surrounded by a div with the bp-cell-wrapper + * class + * */ +.rt-td:hover { + overflow: visible !important; + z-index: 1000; +} + +.bp-cell-wrapper:hover { + min-width: 100px; + width: fit-content; + background-color: white; + z-index: 1000; +} + +.rt-td { + padding: 0px !important; +} + +.bp-cell-wrapper { + padding: 7px 5px; + height: 100%; +} + +.bp-cell-table { + margin-bottom: 0; + padding-left: 0; + list-style-type: none; +} -- GitLab From 868ded59695c1579e00b79ada5a95fc0f6c7bbe5 Mon Sep 17 00:00:00 2001 From: Conrad Date: Fri, 23 Feb 2018 11:35:26 -0500 Subject: [PATCH 03/13] Improve hover affect for dropdown menus --- src/containers/BGroup/BGroup.js | 45 +++++++++++++++----------------- src/containers/BGroup/styles.css | 41 +++++++++++++++++++++++++++++ src/styles.css | 36 ------------------------- 3 files changed, 62 insertions(+), 60 deletions(-) create mode 100644 src/containers/BGroup/styles.css diff --git a/src/containers/BGroup/BGroup.js b/src/containers/BGroup/BGroup.js index d4307bf6..d8d403f6 100644 --- a/src/containers/BGroup/BGroup.js +++ b/src/containers/BGroup/BGroup.js @@ -28,6 +28,7 @@ import AddressSearch from '../../components/AddressSearch/AddressSearch'; import userPropType from '../User/propTypes'; import request from '../../utils/request'; import { getHeaders, accountURL, gatewayURL, contactsURL, sfBuildingImpactURL } from '../../utils/restServices'; +import './styles.css'; const UTILITY_TYPES = { 1: 'electric', @@ -62,8 +63,8 @@ export class BGroup extends Component { numRows: -1, overviewTab: this.props.user.permissions['view::bgroupProjectsSummary'] ? 'projects' : 'buildings', displayContact: false, - displayAnalysis: false, - displayProjects: false, + displayAnalysis: true, + displayProjects: true, displayImpact: true, recommendedRetrofitsToggle: {}, recommendedDeemedToggle: {}, @@ -471,9 +472,7 @@ export class BGroup extends Component { accessor: 'electric_bill', style: { textAlign: 'center' }, Cell: row => ( -
      - {row.value ? : null} -
      + row.value ? : null ), }, { Header: 'Gas Bill', @@ -482,9 +481,7 @@ export class BGroup extends Component { accessor: 'gas_bill', style: { textAlign: 'center' }, Cell: row => ( -
      - {row.value ? : null} -
      + row.value ? : null ), }, { Header: 'Energy Simulation', @@ -511,9 +508,7 @@ export class BGroup extends Component { accessor: 'building_simulation', style: { textAlign: 'center' }, Cell: row => ( -
      - {row.value ? : null} -
      + row.value ? : null ), }, ], @@ -625,7 +620,7 @@ export class BGroup extends Component { [buildingId]: !this.state.recommendedRetrofitsToggle[buildingId], } }); }} - style={{ textAlign: 'center', backgroundColor: '#f7f7f9' }} + className="bp-cell-dropdown" > ); return ( -
      +
      {toggleButton}
        {row.value.map((val, index) => ( @@ -668,7 +663,7 @@ export class BGroup extends Component { [buildingId]: !this.state.recommendedDeemedToggle[buildingId], } }); }} - style={{ textAlign: 'center', backgroundColor: '#f7f7f9' }} + className="bp-cell-dropdown" > ); return ( -
        +
        {toggleButton}
          {row.value.map((val, index) => ( @@ -733,7 +729,7 @@ export class BGroup extends Component { [buildingId]: !this.state.completedDeemedToggle[buildingId], } }); }} - style={{ textAlign: 'center', backgroundColor: '#f7f7f9' }} + className="bp-cell-dropdown" > ); return ( -
          +
          {toggleButton}
            {row.value.map((val, index) => ( @@ -851,7 +847,8 @@ export class BGroup extends Component { {}} />{' '} Contact Info @@ -866,7 +863,7 @@ export class BGroup extends Component { {}} />{' '} Analysis @@ -881,7 +878,7 @@ export class BGroup extends Component { {}} />{' '} Projects @@ -896,7 +893,7 @@ export class BGroup extends Component { {}} />{' '} Impact diff --git a/src/containers/BGroup/styles.css b/src/containers/BGroup/styles.css new file mode 100644 index 00000000..c6f7d8cb --- /dev/null +++ b/src/containers/BGroup/styles.css @@ -0,0 +1,41 @@ +/* + * These two hovers work in conjunction to + * provide a more detailed view when + * you hover a list item in a react table, + * assuming the cell you are hovering over + * is surrounded by a div with the bp-cell-wrapper + * class + * */ +.rt-td:hover { + overflow: visible !important; + z-index: 1000; +} + +.bp-cell-wrapper:hover { + min-width: 100px; + width: fit-content; + background-color: white; + z-index: 1000; +} + +.rt-td { + padding: 0px !important; +} + +.bp-cell-wrapper { + padding: 7px 5px; + height: 100%; +} + +.bp-cell-table { + margin-bottom: 0; + padding-left: 0; + list-style-type: none; + text-align: left; +} + +.bp-cell-dropdown { + text-align: center; + background-color: #f7f7f9; + cursor: pointer; +} diff --git a/src/styles.css b/src/styles.css index ffb65d3c..a0391599 100644 --- a/src/styles.css +++ b/src/styles.css @@ -57,39 +57,3 @@ h6 { right: 0; background-color: white; } - - -/* - * These two hovers work in conjunction to - * provide a more detailed view when - * you hover a list item in a react table, - * assuming the cell you are hovering over - * is surrounded by a div with the bp-cell-wrapper - * class - * */ -.rt-td:hover { - overflow: visible !important; - z-index: 1000; -} - -.bp-cell-wrapper:hover { - min-width: 100px; - width: fit-content; - background-color: white; - z-index: 1000; -} - -.rt-td { - padding: 0px !important; -} - -.bp-cell-wrapper { - padding: 7px 5px; - height: 100%; -} - -.bp-cell-table { - margin-bottom: 0; - padding-left: 0; - list-style-type: none; -} -- GitLab From 088eee281a8f831be501721b32d7d5073899de9a Mon Sep 17 00:00:00 2001 From: Conrad Date: Fri, 23 Feb 2018 13:01:42 -0500 Subject: [PATCH 04/13] Fix bp wrapper dropdown for all columns with the dropdown --- src/containers/BGroup/BGroup.js | 16 +++++++++------- src/containers/BGroup/styles.css | 8 ++++++++ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/containers/BGroup/BGroup.js b/src/containers/BGroup/BGroup.js index d8d403f6..c135f3ed 100644 --- a/src/containers/BGroup/BGroup.js +++ b/src/containers/BGroup/BGroup.js @@ -377,7 +377,7 @@ export class BGroup extends Component { const utilityBillFilter = ({ filter, onChange }) => ( onChange(event.target.value)} - style={{ width: '100%' }} + className="bp-dropdown-filter" value={filter ? filter.value : 'all'} > @@ -539,7 +539,7 @@ export class BGroup extends Component { Filter: ({ filter, onChange }) => ( onChange(event.target.value)} - className="bp-dropdown-filter" - value={filter ? filter.value : 'all'} - > - - - - - ); - const columns = [{ - Header: () => ( - - Building Info{' '} - - - ), - columns: [ - { - Header: 'Address', - filterMethod: (filter, row) => ( - row._original.address_list.toLowerCase().indexOf( // eslint-disable-line - filter.value.toLowerCase() - ) !== -1 - ), - Filter: ({ filter, onChange }) => ( - onChange(event.target.value)} - /> - ), - accessor: 'first_address', - Cell: row => ( -
            - {row.value} -
            - ), - }, - ], - }, ...(!this.state.displayContact) ? [] : [{ - Header: () => ( - - Contact Info{' '} - - - ), - columns: [ - { - Header: 'Owner', - filterMethod: genericFilterMethod, - accessor: 'contact_account', - Cell: row => ( -
            - {row.value} -
            - ), - }, { - Header: 'Parent Company', - filterMethod: genericFilterMethod, - accessor: 'contact_parent_account', - Cell: row => ( -
            - {row.value} -
            - ), - }, - ], - }], ...(!this.state.displayAnalysis) ? [] : [{ - Header: () => ( - - Analysis{' '} - - - ), - columns: [ - { - Header: 'Electric Bill', - filterMethod: utilityBillFilterMethod, - Filter: utilityBillFilter, - accessor: 'electric_bill', - style: { textAlign: 'center' }, - Cell: row => ( - row.value ? : null - ), - }, { - Header: 'Gas Bill', - filterMethod: utilityBillFilterMethod, - Filter: utilityBillFilter, - accessor: 'gas_bill', - style: { textAlign: 'center' }, - Cell: row => ( - row.value ? : null - ), - }, { - Header: 'Energy Simulation', - filterMethod: (filter, row) => { - if (filter.value === 'all') { - return true; - } - if (filter.value === 'complete') { - return row[filter.id]; - } - return !row[filter.id]; - }, - Filter: ({ filter, onChange }) => ( - - ), - accessor: 'building_simulation', - style: { textAlign: 'center' }, - Cell: row => ( - row.value ? : null - ), - }, - ], - }], ...(!this.state.displayProjects) ? [] : [{ - Header: () => ( - - Projects{' '} - - - ), - columns: [ - // Only show the sensor install column if the user has the correct permission - ...(!this.props.user.permissions['read::Gateway']) ? [] : [{ - Header: 'Sensor Install', - filterMethod: (filter, row) => { - if (filter.value === 'all') { - return true; - } - if (filter.value === 'installed') { - return row[filter.id]; - } - return !row[filter.id]; - }, - Filter: ({ filter, onChange }) => ( - - ), - accessor: 'gateway_install', - sortMethod: (a, b) => { - if (!b && a) { - return 1; - } else if (b && !a) { - return -1; - } else if (!b && !a) { - return 0; - } - const d1 = new Date(a[0]); - const d2 = new Date(b[0]); - if (d1.getTime() === d2.getTime()) { - return 0; - } - return d1 > d2 ? 1 : -1; - }, - Cell: row => (row.value ? ( -
            -
              - {row.value.map((installDate, index) => ( -
            • {installDate}
            • - ))} -
            -
            - ) : null), - }], { - Header: '# Projects', - filterable: false, - style: { textAlign: 'center' }, - accessor: 'num_projects', - }, { - Header: 'Project Types', - filterMethod: listFilterMethod, - accessor: 'project_types', - Cell: row => (row.value ? ( -
            -
              - {row.value.map((type, index) => ( -
            • {type}
            • - ))} -
            -
            - ) : null), - }, - ], - }], ...(!this.state.displayImpact) ? [] : [{ - Header: () => ( - - Impact{' '} - - - ), - columns: [ - { - Header: 'Recommended Retrofits', - filterMethod: listFilterMethod, - accessor: 'recommended_retrofits', - Cell: (row) => { - if (row.value && row.value.length > 0) { - const buildingId = row.original.building_id; - const toggleButton = ( - /* eslint-disable jsx-a11y/no-static-element-interactions */ -
            { - this.setState({ recommendedRetrofitsToggle: { - ...this.state.recommendedRetrofitsToggle, - [buildingId]: !this.state.recommendedRetrofitsToggle[buildingId], - } }); - }} - className="bp-cell-dropdown" - > - {' '} - {this.state.recommendedRetrofitsToggle[buildingId] ? 'Hide' : 'Show'} -
            - ); - return ( -
            - {toggleButton} - -
              - {row.value.map((val, index) => ( -
            • {val}
            • - ))} -
            -
            -
            - ); - } - return null; - }, - }, { - Header: 'Deemed Savings (recommended)', - filterable: false, - style: { textAlign: 'center' }, - accessor: 'projected_deemed_savings', - Cell: (row) => { - if (row.value && row.value.length > 0) { - const buildingId = row.original.building_id; - const toggleButton = ( - /* eslint-disable jsx-a11y/no-static-element-interactions */ -
            { - this.setState({ recommendedDeemedToggle: { - ...this.state.recommendedDeemedToggle, - [buildingId]: !this.state.recommendedDeemedToggle[buildingId], - } }); - }} - className="bp-cell-dropdown" - > - {' '} - {this.state.recommendedDeemedToggle[buildingId] ? 'Hide' : 'Show'} -
            - ); - return ( -
            - {toggleButton} - -
              - {row.value.map((val, index) => ( -
            • {val}
            • - ))} -
            -
            -
            - ); - } - return null; - }, - }, { - Header: 'Completed Retrofits', - filterMethod: (filter, row) => { - if (row[filter.id]) { - return row[filter.id].reduce((acc, val) => ( - val && (acc || val.completed.toLowerCase().indexOf( - filter.value.toLowerCase() - ) !== -1) - ), false); - } - return false; - }, - accessor: 'completed_retrofits', - Cell: row => (row.value ? ( -
            -
              - {row.value.map((val, index) => ( -
            • {val.completed} ({(new Date(val.completed_date)).toLocaleDateString('en-US')})
            • - ))} -
            -
            - ) : null), - }, { - Header: 'Deemed Savings (completed)', - filterable: false, - style: { textAlign: 'center' }, - accessor: 'completed_deemed_savings', - Cell: (row) => { - if (row.value && row.value.length > 0) { - const buildingId = row.original.building_id; - const toggleButton = ( - /* eslint-disable jsx-a11y/no-static-element-interactions */ -
            { - this.setState({ completedDeemedToggle: { - ...this.state.completedDeemedToggle, - [buildingId]: !this.state.completedDeemedToggle[buildingId], - } }); - }} - className="bp-cell-dropdown" - > - {' '} - {this.state.completedDeemedToggle[buildingId] ? 'Hide' : 'Show'} -
            - ); - return ( -
            - {toggleButton} - -
              - {row.value.map((val, index) => ( -
            • {val}
            • - ))} -
            -
            -
            - ); - } - return null; - }, - }, - ], - }]]; - if (this.state.edit) { - columns.push({ - Header: '', - filterable: false, - accessor: 'delete', - maxWidth: 35, - Cell: row => this.renderDeleteBuildingButton(row.original.id), - }); - } - bGroupBuildings = bGroupBuildings.map((val) => { - const projects = this.state.buildingIdProject[val.building_id]; - if (projects) { - val.num_projects = projects.length; - val.project_types = projects.map(proj => (proj.project_type)); - } else { - val.num_projects = 0; - val.project_types = []; - } - const utilityStatus = this.state.utilityAccountsStatus[val.building_id]; - if (utilityStatus) { - val.electric_bill = utilityStatus.electric; - val.gas_bill = utilityStatus.gas; - } - val.gateway_install = this.state.gatewayDates[val.building_id]; - val.building_simulation = this.state.simulationDates[val.building_id]; - val.contact_account = this.state.contactAccounts[val.building_id]; - val.contact_parent_account = this.state.contactParentAccounts[val.building_id]; - if (this.state.impact[val.building_id]) { - const impactObjects = this.state.impact[val.building_id]; - if (impactObjects.diagnostic_recommendations.length > 0) { - val.recommended_retrofits = impactObjects.diagnostic_recommendations; - } else { - val.recommended_retrofits = impactObjects.pns_recommendations; - } - val.completed_retrofits = impactObjects.complete; - // Create a list of all of the projected deemed values - val.projected_deemed_savings = Object.keys(impactObjects.deemed.projected).reduce( - (acc, key) => ([ - ...acc, - ...(impactObjects.deemed.projected[key]) ? [`${impactObjects.deemed.projected[key]} ${key.replace('Projected ', '')}`] : [], - ]), [] - ); - // Create a list of all of the completed deemed values - val.completed_deemed_savings = Object.keys(impactObjects.deemed.completed).reduce( - (acc, key) => ([ - ...acc, - ...(impactObjects.deemed.completed[key]) ? [`${impactObjects.deemed.completed[key]} ${key.replace('Completed ', '')}`] : [], - ]), [] - ); - } else { - val.recommended_retrofits = []; - val.completed_retrofits = []; - val.projected_deemed_savings = []; - val.completed_deemed_savings = []; - } - - return val; - }); - return ( -
            -
            -
            - - -
            -
            -
            = 0 ? '' : 'none' }}> -
            -
            {this.state.numRows} buildings
            -
            - - - Toggle Columns - - - { - this.setState({ displayContact: !this.state.displayContact }); - }} - > - - {}} - />{' '} - Contact Info - - - { - this.setState({ displayAnalysis: !this.state.displayAnalysis }); - }} - > - - {}} - />{' '} - Analysis - - - { - this.setState({ displayProjects: !this.state.displayProjects }); - }} - > - - {}} - />{' '} - Projects - - - { - this.setState({ displayImpact: !this.state.displayImpact }); - }} - > - - {}} - />{' '} - Impact - - - - -
            -
            -
            - { this.reactTable = reactTable; }} - onFilteredChange={(filter) => { - // Create a bounce function so as to not decrease the speed of the filter. - clearTimeout(this.updateNumRows); - this.updateNumRows = setTimeout( - () => { - ReactGA.event({ - category: 'Building Group', - action: 'Filter', - label: filter.reduce((acc, val) => { - return ( - `${acc}, ${val.id}: ${val.value}` - ); - }, `Building Group: ${this.props.bGroup.bGroupDetail.name}, # Results: ${this.reactTable.state.sortedData.length}`), - }); - this.setState({ - numRows: this.reactTable.state.sortedData.length, - }); - }, - 250, - ); - }} - noDataText={this.props.bGroup.bGroupDetailLoading ? 'Loading...' : 'No data'} - SubComponent={row => { - const addresses = bGroupBuildings - .filter(i => i.building_id === row.original.building_id) - .reduce((acc, val) => val.address_list, '') - .split(','); - return ( -
            - -
            -
            -

            - Address list{' '} - - - -

            -
              - {addresses.map(i =>
            • {i}
            • )} -
            -
            - {this.state.buildingIdProject[row.original.building_id] ? ( -
            -

            - Project list -

            -
              - {this.state.buildingIdProject[row.original.building_id].map((i) => { - let spanStatus = 'pending'; - if (i.state === 'constructed') { - spanStatus = 'claimed'; - } else if (i.state === 'cancelled') { - spanStatus = 'rejected'; - } - return ( -
            • - { i.state } - {' '} - { i.project_type } - {' '} - {i.name} -
            • - ); - })} -
            -
            - ) : null} -
            -
            - ); - }} - /> -
            -
            -
            - ); - } - render() { let content = ( @@ -1003,7 +311,28 @@ export class BGroup extends Component { ); break; case 'buildings': - content = this.renderBuildingGroup(); + content = ( + + ); break; default: content = 'There was an error'; @@ -1016,7 +345,7 @@ export class BGroup extends Component {
            -
            +
            View all groups {' '}

            -
          - {this.state.buildingIdProject[row.original.building_id] ? ( + {buildingIdProject[row.original.building_id] ? (

          Project list

            - {this.state.buildingIdProject[row.original.building_id].map((i) => { + {buildingIdProject[row.original.building_id].map((i) => { let spanStatus = 'pending'; if (i.state === 'constructed') { spanStatus = 'claimed'; @@ -745,5 +745,9 @@ BGroupBuildingTable.propTypes = { simulationLoading: PropTypes.bool, gatewayLoading: PropTypes.bool, impactLoading: PropTypes.bool, + displayToggleColumns: PropTypes.bool, + toggleContacts: PropTypes.bool, + toggleAnalysis: PropTypes.bool, + toggleProjects: PropTypes.bool, + toggleImpact: PropTypes.bool, }; - -- GitLab From c485f0d28eeb3116a9ea4d7604f6b1f75bcf3a5e Mon Sep 17 00:00:00 2001 From: Conrad Date: Wed, 28 Feb 2018 12:02:02 -0500 Subject: [PATCH 13/13] Display nav bar via props --- src/containers/BGroup/BGroup.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/containers/BGroup/BGroup.js b/src/containers/BGroup/BGroup.js index c218a416..ac3060f9 100644 --- a/src/containers/BGroup/BGroup.js +++ b/src/containers/BGroup/BGroup.js @@ -346,7 +346,7 @@ export class BGroup extends Component { return (
            - + {this.props.displayNavBar ? : null}
            @@ -417,6 +417,7 @@ BGroup.propTypes = { user: userPropType, projects: completeProjectPropTypes, loadProjects: PropTypes.func, + displayNavBar: PropTypes.bool, displayProjectOverview: PropTypes.bool, displayBuildingOverview: PropTypes.bool, displayOverviewTab: PropTypes.bool, @@ -430,6 +431,7 @@ BGroup.propTypes = { }; BGroup.defaultProps = { + displayNavBar: true, displayProjectOverview: true, displayBuildingOverview: true, displayOverviewTab: true, -- GitLab