Loading events are now synchronized both ways upon entity action/refresh

This commit is contained in:
Fabio Manganiello 2022-04-12 01:10:09 +02:00
parent 9ddcf5eaeb
commit 20530c2b6d
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 24 additions and 14 deletions

View file

@ -5,9 +5,12 @@
<Icon v-bind="value.meta?.icon || {}" v-else /> <Icon v-bind="value.meta?.icon || {}" v-else />
</div> </div>
<div class="component-container"> <div class="component-container">
<component :is="component" :value="value" <component :is="component"
:value="value"
@input="$emit('input', $event)" @input="$emit('input', $event)"
@loading="$emit('loading', $event)" /> :loading="loading"
@loading="$emit('loading', $event)"
/>
</div> </div>
</div> </div>
</template> </template>

View file

@ -42,7 +42,7 @@
:value="entity" :value="entity"
@input="onEntityInput" @input="onEntityInput"
:loading="!!loadingEntities[entity.id]" :loading="!!loadingEntities[entity.id]"
@loading="loadingEntities[entity.id] = true" @loading="loadingEntities[entity.id] = $event"
/> />
</div> </div>
</div> </div>

View file

@ -5,7 +5,8 @@
</div> </div>
<div class="col-2 switch pull-right"> <div class="col-2 switch pull-right">
<ToggleSwitch :value="value.state" @input="toggle" /> <ToggleSwitch :value="value.state" @input="toggle"
:disabled="loading" />
</div> </div>
</div> </div>
</template> </template>
@ -24,20 +25,26 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
},
data() { loading: {
return { type: Boolean,
component: null, default: false,
} },
}, },
methods: { methods: {
async toggle() { async toggle(event) {
await this.request('entities.execute', { event.stopPropagation()
id: this.value.id, this.$emit('loading', true)
action: 'toggle',
}) try {
await this.request('entities.execute', {
id: this.value.id,
action: 'toggle',
})
} finally {
this.$emit('loading', false)
}
}, },
}, },
} }