diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue index bf46a2f80..4d0fb780b 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue @@ -5,9 +5,12 @@ <Icon v-bind="value.meta?.icon || {}" v-else /> </div> <div class="component-container"> - <component :is="component" :value="value" + <component :is="component" + :value="value" @input="$emit('input', $event)" - @loading="$emit('loading', $event)" /> + :loading="loading" + @loading="$emit('loading', $event)" + /> </div> </div> </template> diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue index f10481b16..41a01014b 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue @@ -42,7 +42,7 @@ :value="entity" @input="onEntityInput" :loading="!!loadingEntities[entity.id]" - @loading="loadingEntities[entity.id] = true" + @loading="loadingEntities[entity.id] = $event" /> </div> </div> diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue index 7d49dcf2c..87380890c 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue @@ -5,7 +5,8 @@ </div> <div class="col-2 switch pull-right"> - <ToggleSwitch :value="value.state" @input="toggle" /> + <ToggleSwitch :value="value.state" @input="toggle" + :disabled="loading" /> </div> </div> </template> @@ -24,20 +25,26 @@ export default { type: Object, required: true, }, - }, - data() { - return { - component: null, - } + loading: { + type: Boolean, + default: false, + }, }, methods: { - async toggle() { - await this.request('entities.execute', { - id: this.value.id, - action: 'toggle', - }) + async toggle(event) { + event.stopPropagation() + this.$emit('loading', true) + + try { + await this.request('entities.execute', { + id: this.value.id, + action: 'toggle', + }) + } finally { + this.$emit('loading', false) + } }, }, }