From e141b5ff20a8270c26a316e1bc6aa4da2d6c69c0 Mon Sep 17 00:00:00 2001
From: Ivan Kristianto <ivan@ivankristianto.com>
Date: Sat, 12 Feb 2022 11:36:59 +0700
Subject: [PATCH] Add search feature to stream

---
 frontend/js/app/nginx/stream/main.ejs |  8 +++
 frontend/js/app/nginx/stream/main.js  | 79 ++++++++++++++++++---------
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/frontend/js/app/nginx/stream/main.ejs b/frontend/js/app/nginx/stream/main.ejs
index c01414ce..d08ed56a 100644
--- a/frontend/js/app/nginx/stream/main.ejs
+++ b/frontend/js/app/nginx/stream/main.ejs
@@ -3,6 +3,14 @@
     <div class="card-header">
         <h3 class="card-title"><%- i18n('streams', '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 Port…" aria-label="Search in Incoming Port">
+                </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-blue btn-sm ml-2 add-item"><%- i18n('streams', 'add') %></a>
diff --git a/frontend/js/app/nginx/stream/main.js b/frontend/js/app/nginx/stream/main.js
index a8eda92c..8a86e583 100644
--- a/frontend/js/app/nginx/stream/main.js
+++ b/frontend/js/app/nginx/stream/main.js
@@ -14,7 +14,44 @@ 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.Streams.getAll,
+
+    showData: function(response) {
+        this.showChildView('list_region', new ListView({
+            collection: new StreamModel.Collection(response)
+        }));
+    },
+
+    showError: function(err) {
+        this.showChildView('list_region', new ErrorView({
+            code:    err.code,
+            message: err.message,
+            retry:   function () {
+                App.Controller.showNginxStream();
+            }
+        }));
+
+        console.error(err);
+    },
+
+    showEmpty: function() {
+        let manage = App.Cache.User.canManage('streams');
+
+        this.showChildView('list_region', new EmptyView({
+            title:      App.i18n('streams', 'empty'),
+            subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
+            link:       manage ? App.i18n('streams', 'add') : null,
+            btn_color:  'blue',
+            permission: 'streams',
+            action:     function () {
+                App.Controller.showNginxStreamForm();
+            }
+        }));
     },
 
     regions: {
@@ -30,6 +67,17 @@ module.exports = Mn.View.extend({
         'click @ui.help': function (e) {
             e.preventDefault();
             App.Controller.showHelp(App.i18n('streams', 'help-title'), App.i18n('streams', 'help-content'));
+        },
+
+        'submit @ui.search': function (e) {
+            e.preventDefault();
+            let query = this.ui.query.val();
+
+            this.fetch(['owner'], query)
+                .then(response => this.showData(response))
+                .catch(err => {
+                    this.showError(err);
+                });
         }
     },
 
@@ -40,39 +88,18 @@ module.exports = Mn.View.extend({
     onRender: function () {
         let view = this;
 
-        App.Api.Nginx.Streams.getAll(['owner'])
+        view.fetch(['owner'])
             .then(response => {
                 if (!view.isDestroyed()) {
                     if (response && response.length) {
-                        view.showChildView('list_region', new ListView({
-                            collection: new StreamModel.Collection(response)
-                        }));
+                        view.showData(response);
                     } else {
-                        let manage = App.Cache.User.canManage('streams');
-
-                        view.showChildView('list_region', new EmptyView({
-                            title:      App.i18n('streams', 'empty'),
-                            subtitle:   App.i18n('all-hosts', 'empty-subtitle', {manage: manage}),
-                            link:       manage ? App.i18n('streams', 'add') : null,
-                            btn_color:  'blue',
-                            permission: 'streams',
-                            action:     function () {
-                                App.Controller.showNginxStreamForm();
-                            }
-                        }));
+                        view.showEmpty();
                     }
                 }
             })
             .catch(err => {
-                view.showChildView('list_region', new ErrorView({
-                    code:    err.code,
-                    message: err.message,
-                    retry:   function () {
-                        App.Controller.showNginxStream();
-                    }
-                }));
-
-                console.error(err);
+                view.showError(err);
             })
             .then(() => {
                 view.ui.dimmer.removeClass('active');