Add truncate component

awx/ui/client/lib/components/index.js

@@ -19,6 +19,7 @@ import panelBody from './panel/body.directive';
 import popover from './popover/popover.directive';
 import tab from './tabs/tab.directive';
 import tabGroup from './tabs/group.directive';
+import truncate from './truncate/truncate.directive';
 
 import BaseInputController from './input/base.controller';
 import ComponentsStrings from './components.strings';
@@ -46,7 +47,8 @@ angular
     .directive('atPopover', popover)
     .directive('atTab', tab)
     .directive('atTabGroup', tabGroup)
-    .service('BaseInputController', BaseInputController)
-    .service('ComponentsStrings', ComponentsStrings);
+    .directive('atTruncate', truncate)
+    .service('ComponentsStrings', ComponentsStrings)
+    .service('BaseInputController', BaseInputController);
 
 

awx/ui/client/lib/components/truncate/truncate.directive.js

@@ -0,0 +1,43 @@
+function atTruncateLink (scope, el, attr, ctrl) {
+    let truncateController = ctrl;
+    let string = attr.atTruncate;
+    let maxlength = attr.maxlength;
+
+    truncateController.init(scope, string, maxlength);
+}
+
+function AtTruncateController ($filter) {
+    let vm = this;
+
+    let string,
+        maxlength;
+
+    vm.init = (scope, _string_, _maxlength_) => {
+        string = _string_;
+        maxlength = _maxlength_;
+        vm.truncatedString = $filter('limitTo')(string, maxlength, 0);
+    }
+
+}
+
+
+function atTruncate($filter) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        transclude: true,
+        template: '<span>{{vm.truncatedString}}</span>',
+        controller: AtTruncateController,
+        controllerAs: 'vm',
+        link: atTruncateLink,
+        scope: {
+            maxLength: '@'
+        }
+    }
+}
+
+atTruncate.$inject = [
+    '$filter'
+];
+
+export default atTruncate;