Initial commit. Functional approach
This commit is contained in:
39
package-lock.json
generated
39
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
25
src/App.js
25
src/App.js
@@ -1,25 +0,0 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
59
src/App.jsx
Normal file
59
src/App.jsx
Normal file
@@ -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 (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={imageLogo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
<Router>
|
||||
<div>
|
||||
<Routes>
|
||||
<Route path="/" element={<PageHome/>}></Route>
|
||||
<Route path="/PageHome" component={<PageHome/>}></Route>
|
||||
</Routes>
|
||||
</div>
|
||||
{/*
|
||||
<Link to="/PageHome">
|
||||
<InputWrapped data={makeInputJSON({type: "button", textLabel: "Input form"})} />
|
||||
</Link>
|
||||
*/}
|
||||
</Router>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default App;
|
||||
BIN
src/Logo.png
Normal file
BIN
src/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
22
src/PageHome.jsx
Normal file
22
src/PageHome.jsx
Normal file
@@ -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 (
|
||||
<div>
|
||||
<MainContentForm data={formInvoiceData} />
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default PageHome;
|
||||
25
src/components/BlockFormSection.jsx
Normal file
25
src/components/BlockFormSection.jsx
Normal file
@@ -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 (
|
||||
<div>
|
||||
<label className="input_label">{titleSection}</label>
|
||||
{inputs.map(input => (
|
||||
<InputWrapped key={input.id} data={input} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockFormSection;
|
||||
176
src/components/ContentFormInvoiceOrEstimate.jsx
Normal file
176
src/components/ContentFormInvoiceOrEstimate.jsx
Normal file
@@ -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 (
|
||||
<div id={"div" + typeForm} className="container-section">
|
||||
{this.state.sectionsForm.map(section => (
|
||||
<BlockFormSection key={section.titleSection} data={section}/>
|
||||
))}
|
||||
{(this.state.sectionsGoods.length > 0) && (
|
||||
this.state.sectionsGoods.map(section => (
|
||||
<BlockFormSection key={section.titleSection} data={section}/>
|
||||
))
|
||||
)}
|
||||
{(this.state.sectionsServices.length > 0) && (
|
||||
this.state.sectionsServices.map(section => (
|
||||
<BlockFormSection key={section.titleSection} data={section}/>
|
||||
))
|
||||
)}
|
||||
{(this.state.subsectionsServices.length > 0) && (
|
||||
this.state.subsectionsServices.map(section => (
|
||||
<BlockFormSection key={section.titleSection} data={section}/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ContentFormInvoiceOrEstimate;
|
||||
113
src/components/ControlsFillDefaults.jsx
Normal file
113
src/components/ControlsFillDefaults.jsx
Normal file
@@ -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 (
|
||||
<div>
|
||||
<button type="button" id="btn_defaults_inv">Defaults - Invoice</button>
|
||||
<button type="button" id="btn_defaults_est">Defaults - Estimate</button>
|
||||
<button type="button" id="btn_defaults_pay">Defaults - Payment Plan</button>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default ControlsFillDefaults;
|
||||
51
src/components/Input.jsx
Normal file
51
src/components/Input.jsx
Normal file
@@ -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 (
|
||||
<div className="container-input">
|
||||
<label className="input_label">{textLabel}</label>
|
||||
{(type == 'date') && (
|
||||
<input type="date" id={id} name={name} value={value == null ? "" : value} onChange={onChange}/>
|
||||
)}
|
||||
{(type == 'text') && (
|
||||
<input type="text" id={id} name={name} value={value == null ? "" : value} placeholder={placeholder} onChange={onChange}/>
|
||||
)}
|
||||
{(type == 'number') && (
|
||||
<input type="number" id={id} name={name} value={value == null ? "" : value} placeholder={placeholder} step={step} min={valueMin} onChange={onChange}/>
|
||||
)}
|
||||
{(type == 'checkbox') && (
|
||||
<input type="checkbox" id={id} name={name} value={value == null ? "" : value} onChange={onChange}/>
|
||||
)}
|
||||
{(type == 'select') && (
|
||||
<select id={id} name={name} value={value == null ? "" : value} onChange={onChange}>
|
||||
{options.map((item, index) => (
|
||||
<option key={index} id={item['id']}>{item['textLabel']}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{(type == 'button') && (
|
||||
<button id={id} name={name} value={value == null ? "" : value} onChange={onChange}>{textLabel}</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default InputWrapped; // { InputWrapped, makeInputJSON };
|
||||
175
src/components/MainContentForm.jsx
Normal file
175
src/components/MainContentForm.jsx
Normal file
@@ -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 (
|
||||
<form onSubmit={this.handleSubmit} align="center">
|
||||
{this.state.sectionsMainContentForm.map(section => (
|
||||
<BlockFormSection key={section.titleSection} data={section} />
|
||||
))}
|
||||
{/* <makeSectionsForm data={ {valuesDefault: valuesDefault, placeholdersDefault: placeholdersDefault} } /> */}
|
||||
{typeForm}
|
||||
{(typeForm == 'Invoice' || typeForm == 'Estimate') &&
|
||||
<ContentFormInvoiceOrEstimate stateMainContentForm={this.state} handleChangeStateMainContentForm={this.handleChangeStateMainContentForm} />
|
||||
}
|
||||
<div>
|
||||
<button type="button" id="buttonFormClear" onClick={this.clearForm}>Clear Form</button>
|
||||
<input type="submit" value="Submit" id="buttonFormSubmit"/>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainContentForm;
|
||||
322
src/components/MainContentForm_functional.jsx
Normal file
322
src/components/MainContentForm_functional.jsx
Normal file
@@ -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 (
|
||||
<form onSubmit={handleSubmit} align="center">
|
||||
{stateMainContentForm.sectionsMainContentForm.map(section => (
|
||||
<BlockFormSection key={section.titleSection} data={section} />
|
||||
))}
|
||||
{/* <makeSectionsForm data={ {valuesDefault: valuesDefault, placeholdersDefault: placeholdersDefault} } /> */}
|
||||
{typeForm}
|
||||
{(typeForm == 'Invoice' || typeForm == 'Estimate') &&
|
||||
<ContentFormInvoiceOrEstimate valuesDefault={valuesDefault} placeholdersDefault={placeholdersDefault} handleChangeStateMainContentForm={handleChangeStateMainContentForm} />
|
||||
}
|
||||
<div>
|
||||
<button type="button" id="buttonFormClear" onClick={clearForm}>Clear Form</button>
|
||||
<input type="submit" value="Submit" id="buttonFormSubmit"/>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainContentForm;
|
||||
20
src/components/MethodsInput.jsx
Normal file
20
src/components/MethodsInput.jsx
Normal file
@@ -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;
|
||||
77
src/config.js
Normal file
77
src/config.js
Normal file
@@ -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;
|
||||
BIN
src/download.png
Normal file
BIN
src/download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
144
src/index.css
144
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;
|
||||
}
|
||||
2
src/index.html
Normal file
2
src/index.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<!DOCTYPE html>
|
||||
<div id="root"></div>
|
||||
BIN
src/logo192.png
Normal file
BIN
src/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user