added ItemTable for the invoice page

3 files changed, 66 insertions, 63 deletions

diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js
index 46310db..339319f 100644
--- a/src/components/pickers/item-picker.js
+++ b/src/components/pickers/item-picker.js
@@ -10,8 +10,7 @@
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
-
- * You should have received a copy of the GNU General Public License
+* You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
@@ -19,10 +18,11 @@ import { Item, InvoiceItem, getAllItems } from '../../classes/item';
 import './scss/item-picker.scss';
 
 import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 //import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 //import { faPhone, faEnvelope, faGlobe } from '@fortawesome/free-solid-svg-icons'
 
-const ItemPicker = () => {
+const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
   const [items, setItems] = useState([new Item()]);
   const [item, setItem] = useState(new InvoiceItem());
 
@@ -44,30 +44,33 @@ const ItemPicker = () => {
     }));
   }
 
+  // add item to the invoice items list
+  const addItem = (e) => {
+    e.preventDefault();
+    addInvoiceItem(item);
+    setItem(new InvoiceItem());
+  }
+
+  // input elements are sorted on the basis of
+  // how likely they are going to be edited
   return (
     <div className={"picker-wrapper"}>
       <p className={"heading"}>Add an Item</p>
-      <div className={"item-picker"}>
-        {items && items.length > 0 &&
+      <form className={"item-picker"} onSubmit={addItem}>
+        {items.length > 0 ?
           <>
             <label>
               Product/Service:
               <select value={item.Id ? item.Id : ""} onChange={handleItemSelect}>
                 <option key="placeholder" value={""} disabled>Select an Item</option>
                 {items.map(i =>
-                  <option key={i.Id} value={i.Id}>{i.Name}{i.Brand.Id === null ? "" : " - " + i.Brand.Name}</option>
+                  <option key={i.Id} value={i.Id} disabled={invoiceItems.some(j => j.Id === i.Id)}>
+                    {i.Name}{i.Brand.Id === null ? "" : " - " + i.Brand.Name}
+                  </option>
                 )}
               </select>
             </label>
-            <label>
-              Description:
-                <input
-                  type="text"
-                  value={item.Description}
-                  name="Description"
-                  onChange={handleInput} />
-            </label>
-            <label>
+            <label className={"narrow"}>
               Quantity:
                 <input
                   type="number"
@@ -77,7 +80,7 @@ const ItemPicker = () => {
                   max={item.MaxQuantity}
                   onChange={handleInput} />
             </label>
-            <label>
+            <label className={"narrow"}>
               Price:
                 <input
                   type="number"
@@ -85,7 +88,7 @@ const ItemPicker = () => {
                   name="UnitPrice"
                   onChange={handleInput} />
             </label>
-            <label>
+            <label className={"narrow"}>
               Discount %:
                 <input
                   type="number"
@@ -94,15 +97,22 @@ const ItemPicker = () => {
                   onChange={handleInput} />
             </label>
             <label>
+              Description:
+                <input
+                  type="text"
+                  value={item.Description}
+                  name="Description"
+                  onChange={handleInput} />
+            </label>
+            <label className={"narrow"}>
               HSN:
                 <input
-                  className={"narrow"}
                   type="text"
                   value={item.HSN}
                   name="HSN"
                   onChange={handleInput} />
             </label>
-            <label>
+            <label className={"narrow"}>
               GST %:
                 <input
                   type="number"
@@ -110,9 +120,13 @@ const ItemPicker = () => {
                   name="GSTPercentage"
                   onChange={handleInput} />
             </label>
-          </>
+            <input type="submit" value="Add"/>
+          </> :
+          <Link to="/manage/items">
+            <input type="button" value="Add Items"/>
+          </Link>
         }
-      </div>
+      </form>
       <hr/>
     </div>
   );
diff --git a/src/components/pickers/scss/_picker.scss b/src/components/pickers/scss/_picker.scss
index 625a1e3..4d8d1b1 100644
--- a/src/components/pickers/scss/_picker.scss
+++ b/src/components/pickers/scss/_picker.scss
@@ -65,41 +65,3 @@
         color: $primaryAccentColor;
     }
 }
-
-@mixin picker {
-    .picker {
-        padding-bottom: 2.5rem;
-        margin: auto;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-evenly;
-        align-items: center;
-        min-width: 90%;
-        @include label;
-
-        .buttons {
-            position: absolute;
-            display: flex;
-            justify-content: space-between;
-            width: 13.5rem;
-            input {
-                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;
-            }
-            input:hover {
-                background-color: $primaryAccentColor;
-                color: $fgColorAlt;
-            }
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-        }
-    }
-}
diff --git a/src/components/pickers/scss/item-picker.scss b/src/components/pickers/scss/item-picker.scss
index b04fb54..093b0e9 100644
--- a/src/components/pickers/scss/item-picker.scss
+++ b/src/components/pickers/scss/item-picker.scss
@@ -23,8 +23,13 @@
 }
 
 .item-picker {
-    display: flex;
-    justify-content: space-evenly;
+    //display: flex;
+    //flex-wrap: wrap;
+    //justify-content: space-between;
+    //align-items: center;
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+
     .options {
         width: 27rem;
         flex-grow: 1;
@@ -46,14 +51,36 @@
         white-space: pre-line;
     }
 
-    input[type=number], input.narrow {
+    label.narrow {
+        max-width: 16rem;
+        input { width: 7rem; }
+    }
+
+    input[type=number] {
         -moz-appearance: textfield;
         width: 7rem;
     }
-
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }
+
+    input[type=button], input[type=submit] {
+        padding: 0.2rem 0;
+        width: 4rem;
+        height: 1.7rem;
+        margin-top: 0.3rem;
+        margin-left: auto;
+        background-color: $inputBackgroundColor;
+        border: 1px solid $primaryAccentColor;
+        color: $fgColor;
+        border-radius: 4px;
+        transition: background-color 0.4s, color 0.4s;
+    }
+
+    input[type=button]:hover, input[type=submit]:hover {
+        background-color: $primaryAccentColor;
+        color: $fgColorAlt;
+    }
 }