TB-47: Show assigned customer title in device card.

application/src/main/java/org/thingsboard/server/controller/CustomerController.java

@@ -42,6 +42,20 @@ public class CustomerController extends BaseController {
         }
     }
 
+    @PreAuthorize("hasAnyAuthority('TENANT_ADMIN', 'CUSTOMER_USER')")
+    @RequestMapping(value = "/customer/{customerId}/title", method = RequestMethod.GET, produces = "application/text")
+    @ResponseBody
+    public String getCustomerTitleById(@PathVariable("customerId") String strCustomerId) throws ThingsboardException {
+        checkParameter("customerId", strCustomerId);
+        try {
+            CustomerId customerId = new CustomerId(toUUID(strCustomerId));
+            Customer customer = checkCustomerId(customerId);
+            return customer.getTitle();
+        } catch (Exception e) {
+            throw handleException(e);
+        }
+    }
+
     @PreAuthorize("hasAuthority('TENANT_ADMIN')")
     @RequestMapping(value = "/customer", method = RequestMethod.POST)
     @ResponseBody 

ui/src/app/api/customer.service.js

@@ -23,6 +23,7 @@ function CustomerService($http, $q) {
     var service = {
         getCustomers: getCustomers,
         getCustomer: getCustomer,
+        getCustomerTitle: getCustomerTitle,
         deleteCustomer: deleteCustomer,
         saveCustomer: saveCustomer
     }
@@ -60,6 +61,17 @@ function CustomerService($http, $q) {
         return deferred.promise;
     }
 
+    function getCustomerTitle(customerId) {
+        var deferred = $q.defer();
+        var url = '/api/customer/' + customerId + '/title';
+        $http.get(url, null).then(function success(response) {
+            deferred.resolve(response.data);
+        }, function fail(response) {
+            deferred.reject(response.data);
+        });
+        return deferred.promise;
+    }
+
     function saveCustomer(customer) {
         var deferred = $q.defer();
         var url = '/api/customer';

ui/src/app/components/grid.directive.js

@@ -26,6 +26,7 @@ import gridTemplate from './grid.tpl.html';
 
 export default angular.module('thingsboard.directives.grid', [thingsboardScopeElement, thingsboardDetailsSidenav])
     .directive('tbGrid', Grid)
+    .controller('ItemCardController', ItemCardController)
     .directive('tbGridCardContent', GridCardContent)
     .filter('range', RangeFilter)
     .name;
@@ -44,14 +45,52 @@ function RangeFilter() {
 }
 
 /*@ngInject*/
-function GridCardContent($compile) {
+function ItemCardController() {
+
+    var vm = this; //eslint-disable-line
+
+}
+
+/*@ngInject*/
+function GridCardContent($compile, $controller) {
     var linker = function(scope, element) {
+
+        var controllerInstance = null;
+
         scope.$watch('itemTemplate',
-            function(value) {
-                element.html(value);
-                $compile(element.contents())(scope);
+            function() {
+                initContent();
+            }
+        );
+        scope.$watch('itemController',
+            function() {
+                initContent();
             }
         );
+        scope.$watch('parentCtl',
+            function() {
+                controllerInstance.parentCtl = scope.parentCtl;
+            }
+        );
+        scope.$watch('item',
+            function() {
+                controllerInstance.item = scope.item;
+            }
+        );
+
+        function initContent() {
+            if (scope.itemTemplate && scope.itemController && !controllerInstance) {
+                element.html(scope.itemTemplate);
+                var locals = {};
+                angular.extend(locals, {$scope: scope, $element: element});
+                var controller = $controller(scope.itemController, locals, true, 'vm');
+                controller.instance = controller();
+                controllerInstance = controller.instance;
+                controllerInstance.item = scope.item;
+                controllerInstance.parentCtl = scope.parentCtl;
+                $compile(element.contents())(scope);
+            }
+        }
     };
 
     return {
@@ -61,6 +100,7 @@ function GridCardContent($compile) {
             parentCtl: "=parentCtl",
             gridCtl: "=gridCtl",
             itemTemplate: "=itemTemplate",
+            itemController: "=itemController",
             item: "=item"
         }
     };
@@ -291,6 +331,11 @@ function GridController($scope, $state, $mdDialog, $document, $q, $timeout, $tra
         } else if (vm.config.itemCardTemplateUrl) {
             vm.itemCardTemplate = $templateCache.get(vm.config.itemCardTemplateUrl);
         }
+        if (vm.config.itemCardController) {
+            vm.itemCardController =  vm.config.itemCardController;
+        } else {
+            vm.itemCardController = 'ItemCardController';
+        }
 
         vm.parentCtl = vm.config.parentCtl || vm;
 

ui/src/app/components/grid.tpl.html

@@ -43,7 +43,7 @@
                                 </md-card-title>
                             </section>
                             <md-card-content flex>
-                                <tb-grid-card-content grid-ctl="vm" parent-ctl="vm.parentCtl" item-template="vm.itemCardTemplate" item="rowItem[n]"></tb-grid-card-content>
+                                <tb-grid-card-content grid-ctl="vm" parent-ctl="vm.parentCtl" item-controller="vm.itemCardController" item-template="vm.itemCardTemplate" item="rowItem[n]"></tb-grid-card-content>
                             </md-card-content>
                             <md-card-actions layout="row" layout-align="end end">
                                 <md-button ng-if="action.isEnabled(rowItem[n])" ng-disabled="loading" class="md-icon-button md-primary" ng-repeat="action in vm.actionsList"

ui/src/app/device/device-card.tpl.html

@@ -15,6 +15,4 @@
     limitations under the License.
 
 -->
-<div class="tb-small" ng-if="item &&
-            item.customerId.id != parentCtl.types.id.nullUid &&
-            parentCtl.devicesScope === 'tenant'" translate>device.assignedToCustomer</div>
+<div class="tb-small" ng-show="vm.isAssignedToCustomer()">{{'device.assignedToCustomer' | translate}} '{{vm.customerTitle}}'</div>

ui/src/app/device/device.controller.js

@@ -24,7 +24,36 @@ import deviceCredentialsTemplate from './device-credentials.tpl.html';
 /* eslint-enable import/no-unresolved, import/default */
 
 /*@ngInject*/
-export default function DeviceController(userService, deviceService, customerService, $scope, $controller, $state, $stateParams, $document, $mdDialog, $q, $translate, types) {
+export function DeviceCardController($scope, types, customerService) {
+
+    var vm = this;
+
+    vm.types = types;
+
+    vm.isAssignedToCustomer = function() {
+        if (vm.item && vm.item.customerId && vm.parentCtl.devicesScope === 'tenant',
+            vm.item.customerId.id != vm.types.id.nullUid) {
+            return true;
+        }
+        return false;
+    }
+
+    $scope.$watch('vm.item',
+        function() {
+            if (vm.item && vm.item.customerId && vm.item.customerId.id != vm.types.id.nullUid) {
+                customerService.getCustomerTitle(vm.item.customerId.id).then(
+                    function success(title) {
+                        vm.customerTitle = title;
+                    }
+                );
+            }
+        }
+    );
+}
+
+
+/*@ngInject*/
+export function DeviceController(userService, deviceService, customerService, $scope, $controller, $state, $stateParams, $document, $mdDialog, $q, $translate, types) {
 
     var customerId = $stateParams.customerId;
 
@@ -47,6 +76,7 @@ export default function DeviceController(userService, deviceService, customerSer
 
         getItemTitleFunc: getDeviceTitle,
 
+        itemCardController: 'DeviceCardController',
         itemCardTemplateUrl: deviceCard,
         parentCtl: vm,
 

ui/src/app/device/index.js

@@ -21,7 +21,7 @@ import thingsboardApiDevice from '../api/device.service';
 import thingsboardApiCustomer from '../api/customer.service';
 
 import DeviceRoutes from './device.routes';
-import DeviceController from './device.controller';
+import {DeviceController, DeviceCardController} from './device.controller';
 import AssignDeviceToCustomerController from './assign-to-customer.controller';
 import AddDevicesToCustomerController from './add-devices-to-customer.controller';
 import ManageDeviceCredentialsController from './device-credentials.controller';
@@ -40,6 +40,7 @@ export default angular.module('thingsboard.device', [
 ])
     .config(DeviceRoutes)
     .controller('DeviceController', DeviceController)
+    .controller('DeviceCardController', DeviceCardController)
     .controller('AssignDeviceToCustomerController', AssignDeviceToCustomerController)
     .controller('AddDevicesToCustomerController', AddDevicesToCustomerController)
     .controller('ManageDeviceCredentialsController', ManageDeviceCredentialsController)