apps/workbench/app/assets/javascripts/components/edit_tags.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 window.SimpleInput = {
   6     view: function(vnode) {
   7         return m("input.form-control", {
   8             style: {
   9                 width: '100%',
  10             },
  11             type: 'text',
  12             placeholder: 'Add ' + vnode.attrs.placeholder,
  13             value: vnode.attrs.value,
  14             onchange: function() {
  15                 if (this.value != '') {
  16                     vnode.attrs.value(this.value)
  17                 }
  18             },
  19         }, vnode.attrs.value)
  20     },
  21 }
  22
  23 window.SelectOrAutocomplete = {
  24     view: function(vnode) {
  25         return m("input.form-control", {
  26             style: {
  27                 width: '100%'
  28             },
  29             type: 'text',
  30             value: vnode.attrs.value,
  31             placeholder: (vnode.attrs.create ? 'Add or select ': 'Select ') + vnode.attrs.placeholder,
  32         }, vnode.attrs.value)
  33     },
  34     oncreate: function(vnode) {
  35         vnode.state.awesomplete = new Awesomplete(vnode.dom, {
  36             list: vnode.attrs.options,
  37             minChars: 0,
  38             maxItems: 1000000,
  39             autoFirst: true,
  40             sort: false,
  41         })
  42         vnode.state.create = vnode.attrs.create
  43         vnode.state.options = vnode.attrs.options
  44         // Option is selected from the list.
  45         $(vnode.dom).on('awesomplete-selectcomplete', function(event) {
  46             vnode.attrs.value(this.value)
  47         })
  48         $(vnode.dom).on('change', function(event) {
  49             if (!vnode.state.create && !(this.value in vnode.state.options)) {
  50                 this.value = vnode.attrs.value()
  51             } else {
  52                 if (vnode.attrs.value() !== this.value) {
  53                     vnode.attrs.value(this.value)
  54                 }
  55             }
  56         })
  57         $(vnode.dom).on('focusin', function(event) {
  58             if (this.value === '') {
  59                 vnode.state.awesomplete.evaluate()
  60                 vnode.state.awesomplete.open()
  61             }
  62         })
  63     },
  64     onupdate: function(vnode) {
  65         vnode.state.awesomplete.list = vnode.attrs.options
  66         vnode.state.create = vnode.attrs.create
  67         vnode.state.options = vnode.attrs.options
  68     },
  69 }
  70
  71 window.TagEditorRow = {
  72     view: function(vnode) {
  73         var nameOpts = Object.keys(vnode.attrs.vocabulary().tags)
  74         var valueOpts = []
  75         var inputComponent = SelectOrAutocomplete
  76         if (nameOpts.length === 0) {
  77             // If there's not vocabulary defined, switch to a simple input field
  78             inputComponent = SimpleInput
  79         } else {
  80             // Name options list
  81             if (vnode.attrs.name() != '' && !(vnode.attrs.name() in vnode.attrs.vocabulary().tags)) {
  82                 nameOpts.push(vnode.attrs.name())
  83             }
  84             // Value options list
  85             if (vnode.attrs.name() in vnode.attrs.vocabulary().tags &&
  86                 'values' in vnode.attrs.vocabulary().tags[vnode.attrs.name()]) {
  87                     valueOpts = vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
  88             }
  89         }
  90         return m("tr", [
  91             // Erase tag
  92             m("td", [
  93                 vnode.attrs.editMode &&
  94                 m('div.text-center', m('a.btn.btn-default.btn-sm', {
  95                     style: {
  96                         align: 'center'
  97                     },
  98                     onclick: function(e) { vnode.attrs.removeTag() }
  99                 }, m('i.fa.fa-fw.fa-trash-o')))
 100             ]),
 101             // Tag key
 102             m("td", [
 103                 vnode.attrs.editMode ?
 104                 m("div", {key: 'key'}, [
 105                     m(inputComponent, {
 106                         options: nameOpts,
 107                         value: vnode.attrs.name,
 108                         // Allow any tag name unless "strict" is set to true.
 109                         create: !vnode.attrs.vocabulary().strict,
 110                         placeholder: 'key',
 111                     })
 112                 ])
 113                 : vnode.attrs.name
 114             ]),
 115             // Tag value
 116             m("td", [
 117                 vnode.attrs.editMode ?
 118                 m("div", {key: 'value'}, [
 119                     m(inputComponent, {
 120                         options: valueOpts,
 121                         value: vnode.attrs.value,
 122                         placeholder: 'value',
 123                         // Allow any value on tags not listed on the vocabulary.
 124                         // Allow any value on tags without values, or the ones
 125                         // that aren't explicitly declared to be strict.
 126                         create: !(vnode.attrs.name() in vnode.attrs.vocabulary().tags)
 127                             || !vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
 128                             || vnode.attrs.vocabulary().tags[vnode.attrs.name()].values.length === 0
 129                             || !vnode.attrs.vocabulary().tags[vnode.attrs.name()].strict,
 130                     })
 131                 ])
 132                 : vnode.attrs.value
 133             ])
 134         ])
 135     }
 136 }
 137
 138 window.TagEditorTable = {
 139     view: function(vnode) {
 140         return m("table.table.table-condensed.table-justforlayout", [
 141             m("colgroup", [
 142                 m("col", {width:"5%"}),
 143                 m("col", {width:"25%"}),
 144                 m("col", {width:"70%"}),
 145             ]),
 146             m("thead", [
 147                 m("tr", [
 148                     m("th"),
 149                     m("th", "Key"),
 150                     m("th", "Value"),
 151                 ])
 152             ]),
 153             m("tbody", [
 154                 vnode.attrs.tags.length > 0
 155                 ? vnode.attrs.tags.map(function(tag, idx) {
 156                     return m(TagEditorRow, {
 157                         key: tag.rowKey,
 158                         removeTag: function() {
 159                             vnode.attrs.tags.splice(idx, 1)
 160                             vnode.attrs.dirty(true)
 161                         },
 162                         editMode: vnode.attrs.editMode,
 163                         name: tag.name,
 164                         value: tag.value,
 165                         vocabulary: vnode.attrs.vocabulary
 166                     })
 167                 })
 168                 : m("tr", m("td[colspan=3]", m("center", "Loading tags...")))
 169             ]),
 170         ])
 171     }
 172 }
 173
 174 var uniqueID = 1
 175
 176 window.TagEditorApp = {
 177     appendTag: function(vnode, name, value) {
 178         var tag = {name: m.stream(name), value: m.stream(value), rowKey: uniqueID++}
 179         vnode.state.tags.push(tag)
 180         // Set dirty flag when any of name/value changes to non empty string
 181         tag.name.map(function() { vnode.state.dirty(true) })
 182         tag.value.map(function() { vnode.state.dirty(true) })
 183         tag.name.map(m.redraw)
 184     },
 185     oninit: function(vnode) {
 186         vnode.state.sessionDB = new SessionDB()
 187         // Get vocabulary
 188         vnode.state.vocabulary = m.stream({"strict":false, "tags":{}})
 189         var vocabularyTimestamp = parseInt(Date.now() / 300000) // Bust cache every 5 minutes
 190         m.request('/vocabulary.json?v=' + vocabularyTimestamp).then(vnode.state.vocabulary)
 191         vnode.state.editMode = vnode.attrs.targetEditable
 192         vnode.state.tags = []
 193         vnode.state.dirty = m.stream(false)
 194         vnode.state.dirty.map(m.redraw)
 195         vnode.state.objPath = 'arvados/v1/'+vnode.attrs.targetController+'/'+vnode.attrs.targetUuid
 196         // Get tags
 197         vnode.state.sessionDB.request(
 198             vnode.state.sessionDB.loadLocal(),
 199             'arvados/v1/'+vnode.attrs.targetController,
 200             {
 201                 data: {
 202                     filters: JSON.stringify([['uuid', '=', vnode.attrs.targetUuid]]),
 203                     select: JSON.stringify(['properties'])
 204                 },
 205             }).then(function(obj) {
 206                 if (obj.items.length == 1) {
 207                     o = obj.items[0]
 208                     Object.keys(o.properties).forEach(function(k) {
 209                         vnode.state.appendTag(vnode, k, o.properties[k])
 210                     })
 211                     if (vnode.state.editMode) {
 212                         vnode.state.appendTag(vnode, '', '')
 213                     }
 214                     // Data synced with server, so dirty state should be false
 215                     vnode.state.dirty(false)
 216                     // Add new tag row when the last one is completed
 217                     vnode.state.dirty.map(function() {
 218                         if (!vnode.state.editMode) { return }
 219                         lastTag = vnode.state.tags.slice(-1).pop()
 220                         if (lastTag === undefined || (lastTag.name() !== '' || lastTag.value() !== '')) {
 221                             vnode.state.appendTag(vnode, '', '')
 222                         }
 223                     })
 224                 }
 225             }
 226         )
 227     },
 228     view: function(vnode) {
 229         return [
 230             vnode.state.editMode &&
 231             m("div.pull-left", [
 232                 m("a.btn.btn-primary.btn-sm"+(vnode.state.dirty() ? '' : '.disabled'), {
 233                     style: {
 234                         margin: '10px 0px'
 235                     },
 236                     onclick: function(e) {
 237                         var tags = {}
 238                         vnode.state.tags.forEach(function(t) {
 239                             // Only ignore tags with empty key
 240                             if (t.name() != '') {
 241                                 tags[t.name()] = t.value()
 242                             }
 243                         })
 244                         vnode.state.sessionDB.request(
 245                             vnode.state.sessionDB.loadLocal(),
 246                             vnode.state.objPath, {
 247                                 method: "PUT",
 248                                 data: {properties: JSON.stringify(tags)}
 249                             }
 250                         ).then(function(v) {
 251                             vnode.state.dirty(false)
 252                         })
 253                     }
 254                 }, vnode.state.dirty() ? ' Save changes ' : ' Saved ')
 255             ]),
 256             // Tags table
 257             m(TagEditorTable, {
 258                 editMode: vnode.state.editMode,
 259                 tags: vnode.state.tags,
 260                 vocabulary: vnode.state.vocabulary,
 261                 dirty: vnode.state.dirty
 262             })
 263         ]
 264     },
 265 }