Add search function for redirection

This commit is contained in:
Ivan Kristianto 2022-01-30 22:47:42 +07:00
parent 5edb16f36e
commit 96e034aa75
2 changed files with 44 additions and 14 deletions

View File

@ -3,6 +3,14 @@
<div class="card-header">
<h3 class="card-title">Redirection Hosts</h3>
<div class="card-options">
<form class="search-form" role="search">
<div class="input-icon">
<span class="input-icon-addon">
<i class="fe fe-search"></i>
</span>
<input name="source-query" type="text" value="" class="form-control form-control-sm" placeholder="Search Host…" aria-label="Search in Hosts">
</div>
</form>
<a href="#" class="btn btn-outline-secondary btn-sm ml-2 help"><i class="fe fe-help-circle"></i></a>
<% if (showAddButton) { %>
<a href="#" class="btn btn-outline-yellow btn-sm ml-2 add-item">Add Redirection Host</a>

View File

@ -14,7 +14,28 @@ module.exports = Mn.View.extend({
list_region: '.list-region',
add: '.add-item',
help: '.help',
dimmer: '.dimmer'
dimmer: '.dimmer',
search: '.search-form',
query: 'input[name="source-query"]'
},
fetch: App.Api.Nginx.RedirectionHosts.getAll,
showData: function(response) {
this.showChildView('list_region', new ListView({
collection: new RedirectionHostModel.Collection(response)
}));
},
showError: function(err) {
this.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
App.Controller.showNginxRedirection();
}
}));
console.error(err);
},
regions: {
@ -30,6 +51,17 @@ module.exports = Mn.View.extend({
'click @ui.help': function (e) {
e.preventDefault();
App.Controller.showHelp(App.i18n('redirection-hosts', 'help-title'), App.i18n('redirection-hosts', 'help-content'));
},
'submit @ui.search': function (e) {
e.preventDefault();
let query = this.ui.query.val();
this.fetch(['owner', 'certificate'], query)
.then(response => this.showData(response))
.catch(err => {
this.showError(err);
});
}
},
@ -40,13 +72,11 @@ module.exports = Mn.View.extend({
onRender: function () {
let view = this;
App.Api.Nginx.RedirectionHosts.getAll(['owner', 'certificate'])
view.fetch(['owner', 'certificate'])
.then(response => {
if (!view.isDestroyed()) {
if (response && response.length) {
view.showChildView('list_region', new ListView({
collection: new RedirectionHostModel.Collection(response)
}));
view.showData(response);
} else {
let manage = App.Cache.User.canManage('redirection_hosts');
@ -64,15 +94,7 @@ module.exports = Mn.View.extend({
}
})
.catch(err => {
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
App.Controller.showNginxRedirection();
}
}));
console.error(err);
view.showError(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');