[TIC-UI] add package list filter

- add package list filter
- add clear button in input text

Signed-off-by: ChangHyun Lee <leechwin.lee@samsung.com>
Change-Id: I3fe47a0a25503ee387b73aafc27d62bd09796c64

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 5703cd4..04af47a 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -86,6 +86,17 @@ html {
     padding: 3px 10px;
 }
 
+/* Package Toolbar filter-clear button */
+::-ms-clear {
+  display: none;
+}
+.form-control-clear {
+  z-index: 10;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+
 /* TODO: Height of Treeview, Package Information and Summary grid in Package Page */
 #tic-package-info-table {
     height: 15vh;
@@ -157,7 +168,6 @@ html {
     opacity: 0.5;
     z-index: 2000;
 }
-
 #tic-repository-list li {
     cursor: move;
     display: block;
@@ -167,7 +177,6 @@ html {
     background: #eee;
     max-width: 100%;
 }
-
 #tic-repository-list li.placeholder {
     position: relative;
     margin: 0;
@@ -175,7 +184,6 @@ html {
     border: none;
     content: "";
 }
-
 #tic-repository-list li.placeholder:before {
     position: absolute;
     content: "";
@@ -188,7 +196,6 @@ html {
     border-left-color: #f00;
     border-right: none;
 }
-
 .tic-repository-url {
     overflow: hidden;
     white-space: nowrap;

diff --git a/public/src/index.html b/public/src/index.html
index d0ba481..cac4107 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -81,10 +81,14 @@
                                 <!-- Package Tree Toolbar -->
                                 <div id="tic-package-left-col-tree-toolbar">
                                     <div class="input-group">
-                                        <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-left-col-tree-toolbar-filter"/>
+                                        <div class="form-group has-feedback has-clear">
+                                            <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-toolbar-input"/>
+                                            <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden" id="tic-package-toolbar-input-clear"></span>
+                                        </div>
                                         <div class="input-group-btn">
+                                            <!-- TODO: options?
                                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                                <span class="glyphicon glyphicon-menu-hamburger"></span>
+                                                <i class="fa fa-navicon"></i>
                                             </button>
                                             <ul class="dropdown-menu dropdown-menu-right">
                                                 <li><a href="#">Action</a></li>
@@ -93,12 +97,12 @@
                                                 <li role="separator" class="divider"></li>
                                                 <li><a href="#">Separated link</a></li>
                                             </ul>
-
+                                            -->
                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
-                                                <span class="glyphicon glyphicon-minus" aria-hidden="true"/>
+                                                <i class="fa fa-minus"></i>
                                             </button>
                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
-                                                <span class="glyphicon glyphicon-plus" aria-hidden="true"/>
+                                                <i class="fa fa-plus"></i>
                                             </button>
                                         </div>
                                     </div>
@@ -191,6 +195,7 @@
             </div><!-- /.container -->
         </section>
 
+
         <!-- Settings Section -->
         <section id="tic-settings-section">
             <div class="container">
@@ -210,7 +215,10 @@
                                     <div class="panel-heading">Repository</div>
                                     <div class="panel-body">
                                         <div class="input-group">
-                                            <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
+                                            <div class="form-group has-feedback has-clear">
+                                                <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
+                                                <span id="tic-repository-input-clear" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
+                                            </div>
                                             <span class="input-group-btn">
                                                 <button type="button" id="tic-repository-add"class="btn btn-default">Add Repository</button>
                                             </span>

diff --git a/public/src/js/page/package.js b/public/src/js/page/package.js
index 73266b8..a28aaeb 100644 (file)
--- a/public/src/js/page/package.js
+++ b/public/src/js/page/package.js
@@ -72,11 +72,7 @@ define([
             packageList.html(_.orderBy(_.map(list, 'text')).join('<br>'));
         }
 
-        if (count === 0) {
-            $('#tic-package-create').addClass('disabled');
-        } else {
-            $('#tic-package-create').removeClass('disabled');
-        }
+        $('#tic-package-create').toggleClass('disabled', count === 0);
 
         require('js/page/image').updateSummary();
     }
@@ -142,10 +138,13 @@ define([
         if (!_.isEmpty(localNode.dependency) && localNode.dependency.length > 0) {
             _.forEach(localNode.dependency, function(name) {
                 var depNode = _find(name);
-                if (depNode.state.checked === false) {
-                    toggleNode.push(depNode);
+                if (_.isEmpty(depNode)) {
+                    Util.showAlertDialog('Can not find dependency package. \'' + name + '\'');
+                } else {
+                    if (depNode.state.checked === false) {
+                        toggleNode.push(depNode);
+                    }
                 }
-                // TODO: Can not find dependency package
             });
             $tree.treeview('checkNode', [toggleNode, { silent: true }]);
 
@@ -294,15 +293,36 @@ define([
         console.log('package: init');
 
         function _filter() {
-            var filterText = $('#tic-package-left-col-tree-toolbar-filter').val();
+            var filterText = $('#tic-package-toolbar-input').val();
             var matchNodes = $tree.treeview('search', [ filterText, {
                 ignoreCase: true,     // case insensitive
                 exactMatch: false,    // like or equals
                 revealResults: true,  // reveal matching nodes
             }]);
-            // TODO: matchNodes show and hide
+
+            _.forEach(packages, function (node) {
+                node.$el.hide();
+            });
+            if (!_.isEmpty(matchNodes)) {
+                _.forEach(matchNodes, function (node) {
+                    node.$el.show();
+                });
+            } else {
+                if (_.isEmpty(filterText)) {
+                    _.forEach(packages, function (node) {
+                        node.$el.show();
+                    });
+                }
+            }
+            $('#tic-package-toolbar-input-clear').toggleClass('hidden', _.isEmpty(filterText));
+        }
+        $('#tic-package-toolbar-input').on('input change', _filter);
+
+        function _inputClearBtnHandler() {
+            $('#tic-package-toolbar-input').val('').trigger('change').focus();
+            $(this).toggleClass('hidden', true);
         }
-        $('#tic-package-left-col-tree-toolbar-filter').on('input', _filter);
+        $('#tic-package-toolbar-input-clear').on('click', _inputClearBtnHandler);
 
         function _collapseAll() {
             $tree.treeview('collapseAll');

diff --git a/public/src/js/page/settings.js b/public/src/js/page/settings.js
index 61d83c9..d5f88e1 100644 (file)
--- a/public/src/js/page/settings.js
+++ b/public/src/js/page/settings.js
@@ -102,13 +102,21 @@ define([
         function _filter() {
             var input = $(this).val();
             var duplicatedUrl = _.filter(repoStore, ['url', input]);
+
             if (Util.validateURL(input) && _.isEmpty(duplicatedUrl)) {
                 $('#tic-repository-add').prop('disabled', false);
             } else {
                 $('#tic-repository-add').prop('disabled', true);
             }
+            $('#tic-repository-input-clear').toggleClass('hidden', _.isEmpty(input));
+        }
+        $('#tic-repository-input').on('input change', _filter);
+
+        function _inputClearBtnHandler() {
+            $('#tic-repository-input').val('').trigger('change').focus();
+            $(this).toggleClass('hidden', true);
         }
-        $('#tic-repository-input').on('input', _filter);
+        $('#tic-repository-input-clear').on('click', _inputClearBtnHandler);
 
         /**
          * Add Repository Button
@@ -119,6 +127,7 @@ define([
             _addRepo(input);
             $repoInput.val('');
             $('#tic-repository-add').prop('disabled', true);
+            $('#tic-repository-input-clear').addClass('hidden');
         }
         $('#tic-repository-add').prop('disabled', true).on('click', _addRepoBtnHandler);