aboutsummaryrefslogtreecommitdiff
path: root/src/components/editors
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/editors')
-rw-r--r--src/components/editors/invoice-headers-editor.js198
-rw-r--r--src/components/editors/scss/_editor.scss16
-rw-r--r--src/components/editors/scss/invoice-headers.scss6
3 files changed, 146 insertions, 74 deletions
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 {