@@ -172,4 +235,5 @@ class MainContentForm extends Component {
}
}
-export default MainContentForm;
\ No newline at end of file
+const MainContentFormWrapper = withNavigate(MainContentForm);
+export default MainContentFormWrapper;
\ No newline at end of file
diff --git a/src/components/MainContentForm_functional.jsx b/src/components/MainContentForm_functional.jsx
index 290357b..b90bae8 100644
--- a/src/components/MainContentForm_functional.jsx
+++ b/src/components/MainContentForm_functional.jsx
@@ -1,142 +1,27 @@
-import React, {useEffect, useState} from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
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 navigate = useNavigate();
+
+ const handleChangeInput = (event) => {
+ const elementInput = event.target;
+ setStateMainContentForm((statePrevious) => ({
+ ...statePrevious,
+ [elementInput.name]: elementInput.value
+ }));
+ };
+
const values = {
- typeForm: "0",
+ typeForm: "1",
currency: '0',
nameMyBusiness: '',
companyNumberMyBusiness: '',
@@ -165,6 +50,7 @@ const MainContentForm = (props) => {
address3ContactTheirBusiness: '',
address4ContactTheirBusiness: '',
address5ContactTheirBusiness: '',
+ dateBillingInvoice: '',
typeInvoice: '',
quantityServicesInvoice: '',
discretisationRateServiceInvoice1: '',
@@ -183,137 +69,278 @@ const MainContentForm = (props) => {
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
- });
+ quantityRatePeriodsIncrementServiceInvoice1s4: '',
+ ...props.values,
};
- 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})
- ]
- }
+ const stateTemp = {
+ sectionsMainContentForm: [
+ {
+ titleSection: 'Invoice Generator Form',
+ inputs: [
+ makeInputJSON({id: 'typeForm', name: 'typeForm', value: props.values['typeForm'], textLabel: 'Form type:', type: 'select', placeholder: props.placeholders['typeForm'], options: [
+ {text: '-', value: '0'},
+ {text: 'INVOICE', value: '1'},
+ {text: 'ESTIMATE', value: '2'},
+ {text: 'PAYMENT-PLAN', value: '3'}
+ ], onChange: handleChangeInput}),
+ makeInputJSON({id: 'currency', name: 'currency', value: props.values['currency'], textLabel: 'Currency:', type: 'select', options: [
+ {text: '£', value: '£'},
+ {text: '$', value: '$'},
+ {text: '€', value: '€'},
+ {text: 'Other', value: 'Other'}
+ ], onChange: handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'My Business Details',
+ inputs: [
+ makeInputJSON({id: 'nameMyBusiness', name: 'nameMyBusiness', value: props.values['nameMyBusiness'], textLabel: 'Name:', type: 'text', placeholder: props.placeholders['nameMyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'companyNumberMyBusiness', name: 'companyNumberMyBusiness', value: props.values['companyNumberMyBusiness'], textLabel: 'Company number:', type: 'text', placeholder: props.placeholders['companyNumberMyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'emailMyBusiness', name: 'emailMyBusiness', value: props.values['emailMyBusiness'], textLabel: 'Email:', type:'text', placeholder: props.placeholders['emailMyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address1MyBusiness', name: 'address1MyBusiness', value: props.values['address1MyBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: props.placeholders['address1MyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address2MyBusiness', name: 'address2MyBusiness', value: props.values['address2MyBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: props.placeholders['address2MyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address3MyBusiness', name: 'address3MyBusiness', value: props.values['address3MyBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: props.placeholders['address3MyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address4MyBusiness', name: 'address4MyBusiness', value: props.values['address4MyBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: props.placeholders['address4MyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address5MyBusiness', name: 'address5MyBusiness', value: props.values['address5MyBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: props.placeholders['address5MyBusiness'], onChange: handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'My Business Bank Details',
+ inputs: [
+ makeInputJSON({id: 'nameBankMyBusiness', name: 'nameBankMyBusiness', value: props.values['nameBankMyBusiness'], textLabel: 'Bank name:', type:'text', placeholder: props.placeholders['nameBankMyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'accountNameBankMyBusiness', name: 'accountNameBankMyBusiness', value: props.values['accountNameBankMyBusiness'], textLabel: 'Account name:', type:'text', placeholder: props.placeholders['accountNameBankMyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'accountNumberBankMyBusiness', name: 'accountNumberBankMyBusiness', value: props.values['accountNumberBankMyBusiness'], textLabel: 'Account number:', type:'text', placeholder: props.placeholders['accountNumberBankMyBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'sortCodeBankMyBusiness', name: 'sortCodeBankMyBusiness', value: props.values['sortCodeBankMyBusiness'], textLabel: 'Sort code:', type:'text', placeholder: props.placeholders['sortCodeBankMyBusiness'], onChange: handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'Their Business Details',
+ inputs: [
+ makeInputJSON({id: 'nameTheirBusiness', name: 'nameTheirBusiness', value: props.values['nameTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: props.placeholders['nameTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'codeTheirBusiness', name: 'codeTheirBusiness', value: props.values['codeTheirBusiness'], textLabel: 'Code:', type:'text', placeholder: props.placeholders['codeTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'emailTheirBusiness', name: 'emailTheirBusiness', value: props.values['emailTheirBusiness'], textLabel: 'Email:', type:'text', placeholder: props.placeholders['emailTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'phoneTheirBusiness', name: 'phoneTheirBusiness', value: props.values['phoneTheirBusiness'], textLabel: 'Phone:', type:'text', placeholder: props.placeholders['phoneTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address1TheirBusiness', name: 'address1TheirBusiness', value: props.values['address1TheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: props.placeholders['address1TheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address2TheirBusiness', name: 'address2TheirBusiness', value: props.values['address2TheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: props.placeholders['address2TheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address3TheirBusiness', name: 'address3TheirBusiness', value: props.values['address3TheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: props.placeholders['address3TheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address4TheirBusiness', name: 'address4TheirBusiness', value: props.values['address4TheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: props.placeholders['address4TheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address5TheirBusiness', name: 'address5TheirBusiness', value: props.values['address5TheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: props.placeholders['address5TheirBusiness'], onChange: handleChangeInput})
+ ]
+ },
+ {
+ titleSection: 'Their Business Contact Details',
+ inputs: [
+ makeInputJSON({id: 'nameContactTheirBusiness', name: 'nameContactTheirBusiness', value: props.values['nameContactTheirBusiness'], textLabel: 'Name:', type:'text', placeholder: props.placeholders['nameContactTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address1ContactTheirBusiness', name: 'address1ContactTheirBusiness', value: props.values['address1ContactTheirBusiness'], textLabel: 'Address line 1:', type:'text', placeholder: props.placeholders['address1ContactTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address2ContactTheirBusiness', name: 'address2ContactTheirBusiness', value: props.values['address2ContactTheirBusiness'], textLabel: 'Address line 2:', type:'text', placeholder: props.placeholders['address2ContactTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address3ContactTheirBusiness', name: 'address3ContactTheirBusiness', value: props.values['address3ContactTheirBusiness'], textLabel: 'Address line 3:', type:'text', placeholder: props.placeholders['address3ContactTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address4ContactTheirBusiness', name: 'address4ContactTheirBusiness', value: props.values['address4ContactTheirBusiness'], textLabel: 'Address line 4:', type:'text', placeholder: props.placeholders['address4ContactTheirBusiness'], onChange: handleChangeInput}),
+ makeInputJSON({id: 'address5ContactTheirBusiness', name: 'address5ContactTheirBusiness', value: props.values['address5ContactTheirBusiness'], textLabel: 'Address line 5:', type:'text', placeholder: props.placeholders['address5ContactTheirBusiness'], onChange: handleChangeInput})
+ ]
+ }
+ ]
+ };
+
+ let typeForm = props.values['typeForm'] == "1" ? "Invoice" : "Estimate";
+ let sectionsForm = [
+ {
+ titleSection: typeForm,
+ inputs: [
+ makeInputJSON({id: 'dateBilling' + typeForm, name: 'dateBilling' + typeForm, type: 'date', placeholder: props.placeholders['dateBilling' + typeForm], value: props.values['dateBilling' + typeForm], textLabel: 'Billing date:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'type' + typeForm, name: 'type' + typeForm, type: 'select', placeholder: props.placeholders['type' + typeForm], value: props.values['type' + typeForm], options: [
+ {text: 'Goods', value:'0'},
+ {text: 'Services', value:'1'}
+ ], textLabel: 'Invoice type:', onChange: handleChangeInput})
]
- };
- handleChangeStateMainContentForm(dataMainContentForm);
- }, [placeholdersDefault, valuesDefault]);
+ }
+ ];
+ let sectionsGoods = [];
+ if (props.values['type' + typeForm] == '0') {
+ sectionsForm = sectionsForm.concat([
+ {
+ titleSection: 'Goods',
+ inputs: [
+ makeInputJSON({id: 'quantityGoods' + typeForm, name: 'quantityGoods' + typeForm, type: 'number', placeholder: props.placeholders['quantityGoods' + typeForm], value: props.values['quantityGoods' + typeForm], textLabel: 'Number of different goods:', onChange: handleChangeInput})
+ ]
+ }
+ ]);
+ if (props.values['quantityGoods' + typeForm] > 0) {
+ for (let i = 0; i < props.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: props.placeholders['nameGood' + typeForm + (i + 1)], value: props.values['nameGood' + typeForm + (i + 1)], textLabel: 'Name:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'valueGood' + typeForm + (i + 1), name: 'valueGood' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['valueGood' + typeForm + (i + 1)], value: props.values['valueGood' + typeForm + (i + 1)], textLabel: 'Value:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'quantityGood' + typeForm + (i + 1), name: 'quantityGood' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['quantityGood' + typeForm + (i + 1)], value: props.values['quantityGood' + typeForm + (i + 1)], textLabel: 'Quantity:', onChange: handleChangeInput})
+ ]
+ }
+ ]);
+ }
+ }
+ }
+ let sectionsServices = [];
+ let subsectionsServices = [];
+ console.log("props.values[" + "type" + typeForm + "]:", props.values['type' + typeForm]);
+ if (props.values['type' + typeForm] == '1') {
+ sectionsForm = sectionsForm.concat([
+ {
+ titleSection: 'Services',
+ inputs: [
+ makeInputJSON({id: 'quantityServices' + typeForm, name: 'quantityServices' + typeForm, type: 'number', placeholder: props.placeholders['quantityServices' + typeForm], value: props.values['quantityServices' + typeForm], textLabel: 'Number of different services:', onChange: handleChangeInput})
+ ]
+ }
+ ]);
+ console.log("props.values[" + 'quantityServices' + typeForm + "]:", props.values['quantityServices' + typeForm]);
+ if (props.values['quantityServices' + typeForm] > 0) {
+ let j;
+ for (let i = 0; i < props.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: props.placeholders['discretisationRateService' + typeForm + (i + 1)], value: props.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: handleChangeInput}),
+ makeInputJSON({id: 'quantityDiscretisationRateService' + typeForm + (i + 1), name: 'quantityDiscretisationRateService' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['quantityDiscretisationRateService' + typeForm + (i + 1)], value: props.values['quantityDiscretisationRateService' + typeForm + (i + 1)], textLabel: 'Quantity of rate discretisations per minimum unit rate:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'rateService' + typeForm + (i + 1), name: 'rateService' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['rateService' + typeForm + (i + 1)], value: props.values['rateService' + typeForm + (i + 1)], textLabel: 'Rate [£ / hour]:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'discretisationDurationService' + typeForm + (i + 1), name: 'discretisationDurationService' + typeForm + (i + 1), type: 'select', placeholder: props.placeholders['discretisationDurationService' + typeForm + (i + 1)], value: props.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: handleChangeInput}),
+ makeInputJSON({id: 'quantityDiscretisationDurationService' + typeForm + (i + 1), name: 'quantityDiscretisationDurationService' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['quantityDiscretisationDurationService' + typeForm + (i + 1)], value: props.values['quantityDiscretisationDurationService' + typeForm + (i + 1)], textLabel: 'Quantity of duration discretisations per billing period:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'quantityBillingPeriodService' + typeForm + (i + 1), name: 'quantityBillingPeriodService' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['quantityBillingPeriodService' + typeForm + (i + 1)], value: props.values['quantityBillingPeriodService' + typeForm + (i + 1)], textLabel: 'Quantity of billing periods:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'isIncrementalBillingPeriodIdsService' + typeForm + (i + 1), name: 'isIncrementalBillingPeriodIdsService' + typeForm + (i + 1), type: 'checkbox', placeholder: props.placeholders['isIncrementalBillingPeriodIdsService' + typeForm + (i + 1)], value: props.values['isIncrementalBillingPeriodIdsService' + typeForm + (i + 1)], textLabel: 'Are billing period IDs incremental?', onChange: handleChangeInput}),
+ makeInputJSON({id: 'descriptionIncrementalService' + typeForm + (i + 1), name: 'descriptionIncrementalService' + typeForm + (i + 1), type: 'text', placeholder: props.placeholders['descriptionIncrementalService' + typeForm + (i + 1)], value: props.values['descriptionIncrementalService' + typeForm + (i + 1)], textLabel: 'Description:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'idBillingPeriodFirstIncrementalService' + typeForm + (i + 1), name: 'idBillingPeriodFirstIncrementalService' + typeForm + (i + 1), type: 'number', placeholder: props.placeholders['idBillingPeriodFirstIncrementalService' + typeForm + (i + 1)], value: props.values['idBillingPeriodFirstIncrementalService' + typeForm + (i + 1)], textLabel: 'First billing period ID:', onChange: handleChangeInput})
+ ]
+ }
+ ]);
+ let subsections = [];
+ if (props.values['quantityBillingPeriodService' + typeForm + (i + 1)] > 0) {
+ for (j = 0; j < props.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: props.placeholders['descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], value: props.values['descriptionIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], textLabel: 'Description:', onChange: handleChangeInput}),
+ makeInputJSON({id: 'quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1), name: 'quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1), type: 'number', placeholder: props.placeholders['quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], value: props.values['quantityRatePeriodsIncrementService' + typeForm + (i + 1) + 's' + (j + 1)], textLabel: 'Quantity of unit rate periods worked:', onChange: handleChangeInput})
+ ]
+ }
+ ]);
+ }
+ }
+ subsectionsServices = subsectionsServices.concat(subsections);
+ }
+ }
+ }
+ console.log("typeForm:", typeForm);
+ console.log("sectionsGoods:", sectionsGoods);
+ console.log("sectionsServices:", sectionsServices);
+ console.log("subsectionsServices:", subsectionsServices);
+
+
+ let dataInvoiceOrEstimate = {
+ ...stateTemp,
+ sectionsForm: sectionsForm,
+ sectionsGoods: sectionsGoods,
+ sectionsServices: sectionsServices,
+ subsectionsServices: subsectionsServices,
+ };
+
+ const [stateMainContentForm, setStateMainContentForm] = useState(dataInvoiceOrEstimate);
+
+ console.log("MainContentForm");
+ console.log(props);
+ console.log(stateMainContentForm);
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ let statePageInvoiceOrEstimate = getInputValues();
+ console.log("statePageInvoiceOrEstimate: ", statePageInvoiceOrEstimate);
+ navigate('/PageInvoiceOrEstimate', { state: { data: statePageInvoiceOrEstimate }, nips: 'good' });
+ };
+
+ const getInputValues = () => {
+ let inputValues = {};
+ console.log("getInputValues");
+ console.log("stateMainContentForm: ", stateMainContentForm);
+ stateMainContentForm.sectionsMainContentForm.forEach(section => {
+ section.inputs.forEach(input => {
+ inputValues[input.name] = getInputValue(input);
+ });
+ });
+ stateMainContentForm.sectionsForm.forEach(section => {
+ section.inputs.forEach(input => {
+ inputValues[input.name] = getInputValue(input);
+ });
+ });
+ stateMainContentForm.sectionsGoods.forEach(section => {
+ section.inputs.forEach(input => {
+ inputValues[input.name] = getInputValue(input);
+ });
+ });
+ stateMainContentForm.sectionsServices.forEach(section => {
+ section.inputs.forEach(input => {
+ inputValues[input.name] = getInputValue(input);
+ });
+ });
+ stateMainContentForm.subsectionsServices.forEach(section => {
+ section.inputs.forEach(input => {
+ inputValues[input.name] = getInputValue(input);
+ });
+ });
+ return inputValues;
+ };
+
+ const getInputValue = (input) => {
+ console.log("getInputValue: ", input);
+ return input.type == "select" && isNumeric(input.value) ? input.options[Number(input.value)].value : input.value;
+ }
+
+ const isNumeric = (value) => {
+ return !isNaN(Number(value));
+ }
+
+ const clearForm = () => {
+ // Implement form clearing logic here
+ };
/*
- const handleButtonClick = () => {
- const inputsUpdated = dataForm.inputs.map(input => ({
- ...input,
- value: 'Default value for input ${input.id}'
- }));
- setDataForm({
- ...dataForm,
- inputs: inputsUpdated
- });
- };
+ React.useEffect(() => {
+ initialiseElements();
+ }, []);
*/
- const handleSubmit = () => {
- };
- const clearForm = () => {
- };
- const fillDefaults = () => {
- /*
- for (let i = 0; i < valuesDefault.length; i++)
- {
- }
- */
- };
+ // let typeForm = stateTemp.sectionsMainContentForm[0].inputs[0].value == "1" ? "Invoice" : "Estimate";
return (
);
diff --git a/src/config.js b/src/config.js
index 900e126..dfe116f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,7 +1,7 @@
-
+import * as shared from './scripts/shared.js';
const getValuesDefaultFormMetadata = {
- typeForm: '0',
+ typeForm: '1',
currency: '0',
};
const getValuesDefaultMyBusiness = {
@@ -15,10 +15,10 @@ const getValuesDefaultMyBusiness = {
address5MyBusiness: 'CV22 7DH',
};
const getValuesDefaultMyBusinessBank = {
- bankNameMyBusiness: 'Starling',
- accountNameMyBusiness: 'Precision And Research Technology Systems Limited',
- accountNumberMyBusiness: '40168366',
- sortCodeMyBusiness: '60-83-71',
+ nameBankMyBusiness: 'Starling',
+ accountNameBankMyBusiness: 'Precision And Research Technology Systems Limited',
+ accountNumberBankMyBusiness: '40168366',
+ sortCodeBankMyBusiness: '60-83-71',
};
const getValuesDefaultTheirBusiness = {
nameTheirBusiness: 'Contechs Technical Resourcing Limited',
@@ -41,12 +41,9 @@ const getValuesDefaultTheirBusinessContact = {
};
-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));
+ return shared.date2str(nowTime); // new Date(nowTime.getFullYear(), nowTime.getMonth(), -1));
}
const getValuesDefaultInvoice = {
dateBillingInvoice: getDateBilling(),
diff --git a/src/Logo.png b/src/content/images/Logo.png
similarity index 100%
rename from src/Logo.png
rename to src/content/images/Logo.png
diff --git a/src/download.png b/src/content/images/download.png
similarity index 100%
rename from src/download.png
rename to src/content/images/download.png
diff --git a/src/index.js b/src/index.js
index d563c0f..a5098d6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import './styles/index.css';
+import App from './pages/App';
+import reportWebVitals from './scripts/reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
diff --git a/src/App.jsx b/src/pages/App.jsx
similarity index 80%
rename from src/App.jsx
rename to src/pages/App.jsx
index b0dd998..9163206 100644
--- a/src/App.jsx
+++ b/src/pages/App.jsx
@@ -1,12 +1,14 @@
-import imageLogo from './Logo.png';
+import imageLogo from '../content/images/Logo.png';
-import './App.css';
+import '../styles/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';
+import InputWrapped from '../components/Input';
+import methods from '../components/MethodsInput';
+import PageInvoiceOrEstimate from './PageInvoiceOrEstimate';
+
// const makeInputJSON = methods.makeInputJSON;
const makeInputJSON = (dictArgs) => {
return methods.makeInputJSON(dictArgs);
@@ -42,6 +44,7 @@ function App() {
}>
}>
+ }>
{/*
diff --git a/src/pages/PageHome.jsx b/src/pages/PageHome.jsx
new file mode 100644
index 0000000..02296f4
--- /dev/null
+++ b/src/pages/PageHome.jsx
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import objDefaults from '../config'; // { defaultsMyBusiness, defaultsMyBusinessBank, defaultsTheirBusiness, defaultsTheirBusinessContact }
+// import MainContentFormWrapper from '../components/MainContentForm';
+import MainContentForm from '../components/MainContentForm_functional';
+
+
+class PageHome extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ ...objDefaults.getValuesDefaultFormMetadata,
+ ...objDefaults.getValuesDefaultMyBusiness,
+ ...objDefaults.getValuesDefaultMyBusinessBank,
+ ...objDefaults.getValuesDefaultTheirBusiness,
+ ...objDefaults.getValuesDefaultTheirBusinessContact,
+ ...objDefaults.getValuesDefaultInvoice
+ };
+ console.log("global state:", this.state);
+ }
+
+ render() {
+ return (
+