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 +++++++++++++++++++++++++
src/components/Menu/InvoiceInfoMenu.tsx | 23 +++----
src/components/Pages/BillingPage.tsx | 13 +++-
src/interfaces.ts | 10 +--
src/styles/global.scss | 38 ++++++-----
6 files changed, 144 insertions(+), 33 deletions(-)
create mode 100644 src/components/Form/Transport/TransportForm.tsx
(limited to 'src')
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;
}
--
cgit v1.2.3