created very basic client editor

10 files changed, 533 insertions, 68 deletions

diff --git a/src/components/editors/address-editor.js b/src/components/editors/address-editor.js
new file mode 100644
index 0000000..d2b015f
--- /dev/null
+++ b/src/components/editors/address-editor.js
@@ -0,0 +1,87 @@
+/* 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 { Address } from './../../classes/client';
+import './scss/address-editor.scss';
+
+import { useState } from 'react';
+
+const AddressEditor = (props) => {
+  const [country, setCountry] = useState("");
+  const [state, setState] = useState("");
+  const [city, setCity] = useState("");
+  const [address, setAddress] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+
+  return (
+    <div className={"address-editor"}>
+      <p className={"heading"}>{props.heading}</p>
+
+      <div className={"labels-wrapper"}>
+        <div>
+          <label>
+            Country:
+            <input
+              type="text" name="name"
+              value={country} onChange={(e) => setCountry(e.target.value)} />
+          </label>
+
+          <label>
+            State:
+            <input
+              type="text" name="name"
+              value={state} onChange={(e) => setState(e.target.value)} />
+          </label>
+
+          <label>
+            City:
+            <input
+              type="text" name="name"
+              value={city} onChange={(e) => setCity(e.target.value)} />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            Address:
+            <textarea
+              type="text" name="name"
+              value={address} onChange={(e) => setAddress(e.target.value)} />
+          </label>
+
+          <label>
+            Postal Code:
+            <input
+              type="text" name="name"
+              value={postalCode} onChange={(e) => setPostalCode(e.target.value)} />
+          </label>
+        </div>
+      </div>
+      {props.isBillingAddress &&
+        <label className={"checkbox-label"}>
+          <input
+            type="checkbox"
+            checked={props.billingAddressIsShipping}
+            onChange={props.callback()} />
+          Shipping address same as billing address
+        </label>
+      }
+    </div>
+  );
+}
+
+export default AddressEditor;
diff --git a/src/components/editors/client-editor.js b/src/components/editors/client-editor.js
new file mode 100644
index 0000000..eccd9e8
--- /dev/null
+++ b/src/components/editors/client-editor.js
@@ -0,0 +1,97 @@
+/* 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 { Client, saveClient } from './../../classes/client';
+import AddressEditor from './address-editor';
+import ContactEditor from './contact-editor';
+import './scss/client-editor.scss';
+
+import { useState } from 'react';
+
+const ClientEditor = (props) => {
+  const [name, setName] = useState("");
+  const [GSTIN, setGSTIN] = useState([]);
+  const [shipToBillingAddress, setShipToBillingAddress] = useState(true);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const client = new Client();
+    client.Name = name;
+    client.GSTIN = GSTIN;
+
+    // TODO: Save is for new items. implement modification too
+    saveClient(client, handleSuccess, handleFail);
+  }
+
+  const handleSuccess = () => {
+    clearAll();
+    props.callback();
+  }
+
+  const handleFail = () => {
+    alert("fail");
+  }
+
+  const clearAll = () => {
+    setName("");
+    setGSTIN("")
+  }
+
+  const handleCancel = () => {
+    // TODO: hide this component or something
+    clearAll();
+  }
+
+  return (
+    <div className={"editor-wrapper"}>
+      <p>{props.heading}</p>
+      <form onSubmit={handleSubmit} className={"editor client-editor"}>
+        <div className={"top"}>
+          <label>
+            Client Name:
+            <input
+              type="text" name="name"
+              value={name} onChange={(e) => setName(e.target.value)} />
+          </label>
+
+          <label>
+            GSTIN:
+            <input
+              type="text" name="GSTIN"
+              value={GSTIN} onChange={(e) => setGSTIN(e.target.value)} />
+          </label>
+        </div>
+
+        <ContactEditor heading={"Contact Details"}/>
+        <AddressEditor
+          heading={"Billing Address"}
+          isBillingAddress={true}
+          billingAddressIsShipping={shipToBillingAddress}
+          callback={setShipToBillingAddress} />
+
+        <span className={"buttons"}>
+          <input type="button" value="Clear" onClick={clearAll}/>
+          <input type="button" value="Cancel" onClick={handleCancel}/>
+          <input type="submit" value="Save" />
+        </span>
+      </form>
+    </div>
+  );
+}
+
+export default ClientEditor;
diff --git a/src/components/editors/contact-editor.js b/src/components/editors/contact-editor.js
new file mode 100644
index 0000000..325f4f4
--- /dev/null
+++ b/src/components/editors/contact-editor.js
@@ -0,0 +1,66 @@
+/* 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 { Contact } from './../../classes/client';
+import './scss/contact-editor.scss';
+
+import { useState } from 'react';
+
+const ContactEditor = (props) => {
+  const [name, setName] = useState("");
+  const [phones, setPhones] = useState("");
+  const [emails, setEmails] = useState("");
+  const [website, setWebsite] = useState("");
+
+  return (
+    <div className={"contact-editor"}>
+      <p className={"heading"}>{props.heading}</p>
+
+      <div className={"labels-wrapper"}>
+        <label>
+          Contact Name:
+          <input
+            type="text" name="name"
+            value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+
+        <label>
+          Website:
+          <input
+            type="text" name="name"
+            value={website} onChange={(e) => setWebsite(e.target.value)} />
+        </label>
+
+        <label>
+          Phone:
+          <textarea
+            type="text" name="name"
+            value={phones} onChange={(e) => setPhones(e.target.value)} />
+        </label>
+
+        <label>
+          E-mail:
+          <textarea
+            type="text" name="name"
+            value={emails} onChange={(e) => setEmails(e.target.value)} />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export default ContactEditor;
diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js
index af505ac..19fa7e2 100644
--- a/src/components/editors/item-editor.js
+++ b/src/components/editors/item-editor.js
@@ -96,7 +96,7 @@ const ItemEditor = (props) => {
 
   return (
     <div className={"editor-wrapper"}>
-      <p>Add New Item</p>
+      <p>{props.heading}</p>
       <form onSubmit={handleSubmit} className={"editor"}>
         <label>
           Product/Service:
diff --git a/src/components/editors/scss/_editor.scss b/src/components/editors/scss/_editor.scss
new file mode 100644
index 0000000..1ca7067
--- /dev/null
+++ b/src/components/editors/scss/_editor.scss
@@ -0,0 +1,105 @@
+/* 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 "colors";
+
+@mixin label {
+    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 $secondaryAccentColor;
+
+        select,input {
+            padding: 0.2rem;
+            max-width: 13rem;
+            width: 100%;
+            box-sizing: border-box;
+            background-color: $inputBackgroundColor;
+            border: 1px solid $primaryAccentColor;
+            color: $fgColor;
+            border-radius: 4px;
+            outline: 0;
+            font-size: 0.8rem;
+        }
+        textarea {
+            background-color: $inputBackgroundColor;
+            color: $fgColor;
+            outline: 0;
+            border: 1px solid $primaryAccentColor;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
+    }
+}
+
+.editor-wrapper {
+    width: 100%;
+    margin: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    p {
+        text-align: center;
+        font-weight: bold;
+        font-size: 1.7rem;
+        color: $primaryAccentColor;
+    }
+}
+
+@mixin editor {
+    .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%;
+        @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/editors/scss/address-editor.scss b/src/components/editors/scss/address-editor.scss
new file mode 100644
index 0000000..49b0a0a
--- /dev/null
+++ b/src/components/editors/scss/address-editor.scss
@@ -0,0 +1,65 @@
+/* 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 "colors";
+@import "editor";
+
+.address-editor {
+    min-height: 18rem;
+    .heading {
+      font-size: 1.1rem;
+      color: $primaryAccentColor;
+      font-weight: bold;
+      align: center;
+    }
+
+    .checkbox-label {
+        border: none;
+        max-width: none;
+        justify-content: left;
+        input {
+            display: inline;
+            width: 1.4rem;
+        }
+    }
+
+    .labels-wrapper {
+        @include label;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+
+        div {
+            width: 50%;
+            max-width: 20rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            input, textarea {
+                width: 100%;
+                max-width: none;
+                margin-top: 0.2rem;
+            }
+            textarea {
+                min-height: 6rem;
+                max-height: 6rem;
+                resize: none;
+            }
+        }
+    }
+}
diff --git a/src/components/editors/scss/client-editor.scss b/src/components/editors/scss/client-editor.scss
new file mode 100644
index 0000000..52b7189
--- /dev/null
+++ b/src/components/editors/scss/client-editor.scss
@@ -0,0 +1,28 @@
+/* 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 "editor";
+
+.client-editor {
+    max-width: 90%;
+    justify-content: space-around;
+    .top {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+    }
+}
diff --git a/src/components/editors/scss/colors.scss b/src/components/editors/scss/colors.scss
new file mode 100644
index 0000000..4e5b1c2
--- /dev/null
+++ b/src/components/editors/scss/colors.scss
@@ -0,0 +1,24 @@
+/* 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/>.
+ */
+
+$primaryAccentColor: #bd93f9;
+$secondaryAccentColor: #d0afff;
+
+$fgColor: white;
+$fgColorAlt: black;
+
+$inputBackgroundColor: #00000000;
diff --git a/src/components/editors/scss/contact-editor.scss b/src/components/editors/scss/contact-editor.scss
new file mode 100644
index 0000000..61e0ceb
--- /dev/null
+++ b/src/components/editors/scss/contact-editor.scss
@@ -0,0 +1,51 @@
+/* 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 "colors";
+@import "editor";
+
+@include editor;
+.contact-editor {
+  width: 90%;
+  max-width: 30rem;
+  min-height: 18rem;
+
+  .heading {
+    font-size: 1.1rem;
+    color: $primaryAccentColor;
+    font-weight: bold;
+    text-align: center;
+  }
+  .labels-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+
+    label {
+      margin: 0.2rem 0;
+      textarea {
+        min-height: 3rem;
+        max-height: 3rem;
+        resize: none;
+        width: 100%;
+        max-width: 13rem;
+        margin-top: 0.2rem;
+      }
+    }
+  }
+}
diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss
index 968795a..8f60ec7 100644
--- a/src/components/editors/scss/item-editor.scss
+++ b/src/components/editors/scss/item-editor.scss
@@ -15,74 +15,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-.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%;
+@import "editor";
 
-    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;
-        }
+.editor-wrapper {
+    // hide up/down arrows from number input
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 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;
+    input[type=number] {
+        -moz-appearance: textfield;
     }
 }