refactoting tag manager

css/base.css

@@ -744,6 +744,7 @@ table.permission-editor td.checkbox {
 .panel-form {
   display: flex;
   flex-direction: column;
+  padding: 0;
 }
 
 .panel-form-row {
@@ -1574,12 +1575,10 @@ ul.tabbar li.active > a:after {
   border-bottom: 1px solid #ccc;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   transition: all 0.1s ease-in-out;
-  width: 100%;
   max-height: 10rem;
   min-height: 4rem;
   overflow-y: scroll;
-  margin: 0.25rem 0rem 0.25rem 0rem;
+  margin: 0.25rem 0 0.25rem 0;
-  padding: 0 0 0.5rem 0.5rem;
   outline: none;
   color: #666;
   align-items: center;

index.html

@@ -1449,14 +1449,6 @@
         this.props.onSubmit(null, vcard(this.state.fullName, img));
       },
 
-      handleShowTagManager: function() {
-        this.setState({showTagManager: true});
-      },
-
-      handleHideTagManager: function() {
-        this.setState({showTagManager: false});
-      },
-
       handleTagsUpdated: function(tags) {
         this.setState({showTagManager: false});
         // Check if tags have actually changed.
@@ -1466,6 +1458,10 @@
         this.props.onUpdateTags(tags);
       },
 
+      handleHideTagManager: function() {
+        // do nothing. Needed to enable Cancel button in tag manager.
+      },
+
       render: function() {
         var tags = [];
         this.state.tags.map(function(tag) {
@@ -1515,20 +1511,12 @@
               </div>
             </div>
             <div className="hr" />
-            {this.state.showTagManager ?
             <TagManager
+              title="Tags (user discovery)"
+              activated={false}
               tags={this.state.tags}
               onSubmit={this.handleTagsUpdated}
               onCancel={this.handleHideTagManager} />
-              :
-              <div className="panel-form-column">
-                <div><label className="small">Tags (user discovery):</label></div>
-                <a href="#" className="flat-button" onClick={this.handleShowTagManager}>
-                  <i className="material-icons">edit</i> Manage tags
-                </a>
-                <span>{tags}</span>
-              </div>
-            }
           </div>
         );
       }
@@ -1539,26 +1527,15 @@
     var TagManager = React.createClass({
       getInitialState: function() {
         return {
-          tags: this.wrapTags(this.props.tags),
+          tags: this.props.tags,
           tagInput: '',
+          activated: this.props.activated,
           noTagsMessage: 'Add some tags'
         };
       },
 
-      wrapTags: function(tags) {
+      handleShowTagManager: function() {
-        var wrapped = [];
+        this.setState({activated: true});
-        tags.map(function(tag) {
-          wrapped.push({user: tag});
-        });
-        return wrapped;
-      },
-
-      unwrapTags: function(tags) {
-        var unwrapped = [];
-        tags.map(function(tag) {
-          unwrapped.push(tag.user);
-        });
-        return unwrapped;
       },
 
       handleTagInput: function(text) {
@@ -1579,47 +1556,81 @@
         tag = tag.trim();
         if (tag.length > 0) {
           var tags = this.state.tags.slice(0);
-          tags.push({user: tag});
+          tags.push(tag);
           this.setState({tags: tags, tagInput: ''});
         }
+        if (this.props.onTagsChanged) {
+          this.props.onTagsChanged(tags);
+        }
       },
 
       handleRemoveTag: function(tag, index) {
         var tags = this.state.tags.slice(0);
         tags.splice(index, 1);
         this.setState({tags: tags});
+        if (this.props.onTagsChanged) {
+          this.props.onTagsChanged(tags);
+        }
       },
 
       handleSubmit: function() {
-        var tags = this.unwrapTags(this.state.tags);
+        var tags = this.state.tags.slice(0);
         var inp = this.state.tagInput.trim();
         if (inp.length > 0) {
           tags.push(inp);
         }
         this.props.onSubmit(tags);
+        this.setState({activated: false, tags: tags});
       },
 
       handleCancel: function() {
+        this.setState({activated: false, tags: this.props.tags});
         this.props.onCancel();
       },
 
       render: function() {
+        var tags = [];
+        if (this.state.activated) {
+          this.state.tags.map(function(tag) {
+            tags.push({user: tag});
+          });
+        } else {
+          this.state.tags.map(function(tag) {
+            tags.push(<span className="badge" key={tags.length}>{tag}</span>);
+          });
+          if (tags.length == 0) {
+            tags = <i>No tags defined. Add some.</i>;
+          }
+        }
         return (
-          <div id="tag-manager">
+          <div className="panel-form-column">
             <div className="panel-form-row">
-              <label className="small">Tags (user discovery)</label>
+              <label className="small">{this.props.title}</label>
             </div>
+            {this.state.activated ?
+              <div>
               <ChipInput
-              chips={this.state.tags}
+                chips={tags}
                 avatarDisabled={true}
                 prompt={this.state.noTagsMessage}
                 onEnter={this.handleAddTag}
                 onChipRemoved={this.handleRemoveTag}
                 filterFunc={this.handleTagInput} />
+              {this.props.onSubmit || this.props.onCancel ?
                 <div id="tag-manager-buttons" className="panel-form-row">
                   <button className="blue" onClick={this.handleSubmit}>OK</button>
                   <button className="white" onClick={this.handleCancel}>Cancel</button>
                 </div>
+              : null}
+              </div>
+            :
+              <div>
+                <a href="#" className="flat-button" onClick={this.handleShowTagManager}>
+                  <i className="material-icons">edit</i> Manage tags
+                </a>
+                <span>{tags}</span>
+              </div>
+          }
           </div>
         );
       }
@@ -2020,12 +2031,14 @@
             <div className="panel-form-row">
               <label className="small">Group members</label>
             </div>
+            <div className="panel-form-row">
               <ChipInput
                 chips={this.state.members}
                 required={this.props.requiredMember}
                 prompt="add members"
                 filterFunc={this.handleContactFilter}
                 onChipRemoved={this.handleMemberRemoved} />
+            </div>
             <div className="panel-form-row">
               <label className="small">All contacts</label>
             </div>
@@ -2123,7 +2136,8 @@
         return {
           fn: '', // full/formatted name
           private: '',
-          imageDataUrl: null
+          imageDataUrl: null,
+          tags: []
         };
       },
       handleFnChange: function(e) {
@@ -2135,6 +2149,9 @@
       handleImageChanged: function(img) {
         this.setState({imageDataUrl: img});
       },
+      handleTagsUpdated: function(tags) {
+        this.setState({tags: tags});
+      },
       handleSubmit: function(e) {
         e.preventDefault();
         if (this.state.fn && this.state.fn.trim()) {
@@ -2148,7 +2165,7 @@
           submitClasses += " disabled";
         }
         return (
-          <div className="panel-form">
+          <form className="panel-form" onSubmit={this.handleSubmit}>
             <div className="panel-form-row">
               <div className="panel-form-column">
                 <label className="small" htmlFor="new-topic-fn">Group name</label>
@@ -2163,10 +2180,14 @@
                 onError={this.props.onError}
                 onImageChanged={this.handleImageChanged} />
             </div>
+            <TagManager
+              tags={this.state.tags}
+              activated={true}
+              title="Optional tags (search and discovery)" />
             <div className="dialog-buttons">
-              <button className={submitClasses} onClick={this.handleSubmit}>Create</button>
+              <button className={submitClasses}>Create</button>
-            </div>
             </div>
+          </form>
         );
       }
     });