diff --git a/package-lock.json b/package-lock.json
index e239c10..f8bde55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
@@ -3352,6 +3353,14 @@
}
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.15.3",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+ "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15074,6 +15083,36 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.22.3",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+ "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+ "dependencies": {
+ "@remix-run/router": "1.15.3"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.22.3",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+ "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+ "dependencies": {
+ "@remix-run/router": "1.15.3",
+ "react-router": "6.22.3"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index e74f9ca..b46d741 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
-
- );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..b0dd998
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,59 @@
+import imageLogo from './Logo.png';
+
+import './App.css';
+
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import PageHome from './PageHome';
+import InputWrapped from './components/Input';
+import methods from './components/MethodsInput';
+// const makeInputJSON = methods.makeInputJSON;
+const makeInputJSON = (dictArgs) => {
+ return methods.makeInputJSON(dictArgs);
+}
+// import PageResult from './PageResult';
+// onClick={goToPageHome}
+// require
+
+function App() {
+ /*
+ const navigate = useNavigate();
+ const goToPageHome = () => {
+ navigate.pushState('/PageHome');
+ };
+ */
+ return (
+
+ );
+}
+
+
+export default App;
\ No newline at end of file
diff --git a/src/App.test.js b/src/App.test.jsx
similarity index 100%
rename from src/App.test.js
rename to src/App.test.jsx
diff --git a/src/Logo.png b/src/Logo.png
new file mode 100644
index 0000000..d49d228
Binary files /dev/null and b/src/Logo.png differ
diff --git a/src/PageHome.jsx b/src/PageHome.jsx
new file mode 100644
index 0000000..faa6272
--- /dev/null
+++ b/src/PageHome.jsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import objDefaults from './config'; // { defaultsMyBusiness, defaultsMyBusinessBank, defaultsTheirBusiness, defaultsTheirBusinessContact }
+import MainContentForm from './components/MainContentForm';
+
+const PageHome = () => {
+ const [formInvoiceData, setFormInvoiceData] = useState({
+ ...objDefaults.getValuesDefaultFormMetadata,
+ ...objDefaults.getValuesDefaultMyBusiness,
+ ...objDefaults.getValuesDefaultMyBusinessBank,
+ ...objDefaults.getValuesDefaultTheirBusiness,
+ ...objDefaults.getValuesDefaultTheirBusinessContact,
+ ...objDefaults.getValuesDefaultInvoice
+ });
+ console.log("formInvoiceData:", formInvoiceData);
+ return (
+
+
+
+ )
+};
+
+export default PageHome;
diff --git a/src/components/BlockFormSection.jsx b/src/components/BlockFormSection.jsx
new file mode 100644
index 0000000..62dca12
--- /dev/null
+++ b/src/components/BlockFormSection.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import InputWrapped from './Input';
+
+const BlockFormSection = (props) => {
+ const { titleSection, inputs } = props.data;
+
+ function report(titleSection, inputs) {
+ console.log("BlockFormSection");
+ console.log("titleSection:", titleSection);
+ console.log("inputs:", inputs);
+ console.log("");
+ }
+ report(titleSection, inputs);
+
+ return (
+
+
+ {inputs.map(input => (
+
+ ))}
+
+ );
+};
+
+export default BlockFormSection;
\ No newline at end of file
diff --git a/src/components/ContentFormInvoiceOrEstimate.jsx b/src/components/ContentFormInvoiceOrEstimate.jsx
new file mode 100644
index 0000000..a9fe822
--- /dev/null
+++ b/src/components/ContentFormInvoiceOrEstimate.jsx
@@ -0,0 +1,176 @@
+
+import React, { Component } from 'react';
+import BlockFormSection from './BlockFormSection';
+import methods from './MethodsInput';
+const makeInputJSON = (dictArgs) => {
+ return methods.makeInputJSON(dictArgs);
+}
+
+class ContentFormInvoiceOrEstimate extends Component {
+ constructor(props) {
+ super(props);
+ this.state = this.props.stateMainContentForm;
+ this.initialiseElements();
+ }
+
+ handleChangeStateContentFormInvoiceOrEstimate(stateNew) {
+ const { stateMainContentForm, handleChangeStateMainContentForm } = this.props;
+ this.setState((statePrevious) => ({
+ ...statePrevious,
+ ...stateNew
+ }));
+ handleChangeStateMainContentForm({
+ ...stateMainContentForm,
+ ...stateNew
+ });
+ }
+
+ handleChangeInput(event) {
+ const { elementInput } = event.target;
+ this.handleChangeStateContentFormInvoiceOrEstimate({[elementInput.name]: elementInput.value});
+ }
+
+ initialiseElements() {
+ let typeForm = this.state.values['typeForm'] == "0" ? "Invoice" : "Estimate";
+ let sectionsForm = [
+ {
+ titleSection: typeForm,
+ inputs: [
+ makeInputJSON({id: 'dateBilling' + typeForm, name: 'dateBilling' + typeForm, type: 'date', placeholder: this.state.placeholders['dateBilling' + typeForm], value: this.state.values['dateBilling' + typeForm], textLabel: 'Billing date:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'type' + typeForm, name: 'type' + typeForm, type: 'select', placeholder: this.state.placeholders['type' + typeForm], value: this.state.values['type' + typeForm], options: [
+ {text: 'Goods', value:'0'},
+ {text: 'Services', value:'1'}
+ ], textLabel: 'Invoice type:', onChange: this.handleChangeInput})
+ ]
+ }
+ ];
+ let sectionsGoods = [];
+ if (this.state.values['type' + typeForm] == '0') {
+ sectionsForm = sectionsForm.concat([
+ {
+ titleSection: 'Goods',
+ inputs: [
+ makeInputJSON({id: 'quantityGoods' + typeForm, name: 'quantityGoods' + typeForm, type: 'number', placeholder: this.state.placeholders['quantityGoods' + typeForm], value: this.state.values['quantityGoods' + typeForm], textLabel: 'Number of different goods:', onChange: this.handleChangeInput})
+ ]
+ }
+ ]);
+ if (this.state.values['quantityGoods' + typeForm] > 0) {
+ for (let i = 0; i < this.state.values['quantityGoods' + typeForm]; i++) {
+ sectionsGoods = sectionsGoods.concat([
+ {
+ titleSection: 'Good ' + (i + 1),
+ inputs: [
+ makeInputJSON({id: 'nameGood' + typeForm + (i + 1), name: 'nameGood' + typeForm + (i + 1), type: 'text', placeholder: this.state.placeholders['nameGood' + typeForm + (i + 1)], value: this.state.values['nameGood' + typeForm + (i + 1)], textLabel: 'Name:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'valueGood' + typeForm + (i + 1), name: 'valueGood' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['valueGood' + typeForm + (i + 1)], value: this.state.values['valueGood' + typeForm + (i + 1)], textLabel: 'Value:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'quantityGood' + typeForm + (i + 1), name: 'quantityGood' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityGood' + typeForm + (i + 1)], value: this.state.values['quantityGood' + typeForm + (i + 1)], textLabel: 'Quantity:', onChange: this.handleChangeInput})
+ ]
+ }
+ ]);
+ }
+ }
+ }
+ let sectionsServices = [];
+ let subsectionsServices = [];
+ console.log("this.state.values[" + "type" + typeForm + "]:", this.state.values['type' + typeForm]);
+ if (this.state.values['type' + typeForm] == '1') {
+ sectionsForm = sectionsForm.concat([
+ {
+ titleSection: 'Services',
+ inputs: [
+ makeInputJSON({id: 'quantityServices' + typeForm, name: 'quantityServices' + typeForm, type: 'number', placeholder: this.state.placeholders['quantityServices' + typeForm], value: this.state.values['quantityServices' + typeForm], textLabel: 'Number of different services:', onChange: this.handleChangeInput})
+ ]
+ }
+ ]);
+ console.log("this.state.values[" + 'quantityServices' + typeForm + "]:", this.state.values['quantityServices' + typeForm]);
+ if (this.state.values['quantityServices' + typeForm] > 0) {
+ let j;
+ for (let i = 0; i < this.state.values['quantityServices' + typeForm]; i++) {
+ console.log("adding service " + (i + 1));
+ sectionsServices = sectionsServices.concat([
+ {
+ titleSection: 'Service ' + (i + 1),
+ inputs: [
+ makeInputJSON({id: 'discretisationRateService' + typeForm + (i + 1), name: 'discretisationRateService' + typeForm + (i + 1), type: 'select', placeholder: this.state.placeholders['discretisationRateService' + typeForm + (i + 1)], value: this.state.values['discretisationRateService' + typeForm + (i + 1)], options: [
+ {text: 'Minute', value:'m'},
+ {text: 'Hour', value:'h'},
+ {text: 'Day', value:'d'},
+ {text: 'Week', value:'w'}
+ ], textLabel: 'Rate discretisation:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'quantityDiscretisationRateService' + typeForm + (i + 1), name: 'quantityDiscretisationRateService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityDiscretisationRateService' + typeForm + (i + 1)], value: this.state.values['quantityDiscretisationRateService' + typeForm + (i + 1)], textLabel: 'Quantity of rate discretisations per minimum unit rate:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'rateService' + typeForm + (i + 1), name: 'rateService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['rateService' + typeForm + (i + 1)], value: this.state.values['rateService' + typeForm + (i + 1)], textLabel: 'Rate [£ / hour]:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'discretisationDurationService' + typeForm + (i + 1), name: 'discretisationDurationService' + typeForm + (i + 1), type: 'select', placeholder: this.state.placeholders['discretisationDurationService' + typeForm + (i + 1)], value: this.state.values['discretisationDurationService' + typeForm + (i + 1)], options: [
+ {text: 'Day', value:'d'},
+ {text: 'Week', value:'w'},
+ {text: 'Month', value:'M'},
+ {text: 'Year', value:'y'}
+ ], textLabel: 'Duration discretisation:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'quantityDiscretisationDurationService' + typeForm + (i + 1), name: 'quantityDiscretisationDurationService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityDiscretisationDurationService' + typeForm + (i + 1)], value: this.state.values['quantityDiscretisationDurationService' + typeForm + (i + 1)], textLabel: 'Quantity of duration discretisations per billing period:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'quantityBillingPeriodService' + typeForm + (i + 1), name: 'quantityBillingPeriodService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['quantityBillingPeriodService' + typeForm + (i + 1)], value: this.state.values['quantityBillingPeriodService' + typeForm + (i + 1)], textLabel: 'Quantity of billing periods:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'isIncrementalBillingPeriodIdsService' + typeForm + (i + 1), name: 'isIncrementalBillingPeriodIdsService' + typeForm + (i + 1), type: 'checkbox', placeholder: this.state.placeholders['isIncrementalBillingPeriodIdsService' + typeForm + (i + 1)], value: this.state.values['isIncrementalBillingPeriodIdsService' + typeForm + (i + 1)], textLabel: 'Are billing period IDs incremental?', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'descriptionIncrementalService' + typeForm + (i + 1), name: 'descriptionIncrementalService' + typeForm + (i + 1), type: 'text', placeholder: this.state.placeholders['descriptionIncrementalService' + typeForm + (i + 1)], value: this.state.values['descriptionIncrementalService' + typeForm + (i + 1)], textLabel: 'Description:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'idBillingPeriodFirstIncrementalService' + typeForm + (i + 1), name: 'idBillingPeriodFirstIncrementalService' + typeForm + (i + 1), type: 'number', placeholder: this.state.placeholders['idBillingPeriodFirstIncrementalService' + typeForm + (i + 1)], value: this.state.values['idBillingPeriodFirstIncrementalService' + typeForm + (i + 1)], textLabel: 'First billing period ID:', onChange: this.handleChangeInput})
+ ]
+ }
+ ]);
+ let subsections = [];
+ if (this.state.values['quantityBillingPeriodService' + typeForm + (i + 1)] > 0) {
+ for (j = 0; j < this.state.values['quantityBillingPeriodService' + typeForm + (i + 1)]; j++) {
+ subsections = subsections.concat([
+ {
+ titleSection: 'Service billing period ' + (j + 1),
+ inputs: [
+ makeInputJSON({id: 'descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1), name: 'descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1), type: 'text', placeholder: this.state.placeholders['descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], value: this.state.values['descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], textLabel: 'Description:', onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1), name: 'quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1), type: 'number', placeholder: this.state.placeholders['quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], value: this.state.values['quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], textLabel: 'Quantity of unit rate periods worked:', onChange: this.handleChangeInput})
+ ]
+ }
+ ]);
+ }
+ }
+ subsectionsServices = subsectionsServices.concat(subsections);
+ }
+ }
+ }
+ console.log("this.state.values['typeForm']:", this.state.values['typeForm']);
+ console.log("typeForm:", typeForm);
+ console.log("values:", this.state.values);
+ console.log("sectionsGoods:", sectionsGoods);
+ console.log("sectionsServices:", sectionsServices);
+ console.log("subsectionsServices:", subsectionsServices);
+ const dataInvoiceOrEstimate = {
+ // ...stateContentFormInvoiceOrEstimate,
+ sectionsForm: sectionsForm,
+ sectionsGoods: sectionsGoods,
+ sectionsServices: sectionsServices,
+ subsectionsServices: subsectionsServices,
+ };
+ this.handleChangeStateContentFormInvoiceOrEstimate(dataInvoiceOrEstimate);
+ }
+
+ render() {
+ let typeForm = this.state.values['typeForm'] == "0" ? "Invoice" : "Estimate";
+ return (
+
+ {this.state.sectionsForm.map(section => (
+
+ ))}
+ {(this.state.sectionsGoods.length > 0) && (
+ this.state.sectionsGoods.map(section => (
+
+ ))
+ )}
+ {(this.state.sectionsServices.length > 0) && (
+ this.state.sectionsServices.map(section => (
+
+ ))
+ )}
+ {(this.state.subsectionsServices.length > 0) && (
+ this.state.subsectionsServices.map(section => (
+
+ ))
+ )}
+
+ );
+ }
+}
+
+export default ContentFormInvoiceOrEstimate;
\ No newline at end of file
diff --git a/src/components/ControlsFillDefaults.jsx b/src/components/ControlsFillDefaults.jsx
new file mode 100644
index 0000000..873239d
--- /dev/null
+++ b/src/components/ControlsFillDefaults.jsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+function date2str(date_in) {
+ return date_in.getFullYear().toString() + '-' + (date_in.getMonth() + 1).toString().padStart(2, '0') + '-' + date_in.getDate().toString().padStart(2, '0');
+}
+function getDateBilling() {
+ return date2str(new Date(Date.now.getFullYear(), Date.now.getMonth(), -1));
+}
+function getValuesDefault() {
+ return {
+ typeForm: '0',
+ currency: '0',
+ nameMyBusiness: 'Precision And Research Technology Systems Limited',
+ companyNumberMyBusiness: '13587499',
+ emailMyBusiness: 'edward.middletonsmith@gmail.com',
+ address1MyBusiness: 'Unit 12a',
+ address2MyBusiness: 'Somers Road',
+ address3MyBusiness: 'Rugby',
+ address4MyBusiness: 'Warwickshire',
+ address5MyBusiness: 'CV22 7DH',
+ bankNameMyBusiness: 'Starling',
+ accountNameMyBusiness: 'Precision And Research Technology Systems Limited',
+ accountNumberMyBusiness: '40168366',
+ sortCodeMyBusiness: '60-83-71',
+ nameTheirBusiness: 'Contechs Technical Resourcing Limited',
+ codeTheirBusiness: 'Contechs',
+ emailTheirBusiness: 'account@contechs.co.uk',
+ phoneTheirBusiness: '01268 582900',
+ address1TheirBusiness: '2 Sable Court',
+ address2TheirBusiness: 'Southfields Business Park',
+ address3TheirBusiness: 'Basildon',
+ address4TheirBusiness: 'Essex',
+ address5TheirBusiness: 'SS15 6SR',
+ nameContactTheirBusiness: 'Simon Bant',
+ address1ContactTheirBusiness: 'Jaguar Land Rover',
+ address2ContactTheirBusiness: 'Banbury Road',
+ address3ContactTheirBusiness: 'Gaydon',
+ address4ContactTheirBusiness: 'Warwickshire',
+ address5ContactTheirBusiness: 'CV35 0RR',
+ dateBillingInvoice: getDateBilling(),
+ typeInvoice: '1', // services
+ quantityServicesInvoice: 1,
+
+ discretisationRateServiceInvoice1: 'h',
+ quantityDiscretisationRateServiceInvoice1: 1,
+ rateServiceInvoice1: 23.94,
+ discretisationDurationServiceInvoice1: 'w',
+ quantityDiscretisationDurationServiceInvoice1: 1,
+ quantityBillingPeriodServiceInvoice1: 4,
+ isIncrementalBillingPeriodIdsServiceInvoice1: true,
+ descriptionIncrementalServiceInvoice1: "Contractor services - week ",
+ idBillingPeriodFirstIncrementalServiceInvoice1: 1,
+
+ descriptionIncrementServiceInvoice1s1: "Contractor services - week 1",
+ quantityRatePeriodsIncrementServiceInvoice1s1: 40,
+ descriptionIncrementServiceInvoice1s2: "Contractor services - week 2",
+ quantityRatePeriodsIncrementServiceInvoice1s2: 40,
+ descriptionIncrementServiceInvoice1s3: "Contractor services - week 3",
+ quantityRatePeriodsIncrementServiceInvoice1s3: 40,
+ descriptionIncrementServiceInvoice1s4: "Contractor services - week 4",
+ quantityRatePeriodsIncrementServiceInvoice1s4: 40,
+ };
+}
+
+const ControlsFillDefaults = () => {
+ const defaults = getValuesDefault();
+
+ function getDefaultsMyBusiness() {
+ localStorage.setItem('nameMyBusiness', 'Precision And Research Technology Systems Limited');
+ localStorage.setItem('companyNumberMyBusiness', '13587499');
+ localStorage.setItem('emailMyBusiness', 'edward.middletonsmith@gmail.com');
+ localStorage.setItem('address1', 'Unit 12a');
+ localStorage.setItem('address2', 'Somers Road');
+ localStorage.setItem('address3', 'Rugby');
+ localStorage.setItem('address4', 'Warwickshire');
+ localStorage.setItem('address5', 'CV22 7DH');
+ }
+ function getDefaultsMyBusinessBank() {
+ localStorage.setItem('bankName', 'Starling');
+ localStorage.setItem('accountName', 'Precision And Research Technology Systems Limited');
+ localStorage.setItem('accountNumber', '40168366');
+ localStorage.setItem('sortCode', '60-83-71');
+ }
+ function getDefaultsTheirBusiness() {
+ localStorage.setItem('name', 'Contechs Technical Resourcing Limited');
+ localStorage.setItem('code', 'Contechs');
+ localStorage.setItem('email', 'account@contechs.co.uk');
+ localStorage.setItem('phone', '01268 582900');
+ localStorage.setItem('address1', '2 Sable Court');
+ localStorage.setItem('address2', 'Southfields Business Park');
+ localStorage.setItem('address3', 'Basildon');
+ localStorage.setItem('address4', 'Essex');
+ localStorage.setItem('address5', 'SS15 6SR');
+ }
+ function getDefaultsTheirBusinessContact() {
+ localStorage.setItem('name', 'Simon Bant');
+ localStorage.setItem('address1', 'Jaguar Land Rover');
+ localStorage.setItem('address2', 'Banbury Road');
+ localStorage.setItem('address3', 'Gaydon');
+ localStorage.setItem('address4', 'Warwickshire');
+ localStorage.setItem('address5', 'CV35 0RR');
+ }
+
+ return (
+
+
+
+
+
+ )
+};
+
+export default ControlsFillDefaults;
\ No newline at end of file
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
new file mode 100644
index 0000000..86ff22b
--- /dev/null
+++ b/src/components/Input.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const makeInputJSON = (dictArgs) => {
+ const {id, name, value = null, textLabel = null, type = null, placeholder = null, stepValue = null, minValue = null, options = null, onChange = function() {}} = dictArgs;
+ return {
+ id: id,
+ name: name,
+ value: value,
+ textLabel: textLabel,
+ type: type,
+ placeholder: placeholder,
+ stepValue: stepValue,
+ minValue: minValue,
+ options: options,
+ onChange: onChange
+ };
+};
+
+const InputWrapped = (props) => {
+ const { id, name, value, textLabel, type, placeholder, step, valueMin, options, onChange } = props.data;
+
+ return (
+
+
+ {(type == 'date') && (
+
+ )}
+ {(type == 'text') && (
+
+ )}
+ {(type == 'number') && (
+
+ )}
+ {(type == 'checkbox') && (
+
+ )}
+ {(type == 'select') && (
+
+ )}
+ {(type == 'button') && (
+
+ )}
+
+ )
+};
+
+export default InputWrapped; // { InputWrapped, makeInputJSON };
\ No newline at end of file
diff --git a/src/components/MainContentForm.jsx b/src/components/MainContentForm.jsx
new file mode 100644
index 0000000..a0a8252
--- /dev/null
+++ b/src/components/MainContentForm.jsx
@@ -0,0 +1,175 @@
+import React, { Component } from 'react';
+import BlockFormSection from './BlockFormSection';
+// import getValuesDefault from './ControlsFillDefaults';
+import InputWrapped from './Input';
+import ContentFormInvoiceOrEstimate from './ContentFormInvoiceOrEstimate';
+import methods from './MethodsInput';
+const makeInputJSON = (dictArgs) => {
+ return methods.makeInputJSON(dictArgs);
+}
+
+class MainContentForm extends Component {
+
+ constructor(props) {
+ super(props);
+ const values = {
+ typeForm: "0",
+ currency: '0',
+ nameMyBusiness: '',
+ companyNumberMyBusiness: '',
+ emailMyBusiness: '',
+ address1MyBusiness: '',
+ address2MyBusiness: '',
+ address3MyBusiness: '',
+ address4MyBusiness: '',
+ address5MyBusiness: '',
+ bankNameMyBusiness: '',
+ accountNameMyBusiness: '',
+ accountNumberMyBusiness: '',
+ sortCodeMyBusiness: '',
+ nameTheirBusiness: '',
+ codeTheirBusiness: '',
+ emailTheirBusiness: '',
+ phoneTheirBusiness: '',
+ address1TheirBusiness: '',
+ address2TheirBusiness: '',
+ address3TheirBusiness: '',
+ address4TheirBusiness: '',
+ address5TheirBusiness: '',
+ nameContactTheirBusiness: '',
+ address1ContactTheirBusiness: '',
+ address2ContactTheirBusiness: '',
+ address3ContactTheirBusiness: '',
+ address4ContactTheirBusiness: '',
+ address5ContactTheirBusiness: '',
+ typeInvoice: '',
+ quantityServicesInvoice: '',
+ discretisationRateServiceInvoice1: '',
+ quantityDiscretisationRateServiceInvoice1: '',
+ rateServiceInvoice1: '',
+ discretisationDurationServiceInvoice1: '',
+ quantityDiscretisationDurationServiceInvoice1: '',
+ quantityBillingPeriodServiceInvoice1: '',
+ isIncrementalBillingPeriodIdsServiceInvoice1: '',
+ descriptionIncrementalServiceInvoice1: '',
+ idBillingPeriodFirstIncrementalServiceInvoice1: '',
+ descriptionIncrementServiceInvoice1s1: '',
+ quantityRatePeriodsIncrementServiceInvoice1s1: '',
+ descriptionIncrementServiceInvoice1s2: '',
+ quantityRatePeriodsIncrementServiceInvoice1s2: '',
+ descriptionIncrementServiceInvoice1s3: '',
+ quantityRatePeriodsIncrementServiceInvoice1s3: '',
+ descriptionIncrementServiceInvoice1s4: '',
+ quantityRatePeriodsIncrementServiceInvoice1s4: ''
+ };
+ this.state = { values: {...values, ...props.values }, placeholders: props.placeholders, sectionsMainContentForm: [], sectionsForm: [], sectionsGoods: [], sectionsServices: [], subsectionsServices: []};
+ console.log("placeholders: ", props.placeholders);
+ this.initialiseElements();
+ }
+
+ handleChangeStateMainContentForm(stateNew) {
+ this.setState((statePrevious) => ({
+ ...statePrevious,
+ ...stateNew
+ }));
+ }
+
+ handleChangeInput(event) {
+ const { elementInput } = event.target;
+ this.handleChangeStateMainContentForm({[elementInput.name]: elementInput.value});
+ }
+
+ initialiseElements() {
+ let sectionsMainContentForm = [
+ {
+ titleSection: 'Invoice Metadata',
+ inputs: [
+ makeInputJSON({id: 'typeForm', name: 'typeForm', value: this.state.values['typeForm'], textLabel: 'Form type:', type: 'select', placeholder: this.state.placeholders['typeForm'], options: [
+ {text: '-', value: '0'},
+ {text: 'INVOICE', value: '1'},
+ {text: 'ESTIMATE', value: '2'},
+ {text: 'PAYMENT-PLAN', value: '3'}
+ ], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'currency', name: 'currency', value: this.state.values['currency'], textLabel: 'Currency:', type: 'select', options: [
+ {text: '£', value: '0'},
+ {text: '$', value: '1'},
+ {text: '€', value: '2'},
+ {text: 'Other', value: '3'}
+ ], onChange: this.handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'My Business Details',
+ inputs: [
+ makeInputJSON({id: 'nameMyBusiness', name: 'nameMyBusiness', value: this.state.values['nameMyBusiness'], textLabel: 'Name:', type: 'text', placeholder: this.state.placeholders['nameMyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'companyNumberMyBusiness', name: 'companyNumberMyBusiness', value: this.state.values['companyNumberMyBusiness'], textLabel: 'Company number:', type: 'text', placeholder: this.state.placeholders['companyNumberMyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'emailMyBusiness', name: 'emailMyBusiness', value: this.state.values['emailMyBusiness'], textLabel: 'Email:', type:'text', placeholder: this.state.placeholders['emailMyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address1MyBusiness', name: 'address1MyBusiness', value: this.state.values['address1MyBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: this.state.placeholders['address1MyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address2MyBusiness', name: 'address2MyBusiness', value: this.state.values['address2MyBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: this.state.placeholders['address2MyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address3MyBusiness', name: 'address3MyBusiness', value: this.state.values['address3MyBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: this.state.placeholders['address3MyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address4MyBusiness', name: 'address4MyBusiness', value: this.state.values['address4MyBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: this.state.placeholders['address4MyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address5MyBusiness', name: 'address5MyBusiness', value: this.state.values['address5MyBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: this.state.placeholders['address5MyBusiness'], onChange: this.handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'My Business Bank Details',
+ inputs: [
+ makeInputJSON({id: 'nameBankMyBusiness', name: 'nameBankMyBusiness', value: this.state.values['nameBankMyBusiness'], textLabel: 'Bank name:', type:'text', placeholder: this.state.placeholders['nameBankMyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'accountNameBankMyBusiness', name: 'accountNameBankMyBusiness', value: this.state.values['accountNameBankMyBusiness'], textLabel: 'Account name:', type:'text', placeholder: this.state.placeholders['accountNameBankMyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'accountNumberBankMyBusiness', name: 'accountNumberBankMyBusiness', value: this.state.values['accountNumberBankMyBusiness'], textLabel: 'Account number:', type:'text', placeholder: this.state.placeholders['accountNumberBankMyBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'sortCodeBankMyBusiness', name: 'sortCodeBankMyBusiness', value: this.state.values['sortCodeBankMyBusiness'], textLabel: 'Sort code:', type:'text', placeholder: this.state.placeholders['sortCodeBankMyBusiness'], onChange: this.handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'Their Business Details',
+ inputs: [
+ makeInputJSON({id: 'nameTheirBusiness', name: 'nameTheirBusiness', value: this.state.values['nameTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: this.state.placeholders['nameTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'codeTheirBusiness', name: 'codeTheirBusiness', value: this.state.values['codeTheirBusiness'], textLabel: 'Code:', type:'text', placeholder: this.state.placeholders['codeTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'emailTheirBusiness', name: 'emailTheirBusiness', value: this.state.values['emailTheirBusiness'], textLabel: 'Email:', type:'text', placeholder: this.state.placeholders['emailTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'phoneTheirBusiness', name: 'phoneTheirBusiness', value: this.state.values['phoneTheirBusiness'], textLabel: 'Phone:', type:'text', placeholder: this.state.placeholders['phoneTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address1TheirBusiness', name: 'address1TheirBusiness', value: this.state.values['address1TheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: this.state.placeholders['address1TheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address2TheirBusiness', name: 'address2TheirBusiness', value: this.state.values['address2TheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: this.state.placeholders['address2TheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address3TheirBusiness', name: 'address3TheirBusiness', value: this.state.values['address3TheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: this.state.placeholders['address3TheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address4TheirBusiness', name: 'address4TheirBusiness', value: this.state.values['address4TheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: this.state.placeholders['address4TheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address5TheirBusiness', name: 'address5TheirBusiness', value: this.state.values['address5TheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: this.state.placeholders['address5TheirBusiness'], onChange: this.handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'Their Business Contact Details',
+ inputs: [
+ makeInputJSON({id: 'nameContactTheirBusiness', name: 'nameContactTheirBusiness', value: this.state.values['nameContactTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: this.state.placeholders['nameContactTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address1ContactTheirBusiness', name: 'address1ContactTheirBusiness', value: this.state.values['address1ContactTheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: this.state.placeholders['address1ContactTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address2ContactTheirBusiness', name: 'address2ContactTheirBusiness', value: this.state.values['address2ContactTheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: this.state.placeholders['address2ContactTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address3ContactTheirBusiness', name: 'address3ContactTheirBusiness', value: this.state.values['address3ContactTheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: this.state.placeholders['address3ContactTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address4ContactTheirBusiness', name: 'address4ContactTheirBusiness', value: this.state.values['address4ContactTheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: this.state.placeholders['address4ContactTheirBusiness'], onChange: this.handleChangeInput}),
+ makeInputJSON({id: 'address5ContactTheirBusiness', name: 'address5ContactTheirBusiness', value: this.state.values['address5ContactTheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: this.state.placeholders['address5ContactTheirBusiness'], onChange: this.handleChangeInput})
+ ]
+ }
+ ];
+ this.handleChangeStateMainContentForm({ sectionsMainContentForm: sectionsMainContentForm });
+ }
+ handleSubmit() { };
+ clearForm() { };
+
+ render() {
+ let typeForm = this.state.values['typeForm'] == "0" ? "Invoice" : "Estimate";
+ return (
+
+ );
+ }
+}
+
+export default MainContentForm;
\ No newline at end of file
diff --git a/src/components/MainContentForm_functional.jsx b/src/components/MainContentForm_functional.jsx
new file mode 100644
index 0000000..290357b
--- /dev/null
+++ b/src/components/MainContentForm_functional.jsx
@@ -0,0 +1,322 @@
+import React, {useEffect, useState} from 'react';
+import BlockFormSection from './BlockFormSection';
+import getValuesDefault from './ControlsFillDefaults';
+import InputWrapped from './Input';
+import ContentFormInvoiceOrEstimate from './ContentFormInvoiceOrEstimate';
+import methods from './MethodsInput';
+const makeInputJSON = (dictArgs) => {
+ return methods.makeInputJSON(dictArgs);
+}
+
+const getValuesDefaultFromPlaceholders = (placeholdersDefault) => {
+ const values = {
+ typeForm: "0",
+ currency: '0',
+ nameMyBusiness: '',
+ companyNumberMyBusiness: '',
+ emailMyBusiness: '',
+ address1MyBusiness: '',
+ address2MyBusiness: '',
+ address3MyBusiness: '',
+ address4MyBusiness: '',
+ address5MyBusiness: '',
+ bankNameMyBusiness: '',
+ accountNameMyBusiness: '',
+ accountNumberMyBusiness: '',
+ sortCodeMyBusiness: '',
+ nameTheirBusiness: '',
+ codeTheirBusiness: '',
+ emailTheirBusiness: '',
+ phoneTheirBusiness: '',
+ address1TheirBusiness: '',
+ address2TheirBusiness: '',
+ address3TheirBusiness: '',
+ address4TheirBusiness: '',
+ address5TheirBusiness: '',
+ nameContactTheirBusiness: '',
+ address1ContactTheirBusiness: '',
+ address2ContactTheirBusiness: '',
+ address3ContactTheirBusiness: '',
+ address4ContactTheirBusiness: '',
+ address5ContactTheirBusiness: '',
+ typeInvoice: '',
+ quantityServicesInvoice: '',
+ discretisationRateServiceInvoice1: '',
+ quantityDiscretisationRateServiceInvoice1: '',
+ rateServiceInvoice1: '',
+ discretisationDurationServiceInvoice1: '',
+ quantityDiscretisationDurationServiceInvoice1: '',
+ quantityBillingPeriodServiceInvoice1: '',
+ isIncrementalBillingPeriodIdsServiceInvoice1: '',
+ descriptionIncrementalServiceInvoice1: '',
+ idBillingPeriodFirstIncrementalServiceInvoice1: '',
+ descriptionIncrementServiceInvoice1s1: '',
+ quantityRatePeriodsIncrementServiceInvoice1s1: '',
+ descriptionIncrementServiceInvoice1s2: '',
+ quantityRatePeriodsIncrementServiceInvoice1s2: '',
+ descriptionIncrementServiceInvoice1s3: '',
+ quantityRatePeriodsIncrementServiceInvoice1s3: '',
+ descriptionIncrementServiceInvoice1s4: '',
+ quantityRatePeriodsIncrementServiceInvoice1s4: ''
+ }; // = placeholdersDefault;
+ /*
+ const combined = {};
+ for (const key in values) {
+ if (placeholdersDefault.hasOwnProperty(key)) {
+ combined[key] = placeholdersDefault[key];
+ }
+ else {
+ combined[key] = values[key];
+ }
+ }
+ return combined;
+ */
+ return Object.keys(values).reduce((result, key) => {
+ if (placeholdersDefault.hasOwnProperty(key)) {
+ result[key] = placeholdersDefault[key];
+ } else {
+ result[key] = values[key];
+ }
+ return result;
+ }, {});
+ /*{
+ typeForm: typeForm,
+ currency: currency,
+ nameMyBusiness: nameMyBusiness,
+ companyNumberMyBusiness: companyNumberMyBusiness,
+ emailMyBusiness: emailMyBusiness,
+ address1MyBusiness: address1MyBusiness,
+ address2MyBusiness: address2MyBusiness,
+ address3MyBusiness: address3MyBusiness,
+ address4MyBusiness: address4MyBusiness,
+ address5MyBusiness: address5MyBusiness,
+ bankNameMyBusiness: bankNameMyBusiness,
+ accountNameMyBusiness: accountNameMyBusiness,
+ accountNumberMyBusiness: accountNumberMyBusiness,
+ sortCodeMyBusiness: sortCodeMyBusiness,
+ nameTheirBusiness: nameTheirBusiness,
+ codeTheirBusiness: codeTheirBusiness,
+ emailTheirBusiness: emailTheirBusiness,
+ phoneTheirBusiness: phoneTheirBusiness,
+ address1TheirBusiness: address1TheirBusiness,
+ address2TheirBusiness: address2TheirBusiness,
+ address3TheirBusiness: address3TheirBusiness,
+ address4TheirBusiness: address4TheirBusiness,
+ address5TheirBusiness: address5TheirBusiness,
+ nameContactTheirBusiness: nameContactTheirBusiness,
+ address1ContactTheirBusiness: address1ContactTheirBusiness,
+ address2ContactTheirBusiness: address2ContactTheirBusiness,
+ address3ContactTheirBusiness: address3ContactTheirBusiness,
+ address4ContactTheirBusiness: address4ContactTheirBusiness,
+ address5ContactTheirBusiness: address5ContactTheirBusiness,
+ typeInvoice: typeInvoice,
+ quantityServicesInvoice: quantityServicesInvoice,
+ discretisationRateServiceInvoice1: discretisationRateServiceInvoice1,
+ quantityDiscretisationRateServiceInvoice1: quantityDiscretisationRateServiceInvoice1,
+ rateServiceInvoice1: rateServiceInvoice1,
+ discretisationDurationServiceInvoice1: discretisationDurationServiceInvoice1,
+ quantityDiscretisationDurationServiceInvoice1: quantityDiscretisationDurationServiceInvoice1,
+ quantityBillingPeriodServiceInvoice1: quantityBillingPeriodServiceInvoice1,
+ isIncrementalBillingPeriodIdsServiceInvoice1: isIncrementalBillingPeriodIdsServiceInvoice1,
+ descriptionIncrementalServiceInvoice1: descriptionIncrementalServiceInvoice1,
+ idBillingPeriodFirstIncrementalServiceInvoice1: idBillingPeriodFirstIncrementalServiceInvoice1,
+ descriptionIncrementServiceInvoice1s1: descriptionIncrementServiceInvoice1s1,
+ quantityRatePeriodsIncrementServiceInvoice1s1: quantityRatePeriodsIncrementServiceInvoice1s1,
+ descriptionIncrementServiceInvoice1s2: descriptionIncrementServiceInvoice1s2,
+ quantityRatePeriodsIncrementServiceInvoice1s2: quantityRatePeriodsIncrementServiceInvoice1s2,
+ descriptionIncrementServiceInvoice1s3: descriptionIncrementServiceInvoice1s3,
+ quantityRatePeriodsIncrementServiceInvoice1s3: quantityRatePeriodsIncrementServiceInvoice1s3,
+ descriptionIncrementServiceInvoice1s4: descriptionIncrementServiceInvoice1s4,
+ quantityRatePeriodsIncrementServiceInvoice1s4: quantityRatePeriodsIncrementServiceInvoice1s4
+ };*/
+}
+
+const MainContentForm = (props) => {
+ const placeholdersDefault = props.data;
+ // const valuesDefault = getValuesDefault();
+ console.log("placeholders: ", placeholdersDefault);
+ const values = {
+ typeForm: "0",
+ currency: '0',
+ nameMyBusiness: '',
+ companyNumberMyBusiness: '',
+ emailMyBusiness: '',
+ address1MyBusiness: '',
+ address2MyBusiness: '',
+ address3MyBusiness: '',
+ address4MyBusiness: '',
+ address5MyBusiness: '',
+ bankNameMyBusiness: '',
+ accountNameMyBusiness: '',
+ accountNumberMyBusiness: '',
+ sortCodeMyBusiness: '',
+ nameTheirBusiness: '',
+ codeTheirBusiness: '',
+ emailTheirBusiness: '',
+ phoneTheirBusiness: '',
+ address1TheirBusiness: '',
+ address2TheirBusiness: '',
+ address3TheirBusiness: '',
+ address4TheirBusiness: '',
+ address5TheirBusiness: '',
+ nameContactTheirBusiness: '',
+ address1ContactTheirBusiness: '',
+ address2ContactTheirBusiness: '',
+ address3ContactTheirBusiness: '',
+ address4ContactTheirBusiness: '',
+ address5ContactTheirBusiness: '',
+ typeInvoice: '',
+ quantityServicesInvoice: '',
+ discretisationRateServiceInvoice1: '',
+ quantityDiscretisationRateServiceInvoice1: '',
+ rateServiceInvoice1: '',
+ discretisationDurationServiceInvoice1: '',
+ quantityDiscretisationDurationServiceInvoice1: '',
+ quantityBillingPeriodServiceInvoice1: '',
+ isIncrementalBillingPeriodIdsServiceInvoice1: '',
+ descriptionIncrementalServiceInvoice1: '',
+ idBillingPeriodFirstIncrementalServiceInvoice1: '',
+ descriptionIncrementServiceInvoice1s1: '',
+ quantityRatePeriodsIncrementServiceInvoice1s1: '',
+ descriptionIncrementServiceInvoice1s2: '',
+ quantityRatePeriodsIncrementServiceInvoice1s2: '',
+ descriptionIncrementServiceInvoice1s3: '',
+ quantityRatePeriodsIncrementServiceInvoice1s3: '',
+ descriptionIncrementServiceInvoice1s4: '',
+ quantityRatePeriodsIncrementServiceInvoice1s4: ''
+ };
+ const valuesDefault = { ...values, ...placeholdersDefault }; // getValuesDefaultFromPlaceholders(placeholdersDefault);
+ let typeForm = valuesDefault['typeForm'] == 0 ? 'Invoice' : 'Estimate';
+
+ const [stateMainContentForm, setStateMainContentForm] = useState({ sectionsMainContentForm: [], sectionsForm: [], sectionsGoods: [], sectionsServices: [], subsectionsServices: []});
+ const handleChangeStateMainContentForm = (stateNew) => {
+ setStateMainContentForm(stateNew);
+ };
+ const handleChangeInputMainContentForm = (event) => {
+ const { elementInput } = event.target;
+ let valueInput = {};
+ valueInput[elementInput.name] = elementInput.value;
+ handleChangeStateMainContentForm({
+ ...stateMainContentForm,
+ ...valueInput
+ });
+ };
+
+ useEffect(() => {
+ const dataMainContentForm = {
+ ...stateMainContentForm,
+ sectionsMainContentForm: [
+ {
+ titleSection: 'Invoice Metadata',
+ inputs: [
+ makeInputJSON({id: 'typeForm', name: 'typeForm', value: valuesDefault['typeForm'], textLabel: 'Form type:', type: 'select', placeholder: placeholdersDefault['typeForm'], options: [
+ {text: '-', value: '0'},
+ {text: 'INVOICE', value: '1'},
+ {text: 'ESTIMATE', value: '2'},
+ {text: 'PAYMENT-PLAN', value: '3'}
+ ], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'currency', name: 'currency', value: valuesDefault['currency'], textLabel: 'Currency:', type: 'select', options: [
+ {text: '£', value: '0'},
+ {text: '$', value: '1'},
+ {text: '€', value: '2'},
+ {text: 'Other', value: '3'}
+ ], onChange: handleChangeInputMainContentForm})
+ ]
+ },
+ {
+ titleSection: 'My Business Details',
+ inputs: [
+ makeInputJSON({id: 'nameMyBusiness', name: 'nameMyBusiness', value: valuesDefault['nameMyBusiness'], textLabel: 'Name:', type: 'text', placeholder: placeholdersDefault['nameMyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'companyNumberMyBusiness', name: 'companyNumberMyBusiness', value: valuesDefault['companyNumberMyBusiness'], textLabel: 'Company number:', type: 'text', placeholder: placeholdersDefault['companyNumberMyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'emailMyBusiness', name: 'emailMyBusiness', value: valuesDefault['emailMyBusiness'], textLabel: 'Email:', type:'text', placeholder: placeholdersDefault['emailMyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address1MyBusiness', name: 'address1MyBusiness', value: valuesDefault['address1MyBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: placeholdersDefault['address1MyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address2MyBusiness', name: 'address2MyBusiness', value: valuesDefault['address2MyBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: placeholdersDefault['address2MyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address3MyBusiness', name: 'address3MyBusiness', value: valuesDefault['address3MyBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: placeholdersDefault['address3MyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address4MyBusiness', name: 'address4MyBusiness', value: valuesDefault['address4MyBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: placeholdersDefault['address4MyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address5MyBusiness', name: 'address5MyBusiness', value: valuesDefault['address5MyBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: placeholdersDefault['address5MyBusiness'], onChange: handleChangeInputMainContentForm})
+ ]
+ },
+ {
+ titleSection: 'My Business Bank Details',
+ inputs: [
+ makeInputJSON({id: 'nameBankMyBusiness', name: 'nameBankMyBusiness', value: valuesDefault['nameBankMyBusiness'], textLabel: 'Bank name:', type:'text', placeholder: placeholdersDefault['nameBankMyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'accountNameBankMyBusiness', name: 'accountNameBankMyBusiness', value: valuesDefault['accountNameBankMyBusiness'], textLabel: 'Account name:', type:'text', placeholder: placeholdersDefault['accountNameBankMyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'accountNumberBankMyBusiness', name: 'accountNumberBankMyBusiness', value: valuesDefault['accountNumberBankMyBusiness'], textLabel: 'Account number:', type:'text', placeholder: placeholdersDefault['accountNumberBankMyBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'sortCodeBankMyBusiness', name: 'sortCodeBankMyBusiness', value: valuesDefault['sortCodeBankMyBusiness'], textLabel: 'Sort code:', type:'text', placeholder: placeholdersDefault['sortCodeBankMyBusiness'], onChange: handleChangeInputMainContentForm})
+ ]
+ },
+ {
+ titleSection: 'Their Business Details',
+ inputs: [
+ makeInputJSON({id: 'nameTheirBusiness', name: 'nameTheirBusiness', value: valuesDefault['nameTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: placeholdersDefault['nameTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'codeTheirBusiness', name: 'codeTheirBusiness', value: valuesDefault['codeTheirBusiness'], textLabel: 'Code:', type:'text', placeholder: placeholdersDefault['codeTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'emailTheirBusiness', name: 'emailTheirBusiness', value: valuesDefault['emailTheirBusiness'], textLabel: 'Email:', type:'text', placeholder: placeholdersDefault['emailTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'phoneTheirBusiness', name: 'phoneTheirBusiness', value: valuesDefault['phoneTheirBusiness'], textLabel: 'Phone:', type:'text', placeholder: placeholdersDefault['phoneTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address1TheirBusiness', name: 'address1TheirBusiness', value: valuesDefault['address1TheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: placeholdersDefault['address1TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address2TheirBusiness', name: 'address2TheirBusiness', value: valuesDefault['address2TheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: placeholdersDefault['address2TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address3TheirBusiness', name: 'address3TheirBusiness', value: valuesDefault['address3TheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: placeholdersDefault['address3TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address4TheirBusiness', name: 'address4TheirBusiness', value: valuesDefault['address4TheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: placeholdersDefault['address4TheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address5TheirBusiness', name: 'address5TheirBusiness', value: valuesDefault['address5TheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: placeholdersDefault['address5TheirBusiness'], onChange: handleChangeInputMainContentForm})
+ ]
+ },
+ {
+ titleSection: 'Their Business Contact Details',
+ inputs: [
+ makeInputJSON({id: 'nameContactTheirBusiness', name: 'nameContactTheirBusiness', value: valuesDefault['nameContactTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: placeholdersDefault['nameContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address1ContactTheirBusiness', name: 'address1ContactTheirBusiness', value: valuesDefault['address1ContactTheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: placeholdersDefault['address1ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address2ContactTheirBusiness', name: 'address2ContactTheirBusiness', value: valuesDefault['address2ContactTheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: placeholdersDefault['address2ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address3ContactTheirBusiness', name: 'address3ContactTheirBusiness', value: valuesDefault['address3ContactTheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: placeholdersDefault['address3ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address4ContactTheirBusiness', name: 'address4ContactTheirBusiness', value: valuesDefault['address4ContactTheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: placeholdersDefault['address4ContactTheirBusiness'], onChange: handleChangeInputMainContentForm}),
+ makeInputJSON({id: 'address5ContactTheirBusiness', name: 'address5ContactTheirBusiness', value: valuesDefault['address5ContactTheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: placeholdersDefault['address5ContactTheirBusiness'], onChange: handleChangeInputMainContentForm})
+ ]
+ }
+ ]
+ };
+ handleChangeStateMainContentForm(dataMainContentForm);
+ }, [placeholdersDefault, valuesDefault]);
+
+ /*
+ const handleButtonClick = () => {
+ const inputsUpdated = dataForm.inputs.map(input => ({
+ ...input,
+ value: 'Default value for input ${input.id}'
+ }));
+ setDataForm({
+ ...dataForm,
+ inputs: inputsUpdated
+ });
+ };
+ */
+ const handleSubmit = () => {
+ };
+ const clearForm = () => {
+ };
+
+ const fillDefaults = () => {
+ /*
+ for (let i = 0; i < valuesDefault.length; i++)
+ {
+
+ }
+ */
+ };
+
+ return (
+
+ );
+};
+
+export default MainContentForm;
\ No newline at end of file
diff --git a/src/components/MethodsInput.jsx b/src/components/MethodsInput.jsx
new file mode 100644
index 0000000..c6709b8
--- /dev/null
+++ b/src/components/MethodsInput.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const makeInputJSON = (dictArgs) => {
+ const {id, name, value = null, textLabel = null, type = null, placeholder = null, stepValue = null, minValue = null, options = null, onChange = null} = dictArgs;
+ return {
+ id: id,
+ name: name,
+ value: value,
+ textLabel: textLabel,
+ type: type,
+ placeholder: placeholder,
+ stepValue: stepValue,
+ minValue: minValue,
+ options: options,
+ onChange: onChange
+ };
+};
+
+const methods = { makeInputJSON }
+export default methods;
\ No newline at end of file
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..900e126
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,77 @@
+
+
+const getValuesDefaultFormMetadata = {
+ typeForm: '0',
+ currency: '0',
+};
+const getValuesDefaultMyBusiness = {
+ nameMyBusiness: 'Precision And Research Technology Systems Limited',
+ companyNumberMyBusiness: '13587499',
+ emailMyBusiness: 'edward.middletonsmith@gmail.com',
+ address1MyBusiness: 'Unit 12a',
+ address2MyBusiness: 'Somers Road',
+ address3MyBusiness: 'Rugby',
+ address4MyBusiness: 'Warwickshire',
+ address5MyBusiness: 'CV22 7DH',
+};
+const getValuesDefaultMyBusinessBank = {
+ bankNameMyBusiness: 'Starling',
+ accountNameMyBusiness: 'Precision And Research Technology Systems Limited',
+ accountNumberMyBusiness: '40168366',
+ sortCodeMyBusiness: '60-83-71',
+};
+const getValuesDefaultTheirBusiness = {
+ nameTheirBusiness: 'Contechs Technical Resourcing Limited',
+ codeTheirBusiness: 'Contechs',
+ emailTheirBusiness: 'account@contechs.co.uk',
+ phoneTheirBusiness: '01268 582900',
+ address1TheirBusiness: '2 Sable Court',
+ address2TheirBusiness: 'Southfields Business Park',
+ address3TheirBusiness: 'Basildon',
+ address4TheirBusiness: 'Essex',
+ address5TheirBusiness: 'SS15 6SR',
+};
+const getValuesDefaultTheirBusinessContact = {
+ nameContactTheirBusiness: 'Simon Bant',
+ address1ContactTheirBusiness: 'Jaguar Land Rover',
+ address2ContactTheirBusiness: 'Banbury Road',
+ address3ContactTheirBusiness: 'Gaydon',
+ address4ContactTheirBusiness: 'Warwickshire',
+ address5ContactTheirBusiness: 'CV35 0RR',
+};
+
+
+function date2str(date_in) {
+ return date_in.getFullYear().toString() + '-' + (date_in.getMonth() + 1).toString().padStart(2, '0') + '-' + date_in.getDate().toString().padStart(2, '0');
+}
+function getDateBilling() {
+ let nowTime = new Date(Date.now());
+ return date2str(new Date(nowTime.getFullYear(), nowTime.getMonth(), -1));
+}
+const getValuesDefaultInvoice = {
+ dateBillingInvoice: getDateBilling(),
+ typeInvoice: '1', // services
+ quantityServicesInvoice: 1,
+
+ discretisationRateServiceInvoice1: 'h',
+ quantityDiscretisationRateServiceInvoice1: 1,
+ rateServiceInvoice1: 23.94,
+ discretisationDurationServiceInvoice1: 'w',
+ quantityDiscretisationDurationServiceInvoice1: 1,
+ quantityBillingPeriodServiceInvoice1: 4,
+ isIncrementalBillingPeriodIdsServiceInvoice1: true,
+ descriptionIncrementalServiceInvoice1: "Contractor services - week ",
+ idBillingPeriodFirstIncrementalServiceInvoice1: 1,
+
+ descriptionIncrementServiceInvoice1s1: "Contractor services - week 1",
+ quantityRatePeriodsIncrementServiceInvoice1s1: 40,
+ descriptionIncrementServiceInvoice1s2: "Contractor services - week 2",
+ quantityRatePeriodsIncrementServiceInvoice1s2: 40,
+ descriptionIncrementServiceInvoice1s3: "Contractor services - week 3",
+ quantityRatePeriodsIncrementServiceInvoice1s3: 40,
+ descriptionIncrementServiceInvoice1s4: "Contractor services - week 4",
+ quantityRatePeriodsIncrementServiceInvoice1s4: 40,
+};
+
+const objReturn = { getValuesDefaultFormMetadata, getValuesDefaultMyBusiness, getValuesDefaultMyBusinessBank, getValuesDefaultTheirBusiness, getValuesDefaultTheirBusinessContact, getValuesDefaultInvoice };
+export default objReturn;
\ No newline at end of file
diff --git a/src/download.png b/src/download.png
new file mode 100644
index 0000000..7a56542
Binary files /dev/null and b/src/download.png differ
diff --git a/src/index.css b/src/index.css
index ec2585e..ec418ad 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,155 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ font-family: 'Arial', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: lightpink;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+div {
+ width: 100%;
+ display: inline-block;
+}
+
+/* Inputs */
+input, button {
+ margin: 5px;
+ height: 4vh;
+ width: 20vw;
+ border-radius: 1vh;
+ border-color: darkviolet;
+ padding: 3px 10px 3px;
+}
+
+select {
+ height: 3vh;
+ width: 100px;
+ border-radius: 1vh;
+ border-width: 2px;
+ border-color: darkviolet;
+ padding: 3px 10px 3px;
+}
+
+
+datalist {
+
+ /* display: flex;
+ display: block;
+ position: relative; */
+}
+option {
+ border-color: darkviolet;
+}
+
+input[type="text"] {
+ border-radius: 1vh;
+}
+
+input[type="number"] {
+ width: 3vw;
+}
+
+input[type="date"] {
+ width: 8vw;
+}
+
+input[type="checkbox"] {
+-moz-appearance:none;
+-webkit-appearance:none;
+-o-appearance:none;
+ outline: none;
+ content: none;
+ width: 50px;
+}
+input[type="checkbox"]:before {
+ width: 30px;
+ height: 30px;
+ content: '✓';
+ font-size: 20px;
+ font-style: bold;
+ text-align: center;
+ border-radius: 5px;
+ border: 2px solid darkviolet;
+ background-color: white;
+ color: transparent;
+ display: inline-block;
+ margin-top: 0px;
+ margin-bottom: 20px;
+}
+input[type="checkbox"]:checked:before {
+ color: black;
+}
+
+
+/* Labels */
+label {
+ margin: 5px;
+}
+
+.div_title {
+ font-size: 24px;
+}
+
+.input_title {
+ font-size: 20px;
+}
+
+.input_subtitle {
+ font-size: 18px;
+}
+
+.errmsg {
+ display: none;
+ visibility: hidden;
+}
+
+
+
+/* table */
+.div_label_input {
+ margin: auto;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.input_label {
+ box-sizing: border-box;
+ flex: 1;
+ margin: 1rem;
+ padding: 1rem;
+ border-radius: 5px;
+ width: 100%;
+}
+
+.input_label.label_title {
+ margin: 0;
+ padding: 0;
+ font-size: 20px;
+}
+
+.tbl_container {
+ display: flex;
+ flex-wrap: flex;
+ justify-content: center;
+}
+
+label.input_label {
+ padding-left: 5% !important;
+ padding-right: 5% !important;
+}
+
+.column {
+ align-items: center;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..4536cf8
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/src/logo192.png b/src/logo192.png
new file mode 100644
index 0000000..d49d228
Binary files /dev/null and b/src/logo192.png differ