70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
|
import Setting from './setting.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
...Setting,
|
||
|
|
props: {
|
||
|
|
...Setting.props,
|
||
|
|
allowNew: {
|
||
|
|
required: false,
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
newValue: ['',''] // avoiding extra complexity by just using an array instead of an object
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...Setting.computed,
|
||
|
|
// state that we'll show in the UI, i.e. transforming map into list
|
||
|
|
displayState () {
|
||
|
|
return Object.entries(this.visibleState)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...Setting.methods,
|
||
|
|
getValue ({ event, key, eventType, isKey }) {
|
||
|
|
switch (eventType) {
|
||
|
|
case 'add': {
|
||
|
|
if (key === '') return this.visibleState
|
||
|
|
const res = {...this.visibleState, ...Object.fromEntries([this.newValue])}
|
||
|
|
this.newValue = ['', '']
|
||
|
|
return res
|
||
|
|
}
|
||
|
|
|
||
|
|
case 'remove': {
|
||
|
|
// initial state for this type is empty array
|
||
|
|
if (Array.isArray(this.visibleState)) return this.visibleState
|
||
|
|
const newEntries = Object.entries(this.visibleState).filter(([k]) => k !== key)
|
||
|
|
|
||
|
|
if (newEntries.length === 0 ) return []
|
||
|
|
return Object.fromEntries(newEntries)
|
||
|
|
}
|
||
|
|
|
||
|
|
case 'edit': {
|
||
|
|
const string = event.target.value
|
||
|
|
const newEntries = Object
|
||
|
|
.entries(this.visibleState)
|
||
|
|
.map(([k, v]) => {
|
||
|
|
if (isKey) {
|
||
|
|
if (k === key) {
|
||
|
|
return [string, v]
|
||
|
|
} else {
|
||
|
|
return [k, v]
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (k === key) {
|
||
|
|
return [k, string]
|
||
|
|
} else {
|
||
|
|
return [k, v]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return Object.fromEntries(newEntries)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|