From e6ff615f7c8c3eecb8aed74b15547469da1891a9 Mon Sep 17 00:00:00 2001
From: "np.w" <nicolaspatrickward@gmail.com>
Date: Sun, 21 Feb 2021 18:48:49 -0600
Subject: [PATCH] add a color option

---
 client/src/app.js         | 27 ++++++++++++++++++++++++++-
 client/src/styles/app.css | 20 ++++++++++++++++++++
 server/server.js          |  1 +
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/client/src/app.js b/client/src/app.js
index b4af277..9b6da66 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -12,6 +12,7 @@ function App() {
   const [boxID, setBoxID] = useState(undefined);
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
+  const [boxColor, setBoxColor] = useState(0);
 
   const [showModalBox, setShowModalBox] = useState(false);
   const [showModalItem, setShowModalItem] = useState(false);
@@ -116,6 +117,10 @@ function App() {
     setBoxDescription(e.target.value);
   }
 
+  const handleColorBox = (event) => {
+    setBoxColor(parseInt(event.target.value));
+  }
+
   const handleSubmitBox = (event) => {
     event.preventDefault();
     setShowModalBox(false);
@@ -123,7 +128,8 @@ function App() {
     const boxData = {
       id: boxID,
       name: boxName,
-      description: boxDescription
+      description: boxDescription,
+      color: boxColor
     };
     if (editBoxBool)
       editBox(boxData);
@@ -147,6 +153,7 @@ function App() {
     setEditBoxBool(true);
     setBoxName(box.name);
     setBoxDescription(box.description);
+    setBoxColor(box.color);
     setBoxID(id);
     setShowModalBox(true);
   }
@@ -194,6 +201,7 @@ function App() {
     handleRemove: handleRemoveBox,
     handleName: handleNameBox,
     handleDescription: handleBoxDescription,
+    handleColor: handleColorBox,
     handleEdit: handleEditBox,
     handleDragStart: handleDragStartBox,
     handleDragOver: handleDragOverBox,
@@ -344,6 +352,22 @@ function App() {
   const handleClearFilter = () => {
     setFilter('');
   }
+
+  const colors = {
+    default: 0,
+    red: 1,
+    green: 2,
+  };
+  const colorSelector =
+    <div className="color-selector-container">
+      <label className={`${boxColor === colors.red ? "selected" : null} color`} htmlFor="color">
+        <input checked={boxColor === colors.red} onChange={boxHandler.handleColor} id="color" type="radio" value={colors.red}></input>
+      </label>
+      <label className={`${boxColor === colors.green ? "selected" : null} color`} htmlFor="color">
+        <input checked={boxColor === colors.green} onChange={boxHandler.handleColor} id="color" type="radio" value={colors.green}></input>
+      </label>
+    </div>;
+
   const boxForm =
     <form onSubmit={boxHandler.handleSubmit}>
       <input id="id" name="id" value={boxID} readOnly hidden></input>
@@ -355,6 +379,7 @@ function App() {
         <label htmlFor="box-description">description
           <input onChange={boxHandler.handleDescription} value={boxDescription} id="box-description" name="description" type="text" />
         </label>
+        {colorSelector}
       </fieldset>
       <button type="submit">submit</button>
     </form>
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 9258d50..6fd3ef2 100644
--- a/client/src/styles/app.css
+++ b/client/src/styles/app.css
@@ -296,4 +296,24 @@ button.button:hover {
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+
+.color-selector-container {
+ display: grid;
+}
+.color-selector-container > .color {
+    border-radius: 50%;
+    background-color: red;
+    width: 2em;
+    height: 2em;
+}
+.color-selector-container > .color.selected {
+    border: 1px solid black;
+}
+.color-selector-container > .color:hover {
+    cursor: pointer;
+}
+.color-selector-container > .color > input[type=radio] {
+    visibility: hidden;
 }
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 2b4978b..d1b07ed 100644
--- a/server/server.js
+++ b/server/server.js
@@ -33,6 +33,7 @@ var boxSchema = new mongoose.Schema({
     description: String,
     item: [itemSchema],
     sort: Number,
+    color: Number,
 });
 
 //compile schema into model