implemented sleek way to handle generating PDFs

4 files changed, 109 insertions, 8 deletions

diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss
index cf9f7aa..93d6c5e 100644
--- a/src/components/Menu/Menu.scss
+++ b/src/components/Menu/Menu.scss
@@ -23,3 +23,14 @@
 .InvoiceInfoMenu {
   width: 60%;
 }
+
+.PDFViewer {
+  height: 95%;
+  width: 95%;
+
+  position: fixed;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  margin: auto;
+  z-index: 3;
+}
diff --git a/src/components/Menu/SubmitMenu.tsx b/src/components/Menu/SubmitMenu.tsx
new file mode 100644
index 0000000..599b181
--- /dev/null
+++ b/src/components/Menu/SubmitMenu.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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, Dispatch, SetStateAction } from "react";
+import { PDFViewer } from '@react-pdf/renderer';
+import PrintableDoc from "./../Print/PrintableDoc";
+
+interface Props {
+  setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility
+}
+
+const TransportForm: React.FC<Props> = (props) => {
+  const [showPDF, setShowPDF] = useState<boolean>(false);
+  const hideSelf = () =>
+    props.setVisibility(false);
+
+  const closeOnBGClicked = (event: any) =>
+    event.target.className === "floatingMenuBG" && hideSelf();
+
+  return (
+    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
+      {showPDF &&
+        <PDFViewer className={"PDFViewer"}>
+          <PrintableDoc/>
+        </PDFViewer>
+      }
+      <div className={"smallFloatingMenu TransportForm"} /*onSubmit={handleSubmit}*/>
+        <button onClick={() => setShowPDF(true)}>Generate PDF</button>
+      </div>
+    </div>
+  );
+}
+
+export default TransportForm;
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index 301f39e..8848406 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -7,22 +7,21 @@
 */
 
 import React, { useState, useEffect } from "react";
-import axios from "axios";
-
 import { Item, Person, Transport, Invoice } from "../../interfaces";
+import axios from "axios";
 
+import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
 import AddNewItemForm from "./../Form/Items/AddNewItemForm";
+import TransportForm from "./../Form/Transport/TransportForm";
 import RegisterItemForm from "./../Form/Items/RegisterItemForm";
-
 import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
 
-import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
-import InvoiceInfoMenu from "./../Menu/InvoiceInfoMenu";
-
 import ItemsDisplay from "./../Display/ItemsDisplay";
 import SummaryDisplay from "./../Display/SummaryDisplay"; 
 
-import TransportForm from "./../Form/Transport/TransportForm";
+import InvoiceInfoMenu from "./../Menu/InvoiceInfoMenu";
+import SubmitMenu from "./../Menu/SubmitMenu";
+
 
 const BillingPage: React.FC = () => {
   const [savedItems, getSavedItems] = useState<Item[]>([]);
@@ -34,6 +33,7 @@ const BillingPage: React.FC = () => {
   const [showTransportForm, setShowTransportForm] = useState<boolean>(false);
   const [transporter, setTransporter] = useState<Transport>({Name: "", VehicleNum: "", Method: "", GSTIN: "", Builty: ""})
   console.log(transporter);
+  const [showSubmitMenu, setShowSubmitMenu] = useState<boolean>(false);
 
   const getRegisteredItems = () =>
     axios.get(`/api/items/get-all`)
@@ -57,6 +57,7 @@ const BillingPage: React.FC = () => {
   // update the items from AddNewItemForm
   const getItems = (item: Item) => setItems([...items, item]);
 
+  /*
   const postInvoice = () => {
     const newInvoice: Invoice = {
       Items: items,
@@ -74,6 +75,11 @@ const BillingPage: React.FC = () => {
         console.log(res)
       })
   }
+  */
+
+  const handleSubmit = () => {
+    setShowSubmitMenu(true);
+  }
 
   return (
     <>
@@ -99,6 +105,12 @@ const BillingPage: React.FC = () => {
         />
       }
 
+      {showSubmitMenu &&
+        <SubmitMenu
+          setVisibility={setShowSubmitMenu}
+        />
+      }
+
       <DocumentInfoForm 
         savedPeople={savedPeople}
         invoiceNumber={invoiceNumber}
@@ -124,7 +136,7 @@ const BillingPage: React.FC = () => {
         />
         <SummaryDisplay items={items}/>
       </div>
-      <button onClick={postInvoice}>post (experimental)</button>
+      <button onClick={handleSubmit}>post (experimental)</button>
     </>
   );
 }
diff --git a/src/components/Print/PrintableDoc.tsx b/src/components/Print/PrintableDoc.tsx
new file mode 100644
index 0000000..bcabcbc
--- /dev/null
+++ b/src/components/Print/PrintableDoc.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
+
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: 'row',
+    backgroundColor: '#E4E4E4'
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+    flexGrow: 1
+  }
+});
+
+const PrintableDoc: React.FC = () => {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        <View style={styles.section}>
+          <Text>Section #1</Text>
+        </View>
+        <View style={styles.section}>
+          <Text>Section #2</Text>
+        </View>
+      </Page>
+    </Document>
+  );
+}
+
+export default PrintableDoc;