create basic menu for adding transport info

6 files changed, 144 insertions, 33 deletions

diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 91ba8b1..06d15ea 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -159,6 +159,15 @@ input {
   text-align: left;
 }
 
+.TransportForm {
+  padding: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center /*space-between*/;
+  align-items: center;
+}
+
 /*.ClientInfoDisplay {
   font-size: $fontSize1;
 }*/
diff --git a/src/components/Form/Transport/TransportForm.tsx b/src/components/Form/Transport/TransportForm.tsx
new file mode 100644
index 0000000..0611cc1
--- /dev/null
+++ b/src/components/Form/Transport/TransportForm.tsx
@@ -0,0 +1,84 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState } from "react";
+import { Transport } from "./../../../interfaces"
+
+interface Props {
+  setVisibility: any // this component's visibility
+}
+
+const TransportForm: React.FC<Props> = (props) => {
+  const [transporterName, setTransporterName] = useState<string>("");
+  const [vehicleNum, setVehicleNum] = useState<string>("");
+  const [transportMethod, setTransportMethod] = useState<string>("");
+  const [transporterGSTIN, setTransporterGSTIN] = useState<string>("");
+  const [builtyNumber, setBuiltyNumber] = useState<string>("");
+
+  const hideSelf = () =>
+    props.setVisibility(false);
+
+
+  const closeOnBGClicked = (event: any) =>
+    event.target.className === "floatingMenuBG" && hideSelf();
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+
+    const newTransport: Transport = {
+      Name: transporterName,
+      VehicleNum: vehicleNum,
+      Method: transportMethod,
+      GSTIN: transporterGSTIN,
+      Builty: builtyNumber
+    }
+    console.log(newTransport);
+
+    hideSelf();
+  }
+
+  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>
+
+        <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>
+          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>
+        
+        <input type="submit" value="ok"/>
+      </form>
+    </div>
+  );
+}
+
+export default TransportForm;
diff --git a/src/components/Menu/InvoiceInfoMenu.tsx b/src/components/Menu/InvoiceInfoMenu.tsx
index 2c56f7e..ce61858 100644
--- a/src/components/Menu/InvoiceInfoMenu.tsx
+++ b/src/components/Menu/InvoiceInfoMenu.tsx
@@ -9,20 +9,17 @@
 import React from "react";
 //import "./../Form.scss";
 
-const InvoiceInfoMenu: React.FC = () => {
+interface Props {
+  setShowTransportForm: any
+}
+
+const InvoiceInfoMenu: React.FC<Props> = (props) => {
   return (
-    <div className={"InvoiceInfoMenu"}>
-      c
-      o
-      m
-      i
-      n
-      g
-      s
-      o
-      o
-      n
-    </div>
+    <>
+      <div className={"InvoiceInfoMenu"}>
+        <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 c88435b..9f98cb9 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -22,6 +22,8 @@ import InvoiceInfoMenu from "./../Menu/InvoiceInfoMenu";
 import ItemsDisplay from "./../Display/ItemsDisplay";
 import SummaryDisplay from "./../Display/SummaryDisplay"; 
 
+import TransportForm from "./../Form/Transport/TransportForm";
+
 const BillingPage: React.FC = () => {
   const [savedItems, getSavedItems] = useState<Item[]>([]);
   const [savedPeople, getSavedPeople] = useState<Person[]>([]);
@@ -29,6 +31,7 @@ const BillingPage: React.FC = () => {
   const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState<boolean>(false);
   const [items, setItems] = useState<Item[]>([]);
   const [invoiceNumber, setInvoiceNumber] = useState<number>(1234); // get data from backend
+  const [showTransportForm, setShowTransportForm] = useState<boolean>(false);
 
   const getRegisteredItems = () =>
     axios.get(`/api/items/get-all`)
@@ -69,6 +72,12 @@ const BillingPage: React.FC = () => {
         />
       }
 
+      {showTransportForm && 
+        <TransportForm
+          setVisibility={setShowTransportForm}
+        />
+      }
+
       <DocumentInfoForm 
         savedPeople={savedPeople}
         invoiceNumber={invoiceNumber}
@@ -89,7 +98,9 @@ const BillingPage: React.FC = () => {
       />
 
       <div className={"BillingPageFlex"}>
-        <InvoiceInfoMenu/>
+        <InvoiceInfoMenu
+          setShowTransportForm={setShowTransportForm}
+        />
         <SummaryDisplay items={items}/>
       </div>
     </>
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 49eee91..5e918b7 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -1,9 +1,9 @@
 export interface Transport {
-  name: string
-  vehicleNum: string
-  method: string
-  gstin: string
-  builty: string
+  Name: string
+  VehicleNum: string
+  Method: string
+  GSTIN: string
+  Builty: string
 }
 
 export interface Item {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index fde6aed..1987e9f 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -31,6 +31,24 @@ body {
   font-family: $defFont;
 }
 
+@mixin defFloatingMenu {
+  position: absolute;
+
+  height: 32rem;
+  box-sizing: border-box;
+
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  margin: auto;
+  z-index: 2;
+
+  background-color: $background3;
+  box-shadow: $floatingShadow;
+  border: 1px solid $border2;
+
+  padding: 1.5rem;
+}
+
 .root-content {
   width: 95%;
   margin: auto;
@@ -60,23 +78,15 @@ body {
 }
 
 .floatingMenu {
-  position: absolute;
-
+  @include defFloatingMenu();
   width: 95%;
   max-width: 1920px;
-  height: 32rem;
-  box-sizing: border-box;
-
-  top: 0; bottom: 0;
-  left: 0; right: 0;
-  margin: auto;
-  z-index: 2;
-
-  background-color: $background3;
-  box-shadow: $floatingShadow;
-  border: 1px solid $border2;
+}
 
-  padding: 1.5rem;
+.smallFloatingMenu {
+  @include defFloatingMenu();
+  width: 50%;
+  max-width: 960px;
 }