From a7965136d75c97bb6e2696c46a7d4a27dc33996c Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Wed, 7 Jul 2021 12:46:08 +0530
Subject: create basic menu for adding transport info

---
 src/components/Form/Form.scss                   |  9 +++
 src/components/Form/Transport/TransportForm.tsx | 84 +++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/components/Form/Transport/TransportForm.tsx

(limited to 'src/components/Form')

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;
-- 
cgit v1.2.3