Fixed `reset` not clearing query on subscriber search UI

This commit is contained in:
Kailash Nadh 2020-08-01 16:59:34 +05:30
parent e4f233e2e5
commit 7ead052054
2 changed files with 10 additions and 3 deletions

View File

@ -4,7 +4,7 @@
<p> <p>
<b-icon :icon="!icon ? 'plus' : icon" size="is-large" /> <b-icon :icon="!icon ? 'plus' : icon" size="is-large" />
</p> </p>
<p>{{ !label ? 'Nothing here yet' : label }}</p> <p>{{ !label ? 'Nothing here' : label }}</p>
</div> </div>
</section> </section>
</template> </template>

View File

@ -20,7 +20,7 @@
<form @submit.prevent="querySubscribers"> <form @submit.prevent="querySubscribers">
<div> <div>
<b-field grouped> <b-field grouped>
<b-input @input="onSimpleQueryInput" <b-input @input="onSimpleQueryInput" v-model="queryInput"
placeholder="E-mail or name" icon="account-search-outline" ref="query" placeholder="E-mail or name" icon="account-search-outline" ref="query"
:disabled="isSearchAdvanced"></b-input> :disabled="isSearchAdvanced"></b-input>
<b-button native-type="submit" type="is-primary" icon-left="account-search-outline" <b-button native-type="submit" type="is-primary" icon-left="account-search-outline"
@ -52,7 +52,7 @@
<div class="buttons"> <div class="buttons">
<b-button native-type="submit" type="is-primary" <b-button native-type="submit" type="is-primary"
icon-left="account-search-outline">Query</b-button> icon-left="account-search-outline">Query</b-button>
<b-button @click.prevent="toggleAdvancedSearch" icon-left="close">Reset</b-button> <b-button @click.prevent="toggleAdvancedSearch" icon-left="cancel">Reset</b-button>
</div> </div>
</div><!-- advanced query --> </div><!-- advanced query -->
</div> </div>
@ -208,6 +208,8 @@ export default Vue.extend({
all: false, all: false,
}, },
queryInput: '',
// Query params to filter the getSubscribers() API call. // Query params to filter the getSubscribers() API call.
queryParams: { queryParams: {
// Search query expression. // Search query expression.
@ -232,7 +234,12 @@ export default Vue.extend({
// Toggling to simple search. // Toggling to simple search.
if (!this.isSearchAdvanced) { if (!this.isSearchAdvanced) {
this.$nextTick(() => { this.$nextTick(() => {
this.queryInput = '';
this.queryParams.queryExp = '';
this.queryParams.page = 1;
this.$refs.query.focus(); this.$refs.query.focus();
this.querySubscribers();
}); });
return; return;
} }