From 13faea9acadc8d640bbe1e0d1ede4dbdcd69e7fa Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Mon, 3 May 2021 22:01:52 +0530 Subject: added a form to manipulate some data about the document and the client info --- src/components/BillingPage.js | 3 + src/components/Display/ClientInfoDisplay.js | 20 +++++ src/components/Form/Document/DocumentInfoForm.js | 102 +++++---------------- src/components/Form/Form.scss | 16 +++- src/components/Form/People/SelectClientForm.js | 107 +++++++++++++++++++++++ src/styles/_theme.scss | 6 ++ 6 files changed, 175 insertions(+), 79 deletions(-) create mode 100644 src/components/Display/ClientInfoDisplay.js create mode 100644 src/components/Form/People/SelectClientForm.js diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js index 40917e5..73778a1 100644 --- a/src/components/BillingPage.js +++ b/src/components/BillingPage.js @@ -50,8 +50,11 @@ const BillingPage = () => { // get data from server on startup useEffect(() => { + async function fetchdata() { getRegisteredItems(); getRegisteredPeople(); + } + fetchdata() }, []); // TODO: to be handled by backend const defGSTValue = 18; diff --git a/src/components/Display/ClientInfoDisplay.js b/src/components/Display/ClientInfoDisplay.js new file mode 100644 index 0000000..48e8c6d --- /dev/null +++ b/src/components/Display/ClientInfoDisplay.js @@ -0,0 +1,20 @@ +/* + * OpenBills - Self hosted browser app to generate and keep track of simple invoices + * Version - 0 + * Licensed under the MIT license - https://opensource.org/licenses/MIT + * + * Copyright (c) 2021 Vidhu Kant Sharma +*/ + +import React from "react"; +import "./Display.scss"; + +const ClientInfoDisplay = (props) => { + return ( +
+ clientID: {props.clientID} +
+ ); +} + +export default ClientInfoDisplay; diff --git a/src/components/Form/Document/DocumentInfoForm.js b/src/components/Form/Document/DocumentInfoForm.js index 0b133c6..86837ed 100644 --- a/src/components/Form/Document/DocumentInfoForm.js +++ b/src/components/Form/Document/DocumentInfoForm.js @@ -6,87 +6,33 @@ * Copyright (c) 2021 Vidhu Kant Sharma */ -import React, { useState } from "react"; +import React/*, { useState }*/ from "react"; import "./../Form.scss"; - -const DocumentInfoForm = (props) => { - const [clientName, setClientName] = useState(0); - /* TODO: implement a way such that the database also - * gives the ID of the client and all the functions - * are carried out from the ID because if two people - * with same name are added then this shit is done for - */ - - const selectPersonPrompt = "start typing here"; - const registerPersonPrompt = "add new"; - - // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""]; - - // Extract the model names from savedItems - let savedPeopleNames = []; - if (props.savedItems !== null) { - for (let i = 0; i < props.savedPeople.length; i++) { - savedPeopleNames.push(props.savedPeople[i].Name); - } - } - - // set description and price - // when item is entered - /* - const setItemInfo = (itemName) => { - for (let i = 0; i < props.savedItems.length; i++) { - const mod = props.savedItems[i].Model.toLowerCase(); - const desc = props.savedItems[i].Description; - const price = props.savedItems[i].Price; - const hsn = props.savedItems[i].HSN; - const gst = props.savedItems[i].GST; - - if (mod === itemName) { - setItemDescValue(desc); - setItemPriceValue(price); - setItemHSNValue(hsn); - setItemGSTValue(gst); - break; - } - } - } - */ - - /* - const resetAllValues = () => { - setItemNameValue(""); - setItemDescValue(""); - setItemQtyValue(1); - setItemPriceValue(1); - setItemDiscountValue(0); - setItemHSNValue(0); - setItemGSTValue(props.defGSTValue); - } - */ - +import SelectClientForm from "./../People/SelectClientForm"; + + +const DocumentInfoForm = (/*props*/) => { + const savedPeople = [ + { + ID: 1, + Name: "one" + }, + { + ID: 2, + Name: "two" + }, + { + ID: 3, + Name: "three" + }, + ] return ( - +
+ +
); } diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 09dfc16..b4490a1 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -38,7 +38,7 @@ input[type=number] { border-bottom: 1px dotted $underline1; padding: 0.8rem 0; - font-size: 1.5rem; + font-size: $fontSize2; } @mixin formFlex($justify) { @@ -122,6 +122,20 @@ input { margin: 1rem; } +.DocumentInfoForm { + @include formPane(); + width: 100%; + min-height: 10rem; +} + +.DocumentInfoForm .DocumentInfoChild { + border: 1px solid white; + width: 40%; + height: 10rem; + font-size: $fontSize2; +} + + /* */ .MetaInfoForm { width: 60%; diff --git a/src/components/Form/People/SelectClientForm.js b/src/components/Form/People/SelectClientForm.js new file mode 100644 index 0000000..139ffdd --- /dev/null +++ b/src/components/Form/People/SelectClientForm.js @@ -0,0 +1,107 @@ +/* + * OpenBills - Self hosted browser app to generate and keep track of simple invoices + * Version - 0 + * Licensed under the MIT license - https://opensource.org/licenses/MIT + * + * Copyright (c) 2021 Vidhu Kant Sharma +*/ + +import React, { useState } from "react"; +import "./../Form.scss"; + +import ClientInfoDisplay from "./../../Display/ClientInfoDisplay"; + + +const DocumentInfoForm = (props) => { + const [clientID, setClientID] = useState(""); + /* TODO: implement a way such that the database also + * gives the ID of the client and all the functions + * are carried out from the ID because if two people + * with same name are added then this shit is done for + */ + + const selectPersonPrompt = "start typing here"; + const registerPersonPrompt = "add new"; + + // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""]; + + // No need for this code but just in case + // Extract the model names from savedItems + /* + let savedPeopleNames = []; + if (props.savedPeople !== null) { + for (let i = 0; i < props.savedPeople.length; i++) { + savedPeopleNames.push(props.savedPeople[i].Name); + } + }*/ + + // set description and price + // when item is entered + /* + const setItemInfo = (itemName) => { + for (let i = 0; i < props.savedItems.length; i++) { + const mod = props.savedItems[i].Model.toLowerCase(); + const desc = props.savedItems[i].Description; + const price = props.savedItems[i].Price; + const hsn = props.savedItems[i].HSN; + const gst = props.savedItems[i].GST; + + if (mod === itemName) { + setItemDescValue(desc); + setItemPriceValue(price); + setItemHSNValue(hsn); + setItemGSTValue(gst); + break; + } + } + } + */ + + /* + const resetAllValues = () => { + setItemNameValue(""); + setItemDescValue(""); + setItemQtyValue(1); + setItemPriceValue(1); + setItemDiscountValue(0); + setItemHSNValue(0); + setItemGSTValue(props.defGSTValue); + } + */ + + return ( +
+ + +
+ ); +} + +export default DocumentInfoForm; diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss index b2ca97b..09c90d5 100644 --- a/src/styles/_theme.scss +++ b/src/styles/_theme.scss @@ -37,6 +37,12 @@ $defFont: 'Quicksand', sans-serif; /* main dark theme inspired by dracula */ /* my personal favourite */ /* I name it dorakura (ドラクラー) */ + +$fontSize1: 1rem; +$fontSize2: 1.5rem; +$fontSize3: 2rem; +$fontSize4: 2.5rem; + $disabledColor: gray; $warningColor: red; $shadowColor: #232627; -- cgit v1.2.3