aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/BillingPage.js3
-rw-r--r--src/components/Display/ClientInfoDisplay.js20
-rw-r--r--src/components/Form/Document/DocumentInfoForm.js102
-rw-r--r--src/components/Form/Form.scss16
-rw-r--r--src/components/Form/People/SelectClientForm.js107
-rw-r--r--src/styles/_theme.scss6
6 files changed, 175 insertions, 79 deletions
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 (
+ <div>
+ clientID: {props.clientID}
+ </div>
+ );
+}
+
+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 (
- <label>
- Client Name:
- <select
- className={"selectInputBox"}
- value={clientName}
- onChange={
- (event) => {
- alert(event.target.value);
- setClientName(event.target.value);
- // setItemInfo(event.target.value.toLowerCase());
- }
- }>
- <option key={selectPersonPrompt}>{selectPersonPrompt}</option>
- {savedPeopleNames.map(
- (i) => {
- return <option key={i}>{i}</option>
- }
- )}
- <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
- </select>
- </label>
+ <div className={"DocumentInfoForm"}>
+ <SelectClientForm
+ savedPeople={savedPeople}
+ />
+ </div>
);
}
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 (
+ <div className={"SelectClientForm DocumentInfoChild"}>
+ <label>
+ Client Name:
+ <select
+ className={"selectInputBox"}
+ value={clientID}
+ onChange={
+ (event) => {
+ setClientID(event.target.value);
+ // setItemInfo(event.target.value.toLowerCase());
+ }
+ }>
+ <option>{selectPersonPrompt}</option>
+ {props.savedPeople.map(
+ (i) => {
+ return (
+ // the className helps determine the id of the option
+ // TODO: find another way to show this selection box
+ // such that the user can enter name and it chooses the id
+ // most likely it needs to be a different component
+ <option key={i.ID}>
+ {i.Name}
+ </option>
+ );
+ }
+ )}
+ <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
+ </select>
+ </label>
+ <ClientInfoDisplay clientID={clientID}/>
+ </div>
+ );
+}
+
+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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 01:48:44 +0000