Add tags field component

app/static/app/js/components/EditTaskForm.jsx

@@ -5,6 +5,7 @@ import EditPresetDialog from './EditPresetDialog';
 import ErrorMessage from './ErrorMessage';
 import PropTypes from 'prop-types';
 import Storage from '../classes/Storage';
+import TagsField from './TagsField';
 import $ from 'jquery';
 import { _, interpolate } from '../classes/gettext';
 
@@ -48,7 +49,9 @@ class EditTaskForm extends React.Component {
 
       editingPreset: false,
 
-      loadingTaskName: false
+      loadingTaskName: false,
+
+      showTagsField: true // TODO false
     };
 
     this.handleNameChange = this.handleNameChange.bind(this);
@@ -543,8 +546,19 @@ class EditTaskForm extends React.Component {
         <ErrorMessage className="preset-error" bind={[this, 'presetError']} />
       </div>);
 
+      let tagsField = "";
+      if (this.state.showTagsField){
+        tagsField = (<div className="form-group">
+            <label className="col-sm-2 control-label">{_("Tags")}</label>
+              <div className="col-sm-10">
+                <TagsField />
+              </div>
+          </div>);
+      }
+
       taskOptions = (
         <div>
+          {tagsField}
           <div className="form-group">
             <label className="col-sm-2 control-label">{_("Processing Node")}</label>
               <div className="col-sm-10">
@@ -588,7 +602,7 @@ class EditTaskForm extends React.Component {
       <div className="edit-task-form">
         <div className="form-group">
           <label className="col-sm-2 control-label">{_("Name")}</label>
-          <div className="col-sm-10">
+          <div className="col-sm-10 name-fields">
             {this.state.loadingTaskName ? 
             <i className="fa fa-circle-notch fa-spin fa-fw name-loading"></i>
             : ""}
@@ -598,6 +612,10 @@ class EditTaskForm extends React.Component {
               placeholder={this.state.namePlaceholder} 
               value={this.state.name} 
             />
+            <button type="button" title={_("Add tags")} class="btn btn-sm btn-secondary toggle-tags">
+              <i class="fa fa-tag"></i>
+            </button>
+
           </div>
         </div>
         {taskOptions}

app/static/app/js/components/SortPanel.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import '../css/SortPanel.scss';
+import PropTypes from 'prop-types';
+import { _ } from '../classes/gettext';
+
+class SortPanel extends React.Component {
+  static defaultProps = {
+    items: [],
+    onChange: () => {}
+  };
+
+  static propTypes = {
+    items: PropTypes.arrayOf(PropTypes.object),
+    onChange: PropTypes.func
+  };
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+      items: props.items
+    }
+  }
+
+  handleClick = (key, order) => {
+    return () => {
+      this.state.items.forEach(i => {
+        i.selected = i.key === key ? order : false;
+      });
+      this.setState({
+        items: this.state.items
+      })
+      this.props.onChange(order === "desc" ? "-" + key : key);
+    }
+  }
+
+  render() {
+    return (<ul className="dropdown-menu dropdown-menu-right sort-items">
+      <li className="sort-order-label">{_("Descending")}</li>
+      {this.state.items.map(i => 
+        <li key={i.key}><a onClick={this.handleClick(i.key, "desc")} className="sort-item">
+          { i.label } {i.selected === "desc" ? <i className="fa fa-check"></i> : ""}
+        </a></li>
+      )}
+      <li className="sort-order-label">{_("Ascending")}</li>
+      {this.state.items.map(i => 
+        <li key={i.key}><a onClick={this.handleClick(i.key, "asc")} className="sort-item">
+          { i.label } {i.selected === "asc" ? <i className="fa fa-check"></i> : ""}
+        </a></li>
+      )}
+    </ul>);
+  }
+}
+
+export default SortPanel;

app/static/app/js/components/TagsField.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import '../css/TagsField.scss';
+import PropTypes from 'prop-types';
+import { _ } from '../classes/gettext';
+
+class TagsField extends React.Component {
+  static defaultProps = {
+  };
+
+  static propTypes = {
+  };
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+    }
+  }
+
+  handleKeyDown = e => {
+    if (e.key === "Tab"){
+      e.preventDefault();
+      e.stopPropagation();
+      // TODO: add badge
+    }
+  }
+
+  render() {
+    return (<div contenteditable="true"
+                className="form-control" 
+                ref={(domNode) => this.inputText = domNode}
+                onKeyDown={this.handleKeyDown}></div>);
+  }
+}
+
+export default TagsField;

app/static/app/js/css/EditTaskForm.scss

@@ -32,4 +32,18 @@
         top: 15px;
         opacity: 0.5;
     }
+
+    .name-fields{
+        display: flex;
+        .btn.toggle-tags{
+            margin-top: 2px;
+            margin-bottom: 2px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        input[type="text"]{
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
 }

app/static/app/js/css/SortPanel.scss

@@ -0,0 +1,20 @@
+.sort-items{
+    .sort-order-label{
+        opacity: 0.7;
+        padding-left: 12px;
+    }
+
+    a{
+        margin-right: 0 !important;
+        padding-left: 24px !important;
+    }
+
+    a:hover{
+        cursor: pointer;
+    }
+
+    .fa-check{
+        font-size: 80%;
+        margin-left: 8px;
+    }
+}

app/static/app/js/css/TagsField.scss

@@ -0,0 +1,2 @@
+.tags-field{
+}