add a color option

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>

client/src/styles/app.css

@@ -297,3 +297,23 @@ button.button:hover {
     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;
+}

server/server.js

@@ -33,6 +33,7 @@ var boxSchema = new mongoose.Schema({
     description: String,
     item: [itemSchema],
     sort: Number,
+    color: Number,
 });
 
 //compile schema into model