implemented very basic form to select Client

3 files changed, 38 insertions, 79 deletions

diff --git a/src/components/Display/ClientInfoDisplay.js b/src/components/Display/ClientInfoDisplay.js
index 48e8c6d..34f001b 100644
--- a/src/components/Display/ClientInfoDisplay.js
+++ b/src/components/Display/ClientInfoDisplay.js
@@ -12,7 +12,7 @@ import "./Display.scss";
 const ClientInfoDisplay = (props) => {
   return (
     <div>
-      clientID: {props.clientID}
+      Client Name: {props.client.Name}
     </div>
   );
 }
diff --git a/src/components/Form/Document/DocumentInfoForm.js b/src/components/Form/Document/DocumentInfoForm.js
index 86837ed..367d4f2 100644
--- a/src/components/Form/Document/DocumentInfoForm.js
+++ b/src/components/Form/Document/DocumentInfoForm.js
@@ -16,17 +16,21 @@ const DocumentInfoForm = (/*props*/) => {
   const savedPeople = [
     {
       ID: 1,
-      Name: "one"
+      Name: "one",
+      Address: "Address Line 1"
     },
     {
       ID: 2,
-      Name: "two"
+      Name: "two",
+      Address: "Address Line 1 Line2 Lelfjdlfj"
     },
     {
       ID: 3,
-      Name: "three"
+      Name: "three",
+      Address: "ALinldfjlasjfe 1asdjflajdslfjsalkdjfdslkfjslkdfjlksjdflkjsdlkfjdlfjslkjfdlkadsflj"
     },
   ]
+
   return (
     <div className={"DocumentInfoForm"}>
       <SelectClientForm 
diff --git a/src/components/Form/People/SelectClientForm.js b/src/components/Form/People/SelectClientForm.js
index 139ffdd..06704d7 100644
--- a/src/components/Form/People/SelectClientForm.js
+++ b/src/components/Form/People/SelectClientForm.js
@@ -9,99 +9,54 @@
 import React, { useState } from "react";
 import "./../Form.scss";
 
-import ClientInfoDisplay from "./../../Display/ClientInfoDisplay";
+import ClientInfoDisplay from "../../Display/ClientInfoDisplay";
 
+const SelectClientForm = (props) => {
+  const [clientName, setClientName] = useState();
+  const [selectedClient, setSelectedClient] = useState({});
 
-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 enterValuePrompt = "start typing here";
+  const registerPrompt = "add new";
 
-  const selectPersonPrompt = "start typing here";
-  const registerPersonPrompt = "add new";
+  const formatter = (i) => `${i.Name} - ${i.Address.slice(0, 20).concat(i.Address.len < 20 ? "" : "...")}`;
 
-  // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""];
+  // check the client name value and do stuff accordingly
+  const setItemInfo = (clientName) =>
+    props.savedPeople.some(
+      (i) => clientName === formatter(i)
+        ? setSelectedClient(i)
+        : clientName === registerPrompt 
+          && alert("coming soon")
+    )
 
-  // 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);
-  }
-  */
+  console.log(selectedClient)
 
   return (
-    <div className={"SelectClientForm DocumentInfoChild"}>
+    <div className={"DocumentInfoChild"}>
       <label>
         Client Name:
           <select
             className={"selectInputBox"}
-            value={clientID}
+            value={clientName} 
             onChange={
               (event) => {
-                setClientID(event.target.value);
-                // setItemInfo(event.target.value.toLowerCase());
+                setClientName(event.target.value);
+                setItemInfo(event.target.value);
               }
           }>
-            <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={enterValuePrompt}>{enterValuePrompt}</option>
+
+            {props.savedPeople === null || props.savedPeople.map(
+              (i) => <option key={i.ID}>{formatter(i)}</option>
             )}
-            <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
+
+            <option key={registerPrompt}>{registerPrompt}</option>
           </select>
       </label>
-      <ClientInfoDisplay clientID={clientID}/>
+
+      <ClientInfoDisplay client={selectedClient}/>
     </div>
-  );
+  )
 }
 
-export default DocumentInfoForm;
+export default SelectClientForm;