diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Form/Document/DocumentInfoForm.tsx | 19 | ||||
| -rw-r--r-- | src/components/Form/People/RegisterPersonForm.tsx | 149 | ||||
| -rw-r--r-- | src/components/Form/People/SelectClientForm.tsx | 16 | ||||
| -rw-r--r-- | src/components/Pages/BillingPage.tsx | 15 |
4 files changed, 137 insertions, 62 deletions
diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx index 6135b33..2d7dcd9 100644 --- a/src/components/Form/Document/DocumentInfoForm.tsx +++ b/src/components/Form/Document/DocumentInfoForm.tsx @@ -25,12 +25,31 @@ interface Props { } const DocumentInfoForm: React.FC<Props> = (props) => { + const dummyPerson: Person = { + Name: "", + Address: "", + Phone: "", + Email: "", + + BillAddress: { + AddressLine: "", + City: "", + State: "", + PINCode: "", + Country: "India" // TODO: Get default from server + } + } + const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber); const [invoiceDate, setInvoiceDate] = useState(new Date()); + const [selectedClient, setSelectedClient] = useState<Person>(dummyPerson); + return ( <div className={"DocumentInfoForm"}> <SelectClientForm savedPeople={props.savedPeople} + selectedClient={selectedClient} + setSelectedClient={setSelectedClient} /> <div className={"documentInfoChild"}> diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx index 9e3b155..3922975 100644 --- a/src/components/Form/People/RegisterPersonForm.tsx +++ b/src/components/Form/People/RegisterPersonForm.tsx @@ -8,7 +8,7 @@ import React, { useState } from "react"; import "./../Form.scss"; -import { Person } from "./../../../interfaces" +import { Person, Address } from "./../../../interfaces" import axios from "axios"; interface props { @@ -18,9 +18,14 @@ interface props { const RegisterPersonForm: React.FC<props> = (props) => { const [newPersonName, setNewPersonName] = useState<string>(""); - const [newPersonAddress, setNewPersonAddress] = useState<string>(""); - const [newPersonEmail, setNewPersonEmail] = useState<string>(""); const [newPersonPhone, setNewPersonPhone] = useState<string>(""); + const [newPersonEmail, setNewPersonEmail] = useState<string>(""); + + const [newPersonBillAddressLine, setNewPersonBillAddressLine] = useState<string>(""); + const [newPersonBillCity, setNewPersonBillCity] = useState<string>(""); + const [newPersonBillState, setNewPersonBillState] = useState<string>(""); + const [newPersonBillPINCode, setNewPersonBillPINCode] = useState<string>(""); + const [newPersonBillCountry, setNewPersonBillCountry] = useState<string>(""); const hideSelf = () => props.setVisibility(false); @@ -32,9 +37,25 @@ const RegisterPersonForm: React.FC<props> = (props) => { const newClient: Person = { Name: newPersonName, - Address: newPersonAddress, Phone: newPersonPhone, - Email: newPersonEmail + Email: newPersonEmail, + + BillAddress: { + AddressLine: newPersonBillAddressLine, + City: newPersonBillCity, + State: newPersonBillState, + PINCode: newPersonBillPINCode, + Country: newPersonBillCountry + }, + + // currently same as BillAddress + ShipAddress: { + AddressLine: newPersonBillAddressLine, + City: newPersonBillCity, + State: newPersonBillState, + PINCode: newPersonBillPINCode, + Country: newPersonBillCountry + }, } // TODO: show confirmation before being invisible @@ -57,46 +78,84 @@ const RegisterPersonForm: React.FC<props> = (props) => { <div className={"floatingMenu"}> <div className={"formContainer"}> <form className={"floatingForm"} onSubmit={postForm}> - <div className={"wideForm"}> - <label> - Name: <input className={"wideInputBox"} - type="text" value={newPersonName} onChange={ - (event) => setNewPersonName(event.target.value) - } - required /> - </label> - - <label> - Phone: <input className={"wideInputBox"} - type="text" value={newPersonPhone} onChange={ - (event) => setNewPersonPhone(event.target.value) - } - required /> - </label> - - <label> - Email: <input className={"wideInputBox"} - type="text" value={newPersonEmail} onChange={ - (event) => setNewPersonEmail(event.target.value) - } - required /> - </label> - - <label> - Address: <input className={"wideInputBox"} - type="text" value={newPersonAddress} onChange={ - (event) => setNewPersonAddress(event.target.value) - } - required /> - </label> - </div> - - <div className={"menu"}> - <input type="button" value="cancel" - onClick={() => hideSelf()} /> - - <input type="submit" value="Register/Add" - disabled={newPersonName === "" ? true : false} /> + <div className={"twoPaneForm"}> + <div className={"widePane formPane"}> + <label> + Name: <input className={"wideInputBox"} + type="text" value={newPersonName} onChange={ + (event) => setNewPersonName(event.target.value) + } + required /> + </label> + + <label> + Phone: <input className={"wideInputBox"} + type="text" value={newPersonPhone} onChange={ + (event) => setNewPersonPhone(event.target.value) + } + required /> + </label> + + <label> + Email: <input className={"wideInputBox"} + type="text" value={newPersonEmail} onChange={ + (event) => setNewPersonEmail(event.target.value) + } + required /> + </label> + </div> + + <div className={"widePane formPane"}> + <h3>Billing Address</h3> + + <label> + Address: <input className={"wideInputBox"} + type="text" value={newPersonBillAddressLine} onChange={ + (event) => setNewPersonBillAddressLine(event.target.value) + } + required /> + </label> + + <label> + City: <input className={"wideInputBox"} + type="text" value={newPersonBillCity} onChange={ + (event) => setNewPersonBillCity(event.target.value) + } + required /> + </label> + + <label> + State: <input className={"wideInputBox"} + type="text" value={newPersonBillState} onChange={ + (event) => setNewPersonBillState(event.target.value) + } + required /> + </label> + + <label> + PIN Code: <input className={"wideInputBox"} + type="text" value={newPersonBillPINCode} onChange={ + (event) => setNewPersonBillPINCode(event.target.value) + } + required /> + </label> + + <label> + Country: <input className={"wideInputBox"} + type="text" value={newPersonBillCountry} onChange={ + (event) => setNewPersonBillCountry(event.target.value) + } + required /> + </label> + </div> + + <div className={"menu"}> + <input type="button" value="cancel" + onClick={() => hideSelf()} /> + + <input type="submit" value="Register/Add" + disabled={newPersonName === "" ? true : false} /> + </div> </div> </form> </div> diff --git a/src/components/Form/People/SelectClientForm.tsx b/src/components/Form/People/SelectClientForm.tsx index f91bf41..ca984ca 100644 --- a/src/components/Form/People/SelectClientForm.tsx +++ b/src/components/Form/People/SelectClientForm.tsx @@ -6,7 +6,7 @@ * Copyright (c) 2021 Vidhu Kant Sharma */ -import React, { useState } from "react"; +import React, { Dispatch, SetStateAction } from "react"; import { Person } from "./../../../interfaces"; import "./../Form.scss"; @@ -14,19 +14,19 @@ import ClientInfoDisplay from "../../Display/ClientInfoDisplay"; interface Props { savedPeople: Person[] + selectedClient: Person + setSelectedClient: Dispatch<SetStateAction<Person>> } const SelectClientForm: React.FC<Props> = (props) => { - // TODO: fix the default selectedClient - const [selectedClient, setSelectedClient] = useState<Person>({Name: "", Address: ""}); - const enterValuePrompt = "start typing here"; const registerPrompt = "add new"; // TODO: make it use email if no address found, shorten the name too // in short, make formatter flexible const formatter = (i: Person): string => - `${i.Name} - ${i.Address.slice(0, 20).concat(i.Address.length < 20 ? "" : "")}`; + // TODO: this shit is ugly + `${i.Name} - ${i.BillAddress.AddressLine.slice(0, 20).concat(i.BillAddress.AddressLine.length < 20 ? "" : "")}`; // TODO: if no client found at least clear the display // do this in other components too @@ -35,7 +35,7 @@ const SelectClientForm: React.FC<Props> = (props) => { (props.savedPeople === null || e === registerPrompt) ? alert("coming soon") // toggle registerPersonPrompt visibility : props.savedPeople.some((i) => - e === formatter(i) && setSelectedClient(i)) + e === formatter(i) && props.setSelectedClient(i)) return ( <div className={"documentInfoChild"}> @@ -43,7 +43,7 @@ const SelectClientForm: React.FC<Props> = (props) => { Client Name: <select className={"selectInputBox"} - value={selectedClient.Name} + value={props.selectedClient.Name} onChange={ (event) => { setClientInfo(event.target.value); @@ -59,7 +59,7 @@ const SelectClientForm: React.FC<Props> = (props) => { </select> </label> - <ClientInfoDisplay client={selectedClient}/> + <ClientInfoDisplay client={props.selectedClient}/> </div> ) } diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx index 58fdd40..9dcb485 100644 --- a/src/components/Pages/BillingPage.tsx +++ b/src/components/Pages/BillingPage.tsx @@ -56,13 +56,6 @@ const BillingPage: React.FC = () => { // update the items from AddNewItemForm const getItems = (item: Item) => setItems([...items, item]); - const handleSubmit = () => { - setShowSubmitMenu(true); - axios.post(`/api/invoices/preview`, {ID: 1010, Items: items, Transporter: transporter}) - .then(() => alert("yay")) - .catch(() => alert("nay")); - } - return ( <> {registerItemFormVisibility && @@ -83,8 +76,8 @@ const BillingPage: React.FC = () => { {showTransportForm && <TransportForm setVisibility={setShowTransportForm} - currentTransporter={transporter} setTransporter={setTransporter} + currentTransporter={transporter} /> } @@ -119,8 +112,12 @@ const BillingPage: React.FC = () => { <InvoiceInfoMenu setShowTransportForm={setShowTransportForm} /> + + <button onClick={() => setShowSubmitMenu(true)}> + post (experimental) + </button> + <SummaryDisplay items={items}/> - <button onClick={handleSubmit}>post (experimental)</button> </div> </> ); |