+
{
);
billsExist[billName] = true;
+ index += 1;
});
}
- Object.entries(billsExist).forEach(billExist => {
+ Object.entries(billsExist).forEach((billExist) => {
if (billExist[1] === false) {
BillsTables.push(
-
+
);
+ index += 1;
}
});
diff --git a/src/components/Blocnote/FinancialInputs/BillsOverview.js b/src/components/Blocnote/FinancialInputs/BillsOverview.js
index 1fa5a241447d45ee2e4b46e74ee22d213c9c226b..7d3fb7a3ed159873612c707e610210dc7a506db9 100644
--- a/src/components/Blocnote/FinancialInputs/BillsOverview.js
+++ b/src/components/Blocnote/FinancialInputs/BillsOverview.js
@@ -16,6 +16,23 @@ class BillsOverview extends Component {
super(props);
this.toggleEstimation = this.toggleEstimation.bind(this);
this.changeEstimation = this.changeEstimation.bind(this);
+ this.state = {
+ estimationDropdownOpen: false,
+ estimationDropDownValue: Object.keys(this.props.data).length !== 0 ?
+ this.props.data.estimation_algorithm : 'Select Estimation',
+ estimationOptions: [
+ { id: 'RoughEstimation', key: 'RoughEstimation', name: 'Rough Estimation' },
+ { id: 'FancyEstimation', key: 'FancyEstimation', name: 'Fancy Estimation' },
+ ],
+ loading: props.loading,
+ action: null,
+ postBills: this.processBillsData(),
+ messageContent: null,
+ messageStyle: 'default',
+ };
+ }
+
+ processBillsData = () => {
const data = {};
if (Object.keys(this.props.data).length !== 0) {
['electric', 'water', 'gas', 'oil'].forEach((billName) => {
@@ -25,17 +42,7 @@ class BillsOverview extends Component {
});
});
}
-
- this.state = {
- estimationDropdownOpen: false,
- estimationDropDownValue: 'Select Estimation',
- estimationOptions: [
- { id: 'RoughEstimation', key: 'RoughEstimation', name: 'Rough Estimation' },
- { id: 'Fancy Estimation', key: 'FancyEstimation', name: 'Fancy Estimation' },
- ],
- action: null,
- postBills: data,
- };
+ return data;
}
toggleEstimation() {
@@ -45,13 +52,17 @@ class BillsOverview extends Component {
}
changeEstimation(e) {
- this.setState({ estimationDropDownValue: e.currentTarget.textContent });
+ this.setState({
+ estimationDropDownValue: e.currentTarget.textContent,
+ messageContent: null,
+ messageStyle: 'default',
+ });
}
handleCreateBillsOverview = () => {
this.props.createBillsOverview(
this.props.buildingId,
- this.state.postBills,
+ this.processBillsData(),
);
this.setState({ action: 'created' });
}
@@ -63,11 +74,16 @@ class BillsOverview extends Component {
if (data['Estimation Model'] === 'Select Estimation') {
alert('Please select an estimation model');
} else {
- this.props.updateBillsOverview(
- this.props.buildingId,
- data,
- );
- this.setState({ action: 'updated' });
+ this.setState({ loading: true }, () => {
+ this.props.updateBillsOverview(
+ this.props.buildingId,
+ data,
+ );
+ this.setState({
+ loading: false,
+ action: 'updated',
+ });
+ });
}
}
@@ -166,24 +182,35 @@ class BillsOverview extends Component {
);
}
- let messageStyle = {};
- let messageContent = null;
+ this.state.messageStyle = 'default';
+ this.state.messageContent = null;
- if (this.props.loading) {
- messageContent = 'Processing ...';
- messageStyle = this.props.defaultMessageStyle;
+ if (this.props.loading === true) {
+ this.state.messageContent = 'Processing ...';
}
if (this.props.error && typeof this.props.error === 'object') {
- messageContent = this.props.error.response.statusText;
- messageStyle = this.props.errorMessageStyle;
+ if (this.state.estimationDropDownValue !== 'Rough Estimation') {
+ this.state.messageContent = 'Only Rough Estimation available at this point';
+ }
+ // } else {
+ // messageContent = this.props.error.response.statusText;
+ // }
+ this.state.messageStyle = 'error';
}
if (!this.props.error && !this.props.loading
- && this.props.data !== null
- && this.state.action !== null) {
- messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1);
- messageStyle = this.props.successMessageStyle;
+ && this.props.data !== null) {
+ if (this.state.action === 'updated') {
+ this.state.messageStyle = 'success';
+ this.state.messageContent = 'Projected successfully.';
+ } else if (this.state.action === 'created') {
+ this.state.messageStyle = 'success';
+ this.state.messageContent = 'Saved.';
+ } else {
+ this.state.messageStyle = 'default';
+ this.state.messageContent = null;
+ }
}
return (
@@ -208,8 +235,8 @@ class BillsOverview extends Component {
@@ -243,6 +270,7 @@ class BillsOverview extends Component {
BillsOverview.propTypes = {
data: PropTypes.shape({
+ estimation_algorithm: PropTypes.string,
electric: PropTypes.objectOf,
electric_user: PropTypes.string,
gas: PropTypes.objectOf,
@@ -253,21 +281,6 @@ BillsOverview.propTypes = {
water_user: PropTypes.string,
total_annual_charge: PropTypes.objectOf,
}),
- successMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
- errorMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
- defaultMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
headerStyle: PropTypes.shape({
textAlign: PropTypes.string,
paddingLeft: PropTypes.string,
diff --git a/src/components/Blocnote/FinancialInputs/BillsRow.js b/src/components/Blocnote/FinancialInputs/BillsRow.js
index d0a59b29e8a5c58a2b29b8bad9063f31f0613cbb..a1571eca514888ebb9d0e74541aa3cdf04abfe1b 100644
--- a/src/components/Blocnote/FinancialInputs/BillsRow.js
+++ b/src/components/Blocnote/FinancialInputs/BillsRow.js
@@ -22,10 +22,10 @@ const BillsRow = (props) => {
};
BillsRow.propTypes = {
- dateFrom: PropTypes.number,
- dateTo: PropTypes.number,
- usage: PropTypes.func,
- charge: PropTypes.func,
+ dateFrom: PropTypes.string,
+ dateTo: PropTypes.string,
+ usage: PropTypes.number,
+ charge: PropTypes.string,
};
export default BillsRow;
diff --git a/src/components/Blocnote/FinancialInputs/BillsSummary.js b/src/components/Blocnote/FinancialInputs/BillsSummary.js
index 05b6b1ba4b27932cc471cb0f2937ae149cc85e0c..d4e717b58fef680138c064fa6267b30e4b693ea8 100644
--- a/src/components/Blocnote/FinancialInputs/BillsSummary.js
+++ b/src/components/Blocnote/FinancialInputs/BillsSummary.js
@@ -18,20 +18,20 @@ class BillsSummary extends Component {
const BillsSummaryTables = [];
if (this.state.billsSummary !== null) {
- console.log(this.state.billsSummary); // eslint-disable-line
- Object.keys(this.state.billsSummary).forEach(billName => {
+ Object.keys(this.state.billsSummary).forEach((billName, index) => {
BillsSummaryTables.push(
-
+
);
@@ -82,21 +82,6 @@ BillsSummary.propTypes = {
})
),
}),
- successMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
- errorMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
- defaultMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
headerStyle: PropTypes.shape({
textAlign: PropTypes.string,
paddingLeft: PropTypes.string,
diff --git a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js
index b7479d8d08cdc67d2e2549de1d34c484f9d587c7..5c765e5790fe2d8429f74f59612d06b933e93bc3 100644
--- a/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js
+++ b/src/components/Blocnote/FinancialInputs/BillsSummaryRow.js
@@ -12,6 +12,7 @@ class BillsSummaryRow extends Component {
constructor(props) {
super(props);
this.handleOnChange = this.handleOnChange.bind(this);
+ this.handleCreateBillsSummary = this.handleCreateBillsSummary.bind(this);
this.handleUpdateBillsSummary = this.handleUpdateBillsSummary.bind(this);
this.handleDeleteBillsSummary = this.handleDeleteBillsSummary.bind(this);
this.state = {
@@ -21,9 +22,34 @@ class BillsSummaryRow extends Component {
};
}
+ validateInputs() {
+ const emptyFields = [];
+ if (this.state.year === null || isNaN(this.state.year) || this.state.year === '') {
+ emptyFields.push('Year');
+ }
+ if (this.state.charge === null || isNaN(this.state.charge) || this.state.charge === '') {
+ emptyFields.push('Charge');
+ }
+ if (emptyFields.length > 0) {
+ alert(`Please fill in ${emptyFields.join(', ')} field(s)`);
+ return false;
+ }
+ return true;
+ }
+
+ handleCreateBillsSummary() {
+ if (this.validateInputs() === true) {
+ this.props.createBillsSummary({
+ year: this.state.year,
+ charge: this.state.charge,
+ });
+ }
+ }
+
handleUpdateBillsSummary() {
- console.log(this.state); // eslint-disable-line
- this.props.updateBillsSummary(this.state);
+ if (this.validateInputs() === true) {
+ this.props.updateBillsSummary(this.state);
+ }
}
handleDeleteBillsSummary() {
@@ -31,10 +57,36 @@ class BillsSummaryRow extends Component {
}
handleOnChange = (event) => {
- this.setState({ [event.target.name]: event.target.value });
+ this.setState({ [event.target.name]: event.target.value },
+ () => {
+ this.props.handleOnChange(this.state);
+ },
+ );
}
render() {
+ let actionButton = null;
+
+ if (this.props.id === 0) {
+ actionButton = (
+
+ );
+ } else {
+ actionButton = (
+
+ );
+ }
+
return (
|
@@ -70,10 +122,8 @@ class BillsSummaryRow extends Component {
|
- {' '}
+ {actionButton}
+ {' '}
|
);
}
- let messageStyle = {};
- let messageContent = null;
+ this.state.messageStyle = 'default';
+ this.state.messageContent = null;
- if (this.props.loading) {
- messageContent = 'Processing ...';
- messageStyle = this.props.defaultMessageStyle;
+ if (this.props.loading === true) {
+ this.state.messageContent = 'Processing ...';
}
if (this.props.error && typeof this.props.error === 'object') {
- messageContent = this.props.error.response.statusText;
- messageStyle = this.props.errorMessageStyle;
+ this.state.messageStyle = 'error';
+ this.state.messageContent = this.props.error.response.statusText;
}
if (!this.props.error && !this.props.loading
&& this.props.billData !== null
&& this.state.action !== null) {
- messageContent = this.state.action.charAt(0).toUpperCase() + this.state.action.slice(1);
- messageStyle = this.props.successMessageStyle;
+ this.state.messageStyle = 'success';
+ this.state.messageContent = 'Saved!';
}
const billName = this.props.billName.charAt(0).toUpperCase() + this.props.billName.slice(1);
@@ -173,14 +203,14 @@ class BillsSummaryTable extends Component {
}}
>
{' '}{' '}
+ style={this.state.messageStyle}
+ content={this.state.messageContent}
+ />
@@ -204,21 +234,6 @@ BillsSummaryTable.propTypes = {
id: PropTypes.number,
})
),
- successMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
- errorMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
- defaultMessageStyle: PropTypes.shape({
- color: PropTypes.string,
- paddingLeft: PropTypes.string,
- fontWeight: PropTypes.string,
- }),
createBillsSummary: PropTypes.func,
updateBillsSummary: PropTypes.func,
deleteBillsSummary: PropTypes.func,
diff --git a/src/components/Blocnote/FinancialInputs/BillsTable.js b/src/components/Blocnote/FinancialInputs/BillsTable.js
index 1a2f32a48ae1e855e6f919e87431b1d37e7dde6d..b099048edf3a875261961b1756c14dd63fe64aec 100644
--- a/src/components/Blocnote/FinancialInputs/BillsTable.js
+++ b/src/components/Blocnote/FinancialInputs/BillsTable.js
@@ -10,7 +10,7 @@ import BillsRow from './BillsRow';
class BillsTable extends Component {
constructor(props) {
- global.expandNum = 15;
+ global.expandNum = 5;
super(props);
this.state = {
billsData: (this.props.billsData.length > global.expandNum) ?
@@ -60,7 +60,6 @@ class BillsTable extends Component {
const headerStyle = {
textAlign: 'center',
fontWeight: 'bold',
- // marginBottom: '15px',
padding: '15px',
borderBottom: '1px solid #999999',
background: '#EEEEEE',
@@ -92,10 +91,11 @@ class BillsTable extends Component {
`Showing ${this.state.billsData.length} of ${this.props.billsData.length}` : null;
if (this.state.billsData.length !== 0) {
- rows = this.state.billsData.map((bill) => {
+ rows = this.state.billsData.map((bill, index) => {
// charge = charge.toLocaleString();
return (
- +
+
);
}
if (this.state.showCollapseButton) {
collapseButton = (
-