styled and added basic functionality to TransportForm

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;
 }