Merge pull request #313 from hashmapinc/Tempus-177

Tempus 177
hashmapinc · May 15, 2018 · b2bc49c · b2bc49c
2 parents 24b37c1 + 6e3e3f9
commit b2bc49c
Show file tree

Hide file tree

Showing 5 changed files with 258 additions and 9 deletions.
diff --git a/ui/src/app/components/grid.directive.js b/ui/src/app/components/grid.directive.js
@@ -125,7 +125,7 @@ function Grid() {
 }
 
 /*@ngInject*/
-function GridController(applicationService, $scope, $state, $mdDialog, $document, $q, $mdUtil, $timeout, $translate, $mdMedia, $templateCache, $window, userService) { 
+function GridController(applicationService, $scope, $rootScope, $state, $mdDialog, $document, $q, $mdUtil, $timeout, $translate, $mdMedia, $templateCache, $window, userService) {
 
     var vm = this;
 
@@ -513,6 +513,12 @@ function GridController(applicationService, $scope, $state, $mdDialog, $document
         reload();
     });
 
+   var gridTableDevice = $rootScope.$on("CallTableDetailDevice", function($event, data){
+       vm.clickItemFunc(data[0],data[1]);
+    });
+
+    $scope.$on('$destroy', gridTableDevice);
+
     vm.onGridInited(vm);
 
     vm.itemRows.getItemAtIndex(pageSize);
@@ -584,6 +590,7 @@ function GridController(applicationService, $scope, $state, $mdDialog, $document
                 return;
             }
         }
