X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/7c7dae7f8f4ec4e33acf9302152907547200023d..7ed41dc0191d366c914850a350c3b30f769365af:/apps/workbench/app/assets/javascripts/components/edit_tags.js

diff --git a/apps/workbench/app/assets/javascripts/components/edit_tags.js b/apps/workbench/app/assets/javascripts/components/edit_tags.js
index 0d7f3b1b9e..fa3f13e4ac 100644
--- a/apps/workbench/app/assets/javascripts/components/edit_tags.js
+++ b/apps/workbench/app/assets/javascripts/components/edit_tags.js
@@ -2,7 +2,41 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
+window.SimpleInput = {
+    view: function(vnode) {
+        return m("input.form-control", {
+            style: {
+                width: '100%',
+            },
+            type: 'text',
+            placeholder: vnode.attrs.placeholder,
+            value: vnode.attrs.value,
+            onchange: function() {
+                console.log(this.value)
+                if (this.value != '') {
+                    vnode.attrs.value(this.value)
+                }
+            },
+        }, vnode.attrs.value)
+    },
+    oncreate: function(vnode) {
+        if (vnode.attrs.setFocus) {
+            vnode.dom.focus()
+        }
+    }
+}
+
 window.SelectOrAutocomplete = {
+    onFocus: function(vnode) {
+        // Allow the user to edit an already entered value by removing it
+        // and filling the input field with the same text
+        activeSelect = vnode.state.selectized[0].selectize
+        value = activeSelect.getValue()
+        if (value.length > 0) {
+            activeSelect.clear(silent = true)
+            activeSelect.setTextboxValue(value)
+        }
+    },
     view: function(vnode) {
         return m("input", {
             style: {
@@ -13,11 +47,15 @@ window.SelectOrAutocomplete = {
         }, vnode.attrs.value)
     },
     oncreate: function(vnode) {
-        this.selectized = $(vnode.dom).selectize({
+        vnode.state.selectized = $(vnode.dom).selectize({
             labelField: 'value',
             valueField: 'value',
             searchField: 'value',
             sortField: 'value',
+            persist: false,
+            hideSelected: true,
+            openOnFocus: false,
+            createOnBlur: true,
             maxItems: 1,
             placeholder: vnode.attrs.placeholder,
             create: vnode.attrs.create ? function(input) {
@@ -31,83 +69,95 @@ window.SelectOrAutocomplete = {
                 if (val != '') {
                     vnode.attrs.value(val)
                 }
+            },
+            onFocus: function() {
+                vnode.state.onFocus(vnode)
             }
         })
         if (vnode.attrs.setFocus) {
-            this.selectized[0].selectize.focus()
+            vnode.state.selectized[0].selectize.focus()
         }
     }
 }
 
 window.TagEditorRow = {
     view: function(vnode) {
-        // Name options list
         var nameOpts = Object.keys(vnode.attrs.vocabulary().tags)
-        if (vnode.attrs.name() != '' && !(vnode.attrs.name() in vnode.attrs.vocabulary().tags)) {
-            nameOpts.push(vnode.attrs.name())
-        }
-        // Value options list
         var valueOpts = []
-        if (vnode.attrs.name() in vnode.attrs.vocabulary().tags &&
-            'values' in vnode.attrs.vocabulary().tags[vnode.attrs.name()]) {
-                valueOpts = vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
-        }
-        if (vnode.attrs.value() != '') {
-            valueOpts.push(vnode.attrs.value())
+        var inputComponent = SelectOrAutocomplete
+        if (nameOpts.length === 0) {
+            // If there's not vocabulary defined, switch to a simple input field
+            inputComponent = SimpleInput
+        } else {
+            // Name options list
+            if (vnode.attrs.name() != '' && !(vnode.attrs.name() in vnode.attrs.vocabulary().tags)) {
+                nameOpts.push(vnode.attrs.name())
+            }
+            // Value options list
+            if (vnode.attrs.name() in vnode.attrs.vocabulary().tags &&
+                'values' in vnode.attrs.vocabulary().tags[vnode.attrs.name()]) {
+                    valueOpts = vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
+            }
+            if (vnode.attrs.value() != '') {
+                valueOpts.push(vnode.attrs.value())
+            }
         }
         return m("tr", [
             // Erase tag
-            m("td",
-            vnode.attrs.editMode &&
+            m("td", [
+                vnode.attrs.editMode &&
                 m('div.text-center', m('a.btn.btn-default.btn-sm', {
                     style: {
                         align: 'center'
                     },
                     onclick: function(e) { vnode.attrs.removeTag() }
                 }, m('i.fa.fa-fw.fa-trash-o')))
-            ),
+            ]),
             // Tag name
-            m("td",
-            vnode.attrs.editMode ?
-            m("div", {key: 'name-'+vnode.attrs.name()},[m(SelectOrAutocomplete, {
-                options: nameOpts,
-                value: vnode.attrs.name,
-                // Allow any tag name unless "strict" is set to true.
-                create: !vnode.attrs.vocabulary().strict,
-                placeholder: 'new tag',
-                // Focus on tag name field when adding a new tag that's not
-                // the first one.
-                setFocus: !vnode.attrs.firstRow && vnode.attrs.name() === ''
-            })])
-            : vnode.attrs.name),
+            m("td", [
+                vnode.attrs.editMode ?
+                m("div", {key: 'name-'+vnode.attrs.name()},[
+                    m(inputComponent, {
+                        options: nameOpts,
+                        value: vnode.attrs.name,
+                        // Allow any tag name unless "strict" is set to true.
+                        create: !vnode.attrs.vocabulary().strict,
+                        placeholder: 'new tag',
+                        // Focus on tag name field when adding a new tag that's
+                        // not the first one.
+                        setFocus: vnode.attrs.name() === ''
+                    })
+                ])
+                : vnode.attrs.name
+            ]),
             // Tag value
-            m("td",
-            vnode.attrs.editMode ?
-            m("div", {key: 'value-'+vnode.attrs.name()}, [m(SelectOrAutocomplete, {
-                options: valueOpts,
-                value: vnode.attrs.value,
-                placeholder: 'new value',
-                // Allow any value on tags not listed on the vocabulary.
-                // Allow any value on tags without values, or the ones that
-                // aren't explicitly declared to be strict.
-                create: !(vnode.attrs.name() in vnode.attrs.vocabulary().tags)
-                    || !vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
-                    || vnode.attrs.vocabulary().tags[vnode.attrs.name()].values.length === 0
-                    || !vnode.attrs.vocabulary().tags[vnode.attrs.name()].strict,
-                // Focus on tag value field when new tag name is set
-                setFocus: vnode.attrs.name() !== '' && vnode.attrs.value() === ''
-                })
+            m("td", [
+                vnode.attrs.editMode ?
+                m("div", {key: 'value-'+vnode.attrs.name()}, [
+                    m(inputComponent, {
+                        options: valueOpts,
+                        value: vnode.attrs.value,
+                        placeholder: 'new value',
+                        // Allow any value on tags not listed on the vocabulary.
+                        // Allow any value on tags without values, or the ones
+                        // that aren't explicitly declared to be strict.
+                        create: !(vnode.attrs.name() in vnode.attrs.vocabulary().tags)
+                            || !vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
+                            || vnode.attrs.vocabulary().tags[vnode.attrs.name()].values.length === 0
+                            || !vnode.attrs.vocabulary().tags[vnode.attrs.name()].strict,
+                        // Focus on tag value field when new tag name is set
+                        setFocus: vnode.attrs.name() !== '' && vnode.attrs.value() === ''
+                    })
+                ])
+                : vnode.attrs.value
             ])
-            : vnode.attrs.value)
         ])
     }
 }
 
 window.TagEditorTable = {
     view: function(vnode) {
-        return m("table.table.table-condensed", {
-            border: "1"
-        }, [
+        return m("table.table.table-condensed.table-justforlayout", [
             m("colgroup", [
                 m("col", {width:"5%"}),
                 m("col", {width:"25%"}),
@@ -130,7 +180,6 @@ window.TagEditorTable = {
                             vnode.attrs.dirty(true)
                         },
                         editMode: vnode.attrs.editMode,
-                        firstRow: vnode.attrs.tags.length === 1,
                         name: tag.name,
                         value: tag.value,
                         vocabulary: vnode.attrs.vocabulary