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: 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 />
</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>

View file

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

View file

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