`oh-repeater`: Fix new data requested when css visibility changed (#1904)
Fixes #1804. The oh-repeater re-requested it's data on every CSS visibility change because the data was asyncComputed. This makes the data load when the component is created and then stores it. -- Signed-off-by: Florian Hotze <florianh_dev@icloud.com>pull/1908/head
parent
0b555580ba
commit
63c122d5f5
|
@ -1,4 +1,4 @@
|
|||
<template>
|
||||
<template v-if="ready">
|
||||
<ul v-if="config.listContainer" :class="config.containerClasses" :style="config.containerStyle">
|
||||
<generic-widget-component :context="ctx" v-for="(ctx, idx) in childrenContexts" :key="'repeater-' + idx" @command="onCommand" />
|
||||
</ul>
|
||||
|
@ -22,6 +22,15 @@ export default {
|
|||
Fragment
|
||||
},
|
||||
widget: OhRepeaterDefinition,
|
||||
data () {
|
||||
return {
|
||||
ready: false,
|
||||
source: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.load()
|
||||
},
|
||||
computed: {
|
||||
childrenContexts () {
|
||||
const iterationContext = (ctx, el, idx, source) => {
|
||||
|
@ -68,26 +77,32 @@ export default {
|
|||
return contexts
|
||||
}
|
||||
},
|
||||
asyncComputed: {
|
||||
source () {
|
||||
methods: {
|
||||
load () {
|
||||
if (this.loading) return
|
||||
let loadPromise
|
||||
if (this.config.sourceType === 'range') {
|
||||
const start = this.config.rangeStart || 0
|
||||
const stop = this.config.rangeStop || 10
|
||||
const step = this.config.rangeStep || 1
|
||||
return Promise.resolve(Array(Math.ceil((stop + 1 - start) / step)).fill(start).map((x, y) => x + y * step))
|
||||
loadPromise = Promise.resolve(Array(Math.ceil((stop + 1 - start) / step)).fill(start).map((x, y) => x + y * step))
|
||||
} else if (this.config.sourceType === 'itemsWithTags' && this.config.itemTags) {
|
||||
return this.$oh.api.get('/rest/items?metadata=' + this.config.fetchMetadata + '&tags=' + this.config.itemTags).then((d) => Promise.resolve(d.sort(compareItems)))
|
||||
loadPromise = this.$oh.api.get('/rest/items?metadata=' + this.config.fetchMetadata + '&tags=' + this.config.itemTags).then((d) => Promise.resolve(d.sort(compareItems)))
|
||||
} else if (this.config.sourceType === 'itemsInGroup') {
|
||||
return this.$oh.api.get('/rest/items/' + this.config.groupItem + '?metadata=' + this.config.fetchMetadata + '&tags=' + this.config.itemTags).then((i) => Promise.resolve(i.members.sort(compareItems)))
|
||||
loadPromise = this.$oh.api.get('/rest/items/' + this.config.groupItem + '?metadata=' + this.config.fetchMetadata + '&tags=' + this.config.itemTags).then((i) => Promise.resolve(i.members.sort(compareItems)))
|
||||
} else if (this.config.sourceType === 'itemStateOptions') {
|
||||
return this.$oh.api.get('/rest/items/' + this.config.itemOptions).then((i) => Promise.resolve((i.stateDescription) ? i.stateDescription.options : []))
|
||||
loadPromise = this.$oh.api.get('/rest/items/' + this.config.itemOptions).then((i) => Promise.resolve((i.stateDescription) ? i.stateDescription.options : []))
|
||||
} else if (this.config.sourceType === 'itemCommandOptions') {
|
||||
return this.$oh.api.get('/rest/items/' + this.config.itemOptions).then((i) => Promise.resolve((i.commandDescription) ? i.commandDescription.commandOptions : []))
|
||||
loadPromise = this.$oh.api.get('/rest/items/' + this.config.itemOptions).then((i) => Promise.resolve((i.commandDescription) ? i.commandDescription.commandOptions : []))
|
||||
} else if (this.config.sourceType === 'rulesWithTags' && this.config.ruleTags) {
|
||||
return this.$oh.api.get('/rest/rules?summary=true' + '&tags=' + this.config.ruleTags).then((r) => Promise.resolve(r.sort(compareRules)))
|
||||
loadPromise = this.$oh.api.get('/rest/rules?summary=true' + '&tags=' + this.config.ruleTags).then((r) => Promise.resolve(r.sort(compareRules)))
|
||||
} else {
|
||||
return Promise.resolve(this.config.in)
|
||||
loadPromise = Promise.resolve(this.config.in)
|
||||
}
|
||||
loadPromise.then((d) => {
|
||||
this.source = d
|
||||
this.ready = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue