more components, more 1 way binding, more perf in angular

src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js

@@ -110,77 +110,72 @@
 **/
 
 (function () {
-   'use strict';
+    'use strict';
 
-   function TableDirective(iconHelper) {
+    function TableController(iconHelper) {
 
-      function link(scope, el, attr, ctrl) {
+        var vm = this;
 
-         scope.clickItem = function (item, $event) {
-            if (scope.onClick) {
-               scope.onClick(item);
-               $event.stopPropagation();
+        vm.clickItem = function (item, $event) {
+            if (vm.onClick) {
+                vm.onClick({ item: item});
+                $event.stopPropagation();
             }
-         };
+        };
 
-         scope.selectItem = function (item, $index, $event) {
-            if (scope.onSelect) {
-               scope.onSelect(item, $index, $event);
-               $event.stopPropagation();
+        vm.selectItem = function (item, $index, $event) {
+            if (vm.onSelect) {
+                vm.onSelect({ item: item, $index: $index, $event: $event });
+                $event.stopPropagation();
             }
-         };
+        };
 
-         scope.selectAll = function ($event) {
-            if (scope.onSelectAll) {
-               scope.onSelectAll($event);
+        vm.selectAll = function ($event) {
+            if (vm.onSelectAll) {
+                vm.onSelectAll({ $event: $event});
             }
-         };
+        };
 
-         scope.isSelectedAll = function () {
-            if (scope.onSelectedAll && scope.items && scope.items.length > 0) {
-               return scope.onSelectedAll();
+        vm.isSelectedAll = function () {
+            if (vm.onSelectedAll && vm.items && vm.items.length > 0) {
+                return vm.onSelectedAll();
             }
-         };
+        };
 
-         scope.isSortDirection = function (col, direction) {
-            if (scope.onSortingDirection) {
-               return scope.onSortingDirection(col, direction);
+        vm.isSortDirection = function (col, direction) {
+            if (vm.onSortingDirection) {
+                return vm.onSortingDirection({ col: col, direction: direction });
             }
-         };
+        };
 
-         scope.sort = function (field, allow, isSystem) {
-            if (scope.onSort) {
-               scope.onSort(field, allow, isSystem);
+        vm.sort = function (field, allow, isSystem) {
+            if (vm.onSort) {
+                vm.onSort({ field: field, allow: allow, isSystem: isSystem  });
             }
-         };
+        };
 
-         scope.getIcon = function (entry) {
-             return iconHelper.convertFromLegacyIcon(entry.icon);
-         };
+        vm.getIcon = function (entry) {
+            return iconHelper.convertFromLegacyIcon(entry.icon);
+        };
+    }
 
-      }
-
-      var directive = {
-         restrict: 'E',
-         replace: true,
-         templateUrl: 'views/components/umb-table.html',
-         scope: {
-            items: '=',
-            itemProperties: '=',
-            allowSelectAll: '=',
-            onSelect: '=',
-            onClick: '=',
-            onSelectAll: '=',
-            onSelectedAll: '=',
-            onSortingDirection: '=',
-            onSort: '='
-         },
-         link: link
-      };
-
-      return directive;
-   }
-
-   angular.module('umbraco.directives').directive('umbTable', TableDirective);
+    angular
+        .module('umbraco.directives')
+        .component('umbTable', {
+            templateUrl: 'views/components/umb-table.html',
+            controller: TableController,
+            controllerAs: 'vm',
+            bindings: {
+                items: '<',
+                itemProperties: '<',
+                allowSelectAll: '<',
+                onSelect: '&',
+                onClick: '&',
+                onSelectAll: '&',
+                onSelectedAll: '&',
+                onSortingDirection: '&',
+                onSort: '&'
+            }
+        });
 
 })();

src/Umbraco.Web.UI.Client/src/views/components/umb-table.html

@@ -1,29 +1,29 @@
 <div>
-    <div class="umb-table" ng-if="items">
+    <div class="umb-table" ng-if="vm.items">
         <!-- Listviews head section -->
         <div class="umb-table-head">
             <div class="umb-table-row">
                 <div class="umb-table-cell">
                     <input class="umb-table__input" type="checkbox"
-                           ng-if="allowSelectAll"
-                           ng-click="selectAll($event)"
-                           ng-checked="isSelectedAll()">
+                           ng-show="vm.allowSelectAll"
+                           ng-click="vm.selectAll($event)"
+                           ng-checked="vm.isSelectedAll()">
                 </div>
                 <div class="umb-table-cell umb-table__name">
-                    <a class="umb-table-head__link sortable" href="#" ng-click="sort('Name', true, true)" prevent-default>
+                    <a class="umb-table-head__link sortable" href="#" ng-click="vm.sort('Name', true, true)" prevent-default>
                         <localize key="general_name">Name</localize>
-                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': isSortDirection('Name', 'asc'), 'icon-navigation-down': isSortDirection('Name', 'desc')}"></i>
+                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
                     </a>
                 </div>
-                <div class="umb-table-cell" ng-if="items[0].state">
+                <div class="umb-table-cell" ng-show="vm.items[0].state">
                     <localize key="general_status">Status</localize>
                 </div>
-                <div class="umb-table-cell" ng-repeat="column in itemProperties">
+                <div class="umb-table-cell" ng-repeat="column in vm.itemProperties track by column.alias">
                     <a class="umb-table-head__link" title="Sort by {{ column.header }}" href="#"
-                       ng-click="sort(column.alias, column.allowSorting, column.isSystem)"
+                       ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
                        ng-class="{'sortable':column.allowSorting}" prevent-default>
                         <span ng-bind="column.header"></span>
-                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': isSortDirection(column.alias, 'asc'), 'icon-navigation-down': isSortDirection(column.alias, 'desc')}"></i>
+                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
                     </a>
                 </div>
             </div>
@@ -31,30 +31,30 @@
         <!-- Listview body section -->
         <div class="umb-table-body">
             <div class="umb-table-row"
-                 ng-repeat="item in items"
+                 ng-repeat="item in vm.items track by $index"
                  ng-class="{
                     '-selected':item.selected,
                     '-published':item.published,
                     '-unpublished':!item.published
                 }"
-                 ng-click="selectItem(item, $index, $event)">
+                 ng-click="vm.selectItem(item, $index, $event)">
 
                 <div class="umb-table-cell" ng-class="{'has-unpublished-version':!item.published && item.hasPublishedVersion}">
-                    <i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" ng-class="getIcon(item)"></i>
+                    <i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" ng-class="vm.getIcon(item)"></i>
                     <i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
                 </div>
                 <div class="umb-table-cell umb-table__name">
                     <a title="{{ item.name }}" class="umb-table-body__link" href=""
-                       ng-click="clickItem(item, $event)"
+                       ng-click="vm.clickItem(item, $event)"
                        ng-bind="item.name">
                     </a>
                 </div>
-                <div class="umb-table-cell" ng-if="item.state">
+                <div class="umb-table-cell" ng-show="item.state">
                     <umb-variant-state
                         variant="item">
                     </umb-variant-state>
                 </div>
-                <div class="umb-table-cell" ng-repeat="column in itemProperties">
+                <div class="umb-table-cell" ng-repeat="column in vm.itemProperties track by column.alias">
                     <span title="{{column.header}}: {{item[column.alias]}}">
 
                         <div ng-if="!column.isSensitive">
@@ -71,7 +71,7 @@
         </div>
     </div>
     <!-- If list is empty, then display -->
-    <umb-empty-state ng-if="!items"
+    <umb-empty-state ng-hide="vm.items"
                      position="center">
         <localize key="content_listViewNoItems">There are no items show in the list.</localize>
     </umb-empty-state>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html

@@ -25,12 +25,12 @@
             items="items"
             allow-select-all="options.bulkActionsAllowed"
             item-properties="options.includeProperties"
-            on-select="vm.selectItem"
-            on-click="vm.clickItem"
-            on-select-all="vm.selectAll"
-            on-selected-all="vm.isSelectedAll"
-            on-sorting-direction="vm.isSortDirection"
-            on-sort="vm.sort">
+            on-select="vm.selectItem(item, $index, $event)"
+            on-click="vm.clickItem(item)"
+            on-select-all="vm.selectAll($event)"
+            on-selected-all="vm.isSelectedAll()"
+            on-sorting-direction="vm.isSortDirection(col, direction)"
+            on-sort="vm.sort(field, allow, isSystem)">
         </umb-table>
 
     </div>
@@ -42,19 +42,19 @@
             items="items"
             allow-select-all="options.bulkActionsAllowed"
             item-properties="options.includeProperties"
-            on-select="vm.selectItem"
-            on-click="vm.clickItem"
-            on-select-all="vm.selectAll"
-            on-selected-all="vm.isSelectedAll"
-            on-sorting-direction="vm.isSortDirection"
-            on-sort="vm.sort">
+            on-select="vm.selectItem(item, $index, $event)"
+            on-click="vm.clickItem(item)"
+            on-select-all="vm.selectAll($event)"
+            on-selected-all="vm.isSelectedAll()"
+            on-sorting-direction="vm.isSortDirection(col, direction)"
+            on-sort="vm.sort(field, allow, isSystem)">
         </umb-table>
 
         <umb-empty-state
             ng-if="!items && options.filter.length === 0 && !vm.isRecycleBin"
             position="center">
-            <div ng-if="entityType === 'content'"><localize key="content_listViewNoContent">No content has been added</localize></div>
-            <div ng-if="entityType === 'member'"><localize key="content_listViewNoMembers">No members have been added</localize></div>
+            <div ng-show="entityType === 'content'"><localize key="content_listViewNoContent">No content has been added</localize></div>
+            <div ng-show="entityType === 'member'"><localize key="content_listViewNoMembers">No members have been added</localize></div>
         </umb-empty-state>
 
     </div>