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