+
         vm.loadItemDetailsFunc(item).then(function success(detailsItem) {
             if(angular.isDefined(vm.config.parentCtl)){
                 if((angular.isFunction(vm.config.parentCtl.currentApp) || angular.isObject(vm.config.parentCtl.currentApp)) && detailsItem.id.entityType == 'APPLICATION')
@@ -673,6 +680,9 @@ function GridController(applicationService, $scope, $state, $mdDialog, $document
             vm.saveItemFunc(vm.detailsConfig.editingItem).then(function success(item) {
             theForm.$setPristine();
             vm.detailsConfig.isDetailsEditMode = false;
+            if(angular.isDefined(vm.parentCtl.loadTableData)) {
+                vm.parentCtl.loadTableData();
+            }
             var index = vm.detailsConfig.currentItem.index;
             item.index = index;
             vm.detailsConfig.currentItem = item;
@@ -681,6 +691,7 @@ function GridController(applicationService, $scope, $state, $mdDialog, $document
             var itemRow = vm.items.rowData[row];
             var column = index % vm.columns;
             itemRow[column] = item;
+
         });
         }
 
@@ -727,6 +738,7 @@ function GridController(applicationService, $scope, $state, $mdDialog, $document
             );
         }
         else {
+
             var confirm = $mdDialog.confirm()
                 .targetEvent($event)
                 .title(vm.deleteItemTitleFunc(item))
@@ -882,7 +894,6 @@ function GridController(applicationService, $scope, $state, $mdDialog, $document
 function AddItemController($scope, $mdDialog, saveItemFunction, helpLinks) {
 
     var vm = this;
-
     vm.helpLinks = helpLinks;
     vm.item = {};
 

diff --git a/ui/src/app/components/grid.scss b/ui/src/app/components/grid.scss
@@ -46,8 +46,27 @@
 
 #tb-vertical-container {
   position: absolute;
-  top: 0;
+  top: 0px;
   left: 0;
   right: 0;
   bottom: 0;
 }
+
+.device-grid #tb-vertical-container{
+  top: 30px !important;
+}
+
+.tb-device-table {
+  background-color: white;
+}
+
+.tb-device-container{
+  margin-left: 3%;
+  margin-right: 3%;
+  width:93.9%
+}
+
+.tb-device-toolbar {
+  margin-left: 3%;
+  width:93.9%
+}
diff --git a/ui/src/app/components/grid.tpl.html b/ui/src/app/components/grid.tpl.html
@@ -21,7 +21,7 @@
       ng-show="vm.noData()">{{vm.noItemsText()}}</span>
 <section layout="row" flex style="height: 100%;" flex layout-wrap>
     <div layout="column" style="height: 100%;" flex layout-wrap>
-        <md-virtual-repeat-container ng-show="vm.hasData()" tb-scope-element="repeatContainer" id="tb-vertical-container" md-top-index="vm.topIndex" flex>
+        <md-virtual-repeat-container ng-show="vm.hasData() && !tableView" tb-scope-element="repeatContainer" id="tb-vertical-container" md-top-index="vm.topIndex" flex>
             <div class="md-padding" layout="column">
                 <section layout="row"  md-virtual-repeat="rowItem in vm.itemRows" md-on-demand md-item-size="vm.itemHeight">
                     <div flex ng-repeat="n in [] | range:vm.columns" ng-style="{'height':vm.itemHeight+'px'}" ng-if="rowItem[n]">
@@ -80,7 +80,7 @@
     </tb-details-sidenav>
 </section>
 
-<section layout="row" layout-wrap class="tb-footer-buttons md-fab " layout-align="start end">
+<section ng-show="!tableView" layout="row" layout-wrap class="tb-footer-buttons md-fab " layout-align="start end">
     <md-button ng-disabled="$root.loading" ng-show="vm.items.selectedCount > 0" class="tb-btn-footer md-accent md-hue-2 md-fab" ng-repeat="groupAction in vm.groupActionsList"
                ng-click="groupAction.onAction($event, vm.items)" aria-label="{{ groupAction.name() }}">
         <md-tooltip md-direction="top">

diff --git a/ui/src/app/device/device.controller.js b/ui/src/app/device/device.controller.js
@@ -3,7 +3,7 @@
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
+ * You may obtain a copy of the License at$mdDialog
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
@@ -48,8 +48,8 @@ export function DeviceCardController(types) {
 
 
 /*@ngInject*/
-export function DeviceController($rootScope, userService, deviceService, customerService, $state, $stateParams,
-                                 $document, $mdDialog, $q, $translate, types) {
+export function DeviceController($rootScope,userService, deviceService, customerService, $state, $stateParams,
+                                 $document, $mdDialog, $q, $translate, types, $scope, $filter) {
 
     var customerId = $stateParams.customerId;
 
@@ -59,8 +59,26 @@ export function DeviceController($rootScope, userService, deviceService, custome
 
     var vm = this;
 
+
+
     vm.types = types;
 
+    $scope.tableView = false;
+
+
+    $scope.devices = {
+        count: 0,
+        data: []
+    };
+
+    $scope.query = {
+        order: 'key',
+        limit: 5,
+        page: 1,
+        search: null
+    };
+
+
     vm.deviceGridConfig = {
         deleteItemTitleFunc: deleteDeviceTitle,
         deleteItemContentFunc: deleteDeviceText,
@@ -337,6 +355,118 @@ export function DeviceController($rootScope, userService, deviceService, custome
 
     }
 
+    loadTableData();
+
+    function loadTableData() {
+
+        var promise = vm.deviceGridConfig.fetchItemsFunc({limit: 30, textSearch: ''}, false);
+        if(promise) {
+
+            promise.then(function success(items) {
+
+                var deviceSortList = $filter('orderBy')(items.data, $scope.query.order);
+
+
+                if ($scope.query.search != null) {
+                    deviceSortList = $filter('filter')(items.data, {name: $scope.query.search});
+
+                }
+
+                var startIndex = $scope.query.limit * ($scope.query.page - 1);
+                var devicePaginatedata = deviceSortList.slice(startIndex, startIndex + $scope.query.limit);
+
+                $scope.devices = {
+                    count: items.data.length,
+                    data: devicePaginatedata
+                };
+
+                },
+            )
+
+        }
+    }
+
+
+    $scope.enterFilterMode = function() {
+        $scope.query.search = '';
+    }
+
+    $scope.exitFilterMode = function() {
+
+        $scope.query.search = null;
+        loadTableData();
+    }
+
+    $scope.resetFilter = function() {
+
+        $scope.query = {
+            order: 'key',
+            limit: 5,
+            page: 1,
+            search: null
+        };
+
+        loadTableData();
+    }
+
+    vm.loadTableData = loadTableData;
+    $scope.$watch("query.search", function(newVal, prevVal) {
+        if (!angular.equals(newVal, prevVal) && $scope.query.search != null) {
+            loadTableData();
+        }
+    });
+
+    $scope.onReorder = function() {
+
+        loadTableData();
+    }
+
+    $scope.onPaginate = function() {
+
+        loadTableData();
+
+    }
+
+    $scope.deleteDevice = function($event,item) {
+
+        var confirm = $mdDialog.confirm()
+            .targetEvent($event)
+            .title(deleteDeviceTitle(item))
+            .htmlContent(deleteDeviceText(item))
+            .ariaLabel($translate.instant('grid.delete-item'))
+            .cancel($translate.instant('action.no'))
+            .ok($translate.instant('action.yes'));
+        $mdDialog.show(confirm).then(function () {
+                vm.deviceGridConfig.deleteItemFunc(item.id.id).then(function success() {
+                    $scope.resetFilter();
+
+                });
+            },
+            function () {
+            });
+    }
+
+    $scope.addDevice = function($event) {
+
+        $mdDialog.show({
+            controller: 'AddItemController',
+            controllerAs: 'vm',
+            templateUrl: 'device/add-device.tpl.html',
+            parent: angular.element($document[0].body),
+            locals: {saveItemFunction: vm.deviceGridConfig.saveItemFunc},
+            fullscreen: true,
+            targetEvent: $event
+        }).then(function () {
+            $scope.resetFilter();
+        }, function () {
+        });
+
+    }
+
+    $scope.deviceDetailFunc = function($event,device) {
+        $rootScope.$emit("CallTableDetailDevice", [$event, device]);
+    }
+
     function deleteDeviceTitle(device) {
         return $translate.instant('device.delete-device-title', {deviceName: device.name});
     }

diff --git a/ui/src/app/device/devices.tpl.html b/ui/src/app/device/devices.tpl.html
@@ -15,7 +15,96 @@
     limitations under the License.
 
 -->
-<tb-grid grid-configuration="vm.deviceGridConfig">
+<section layout="row" layout-align="center center" style="margin-left: 80%;">
+    <label class="tb-small" translate>Grid View</label>
+    <md-switch class="device-switch" ng-model="tableView" aria-label="predefined-switcher" style="
+    margin-left: 4px;
+    margin-right: -5px;
+">
+    </md-switch>
+    <label class="tb-small" translate>Tabular View</label>
+</section>
+
+<md-toolbar class="md-table-toolbar tb-device-toolbar md-default" ng-show="tableView && query.search != null">
+    <div class="md-toolbar-tools">
+        <md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}">
+            <md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon>
+            <md-tooltip md-direction="top">
+                {{ 'action.search' | translate }}
+            </md-tooltip>
+        </md-button>
+        <md-input-container flex>
+            <label>&nbsp;</label>
+            <input ng-model="query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
+        </md-input-container>
+        <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="exitFilterMode()">
+            <md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
+            <md-tooltip md-direction="top">
+                {{ 'action.close' | translate }}
+            </md-tooltip>
+        </md-button>
+    </div>
+</md-toolbar>
+<md-toolbar class="md-table-toolbar tb-device-toolbar md-default " ng-show="tableView && query.search === null">
+
+    <div class="md-toolbar-tools">
+        <span flex></span>
+        <md-button ng-show = "vm.devicesScope != 'customer_user'" class="md-icon-button" ng-click="addDevice($event)">
+            <md-icon>add</md-icon>
+            <md-tooltip md-direction="top">
+                {{ 'action.add' | translate }}
+            </md-tooltip>
+        </md-button>
+        <md-button class="md-icon-button" ng-click="enterFilterMode()">
+            <md-icon>search</md-icon>
+            <md-tooltip md-direction="top">
+                {{ 'action.search' | translate }}
+            </md-tooltip>
+        </md-button>
+        <md-button  class="md-icon-button" ng-click="resetFilter()">
+            <md-icon>refresh</md-icon>
+            <md-tooltip md-direction="top">
+                {{ 'action.refresh' | translate }}
+            </md-tooltip>
+        </md-button>
+    </div>
+</md-toolbar>
+
+<md-table-container ng-show="tableView" class ="tb-device-container">
+    <table class="tb-device-table" md-table>
+        <thead md-head md-order="query.order" md-on-reorder="onReorder">
+        <tr md-row>
+            <th md-column md-order-by="name"><span translate>Name</span></th>
+            <th md-column md-order-by="name"><span translate>Type</span></th>
+            <th md-column md-order-by="createdTime"><span translate>Description</span></th>
+            <th md-column md-order-by="createdTime"><span translate>Status</span></th>
+            <th md-column><span translate>Age</span></th>
+            <th md-column md-order-by="createdTime"><span translate>Last Time Received</span></th>
+
+        </tr>
+        </thead>
+        <tbody md-body>
+        <tr md-row  ng-repeat="device in devices.data">
+            <td md-cell><a href ng-click="deviceDetailFunc($event,device)">{{device.name}}</a></td>
+            <td md-cell style="text-transform: uppercase">{{device.type}}</td>
+            <td md-cell>{{device.additionalInfo.description}}</td>
+            <td md-cell>NA</td>
+            <td md-cell>NA</td>
+            <td md-cell>{{device.createdTime | date :  'yyyy-MM-dd HH:mm:ss'}}</td>
+            <td ng-show = "vm.devicesScope != 'customer_user'" md-cell class="tb-value-cell" ng-click="deleteDevice($event, device)">
+                <span><ng-md-icon size="16" icon="delete"></ng-md-icon></span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</md-table-container>
+<md-table-pagination class ="tb-device-container" ng-show="tableView" md-limit="query.limit" md-limit-options="[5, 10, 15]"
+                     md-page="query.page" md-total="{{devices.count}}"
+                     md-on-paginate="onPaginate" md-page-select>
+</md-table-pagination>
+
+
+<tb-grid grid-configuration="vm.deviceGridConfig" class="device-grid">
     <details-buttons tb-help="'devices'" help-container-id="help-container">
         <div id="help-container"></div>
     </details-buttons>