From d3a5a3d0d6ba1da75787169e5d77f6fa4ec174b6 Mon Sep 17 00:00:00 2001
From: Ivan Kristianto <ivan@ivankristianto.com>
Date: Sat, 12 Feb 2022 12:52:22 +0700
Subject: [PATCH] Add search feature to Users

---
 frontend/js/app/users/main.ejs |  8 ++++++
 frontend/js/app/users/main.js  | 51 ++++++++++++++++++++++++----------
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/frontend/js/app/users/main.ejs b/frontend/js/app/users/main.ejs
index 8f0d3aaf..2a75ecea 100644
--- a/frontend/js/app/users/main.ejs
+++ b/frontend/js/app/users/main.ejs
@@ -3,6 +3,14 @@
     <div class="card-header">
         <h3 class="card-title"><%- i18n('users', '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 User…" aria-label="Search in Users">
+                </div>
+            </form>
             <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item"><%- i18n('users', 'add') %></a>
         </div>
     </div>
diff --git a/frontend/js/app/users/main.js b/frontend/js/app/users/main.js
index 95d42c61..42cb41ef 100644
--- a/frontend/js/app/users/main.js
+++ b/frontend/js/app/users/main.js
@@ -12,7 +12,29 @@ module.exports = Mn.View.extend({
     ui: {
         list_region: '.list-region',
         add:         '.add-item',
-        dimmer:      '.dimmer'
+        dimmer:      '.dimmer',
+        search:      '.search-form',
+        query:       'input[name="source-query"]'
+    },
+
+    fetch: App.Api.Users.getAll,
+
+    showData: function(response) {
+        this.showChildView('list_region', new ListView({
+            collection: new UserModel.Collection(response)
+        }));
+    },
+
+    showError: function(err) {
+        this.showChildView('list_region', new ErrorView({
+            code:    err.code,
+            message: err.message,
+            retry:   function () {
+                App.Controller.showUsers();
+            }
+        }));
+
+        console.error(err);
     },
 
     regions: {
@@ -23,30 +45,31 @@ module.exports = Mn.View.extend({
         'click @ui.add': function (e) {
             e.preventDefault();
             App.Controller.showUserForm(new UserModel.Model());
+        },
+
+        'submit @ui.search': function (e) {
+            e.preventDefault();
+            let query = this.ui.query.val();
+
+            this.fetch(['permissions'], query)
+                .then(response => this.showData(response))
+                .catch(err => {
+                    this.showError(err);
+                });
         }
     },
 
     onRender: function () {
         let view = this;
 
-        App.Api.Users.getAll(['permissions'])
+        view.fetch(['permissions'])
             .then(response => {
                 if (!view.isDestroyed() && response && response.length) {
-                    view.showChildView('list_region', new ListView({
-                        collection: new UserModel.Collection(response)
-                    }));
+                    view.showData(response);
                 }
             })
             .catch(err => {
-                view.showChildView('list_region', new ErrorView({
-                    code:    err.code,
-                    message: err.message,
-                    retry:   function () {
-                        App.Controller.showUsers();
-                    }
-                }));
-
-                console.error(err);
+                view.showError(err);
             })
             .then(() => {
                 view.ui.dimmer.removeClass('active');