blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use a proxy value in the variable component for the textbox.

Browse source 
Otherwise the value may keep being overwritten while the user is typing
a new one.
This commit is contained in:
Fabio Manganiello 2023-05-01 01:22:20 +02:00
parent a3839e637d
commit b7cf1a42de
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
platypush/backend/http/webapp/src/components/panels/Entities/Variable.vue
View file

@ -9,21 +9,20 @@
<div class="name" v-text="value.name" />
</div>
<div class="value-container" @click.stop="collapsed = !collapsed">
<span class="value" v-text="value.value" v-if="value?.value != null" />
</div>
<div class="value-and-toggler" @click.stop="collapsed = !collapsed">
<div class="value" v-text="value.value" v-if="value?.value != null" />
<div class="collapse-toggler" @click.stop="collapsed = !collapsed">
<i class="fas" :class="{'fa-chevron-down': collapsed, 'fa-chevron-up': !collapsed}" />
</div>
</div>
</div>
<div class="body" v-if="!collapsed" @click.stop="prevent">
<div class="row">
<form @submit.prevent="setValue">
<div class="row">
<div class="col-9">
<input type="text" :value="value.value" placeholder="Variable value" :disabled="loading" ref="text" />
<input type="text" v-model="value_" placeholder="Variable value" :disabled="loading" ref="text" />
</div>
<div class="col-3 pull-right">
<button type="button" title="Clear" @click.stop="clearValue" :disabled="loading">
@ -51,6 +50,7 @@ export default {
data: function() {
return {
collapsed: true,
value_: null,
}
},
@ -71,7 +71,7 @@ export default {
},
async setValue() {
const value = this.$refs.text.value
const value = this.value_
if (!value?.length)
return await this.clearValue()
@ -85,6 +85,13 @@ export default {
}
},
},
mounted() {
this.value_ = this.value.value
this.$watch(() => this.value.value, (newValue) => {
this.value_ = newValue
})
},
}
</script>
@ -97,21 +104,20 @@ $icon-width: 2em;
.head {
.icon, .collapse-toggler {
width: $icon-width;
margin-right: 0;
}
.label, .value-container {
max-width: calc(((100% - (2 * $icon-width)) / 2) - 0.75em);
.label, .value-and-toggler {
min-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
max-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
}
.value-container {
margin-left: 0.5em;
.label {
margin-left: 1em;
}
.value-and-toggler {
text-align: right;
}
.collapse-toggler {
margin-right: 1em;
}
}
form {