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.SelectOrAutocomplete = {
   6     view: function(vnode) {
   7         return m("input", {
   8             style: {
   9                 width: '100%'
  10             },
  11             type: 'text',
  12             value: vnode.attrs.value
  13         }, vnode.attrs.value)
  14     },
  15     oncreate: function(vnode) {
  16         vnode.state.selector = $(vnode.dom).selectize({
  17             labelField: 'value',
  18             valueField: 'value',
  19             searchField: 'value',
  20             sortField: 'value',
  21             maxItems: 1,
  22             create: vnode.attrs.create ? function(input) {
  23                 return {value: input}
  24             } : false,
  25             items: [vnode.attrs.value()],
  26             options: vnode.attrs.options.map(function(option) {
  27                 return {value: option}
  28             }),
  29             onChange: function(val) {
  30                 vnode.state.dirty = true
  31                 vnode.attrs.value(val)
  32                 m.redraw()
  33             }
  34         }).data('selectize')
  35     }
  36 }
  37
  38 // When in edit mode, present a tag name selector and tag value
  39 // selector/editor depending of the tag type.
  40 window.TagEditorRow = {
  41     view: function(vnode) {
  42         return m("tr", [
  43             // Erase tag
  44             m("td",
  45             vnode.attrs.editMode ?
  46             m("i.glyphicon.glyphicon-remove", {
  47                 style: "cursor: pointer;",
  48                 onclick: function(e) {
  49                     console.log('Erase tag clicked')
  50                     vnode.attrs.removeTag()
  51                 }
  52             })
  53             : ""),
  54             // Tag name
  55             m("td",
  56             vnode.attrs.editMode ?
  57             m("div", {key: 'name-'+vnode.attrs.name()},[m(SelectOrAutocomplete, {
  58                 options: (vnode.attrs.name() in vnode.attrs.vocabulary().types)
  59                     ? Object.keys(vnode.attrs.vocabulary().types)
  60                     : Object.keys(vnode.attrs.vocabulary().types).concat(vnode.attrs.name()),
  61                 value: vnode.attrs.name,
  62                 create: vnode.attrs.vocabulary().strict
  63             })])
  64             : vnode.attrs.name),
  65             // Tag value
  66             m("td",
  67             vnode.attrs.editMode ?
  68             m("div", {key: 'value-'+vnode.attrs.name()}, [m(SelectOrAutocomplete, {
  69                 options: (vnode.attrs.name() in vnode.attrs.vocabulary().types)
  70                     ? vnode.attrs.vocabulary().types[vnode.attrs.name()].options.concat(vnode.attrs.value())
  71                     : [vnode.attrs.value()],
  72                 value: vnode.attrs.value,
  73                 create: (vnode.attrs.name() in vnode.attrs.vocabulary().types)
  74                     ? vnode.attrs.vocabulary().types[vnode.attrs.name()].overridable || false
  75                     : true, // If tag not in vocabulary, we should accept any value
  76                 })
  77             ])
  78             : vnode.attrs.value)
  79         ])
  80     }
  81 }
  82
  83 window.TagEditorTable = {
  84     view: function(vnode) {
  85         return m("table.table.table-condensed", {
  86             border: "1"
  87         }, [
  88             m("colgroup", [
  89                 m("col", {width:"5%"}),
  90                 m("col", {width:"25%"}),
  91                 m("col", {width:"70%"}),
  92             ]),
  93             m("thead", [
  94                 m("tr", [
  95                     m("th"),
  96                     m("th", "Key"),
  97                     m("th", "Value"),
  98                 ])
  99             ]),
 100             m("tbody", [
 101                 vnode.attrs.tags.map(function(tag, idx) {
 102                     return m(TagEditorRow, {
 103                         key: idx,
 104                         removeTag: function() {
 105                             vnode.attrs.tags.splice(idx, 1)
 106                         },
 107                         editMode: vnode.attrs.editMode,
 108                         name: tag.name,
 109                         value: tag.value,
 110                         vocabulary: vnode.attrs.vocabulary
 111                     })
 112                 })
 113             ]),
 114         ])
 115     }
 116 }
 117
 118 window.TagEditorApp = {
 119     oninit: function(vnode) {
 120         vnode.state.sessionDB = new SessionDB()
 121         // Get vocabulary
 122         vnode.state.vocabulary = m.stream({"strict":false, "types":{}})
 123         m.request('/vocabulary.json').then(vnode.state.vocabulary)
 124         vnode.state.editMode = vnode.attrs.targetEditable
 125         // Get tags
 126         vnode.state.tags = []
 127         var objPath = '/arvados/v1/'+vnode.attrs.targetController+'/'+vnode.attrs.targetUuid
 128         vnode.state.sessionDB.request(
 129             vnode.state.sessionDB.loadLocal(), objPath).then(function(obj) {
 130                 Object.keys(obj.properties).forEach(function(k) {
 131                     vnode.state.tags.push({
 132                         name: m.stream(k),
 133                         value: m.stream(obj.properties[k])
 134                     })
 135                 })
 136             }
 137         )
 138     },
 139     view: function(vnode) {
 140         return [
 141             // Tags table
 142             m(TagEditorTable, {
 143                 editMode: vnode.state.editMode,
 144                 tags: vnode.state.tags,
 145                 vocabulary: vnode.state.vocabulary
 146             }),
 147             vnode.state.editMode ?
 148             m("div", [
 149                 m("div.pull-left", [
 150                     // Add tag button
 151                     m("a.btn.btn-primary.btn-sm", {
 152                         onclick: function(e) {
 153                             vnode.state.tags.push({
 154                                 name: m.stream('new tag'),
 155                                 value: m.stream('new tag value')
 156                             })
 157                         }
 158                     }, [
 159                         m("i.glyphicon.glyphicon-plus"),
 160                         " Add new tag "
 161                     ])
 162                 ]),
 163                 m("div.pull-right", [
 164                     // Save button
 165                     m("a.btn.btn-primary.btn-sm", {
 166                         onclick: function(e) {
 167                             console.log('Save button clicked')
 168                             // vnode.state.tags.save().then(function() {
 169                             //     vnode.state.tags.load()
 170                             // })
 171                         }
 172                     }, " Save ")
 173                 ])
 174             ])
 175             : ""
 176         ]
 177     },
 178 }