From bb38d843de17bb0b206a663e008c5dbb37f04708 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
Date: Sun, 4 Dec 2022 18:05:11 +0530
Subject: added (untested) auth mechanism

---
 src/components/editors/invoice-headers-editor.js | 198 ++++++++++++++---------
 src/components/editors/scss/_editor.scss         |  16 ++
 src/components/editors/scss/invoice-headers.scss |   6 +
 3 files changed, 146 insertions(+), 74 deletions(-)

(limited to 'src/components')

diff --git a/src/components/editors/invoice-headers-editor.js b/src/components/editors/invoice-headers-editor.js
index d099e59..dcbf9ca 100644
--- a/src/components/editors/invoice-headers-editor.js
+++ b/src/components/editors/invoice-headers-editor.js
@@ -18,8 +18,14 @@
 import './scss/invoice-headers.scss';
 
 import { useState, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+
+const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport, invoiceNumber, setInvoiceNumber, date, setDate}) => {
+  // show transport details menu
+  const [showTPMenu, setShowTPMenu] = useState(false);
+  const [showAdditionalMenu, setShowAdditionalMenu] = useState(false);
 
-const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport}) => {
   const handleInput = e => {
     const { name, value } = e.target;
 
@@ -43,79 +49,123 @@ const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport})
   return (
     <div className={"invoice-headers-editor"}>
       <h1>Invoice Options:</h1>
-      <div>
-        <label className={"checkbox-label"}>
-          <input
-            type="checkbox"
-            onChange={() => setRoundOff(prev => !prev)}
-            checked={roundOff}/>
-          Round off the Total
-        </label>
-
-        <label>
-          Apply Discount On All Items:
-          <input
-            className={"small"}
-            type="number"
-            min="0"
-            max="100"
-            step="0.1" />
-        </label>
-
-        <p><strong>Transport Details</strong></p>
-
-        <label>
-          Vehicle Number:
-          <input
-            name="VehicleNum"
-            value={transport.VehicleNum}
-            onChange={handleInput}
-            type="text"/>
-        </label>
-
-        <label>
-          Transport Method:
-          <input
-            name="TransportMethod"
-            value={transport.TransportMethod}
-            onChange={handleInput}
-            type="text"/>
-        </label>
-
-        <label>
-          Transporter Name:
-          <input
-            name="Transporter.Name"
-            value={transport.Transporter.Name}
-            onChange={handleInput}
-            type="text"/>
-        </label>
-
-        <label>
-          Transporter GSTIN:
-          <input
-            name="Transporter.GSTIN"
-            value={transport.Transporter.GSTIN}
-            onChange={handleInput}
-            type="text"/>
-        </label>
-
-        <label>
-          Transporter ID:
-          <input
-            name="Transporter.TransporterId"
-            value={transport.Transporter.TransporterId}
-            onChange={handleInput}
-            type="text"/>
-        </label>
-
-        <label>
-          Delivery Note:
-          <textarea
-            name="Note"
-            value={transport.Note}
-            onChange={handleInput} />
-        </label>
+      <div className={"wrapper"}>
+        <div>
+          <label className={"checkbox-label"}>
+            <input
+              type="checkbox"
+              onChange={() => setRoundOff(prev => !prev)}
+              checked={roundOff}/>
+            Round off the Total
+          </label>
+
+          <label>
+            Apply Discount On All Items:
+            <input
+              className={"small"}
+              type="number"
+              min="0"
+              max="100"
+              step="0.1" />
+          </label>
+
+          <p onClick={() => setShowTPMenu(i => !i)}>
+            <strong>
+              Transport Details <FontAwesomeIcon
+                icon={faChevronDown}
+                className={`dropdown-icon ${showTPMenu ? "open" : "closed"}`} />
+            </strong>
+          </p>
+          <hr/>
+          {showTPMenu &&
+            <div className={"dropdown-div"}>
+              <label>
+                Vehicle Number:
+                <input
+                  name="VehicleNum"
+                  value={transport.VehicleNum}
+                  onChange={handleInput}
+                  type="text"/>
+              </label>
+
+              <label>
+                Transport Method:
+                <input
+                  name="TransportMethod"
+                  value={transport.TransportMethod}
+                  onChange={handleInput}
+                  type="text"/>
+              </label>
+
+              <label>
+                Transporter Name:
+                <input
+                  name="Transporter.Name"
+                  value={transport.Transporter.Name}
+                  onChange={handleInput}
+                  type="text"/>
+              </label>
+
+              <label>
+                Transporter GSTIN:
+                <input
+                  name="Transporter.GSTIN"
+                  value={transport.Transporter.GSTIN}
+                  onChange={handleInput}
+                  type="text"/>
+              </label>
+
+              <label>
+                Transporter ID:
+                <input
+                  name="Transporter.TransporterId"
+                  value={transport.Transporter.TransporterId}
+                  onChange={handleInput}
+                  type="text"/>
+              </label>
+
+              <label>
+                Delivery Note:
+                <textarea
+                  name="Note"
+                  value={transport.Note}
+                  onChange={handleInput} />
+              </label>
+            </div>
+          }
+          <p onClick={() => setShowAdditionalMenu(i => !i)}>
+            <strong>
+              Additional Details <FontAwesomeIcon
+                icon={faChevronDown}
+                className={`dropdown-icon ${showAdditionalMenu ? "open" : "closed"}`} />
+            </strong>
+          </p>
+          <hr/>
+          {showAdditionalMenu &&
+            <div className={"dropdown-div"}>
+              <label>
+                Placeholder:
+                <input
+                  //name="VehicleNum"
+                  //value={transport.VehicleNum}
+                  //onChange={handleInput}
+                  type="text"/>
+              </label>
+            </div>
+          }
+        </div>
+        <div>
+          <label>
+            Invoice Number:
+            <input
+              type="text"
+              value={invoiceNumber}
+              onChange={(e) => setInvoiceNumber(e.target.value)} />
+          </label>
+          <label>
+            Invoice Date:
+          </label>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/editors/scss/_editor.scss b/src/components/editors/scss/_editor.scss
index 1ca7067..6cd7c43 100644
--- a/src/components/editors/scss/_editor.scss
+++ b/src/components/editors/scss/_editor.scss
@@ -17,6 +17,22 @@
 
 @import "colors";
 
+@mixin button {
+    button, input[type=submit] {
+        padding: 0.2rem 0;
+        width: 4rem;
+        background-color: $inputBackgroundColor;
+        border: 1px solid $primaryAccentColor;
+        color: $fgColor;
+        border-radius: 4px;
+        transition: background-color 0.4s, color 0.4s;
+    }
+    button:hover, input[type=submit]:hover {
+        background-color: $primaryAccentColor;
+        color: $fgColorAlt;
+    }
+}
+
 @mixin label {
     label {
         display: flex;
diff --git a/src/components/editors/scss/invoice-headers.scss b/src/components/editors/scss/invoice-headers.scss
index ade428b..56055e7 100644
--- a/src/components/editors/scss/invoice-headers.scss
+++ b/src/components/editors/scss/invoice-headers.scss
@@ -42,6 +42,12 @@
         }
     }
 
+    .wrapper {
+        display: flex;
+        justify-content: space-between;
+        width: 44rem;
+    }
+
     // hide up/down arrows from number input
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
-- 
cgit v1.2.3