From e946f0e51cbe72cec6bdf599c8ee9c1be1f64e0b Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Fri, 2 Jul 2021 17:06:26 +0530
Subject: working on the form info like date and stuff

---
 src/components/Form/Document/DocumentInfoForm.tsx | 21 +++++++++++++++-
 src/components/Form/Document/MetaInfoForm.tsx     | 21 ----------------
 src/components/Form/Form.scss                     |  7 +++---
 src/components/Menu/HomePageMenu.scss             | 21 ----------------
 src/components/Menu/HomePageMenu.tsx              |  2 +-
 src/components/Menu/InvoiceInfoMenu.tsx           | 29 +++++++++++++++++++++++
 src/components/Menu/Menu.scss                     | 25 +++++++++++++++++++
 src/components/Pages/BillingPage.tsx              |  7 ++++--
 8 files changed, 84 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/Form/Document/MetaInfoForm.tsx
 delete mode 100644 src/components/Menu/HomePageMenu.scss
 create mode 100644 src/components/Menu/InvoiceInfoMenu.tsx
 create mode 100644 src/components/Menu/Menu.scss

(limited to 'src/components')

diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx
index 7f33046..6193233 100644
--- a/src/components/Form/Document/DocumentInfoForm.tsx
+++ b/src/components/Form/Document/DocumentInfoForm.tsx
@@ -6,7 +6,7 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React/*, { useState }*/ from "react";
+import React, { useState } from "react";
 import { Person } from "./../../../interfaces";
 import "./../Form.scss";
 
@@ -14,14 +14,33 @@ import SelectClientForm from "./../People/SelectClientForm";
 
 interface Props {
   savedPeople: Person[]
+  invoiceNumber: number
+  setInvoiceNumber: any
 }
 
 const DocumentInfoForm: React.FC<Props> = (props) => {
+  const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber);
   return (
     <div className={"DocumentInfoForm"}>
       <SelectClientForm 
         savedPeople={props.savedPeople}
       />
+
+      <div className={"documentInfoChild"}>
+        <label>
+          Invoice Number:
+            <input className={"smallInputBox"} type="number" step="0.0" value={invoiceNumber} onInput={
+              (event: React.FormEvent<HTMLInputElement>) => setInvoiceNumber(parseInt(event.currentTarget.value))
+            } required />
+        </label>
+
+        <label>
+          Invoice Date: <span>wtf do i do</span>
+        </label>
+      </div>
+
+      <div className={"documentInfoChild"}>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Form/Document/MetaInfoForm.tsx b/src/components/Form/Document/MetaInfoForm.tsx
deleted file mode 100644
index bcddad6..0000000
--- a/src/components/Form/Document/MetaInfoForm.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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 from "react";
-import "./../Form.scss";
-
-const MetaInfoForm: React.FC = () => {
-  return (
-    <div className={"MetaInfoForm"}>
-      <form>
-      </form>
-    </div>
-  );
-}
-
-export default MetaInfoForm;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 6a9e747..a850309 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -120,6 +120,10 @@ input {
 
 .DocumentInfoForm {
   @include formPane();
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
   width: 100%;
   min-height: 10rem;
   margin-bottom: 1.5rem;
@@ -148,9 +152,6 @@ input {
   font-size: $fontSize1;
 }*/
 
-.MetaInfoForm {
-  width: 60%;
-}
 
 @media only screen and (max-device-width: 480px) {
   .threePaneForm {
diff --git a/src/components/Menu/HomePageMenu.scss b/src/components/Menu/HomePageMenu.scss
deleted file mode 100644
index bc46e08..0000000
--- a/src/components/Menu/HomePageMenu.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "../../styles/theme";
-
-.HomePageMenu {
-  /*border: 1px solid green;*/
-  min-width: 20rem;
-  width: 50%;
-
-  display: grid;
-  grid-template-columns: auto auto;
-}
-
-.HomePageMenu .menuItem {
-  text-align: center;
-  text-decoration: none;
-  font-size: $fontSize2;
-  color: $defFG;
-}
-
-.HomePageMenu .menuItem:hover {
-  color: $altFG;
-}
diff --git a/src/components/Menu/HomePageMenu.tsx b/src/components/Menu/HomePageMenu.tsx
index db0938a..645044e 100644
--- a/src/components/Menu/HomePageMenu.tsx
+++ b/src/components/Menu/HomePageMenu.tsx
@@ -8,7 +8,7 @@
 
 import React from "react";
 import { Link } from "react-router-dom";
-import "./HomePageMenu.scss";
+import "./Menu.scss";
 
 const HomePageMenu: React.FC = () => {
 	return (
diff --git a/src/components/Menu/InvoiceInfoMenu.tsx b/src/components/Menu/InvoiceInfoMenu.tsx
new file mode 100644
index 0000000..2c56f7e
--- /dev/null
+++ b/src/components/Menu/InvoiceInfoMenu.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 from "react";
+//import "./../Form.scss";
+
+const InvoiceInfoMenu: React.FC = () => {
+  return (
+    <div className={"InvoiceInfoMenu"}>
+      c
+      o
+      m
+      i
+      n
+      g
+      s
+      o
+      o
+      n
+    </div>
+  );
+}
+
+export default InvoiceInfoMenu;
diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss
new file mode 100644
index 0000000..cf9f7aa
--- /dev/null
+++ b/src/components/Menu/Menu.scss
@@ -0,0 +1,25 @@
+@import "../../styles/theme";
+
+.HomePageMenu {
+  /*border: 1px solid green;*/
+  min-width: 20rem;
+  width: 50%;
+
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.HomePageMenu .menuItem {
+  text-align: center;
+  text-decoration: none;
+  font-size: $fontSize2;
+  color: $defFG;
+}
+
+.HomePageMenu .menuItem:hover {
+  color: $altFG;
+}
+
+.InvoiceInfoMenu {
+  width: 60%;
+}
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index bf37bd3..c88435b 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -17,7 +17,7 @@ import RegisterItemForm from "./../Form/Items/RegisterItemForm";
 import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
 
 import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
-import MetaInfoForm from "./../Form/Document/MetaInfoForm";
+import InvoiceInfoMenu from "./../Menu/InvoiceInfoMenu";
 
 import ItemsDisplay from "./../Display/ItemsDisplay";
 import SummaryDisplay from "./../Display/SummaryDisplay"; 
@@ -28,6 +28,7 @@ const BillingPage: React.FC = () => {
   const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState<boolean>(false);
   const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState<boolean>(false);
   const [items, setItems] = useState<Item[]>([]);
+  const [invoiceNumber, setInvoiceNumber] = useState<number>(1234); // get data from backend
 
   const getRegisteredItems = () =>
     axios.get(`/api/items/get-all`)
@@ -70,6 +71,8 @@ const BillingPage: React.FC = () => {
 
       <DocumentInfoForm 
         savedPeople={savedPeople}
+        invoiceNumber={invoiceNumber}
+        setInvoiceNumber={setInvoiceNumber}
       />
 
       <AddNewItemForm 
@@ -86,7 +89,7 @@ const BillingPage: React.FC = () => {
       />
 
       <div className={"BillingPageFlex"}>
-        <MetaInfoForm/>
+        <InvoiceInfoMenu/>
         <SummaryDisplay items={items}/>
       </div>
     </>
-- 
cgit v1.2.3