From db693ab4000405f5b02e71dfaf78efe6884b775b Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Mon, 26 Sep 2022 20:00:09 +0530 Subject: First Commit --- src/components/editors/item-editor.js | 177 +++++++++++++++++++++++++++ src/components/editors/scss/item-editor.scss | 88 +++++++++++++ 2 files changed, 265 insertions(+) create mode 100644 src/components/editors/item-editor.js create mode 100644 src/components/editors/scss/item-editor.scss (limited to 'src/components/editors') diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js new file mode 100644 index 0000000..af505ac --- /dev/null +++ b/src/components/editors/item-editor.js @@ -0,0 +1,177 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * 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 + * along with this program. If not, see . + */ + +import { Item, saveItem } from './../../classes/item' +import { Brand, getAllBrands } from './../../classes/brand' +import './scss/item-editor.scss' + +import { useState, useEffect } from 'react'; + +const ItemEditor = (props) => { + const [name, setName] = useState(""); + const [desc, setDesc] = useState(""); + const [HSN, setHSN] = useState(""); + const [unit, setUnit] = useState(""); + const [unitPrice, setUnitPrice] = useState(0.00); + const [gstP, setGSTP] = useState(0.00); + const [minQty, setMinQty] = useState(0.00); + const [maxQty, setMaxQty] = useState(0.00); + const [brand, setBrand] = useState(new Brand()); + const [savedBrands, setSavedBrands] = useState([]); + + // get saved brands from API + // needed by the brands dropdown menu + useEffect(() => { + // TODO: handle error + getAllBrands(setSavedBrands, () => {}); + }, []) + + const handleSubmit = (e) => { + e.preventDefault(); + + const item = new Item(); + item.Name = name; + item.Description = desc; + item.HSN = HSN; + item.UnitOfMeasure = unit; + item.UnitPrice = unitPrice; + item.GSTPercentage = gstP; + item.MinQuantity = minQty; + item.MaxQuantity = maxQty; + item.Brand = brand; + + // TODO: Save is for new items. implement modification too + saveItem(item, handleSuccess, handleFail); + } + + const handleSuccess = () => { + clearAll(); + props.callback(); + } + + const handleFail = () => { + alert("fail"); + } + + const handleBrandSelect = (e) => { + const b = savedBrands.filter(i => i.Id === e.target.value )[0]; + setBrand(b ? b : new Brand()); + } + + const clearAll = () => { + setName(""); + setDesc(""); + setHSN(""); + setUnit(""); + setUnitPrice(0.00); + setGSTP(0.00); + setMinQty(0.00); + setMaxQty(0.00); + setBrand(new Brand()) + } + + const handleCancel = () => { + // TODO: hide this component or something + clearAll(); + } + + const validateFloatInput = (e, callback) => { + const f = parseFloat(e.target.value); + f && callback(f) + } + + return ( +
+

Add New Item

+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +} + +export default ItemEditor; diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss new file mode 100644 index 0000000..968795a --- /dev/null +++ b/src/components/editors/scss/item-editor.scss @@ -0,0 +1,88 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * 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 + * along with this program. If not, see . + */ + +.editor-wrapper { + width: 100%; + margin: auto; + padding: 0; + margin: 0; + position: relative; + p { + text-align: center; + font-weight: bold; + font-size: 1.7rem; + color: #bd93f9; + } +} + +.editor { + padding-bottom: 2.5rem; + margin: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + min-width: 90%; + + label { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + max-width: 24rem; + width: 90%; + padding: 0.3rem 0.1rem; + border-bottom: 1px dotted #d0afff; + + select,input { + padding: 0.2rem; + max-width: 13rem; + width: 90%; + box-sizing: border-box; + background-color: #00000000; + border: 1px solid #bd93f9; + color: white; + border-radius: 4px; + outline: 0; + } + } + + .buttons { + position: absolute; + display: flex; + justify-content: space-between; + width: 13.5rem; + input { + padding: 0.2rem 0; + width: 4rem; + background-color: #00000000; + border: 1px solid #bd93f9; + color: white; + border-radius: 4px; + transition: background-color 0.4s, color 0.4s; + } + input:hover { + background-color: #bd93f9; + color: black; + } + bottom: 0; + left: 0; + right: 0; + margin: auto; + } +} -- cgit v1.2.3