Add search feature to Audit Logs

Author: ivankristianto

frontend/js/app/audit-log/main.ejs

@@ -2,6 +2,16 @@
     <div class="card-status bg-teal"></div>
     <div class="card-header">
         <h3 class="card-title"><%- i18n('audit-log', 'title') %></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 Log…" aria-label="Search in Audit Logs">
+                </div>
+            </form>
+        </div>
     </div>
     <div class="card-body no-padding min-100">
         <div class="dimmer active">

frontend/js/app/audit-log/main.js

@@ -12,39 +12,68 @@ module.exports = Mn.View.extend({
 
     ui: {
         list_region: '.list-region',
-        dimmer:      '.dimmer'
+        dimmer:      '.dimmer',
+        search:      '.search-form',
+        query:       'input[name="source-query"]'
+    },
+
+    fetch: App.Api.AuditLog.getAll,
+
+    showData: function(response) {
+        this.showChildView('list_region', new ListView({
+            collection: new AuditLogModel.Collection(response)
+        }));
+    },
+
+    showError: function(err) {
+        this.showChildView('list_region', new ErrorView({
+            code:    err.code,
+            message: err.message,
+            retry:   function () {
+                App.Controller.showAuditLog();
+            }
+        }));
+
+        console.error(err);
+    },
+
+    showEmpty: function() {
+        this.showChildView('list_region', new EmptyView({
+            title:    App.i18n('audit-log', 'empty'),
+            subtitle: App.i18n('audit-log', 'empty-subtitle')
+        }));
     },
 
     regions: {
         list_region: '@ui.list_region'
     },
 
+    events: {
+        'submit @ui.search': function (e) {
+            e.preventDefault();
+            let query = this.ui.query.val();
+
+            this.fetch(['user'], query)
+                .then(response => this.showData(response))
+                .catch(err => {
+                    this.showError(err);
+                });
+        }
+    },
+
     onRender: function () {
         let view = this;
 
-        App.Api.AuditLog.getAll(['user'])
+        view.fetch(['user'])
             .then(response => {
                 if (!view.isDestroyed() && response && response.length) {
-                    view.showChildView('list_region', new ListView({
-                        collection: new AuditLogModel.Collection(response)
-                    }));
+                    view.showData(response);
                 } else {
-                    view.showChildView('list_region', new EmptyView({
-                        title:    App.i18n('audit-log', 'empty'),
-                        subtitle: App.i18n('audit-log', 'empty-subtitle')
-                    }));
+                    view.showEmpty();
                 }
             })
             .catch(err => {
-                view.showChildView('list_region', new ErrorView({
-                    code:    err.code,
-                    message: err.message,
-                    retry:   function () {
-                        App.Controller.showAuditLog();
-                    }
-                }));
-
-                console.error(err);
+                view.showError(err);
             })
             .then(() => {
                 view.ui.dimmer.removeClass('active');