feat(labels): add ability to add labels to notes

src/features/tooltip/Label.module.css

@@ -0,0 +1,71 @@
+.tags {
+  list-style: none;
+  margin: 0;
+  overflow: hidden; 
+  padding: 0;
+}
+
+.tags li {
+  float: left; 
+}
+
+.tag {
+  background: #eee;
+  border-radius: 6px 6px 6px 6px;
+  color: #999;
+  display: inline-block;
+  height: 26px;
+  line-height: 26px;
+  padding: 0 20px 0 20px;
+  position: relative;
+  margin: 0 10px 10px 0;
+  text-decoration: none;
+  -webkit-transition: color 0.2s;
+}
+
+.tag::before {
+  /*background: #fff;
+  border-radius: 10px;
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
+  content: '';
+  height: 6px;
+  left: 10px;
+  position: absolute;
+  width: 6px;
+  top: 10px; Makes a hole at the begining to indicate tag*/
+}
+
+.tag::after {
+  /*background: #fff;
+  border-bottom: 13px solid transparent;
+  border-left: 10px solid #eee;
+  border-top: 13px solid transparent;
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;*/
+}
+
+.tag:hover {
+  /*background-color: #cc0000;*/
+  background-color: rgb(65, 65, 65);
+  color: white;
+}
+
+.tagInput {
+  background-color: inherit;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+  width: 75px;
+  text-align: center;
+}
+.tagInput:focus {
+  color: white;
+}
+
+.tag:hover::after {
+    border-left-color: rgb(65, 65, 65); 
+}

src/features/tooltip/Tooltip.js

@@ -4,29 +4,33 @@ import { addNote, getNotes } from 'domain/notes';
 //Styling
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTags, faTrashAlt, faSave } from '@fortawesome/free-solid-svg-icons'
+import labelStyle from "./Label.module.css";
+
 
 ///Redux
 import { connect } from "react-redux";
 import { getPosition, getSelectedDatum } from 'domain/controls';
 
+const initialState = {
+  label:"Labels",
+  height:"200px",
+  width:"300px",
+  position: [200,200],
+  currentLabel:"",
+  note: {
+    id:'',
+    note:{
+      title: '',
+      labels: [],
+      content:""
+    }
+  }
+};
 
 class TooltipControls extends React.Component {
   constructor(props){
     super(props)
-    this.state = {
-      label:"Labels",
-      height:"200px",
-      width:"300px",
-      position: [200,200],
-      note: {
-        id:'',
-        note:{
-          title: '',
-          labels: [],
-          content:""
-        }
-      }
-    }
+    this.state = initialState;
   }
 
   handleChangeTitle = (event) => {
@@ -40,19 +44,25 @@ class TooltipControls extends React.Component {
     note.note.content = event.target.value
     this.setState({note});
   }
+
+  handleLabels = (event) => {
+    this.setState({currentLabel: event.target.value});
+  }
 
   saveNote = async () => {
-    if(typeof (this.props.data.CRVIZ._SEARCH_KEY) !== 'undefined'){
+    try {
       var note = {...this.state.note}
       note.id = await this.props.data.CRVIZ._SEARCH_KEY
-      this.setState({note});
+      await this.setState({note});
 
       this.props.addNote(this.state.note);
       console.log(this.props.notes)
+    } catch(error){
+      alert('No search key')
     }
-    else{
-      console.log('else')
-    }
+    /*if(typeof (this.props.data.CRVIZ._SEARCH_KEY) !== 'undefined'){ 
+    }*/
+
   }
 
   componentDidUpdate(prevProps) {
@@ -65,6 +75,15 @@ class TooltipControls extends React.Component {
       }
     }
   }
+
+  keyPressed = (event) => {
+    if (event.key === "Enter") {
+      var note = {...this.state.note}
+      note.note.labels.push(this.state.currentLabel)
+      this.setState({note})
+      this.setState({currentLabel:""})
+    }
+  }
 
   render() {
     const style = {
@@ -89,8 +108,21 @@ class TooltipControls extends React.Component {
       fontSize: 'inherit',
       padding: '0',
       margin: '0',
-      width: 'auto'
+      width: 'inherit'
     }
+    const inputStyleTag = {
+
+    }
+
+
+    const Labels = ({labels}) => (
+      <>
+        {labels.map(label => (
+          <div className={labelStyle.tag} key={label}>{label}</div>
+        ))}
+      </>
+    );  
+
 
     return (
       <div style={style}>
@@ -115,10 +147,14 @@ class TooltipControls extends React.Component {
             <h3>{this.props.data.fieldValue} </h3>
           </div>
         }
+        {//typeof (this.props.data.CRVIZ._SEARCH_KEY) !== 'undefined' &&
         <div>
           <div>
             <b><h1><input style={inputStyle} type="text" value={this.state.note.note.title} onChange={this.handleChangeTitle} placeholder="Title"/></h1></b>
-            <h6>{this.state.label}</h6>
+            <ul className={labelStyle.tags}>
+              <li className={labelStyle.tag}><input className={labelStyle.tagInput} type="text" type="text" value={this.state.currentLabel} onChange={this.handleLabels} onKeyPress={this.keyPressed} placeholder={"+"}/></li>
+              <Labels labels={this.state.note.note.labels}/>
+            </ul>
           </div>
           <p><input style={inputStyle} type="text" value={this.state.note.note.content} onChange={this.handleChangeContent} placeholder="Take a note..."/></p>
           <div >
@@ -127,6 +163,7 @@ class TooltipControls extends React.Component {
             <FontAwesomeIcon style={{color:"#cc0000", margin:"10px"}} icon={faTrashAlt} />
           </div>
         </div>
+        }
       </div>
     );
   }