`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
Florian Hotze 2023-05-22 20:44:35 +02:00 committed by GitHub
parent 0b555580ba
commit 63c122d5f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 10 deletions

View File

@ -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
})
}
}
}