From e35e843a296638cd6f4366d0a89a4b91c70f7fbd Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Tue, 19 Feb 2019 19:06:19 -0300
Subject: [PATCH 1/2] tag selector styling

---
 client/src/app/demo/components-demo-page.js  | 18 +++++
 client/src/core-components/tag-selector.js   | 70 +++++++++++++++-----
 client/src/core-components/tag-selector.scss | 41 ++++++++++++
 3 files changed, 111 insertions(+), 18 deletions(-)
 create mode 100644 client/src/core-components/tag-selector.scss

diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index 9e42865c..f087575c 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -17,6 +17,7 @@ const Menu = require('core-components/menu');
 const Tooltip = require('core-components/tooltip');
 const Table = require('core-components/table');
 const InfoTooltip = require('core-components/info-tooltip');
+const TagSelector = require('core-components/tag-selector');
 
 function rand(min, max, num) {
     var rtn = [];
@@ -75,6 +76,23 @@ let DemoPage = React.createClass({
 				<Button type="primary">Sign up</Button>
 			)
 		},
+        {
+            title: 'Tag selector',
+            render: (
+                <TagSelector
+                    items={[
+                        {name: 'tag1', color: 'blue'},
+                        {name: 'suggestion', color: '#ff6900'},
+                        {name: 'tag3', color: 'yellow'},
+                        {name: 'tag4', color: 'green'},
+                        {name: 'bug', color: '#eb144c'},
+                    ]}
+                    values={['suggestion','bug']}
+                    onRemoveClick={(e)  => console.log('deleted click', e)}
+                    onTagSelected={(e)  => console.log('selected click', e)}
+                />
+            )
+        },
         {
             title: 'Input',
             render: (
diff --git a/client/src/core-components/tag-selector.js b/client/src/core-components/tag-selector.js
index 5a342ec3..cba03c45 100644
--- a/client/src/core-components/tag-selector.js
+++ b/client/src/core-components/tag-selector.js
@@ -7,33 +7,67 @@ class TagSelector extends React.Component {
     static propTypes = {
         items: React.PropTypes.arrayOf(React.PropTypes.shape({
             name: React.PropTypes.string,
-            color: React.PropTypes.string
+            color: React.PropTypes.string,
         })),
-        values: React.PropTypes.arrayOf(React.PropTypes.string)
+        values: React.PropTypes.arrayOf(React.PropTypes.string),
+        onRemoveClick: React.PropTypes.func,
     };
 
     render() {
         return (
-            <div>
-                <div style={{alignItems:'center', backgroundColor:'light-blue'}}>
-                    <h2>Tags</h2>
-                    <div style={{justifyContent:'flex-start', borderRadius:'25px', backgroundColor:'grey'}}>{this.renderItemsList()}</div>
+            <div className="tag-selector">
+                <div className="tag-selector__selected-tags">
+                    {this.renderSelectedTags()}
+                </div>
+                <div className="tag-selector__tag-options">
+                    {this.renderTagOptions()}
                 </div>
-                <div>{this.props.values.join()}</div>
             </div>
         );
     }
-    renderItemsList() {
-        const itemList = _.filter(this.props.items,(item) => !_.includes(this.props.values,item.name));
-        console.log('la lista de items librs',itemList);
-        return itemList.map((item,index) => {
-                return(
-                    <spam style={{justifyContent:'space-between',backgroundColor:item.color,borderRadius:'25px'}} key={index}>
-                        <spam >{item.name}</spam>
-                        <spam style={{color:item.color,borderRadius:'25px' ,backgroundColor:'white'}}>x</spam>
-                    </spam>
-                )
-        });
+
+    renderSelectedTags() {
+        const itemList = this.props.values.map(value => _.find(this.props.items, {name:value}));
+
+        return itemList.map(this.renderSelectedTag.bind(this));
     }
+
+
+    renderSelectedTag(item,index) {
+        return (
+            <div className="tag-selector__selected-tag" style={{backgroundColor:item.color}} key={index}>
+                <span className="tag-selector__selected-tag-name">{item.name}</span>
+                <span onClick={this.onRemoveClick.bind(this,item.name)} className="tag-selector__selected-tag-remove" >
+                    <Icon name="times-circle" size="small"/>
+                </span>
+            </div>
+        );
+    }
+
+    renderTagOptions() {
+        const itemList = _.filter(this.props.items,(item) => !_.includes(this.props.values,item.name));
+
+        return itemList.map(this.renderTagOption.bind(this));
+    }
+
+    renderTagOption(item,index) {
+        return (
+            <div onClick={this.onTagSelected.bind(this,item.name)} className="tag-selector__tag-option" style={{backgroundColor:item.color}} key={index}>
+                <span className="tag-selector__tag-option-name" >{item.name}</span>
+            </div>
+        );
+    }
+
+    onRemoveClick(name) {
+        if(this.props.onRemoveClick){
+            this.props.onRemoveClick(name);
+        }
+    }
+    onTagSelected(name) {
+        if(this.props.onTagSelected){
+            this.props.onTagSelected(name);
+        }
+    }
+
 }
 export default TagSelector;
diff --git a/client/src/core-components/tag-selector.scss b/client/src/core-components/tag-selector.scss
new file mode 100644
index 00000000..cf60822a
--- /dev/null
+++ b/client/src/core-components/tag-selector.scss
@@ -0,0 +1,41 @@
+@import '../scss/vars';
+
+.tag-selector{
+  margin-bottom: 30px;
+  text-align: left;
+  &__selected-tags {
+    border-radius: 3px;
+    background-color:white;
+    padding:3px 1px;
+  }
+
+  &__selected-tag,
+  &__tag-option {
+    color:white;
+    border-radius: 3px;
+    margin-left: 5px;
+    padding:3px;
+    font-size: 10px;
+  }
+
+  &__selected-tag {
+    display: inline-block;
+
+    &-remove {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+
+  &__tag-options {
+    font-size: 13px;
+    color: $dark-grey;
+  }
+
+  &__tag-option {
+    cursor: pointer;
+    &-name {
+
+    }
+  }
+}
\ No newline at end of file

From 956dac16003fb724e3b0182a97a1962141c46f3c Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Wed, 20 Feb 2019 03:03:29 -0300
Subject: [PATCH 2/2] User dropdown for tag selector

---
 client/src/app/demo/components-demo-page.js  |  2 +-
 client/src/core-components/drop-down.js      | 13 +++--
 client/src/core-components/tag-selector.js   | 22 ++++----
 client/src/core-components/tag-selector.scss | 54 +++++++++++++++-----
 4 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index f087575c..e421126e 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -83,7 +83,7 @@ let DemoPage = React.createClass({
                     items={[
                         {name: 'tag1', color: 'blue'},
                         {name: 'suggestion', color: '#ff6900'},
-                        {name: 'tag3', color: 'yellow'},
+                        {name: 'tag3', color: 'red'},
                         {name: 'tag4', color: 'green'},
                         {name: 'bug', color: '#eb144c'},
                     ]}
diff --git a/client/src/core-components/drop-down.js b/client/src/core-components/drop-down.js
index 9bdc22ae..5dc03f80 100644
--- a/client/src/core-components/drop-down.js
+++ b/client/src/core-components/drop-down.js
@@ -50,11 +50,12 @@ class DropDown extends React.Component {
 
     render() {
         let animation = this.getAnimationStyles();
-        let selectedItem = this.props.items[this.getSelectedIndex()];
 
         return (
             <div className={this.getClass()}>
-                {this.renderCurrentItem(selectedItem)}
+                <div {...this.getCurrentItemProps()}>
+                    {this.props.children ? this.props.children : this.renderCurrentItem()}
+                </div>
                 <Motion defaultStyle={animation.defaultStyle} style={animation.style} onRest={this.onAnimationFinished.bind(this)}>
                     {this.renderList.bind(this)}
                 </Motion>
@@ -72,15 +73,17 @@ class DropDown extends React.Component {
         );
     }
 
-    renderCurrentItem(item) {
-        var iconNode = null;
+    renderCurrentItem() {
+        let item = this.props.items[this.getSelectedIndex()];
+        let iconNode = null;
+
 
         if (item.icon) {
             iconNode = <Icon className="drop-down__current-item-icon" name={item.icon} />;
         }
 
         return (
-            <div {...this.getCurrentItemProps()}>
+            <div>
                 {iconNode}{item.content}
             </div>
         );
diff --git a/client/src/core-components/tag-selector.js b/client/src/core-components/tag-selector.js
index cba03c45..6af1469d 100644
--- a/client/src/core-components/tag-selector.js
+++ b/client/src/core-components/tag-selector.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import Icon from 'core-components/icon';
+import DropDown from 'core-components/drop-down';
 
 class TagSelector extends React.Component {
 
@@ -16,12 +17,9 @@ class TagSelector extends React.Component {
     render() {
         return (
             <div className="tag-selector">
-                <div className="tag-selector__selected-tags">
+                <DropDown className="tag-selector__drop-down" items={this.renderTagOptions().map(tag => ({content: tag}))} selectedIndex={-1} size="large">
                     {this.renderSelectedTags()}
-                </div>
-                <div className="tag-selector__tag-options">
-                    {this.renderTagOptions()}
-                </div>
+                </DropDown>
             </div>
         );
     }
@@ -35,7 +33,7 @@ class TagSelector extends React.Component {
 
     renderSelectedTag(item,index) {
         return (
-            <div className="tag-selector__selected-tag" style={{backgroundColor:item.color}} key={index}>
+            <div className="tag-selector__selected-tag" style={{backgroundColor:item.color}} onClick={event => event.stopPropagation()} key={index}>
                 <span className="tag-selector__selected-tag-name">{item.name}</span>
                 <span onClick={this.onRemoveClick.bind(this,item.name)} className="tag-selector__selected-tag-remove" >
                     <Icon name="times-circle" size="small"/>
@@ -52,20 +50,22 @@ class TagSelector extends React.Component {
 
     renderTagOption(item,index) {
         return (
-            <div onClick={this.onTagSelected.bind(this,item.name)} className="tag-selector__tag-option" style={{backgroundColor:item.color}} key={index}>
+            <div onClick={this.onTagSelected.bind(this,item.name)} className="tag-selector__tag-option" key={index}>
+                <span className="tag-selector__tag-option-square" style={{backgroundColor:item.color}}/>
                 <span className="tag-selector__tag-option-name" >{item.name}</span>
             </div>
         );
     }
 
-    onRemoveClick(name) {
+    onRemoveClick(tag) {
+
         if(this.props.onRemoveClick){
-            this.props.onRemoveClick(name);
+            this.props.onRemoveClick(tag);
         }
     }
-    onTagSelected(name) {
+    onTagSelected(tag) {
         if(this.props.onTagSelected){
-            this.props.onTagSelected(name);
+            this.props.onTagSelected(tag);
         }
     }
 
diff --git a/client/src/core-components/tag-selector.scss b/client/src/core-components/tag-selector.scss
index cf60822a..2cb298af 100644
--- a/client/src/core-components/tag-selector.scss
+++ b/client/src/core-components/tag-selector.scss
@@ -3,27 +3,45 @@
 .tag-selector{
   margin-bottom: 30px;
   text-align: left;
-  &__selected-tags {
-    border-radius: 3px;
-    background-color:white;
-    padding:3px 1px;
+
+  &__drop-down {
+    .drop-down__current-item {
+      cursor: text;
+      background-color: white;
+      border: 1px solid $grey;
+
+      &:focus {
+        outline: none;
+        border-color: $primary-blue;
+      }
+    }
   }
 
-  &__selected-tag,
-  &__tag-option {
-    color:white;
+  &__selected-tags {
     border-radius: 3px;
-    margin-left: 5px;
-    padding:3px;
-    font-size: 10px;
+    background-color: white;
+    padding: 3px 1px;
   }
 
   &__selected-tag {
+    color: white;
     display: inline-block;
+    border-radius: 3px;
+    margin-left: 5px;
+    padding: 3px;
+    font-size: 13px;
+  }
+
+  &__selected-tag {
+    cursor: default;
 
     &-remove {
-      margin-left: 10px;
       cursor: pointer;
+      margin-left: 10px;
+
+      &:hover {
+        color: $light-grey;
+      }
     }
   }
 
@@ -33,9 +51,19 @@
   }
 
   &__tag-option {
-    cursor: pointer;
-    &-name {
+    color: $primary-black;
+    display: flex;
+    align-items: center;
 
+    &-square {
+      display: inline-block;
+      height: 15px;
+      width: 15px;
+      border-radius: 4px;
+    }
+
+    &-name {
+      margin-left: 10px;
     }
   }
 }
\ No newline at end of file