diff options
Diffstat (limited to 'src/components/tables')
-rw-r--r-- | src/components/tables/item-table.js | 78 | ||||
-rw-r--r-- | src/components/tables/scss/table.scss | 49 |
2 files changed, 127 insertions, 0 deletions
diff --git a/src/components/tables/item-table.js b/src/components/tables/item-table.js new file mode 100644 index 0000000..c1115c1 --- /dev/null +++ b/src/components/tables/item-table.js @@ -0,0 +1,78 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * 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 <https://www.gnu.org/licenses/>. + */ + +import './scss/table.scss'; +import { deleteItem } from './../../classes/item'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons' + +const ItemTable = (props) => { + const handleDelete = (i) => { + // TODO: add confirmation prompt + deleteItem(i.Id, handleDelSuccess, handleDelFail); + } + + const handleDelSuccess = () => { + props.refresh(); + } + + const handleDelFail = () => { + alert("fail") + } + + return ( + <table> + <thead> + <tr> + <th>S. No</th> + <th>Name</th> + <th>Description</th> + <th>Brand Name</th> + <th>UOM</th> + <th>HSN</th> + <th>Unit Price</th> + <th>GST %</th> + <th>Min Qty</th> + <th>Max Qty</th> + <th></th> + </tr> + </thead> + <tbody> + {props.items && props.items.map((i, id=id+1) => ( + <tr key={id}> + <td>{id+1}</td> + <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td> + <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td> + <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td> + <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td> + <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td> + <td className={i.UnitPrice === 0.0 ? "empty" : ""}>{i.UnitPrice}</td> + <td className={i.GSTPercentage === 0.0 ? "empty" : ""}>{i.GSTPercentage}</td> + <td className={i.MinQuantity === 0.0 ? "empty" : ""}>{i.MinQuantity}</td> + <td className={i.MaxQuantity === 0.0 ? "empty" : ""}>{i.MaxQuantity}</td> + <td className={"buttons"}> + <FontAwesomeIcon icon={faPencil} onClick={() => alert("editing coming soon")}/> + <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/> + </td> + </tr> + ))} + </tbody> + </table> + ); +} + +export default ItemTable; diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss new file mode 100644 index 0000000..44d7f57 --- /dev/null +++ b/src/components/tables/scss/table.scss @@ -0,0 +1,49 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * 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 <https://www.gnu.org/licenses/>. + */ + +table { + width: 90%; + margin: auto; + + th { + box-sizing: border-box; + background-color: #383a59; + font-weight: normal; + text-align: left; + padding-left: 0.3rem; + } + + tr:hover { + background-color: rgba(#383a59, 0.4); + } + + td { + border-bottom: 1px solid white; + } + + td.empty { + border-bottom: 1px solid gray; + } + + td.buttons { + display: flex; + justify-content: space-evenly; + align-items: center; + border: none; + height: 1.4rem; + } +} |