aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/Form/Form.scss24
-rw-r--r--src/components/Form/Transport/TransportForm.tsx64
-rw-r--r--src/components/Menu/InvoiceInfoMenu.tsx6
-rw-r--r--src/components/Pages/BillingPage.tsx7
-rw-r--r--src/styles/global.scss5
5 files changed, 70 insertions, 36 deletions
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 06d15ea..7642f75 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -160,14 +160,34 @@ input {
}
.TransportForm {
- padding: 2rem;
+ padding: 1rem;
+ font-size: $fontSize1 + 0.25;
+}
+
+.TransportForm label {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ min-width: 90%;
+}
+
+.TransportForm .inputs {
+ height: 80%;
display: flex;
flex-direction: column;
- justify-content: center /*space-between*/;
+ justify-content: space-around;
align-items: center;
}
+.TransportForm .menu {
+ position: absolute;
+
+ right: 1rem;
+ bottom: 1rem;
+ //border: 1px solid gray;
+}
+
/*.ClientInfoDisplay {
font-size: $fontSize1;
}*/
diff --git a/src/components/Form/Transport/TransportForm.tsx b/src/components/Form/Transport/TransportForm.tsx
index 0611cc1..60dfee3 100644
--- a/src/components/Form/Transport/TransportForm.tsx
+++ b/src/components/Form/Transport/TransportForm.tsx
@@ -6,11 +6,12 @@
* Copyright (c) 2021 Vidhu Kant Sharma
*/
-import React, { useState } from "react";
+import React, { useState, Dispatch, SetStateAction } from "react";
import { Transport } from "./../../../interfaces"
interface Props {
- setVisibility: any // this component's visibility
+ setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility
+ setTransporter: Dispatch<SetStateAction<Transport>>
}
const TransportForm: React.FC<Props> = (props) => {
@@ -23,7 +24,6 @@ const TransportForm: React.FC<Props> = (props) => {
const hideSelf = () =>
props.setVisibility(false);
-
const closeOnBGClicked = (event: any) =>
event.target.className === "floatingMenuBG" && hideSelf();
@@ -37,7 +37,7 @@ const TransportForm: React.FC<Props> = (props) => {
GSTIN: transporterGSTIN,
Builty: builtyNumber
}
- console.log(newTransport);
+ props.setTransporter(newTransport);
hideSelf();
}
@@ -45,37 +45,41 @@ const TransportForm: React.FC<Props> = (props) => {
return (
<div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
<form className={"smallFloatingMenu TransportForm"} onSubmit={handleSubmit}>
- <label>
- Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={
- (event) => (setTransporterName(event.target.value))
- }/>
- </label>
+ <div className={"inputs"}>
+ <label>
+ Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={
+ (event) => (setTransporterName(event.target.value))
+ }/>
+ </label>
- <label>
- Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={
- (event) => (setVehicleNum(event.target.value))
- } required />
- </label>
+ <label>
+ Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={
+ (event) => (setVehicleNum(event.target.value))
+ } required />
+ </label>
- <label>
- Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={
- (event) => (setTransportMethod(event.target.value))
- } required />
- </label>
+ <label>
+ Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={
+ (event) => (setTransportMethod(event.target.value))
+ } required />
+ </label>
- <label>
- Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={
- (event) => (setTransporterGSTIN(event.target.value))
- }/>
- </label>
+ <label>
+ Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={
+ (event) => (setTransporterGSTIN(event.target.value))
+ }/>
+ </label>
- <label>
- Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={
- (event) => (setBuiltyNumber(event.target.value))
- }/>
- </label>
+ <label>
+ Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={
+ (event) => (setBuiltyNumber(event.target.value))
+ }/>
+ </label>
+ </div>
- <input type="submit" value="ok"/>
+ <div className={"menu"}>
+ <input type="submit" value="ok"/>
+ </div>
</form>
</div>
);
diff --git a/src/components/Menu/InvoiceInfoMenu.tsx b/src/components/Menu/InvoiceInfoMenu.tsx
index ce61858..e51d0c2 100644
--- a/src/components/Menu/InvoiceInfoMenu.tsx
+++ b/src/components/Menu/InvoiceInfoMenu.tsx
@@ -17,7 +17,11 @@ const InvoiceInfoMenu: React.FC<Props> = (props) => {
return (
<>
<div className={"InvoiceInfoMenu"}>
- <input type="button" value="Add Transport Labels" onClick={() => props.setShowTransportForm(true)}/>
+ <input
+ type="button"
+ value="Add Transport Labels"
+ onClick={() => props.setShowTransportForm(true)}
+ />
</div>
</>
);
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index 9f98cb9..3949beb 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -9,7 +9,7 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
-import { Item, Person } from "../../interfaces";
+import { Item, Person, Transport } from "../../interfaces";
import AddNewItemForm from "./../Form/Items/AddNewItemForm";
import RegisterItemForm from "./../Form/Items/RegisterItemForm";
@@ -32,6 +32,8 @@ const BillingPage: React.FC = () => {
const [items, setItems] = useState<Item[]>([]);
const [invoiceNumber, setInvoiceNumber] = useState<number>(1234); // get data from backend
const [showTransportForm, setShowTransportForm] = useState<boolean>(false);
+ const [transporter, setTransporter] = useState<Transport>({Name: "", VehicleNum: "", Method: "", GSTIN: "", Builty: ""})
+ console.log(transporter);
const getRegisteredItems = () =>
axios.get(`/api/items/get-all`)
@@ -72,9 +74,10 @@ const BillingPage: React.FC = () => {
/>
}
- {showTransportForm &&
+ {showTransportForm &&
<TransportForm
setVisibility={setShowTransportForm}
+ setTransporter={setTransporter}
/>
}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 1987e9f..9cecfea 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -85,7 +85,10 @@ body {
.smallFloatingMenu {
@include defFloatingMenu();
- width: 50%;
+ width: 40%;
+ height: 40%;
+ max-height: 22rem;
+ min-width: 28rem;
max-width: 960px;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 00:38:37 +0000