From cad686b43c5264b6e3bb59fb3a6399fbef41a101 Mon Sep 17 00:00:00 2001
From: charitha <charitha.ws@gmail.com>
Date: Thu, 1 Dec 2016 15:28:39 +0530
Subject: [PATCH] Bug fixes & UI/UX improvements

---
 .../app/modules/business-controllers/user.js  |  2 +-
 .../app/pages/cdmf.page.devices/devices.hbs   | 52 ++++++++++---------
 .../app/pages/cdmf.page.groups/groups.hbs     | 13 +++--
 .../public/js/dataTables.extended.js          | 34 ++++++------
 .../listing.hbs                               | 25 ++++-----
 .../public/js/listing.js                      |  6 +--
 .../cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs |  8 ---
 .../lib/theme-wso2_1.0/js/theme-wso2.js       | 36 ++++++++++---
 8 files changed, 96 insertions(+), 80 deletions(-)

diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/modules/business-controllers/user.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/modules/business-controllers/user.js
index f8a0fd1ad4..693d00b236 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/modules/business-controllers/user.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/modules/business-controllers/user.js
@@ -525,7 +525,7 @@ var userModule = function () {
         if (publicMethods.isAuthorized("/permission/admin/device-mgt/user/policies/list")) {
             permissions["LIST_POLICIES"] = true;
         }
-        if (publicMethods.isAuthorized("/permission/admin/device-mgt/devices/add")) {
+        if (publicMethods.isAuthorized("/permission/admin/device-mgt/devices/enroll")) {
             permissions["ADD_DEVICE"] = true;
         }
         if (publicMethods.isAuthorized("/permission/admin/device-mgt/groups/add")) {
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs
index 7cf43cc2af..2b50aa21c3 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devices/devices.hbs
@@ -73,11 +73,6 @@
 {{/zone}}
 
 {{#zone "content"}}
-    <div class="row wr-device-board" style="margin-top: -10px;">
-        <div class="col-lg-12 wr-secondary-bar">
-            <span class="page-sub-title">{{title}}</span>
-        </div>
-    </div>
     <div class="wr-device-list row">
         <div class="wr-hidden-operations wr-advance-operations"></div>
         <div class="col-md-12 wr-page-content">
@@ -157,34 +152,41 @@
                 {{else}}
                     <div id="ast-container" class="ast-container list-view">
                         <div class="ctrl-info-panel col-centered text-center wr-login">
-                            <h2>You don't have any device
+                            <h3 class="text-muted">
+                                <i class="fw fw-devices fw-3x"></i>
+                            </h3>
+                            <h3 class="text-muted">
+                                You don't have any device
                                 {{#if groupName}}
-                                assigned to this group
+                                    assigned to this group
                                 {{else}}
-                                registered
+                                    enrolled
                                 {{/if}}
-                                at the moment.</h2>
-                            <br />
-
-                            <p class="text-center">
+                                at the moment.
+                            </h3>
+                            <h3>
                                 {{#if groupName}}
-                                    <a href="{{@app.context}}/devices" class="wr-btn">
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-add fw-stack-1x"></i>
-                    </span>
+                                    <!--suppress HtmlUnknownTarget -->
+                                    <a href="{{@app.context}}/devices" class="btn-operations btn-default">
+                                            <span class="fw-stack">
+                                                <i class="fw fw-ring fw-stack-2x"></i>
+                                                <i class="fw fw-add fw-stack-1x"></i>
+                                            </span>
                                         Assign from My Devices
                                     </a>
                                 {{else}}
-                                    <a href="{{@app.context}}/device/enroll" class="wr-btn">
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-add fw-stack-1x"></i>
-                    </span>
-                                        Enroll New Device
-                                    </a>
+                                    {{#if permissions.enroll}}
+                                    <!--suppress HtmlUnknownTarget -->
+                                        <a href="{{@app.context}}/device/enroll" class="btn-operations btn-default">
+                                            <span class="fw-stack">
+                                                <i class="fw fw-ring fw-stack-2x"></i>
+                                                <i class="fw fw-add fw-stack-1x"></i>
+                                            </span>
+                                            Enroll New Device
+                                        </a>
+                                    {{/if}}
                                 {{/if}}
-                            </p>
+                            </h3>
                         </div>
                     </div>
                 {{/if}}
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.hbs
index 2c32a1227a..5aeca7d38c 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.hbs
@@ -79,18 +79,21 @@
                 {{else}}
                     <div id="ast-container" class="ast-container list-view">
                         <div class="ctrl-info-panel col-centered text-center wr-login">
-                            <h2>You don't have any group registered at the moment.</h2>
-                            <br />
+                            <h3 class="text-muted">
+                                <i class="fw fw-grouping fw-3x"></i>
+                            </h3>
+                            <h3 class="text-muted">You don't have any group registered at the moment</h3>
                             {{#if permissions.ADD_GROUP}}
-                                <p class="text-center">
-                                    <a href="{{@app.context}}/group/add" class="wr-btn">
+                                <h3>
+                                    <!--suppress HtmlUnknownTarget -->
+                                    <a href="{{@app.context}}/group/add" class="btn-operations btn-default">
                                         <span class="fw-stack">
                                             <i class="fw fw-ring fw-stack-2x"></i>
                                             <i class="fw fw-add fw-stack-1x"></i>
                                         </span>
                                         Add New Group
                                     </a>
-                                </p>
+                                </h3>
                             {{/if}}
                         </div>
                     </div>
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.js
index bcbbbae3f9..411eecc39f 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.js
@@ -151,22 +151,26 @@ $.fn.datatables_extended = function(settings){
                 }
 
                 function getAdvanceToolBar(){
-                    if(table.hasClass('sorting-enabled')){
-                        return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
-                            '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
-                            '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
-                            '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
-                            '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
-                            '<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>' + dropdownmenu[0].outerHTML  + '</li>' +
-                            '</ul>'
+                    if (!table.hasClass('no-toolbar')) {
+                        if (table.hasClass('sorting-enabled')) {
+                            return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
+                                   '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
+                                   '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
+                                   '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
+                                   '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
+                                   '<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>' + dropdownmenu[0].outerHTML + '</li>' +
+                                   '</ul>'
+                        } else {
+                            return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
+                                   '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
+                                   '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
+                                   '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
+                                   '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
+                                   '</ul>'
+                        }
                     }else{
-                        return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
-                            '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
-                            '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
-                            '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
-                            '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
-                            '</ul>'
-                    };
+                        return '';
+                    }
                 }
 
 
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/listing.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/listing.hbs
index 08aae161eb..095a701dd5 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/listing.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/listing.hbs
@@ -15,38 +15,33 @@
   specific language governing permissions and limitations
   under the License.
 }}
+
+<div class="row wr-device-board">
+    <div class="col-lg-12 wr-secondary-bar">
+        <span class="page-sub-title">Device Types</span>
+    </div>
+</div>
+
 <div class="container-fluid">
-    <span id="device-listing-status-msg"></span>
-    <table class="table table-striped table-hover list-table no-operations display responsive nowrap data-table grid-view"
-           id="device-grid">
+    <table class="table table-striped table-hover list-table no-operations display responsive nowrap data-table grid-view no-toolbar"
+           id="device-type-grid">
         <thead>
         <tr class="sort-row">
             <th class="no-sort"></th>
             <th>By Device Type</th>
             <th class="no-sort"></th>
         </tr>
-        <tr class="filter-row filter-box">
-            <th data-for="By Category" class="select-filter"></th>
-            <th data-for="By Device Type" class="text-filter"></th>
-            <th></th>
-        </tr>
         </thead>
         <tbody id="ast-container">
         </tbody>
     </table>
 </div>
 <br class="c-both"/>
-<div id="content-filter-types" style="display: none">
-    <div class="sort-title">Sort By</div>
-    <div class="sort-options">
-        <a href="#">By Device Type<span class="ico-sort-asc"></span></a>
-    </div>
-</div>
 
 {{#if virtualDeviceTypesList}}
     <div class="row wr-device-board">
         <div class="col-lg-12 wr-secondary-bar">
-            <span class="page-sub-title">Virtual Devices</span>
+            <span class="page-sub-title">Virtual Device Types</span>
         </div>
     </div>
     <h3 style="margin-left: 10px;">Don't have a device?</h3>
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/public/js/listing.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/public/js/listing.js
index 269f503a52..1fbbe479c2 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/public/js/listing.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/public/js/listing.js
@@ -141,7 +141,7 @@ function loadDevices(searchType, searchParam){
             compileTemplate(viewModel, deviceListingSrc);
         }
     } else {
-        $('#device-grid').addClass('hidden');
+        $('#device-type-grid').addClass('hidden');
         $('#device-listing-status-msg').html(
             '<div class="col-centered text-center"><h3 class="text-muted"><i class="fw fw-mobile fw-3x"></i>' +
             '</h3><h3 class="text-muted">No device type is available to be displayed.</h3>' +
@@ -167,7 +167,7 @@ function compileTemplate(viewModel, templateSrc){
         $("#ast-container").html($("#ast-container").html() + template(viewModel));
         compiledDeviceTypesCount++;
         if(deviceTypeCount == compiledDeviceTypesCount){
-            $('#device-grid').datatables_extended({"bFilter": true, "order": [[ 1, "asc" ]]});
+            $('#device-type-grid').datatables_extended({"bFilter": false, "order": [[ 1, "asc" ]]});
         }
     });
 }
@@ -194,7 +194,7 @@ function openCollapsedNav(){
  */
 $(document).ready(function () {
     loadDevices();
-    //$('#device-grid').datatables_extended();
+    //$('#device-type-grid').datatables_extended();
 
     /* Adding selected class for selected devices */
     $(deviceCheckbox).each(function () {
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs
index 0a6a7d5b7e..e19fb188be 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs
@@ -22,14 +22,6 @@
 {{/zone}}
 
 {{#zone "navMenu-items"}}
-    {{#if permissions.VIEW_DASHBOARD}}
-        <li>
-            <a href="{{@app.context}}">
-                <i class="fw fw-dashboard"></i>
-                Admin Dashboard
-            </a>
-        </li>
-    {{/if}}
     {{#if permissions.LIST_OWN_DEVICES}}
         <li>
             <a href="{{@app.context}}/devices">
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/lib/theme-wso2_1.0/js/theme-wso2.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/lib/theme-wso2_1.0/js/theme-wso2.js
index 6a68457693..13f6bbcad0 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/lib/theme-wso2_1.0/js/theme-wso2.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/lib/theme-wso2_1.0/js/theme-wso2.js
@@ -309,14 +309,34 @@ var responsiveTextRatio = 0.2,
                         }
                     });
 
-                    //Append advance operations to list table toolbar
-                    $('.dataTable.list-table').closest('.dataTables_wrapper').find('.dataTablesTop .dataTables_toolbar').html('' +
-                        '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
-                            '<li><button data-click-event="toggle-selected" class="btn btn-default btn-primary">Select All</li>' +
-                            '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
-                            '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
-                            '<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>'+dropdownmenu[0].outerHTML+'</li>' +
-                        '</ul>'
+                    function getAdvanceToolBar() {
+                        if (!table.hasClass('no-toolbar')) {
+                            if (table.hasClass('sorting-enabled')) {
+                                return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
+                                       '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
+                                       '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
+                                       '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
+                                       '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
+                                       '<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>' + dropdownmenu[0].outerHTML + '</li>' +
+                                       '</ul>'
+                            } else {
+                                return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
+                                       '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
+                                       '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
+                                       '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
+                                       '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
+                                       '</ul>'
+                            }
+                        } else {
+                            return '';
+                        }
+                    }
+
+                    /**
+                     *  append advance operations to list table toolbar
+                     */
+                    $('.dataTable.list-table').closest('.dataTables_wrapper').find('.dataTablesTop .dataTables_toolbar').html(
+                            getAdvanceToolBar()
                     );
 
                     //Sorting dropdown menu select function