The frontend/UI server, written in JS using the MarkoJS library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

62 lines
1.3 KiB

const {tagApi} = require("../../../../../rpdata/api/Tag")
module.exports = class {
onCreate() {
this.state = {
values: {
name: "",
kind: "Event",
},
tags: [],
suggestions: [],
}
}
onMount() {
tagApi.list().then(list => {
this.state.tags = list
}).catch(err => {})
this.getEl("name").addEventListener("keydown", ev => {
setTimeout(() => {
const name = this.getEl("name").value
const kind = this.getEl("kind").value
const search = name.toLowerCase()
this.state.values = {name, kind}
this.state.suggestions = []
const suggestions = this.state.tags.filter(t => t.name.toLowerCase().includes(search))
if (suggestions.length > 0 && suggestions.length < 10) {
if (suggestions.length > 1 || suggestions[0].name !== name) {
this.state.suggestions = suggestions
}
}
}, 100)
})
}
add(tag) {
this.state.values = {
kind: "Event",
name: "",
}
this.emit("add", tag)
}
change(key, ev) {
const value = ev.target.value
this.state.values[key] = value
}
applySuggestion(tag) {
this.state.values = {
name: tag.name,
kind: tag.kind,
}
this.state.suggestions = []
}
}