`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>

bundles/org.openhab.ui/web/src/components/widgets/system/oh-repeater.vue

@@ -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: {
+  methods: {
-    source () {
+    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
+      })
     }
   }
 }