//
// 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: {
}, 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) {
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%"}),
vnode.attrs.dirty(true)
},
editMode: vnode.attrs.editMode,
- firstRow: vnode.attrs.tags.length === 1,
name: tag.name,
value: tag.value,
vocabulary: vnode.attrs.vocabulary
projects / arvados.git / blobdiff