From af0ef4c190f3967d2def0c65cc3a1fce4511044e Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Tue, 27 Sep 2022 12:25:56 +0530 Subject: added shipping address functionality to /manage/clients page --- src/classes/client.js | 14 ++--- src/components/editors/address-editor.js | 37 ++++++++---- src/components/editors/client-editor.js | 76 ++++++++++++++++++++++--- src/components/editors/contact-editor.js | 35 +++++++++--- src/components/editors/scss/_colors.scss | 26 +++++++++ src/components/editors/scss/address-editor.scss | 20 +++++++ src/components/editors/scss/client-editor.scss | 7 +++ src/components/editors/scss/colors.scss | 24 -------- src/views/manage/clients.js | 2 +- 9 files changed, 180 insertions(+), 61 deletions(-) create mode 100644 src/components/editors/scss/_colors.scss delete mode 100644 src/components/editors/scss/colors.scss (limited to 'src') diff --git a/src/classes/client.js b/src/classes/client.js index 524d0ce..cae528e 100644 --- a/src/classes/client.js +++ b/src/classes/client.js @@ -43,24 +43,24 @@ export class Client { this.Contact = new Contact(); this.GSTIN = ""; this.BillingAddress = new Address(); - this.ShippingAddress = []; + this.ShippingAddresses = []; } } export const saveClient = (item, ok, fail) => { axios.post("/client/new", item) - .then(res => { console.log(res);ok()}) - .catch((err) => fail()) + .then(res => ok(res)) + .catch(err => fail(err)) } export const deleteClient = (id, ok, fail) => { axios.delete(`/client/${id}`) - .then(res => ok()) - .catch((err) => fail()) + .then(res => ok(res)) + .catch(err => fail(err)) } export const getAllClients = (ok, fail) => { axios.get("/client/all") - .then(res => ok(res.data)) - .catch(err => fail()) + .then(res => ok(res.Data)) + .catch(err => fail(err)) } diff --git a/src/components/editors/address-editor.js b/src/components/editors/address-editor.js index d2b015f..3675f26 100644 --- a/src/components/editors/address-editor.js +++ b/src/components/editors/address-editor.js @@ -18,18 +18,31 @@ import { Address } from './../../classes/client'; import './scss/address-editor.scss'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faXmark } from '@fortawesome/free-solid-svg-icons'; const AddressEditor = (props) => { - const [country, setCountry] = useState(""); - const [state, setState] = useState(""); - const [city, setCity] = useState(""); - const [address, setAddress] = useState(""); - const [postalCode, setPostalCode] = useState(""); + const handleInput = (field, event) => { + const a = new Address(); + const val = event.target.value; + a.Country = field === "country" ? val : props.address.Country; + a.State = field === "state" ? val : props.address.State; + a.City = field === "city" ? val : props.address.City; + a.Text = field === "address" ? val : props.address.Text; + a.PostalCode = field === "postal" ? val : props.address.PostalCode; + props.setAddress(a); + } return (

{props.heading}

+ {props.isBillingAddress || // cross button + + }
@@ -37,21 +50,21 @@ const AddressEditor = (props) => { Country: setCountry(e.target.value)} /> + value={props.address.Country} onChange={(e) => handleInput("country", e)} />
@@ -60,14 +73,14 @@ const AddressEditor = (props) => { Address: