From 43cb20bc4a81a4aa2845506d29246f76f7319f72 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Tue, 13 Dec 2016 10:45:23 -0500 Subject: [PATCH 1/3] Convert directives for card and list view to component style --- src/toolbars/toolbar-directive.js | 4 +- ...ew-directive.js => card-view.component.js} | 220 +++++---- src/views/cardview/card-view.html | 12 +- ...ew-directive.js => list-view.component.js} | 421 +++++++++--------- src/views/listview/list-view.html | 38 +- 5 files changed, 341 insertions(+), 354 deletions(-) rename src/views/cardview/{card-view-directive.js => card-view.component.js} (63%) rename src/views/listview/{list-view-directive.js => list-view.component.js} (67%) diff --git a/src/toolbars/toolbar-directive.js b/src/toolbars/toolbar-directive.js index 50ffa1e8f..0a4b9523d 100644 --- a/src/toolbars/toolbar-directive.js +++ b/src/toolbars/toolbar-directive.js @@ -103,7 +103,7 @@
-
+
{{item.name}}
@@ -113,7 +113,7 @@
{{item.birthMonth}}
-
+
diff --git a/src/views/cardview/card-view-directive.js b/src/views/cardview/card-view.component.js similarity index 63% rename from src/views/cardview/card-view-directive.js rename to src/views/cardview/card-view.component.js index 561a97e96..25a87d6e4 100644 --- a/src/views/cardview/card-view-directive.js +++ b/src/views/cardview/card-view.component.js @@ -1,9 +1,10 @@ /** * @ngdoc directive - * @name patternfly.views.directive:pfCardView + * @name patternfly.views.component:pfCardView + * @restrict E * * @description - * Directive for rendering cards in a view + * Component for rendering cards in a view *

* * @param {object} config configuration settings for the cards:
@@ -39,7 +40,7 @@
-
+
{{item.name}}
@@ -49,7 +50,7 @@
{{item.city}}, {{item.state}}
-
+
@@ -191,134 +192,123 @@ */ -angular.module('patternfly.views').directive('pfCardView', function (pfUtils) { - 'use strict'; - return { - restrict: 'A', - scope: { - config: '=?', - items: '=', - eventId: '@id' - }, - transclude: true, - templateUrl: 'views/cardview/card-view.html', - controller: function ($scope) { - $scope.defaultConfig = { - selectItems: false, - multiSelect: false, - dblClick: false, - selectionMatchProp: 'uuid', - selectedItems: [], - checkDisabled: false, - showSelectBox: true, - onSelect: null, - onSelectionChange: null, - onCheckBoxChange: null, - onClick: null, - onDblClick: null - }; +angular.module('patternfly.views').component('pfCardView', { + bindings: { + config: '=?', + items: '=', + eventId: '@id' + }, + transclude: true, + templateUrl: 'views/cardview/card-view.html', + controller: function (pfUtils) { + 'use strict'; + var ctrl = this; + ctrl.defaultConfig = { + selectItems: false, + multiSelect: false, + dblClick: false, + selectionMatchProp: 'uuid', + selectedItems: [], + checkDisabled: false, + showSelectBox: true, + onSelect: null, + onSelectionChange: null, + onCheckBoxChange: null, + onClick: null, + onDblClick: null + }; - $scope.config = pfUtils.merge($scope.defaultConfig, $scope.config); - if ($scope.config.selectItems && $scope.config.showSelectBox) { - throw new Error('pfCardView - ' + - 'Illegal use of pfCardView directive! ' + - 'Cannot allow both select box and click selection in the same card view.'); - } - }, - link: function (scope, element, attrs) { - attrs.$observe('config', function () { - scope.config = pfUtils.merge(scope.defaultConfig, scope.config); - if (!scope.config.selectItems) { - scope.config.selectedItems = []; - } - if (!scope.config.multiSelect && scope.config.selectedItems && scope.config.selectedItems.length > 0) { - scope.config.selectedItems = [scope.config.selectedItems[0]]; - } - }); + ctrl.itemClick = function (e, item) { + var alreadySelected; + var selectionChanged = false; + var continueEvent = true; - scope.itemClick = function (e, item) { - var alreadySelected; - var selectionChanged = false; - var continueEvent = true; - - // Ignore disabled item clicks completely - if (scope.checkDisabled(item)) { - return continueEvent; - } + // Ignore disabled item clicks completely + if (ctrl.checkDisabled(item)) { + return continueEvent; + } - if (scope.config && scope.config.selectItems && item) { - if (scope.config.multiSelect && !scope.config.dblClick) { + if (ctrl.config && ctrl.config.selectItems && item) { + if (ctrl.config.multiSelect && !ctrl.config.dblClick) { - alreadySelected = _.find(scope.config.selectedItems, function (itemObj) { - return itemObj === item; - }); + alreadySelected = _.find(ctrl.config.selectedItems, function (itemObj) { + return itemObj === item; + }); - if (alreadySelected) { - // already selected so deselect - scope.config.selectedItems = _.without(scope.config.selectedItems, item); - } else { - // add the item to the selected items - scope.config.selectedItems.push(item); - selectionChanged = true; - } + if (alreadySelected) { + // already selected so deselect + ctrl.config.selectedItems = _.without(ctrl.config.selectedItems, item); } else { - if (scope.config.selectedItems[0] === item) { - if (!scope.config.dblClick) { - scope.config.selectedItems = []; - selectionChanged = true; - } - continueEvent = false; - } else { - scope.config.selectedItems = [item]; + // add the item to the selected items + ctrl.config.selectedItems.push(item); + selectionChanged = true; + } + } else { + if (ctrl.config.selectedItems[0] === item) { + if (!ctrl.config.dblClick) { + ctrl.config.selectedItems = []; selectionChanged = true; } + continueEvent = false; + } else { + ctrl.config.selectedItems = [item]; + selectionChanged = true; } + } - if (selectionChanged && scope.config.onSelect) { - scope.config.onSelect(item, e); - } - if (selectionChanged && scope.config.onSelectionChange) { - scope.config.onSelectionChange(scope.config.selectedItems, e); - } + if (selectionChanged && ctrl.config.onSelect) { + ctrl.config.onSelect(item, e); } - if (scope.config.onClick) { - scope.config.onClick(item, e); + if (selectionChanged && ctrl.config.onSelectionChange) { + ctrl.config.onSelectionChange(ctrl.config.selectedItems, e); } + } + if (ctrl.config.onClick) { + ctrl.config.onClick(item, e); + } - return continueEvent; - }; + return continueEvent; + }; - scope.dblClick = function (e, item) { - if (scope.config.onDblClick) { - scope.config.onDblClick(item, e); - } - }; + ctrl.dblClick = function (e, item) { + if (ctrl.config.onDblClick) { + ctrl.config.onDblClick(item, e); + } + }; - scope.checkBoxChange = function (item) { - if (scope.config.onCheckBoxChange) { - scope.config.onCheckBoxChange(item); - } - }; + ctrl.checkBoxChange = function (item) { + if (ctrl.config.onCheckBoxChange) { + ctrl.config.onCheckBoxChange(item); + } + }; - scope.isSelected = function (item) { - var matchProp = scope.config.selectionMatchProp; - var selected = false; + ctrl.isSelected = function (item) { + var matchProp = ctrl.config.selectionMatchProp; + var selected = false; - if (scope.config.showSelectBox) { - selected = item.selected; - } else { - if (scope.config.selectedItems.length) { - return _.find(scope.config.selectedItems, function (itemObj) { - return itemObj[matchProp] === item[matchProp]; - }); - } + if (ctrl.config.showSelectBox) { + selected = item.selected; + } else { + if (ctrl.config.selectedItems.length) { + return _.find(ctrl.config.selectedItems, function (itemObj) { + return itemObj[matchProp] === item[matchProp]; + }); } - return selected; - }; + } + return selected; + }; - scope.checkDisabled = function (item) { - return scope.config.checkDisabled && scope.config.checkDisabled(item); - }; - } - }; + ctrl.checkDisabled = function (item) { + return ctrl.config.checkDisabled && ctrl.config.checkDisabled(item); + }; + + ctrl.$onInit = function () { + ctrl.config = pfUtils.merge(ctrl.defaultConfig, ctrl.config); + if (ctrl.config.selectItems && ctrl.config.showSelectBox) { + throw new Error('pfCardView - ' + + 'Illegal use of pfCardView component! ' + + 'Cannot allow both select box and click selection in the same card view.'); + } + }; + } }); diff --git a/src/views/cardview/card-view.html b/src/views/cardview/card-view.html index 9d3799e90..522d808f0 100755 --- a/src/views/cardview/card-view.html +++ b/src/views/cardview/card-view.html @@ -1,13 +1,13 @@
-
+
+ ng-click="$ctrl.itemClick($event, item)" + ng-dblclick="$ctrl.dblClick($event, item)">
-
- +
+
diff --git a/src/views/listview/list-view-directive.js b/src/views/listview/list-view.component.js similarity index 67% rename from src/views/listview/list-view-directive.js rename to src/views/listview/list-view.component.js index 67d8415cf..c3bedd459 100644 --- a/src/views/listview/list-view-directive.js +++ b/src/views/listview/list-view.component.js @@ -1,9 +1,10 @@ /** * @ngdoc directive - * @name patternfly.views.directive:pfListView + * @name patternfly.views.component:pfListView + * @restrict E * * @description - * Directive for rendering a list view. + * Component for rendering a list view. * Pass a customScope object containing any scope variables/functions you need to access from the transcluded source, access these * via 'customScope' in your transcluded hmtl. *

@@ -53,8 +54,8 @@
-
-
+
-
+
@@ -381,243 +382,239 @@ */ -angular.module('patternfly.views').directive('pfListView', function ($timeout, $window, pfUtils) { - 'use strict'; - return { - restrict: 'A', - scope: { - config: '=?', - items: '=', - actionButtons: '=?', - enableButtonForItemFn: '=?', - menuActions: '=?', - hideMenuForItemFn: '=?', - menuClassForItemFn: '=?', - updateMenuActionForItemFn: '=?', - actions: '=?', - updateActionForItemFn: '=?', - customScope: '=?' - }, - transclude: { - expandedContent: '?listExpandedContent' - }, - templateUrl: 'views/listview/list-view.html', - controller: - function ($scope, $element) { - var setDropMenuLocation = function (parentDiv) { - var dropButton = parentDiv.querySelector('.dropdown-toggle'); - var dropMenu = parentDiv.querySelector('.dropdown-menu'); - var parentRect = $element[0].getBoundingClientRect(); - var buttonRect = dropButton.getBoundingClientRect(); - var menuRect = dropMenu.getBoundingClientRect(); - var menuTop = buttonRect.top - menuRect.height; - var menuBottom = buttonRect.top + buttonRect.height + menuRect.height; - - if ((menuBottom <= parentRect.top + parentRect.height) || (menuTop < parentRect.top)) { - $scope.dropdownClass = 'dropdown'; - } else { - $scope.dropdownClass = 'dropup'; - } - }; - - $scope.defaultConfig = { - selectItems: false, - multiSelect: false, - dblClick: false, - selectionMatchProp: 'uuid', - selectedItems: [], - checkDisabled: false, - useExpandingRows: false, - showSelectBox: true, - onSelect: null, - onSelectionChange: null, - onCheckBoxChange: null, - onClick: null, - onDblClick: null - }; - - $scope.config = pfUtils.merge($scope.defaultConfig, $scope.config); - if ($scope.config.selectItems && $scope.config.showSelectBox) { - throw new Error('pfListView - ' + - 'Illegal use of pListView directive! ' + - 'Cannot allow both select box and click selection in the same list view.'); - } - $scope.dropdownClass = 'dropdown'; +angular.module('patternfly.views').component('pfListView', { + bindings: { + config: '=?', + items: '=', + actionButtons: '=?', + enableButtonForItemFn: '=?', + menuActions: '=?', + hideMenuForItemFn: '=?', + menuClassForItemFn: '=?', + updateMenuActionForItemFn: '=?', + actions: '=?', + updateActionForItemFn: '=?', + customScope: '=?' + }, + transclude: { + expandedContent: '?listExpandedContent' + }, + templateUrl: 'views/listview/list-view.html', + controller: function ($timeout, $window, $element, pfUtils) { + 'use strict'; + var ctrl = this; + + var setDropMenuLocation = function (parentDiv) { + var dropButton = parentDiv.querySelector('.dropdown-toggle'); + var dropMenu = parentDiv.querySelector('.dropdown-menu'); + var parentRect = $element[0].getBoundingClientRect(); + var buttonRect = dropButton.getBoundingClientRect(); + var menuRect = dropMenu.getBoundingClientRect(); + var menuTop = buttonRect.top - menuRect.height; + var menuBottom = buttonRect.top + buttonRect.height + menuRect.height; + + if ((menuBottom <= parentRect.top + parentRect.height) || (menuTop < parentRect.top)) { + ctrl.dropdownClass = 'dropdown'; + } else { + ctrl.dropdownClass = 'dropup'; + } + }; + + ctrl.defaultConfig = { + selectItems: false, + multiSelect: false, + dblClick: false, + selectionMatchProp: 'uuid', + selectedItems: [], + checkDisabled: false, + useExpandingRows: false, + showSelectBox: true, + onSelect: null, + onSelectionChange: null, + onCheckBoxChange: null, + onClick: null, + onDblClick: null + }; + + + ctrl.dropdownClass = 'dropdown'; + + ctrl.handleButtonAction = function (action, item) { + if (!ctrl.checkDisabled(item) && action && action.actionFn && ctrl.enableButtonForItem(action, item)) { + action.actionFn(action, item); + } + }; - $scope.handleButtonAction = function (action, item) { - if (!$scope.checkDisabled(item) && action && action.actionFn && $scope.enableButtonForItem(action, item)) { - action.actionFn(action, item); - } - }; + ctrl.handleMenuAction = function (action, item) { + if (!ctrl.checkDisabled(item) && action && action.actionFn && (action.isDisabled !== true)) { + action.actionFn(action, item); + } + }; - $scope.handleMenuAction = function (action, item) { - if (!$scope.checkDisabled(item) && action && action.actionFn && (action.isDisabled !== true)) { - action.actionFn(action, item); - } - }; + ctrl.enableButtonForItem = function (action, item) { + var enable = true; + if (typeof ctrl.enableButtonForItemFn === 'function') { + return ctrl.enableButtonForItemFn(action, item); + } + return enable; + }; + + ctrl.updateActions = function (item) { + if (typeof ctrl.updateMenuActionForItemFn === 'function') { + ctrl.menuActions.forEach(function (action) { + ctrl.updateMenuActionForItemFn(action, item); + }); + } + }; - $scope.enableButtonForItem = function (action, item) { - var enable = true; - if (typeof $scope.enableButtonForItemFn === 'function') { - return $scope.enableButtonForItemFn(action, item); - } - return enable; - }; + ctrl.getMenuClassForItem = function (item) { + var menuClass = ''; + if (angular.isFunction(ctrl.menuClassForItemFn)) { + menuClass = ctrl.menuClassForItemFn(item); + } - $scope.updateActions = function (item) { - if (typeof $scope.updateMenuActionForItemFn === 'function') { - $scope.menuActions.forEach(function (action) { - $scope.updateMenuActionForItemFn(action, item); - }); - } - }; + return menuClass; + }; - $scope.getMenuClassForItem = function (item) { - var menuClass = ''; - if (angular.isFunction($scope.menuClassForItemFn)) { - menuClass = $scope.menuClassForItemFn(item); - } + ctrl.hideMenuForItem = function (item) { + var hideMenu = false; + if (angular.isFunction(ctrl.hideMenuForItemFn)) { + hideMenu = ctrl.hideMenuForItemFn(item); + } - return menuClass; - }; + return hideMenu; + }; - $scope.hideMenuForItem = function (item) { - var hideMenu = false; - if (angular.isFunction($scope.hideMenuForItemFn)) { - hideMenu = $scope.hideMenuForItemFn(item); - } + ctrl.toggleItemExpansion = function (item) { + item.isExpanded = !item.isExpanded; + }; - return hideMenu; - }; + ctrl.setupActions = function (item, event) { + // Ignore disabled items completely + if (ctrl.checkDisabled(item)) { + return; + } - $scope.toggleItemExpansion = function (item) { - item.isExpanded = !item.isExpanded; - }; + // update the actions based on the current item + ctrl.updateActions(item); - $scope.setupActions = function (item, event) { - // Ignore disabled items completely - if ($scope.checkDisabled(item)) { - return; - } + $timeout(function () { + var parentDiv = undefined; + var nextElement; - // update the actions based on the current item - $scope.updateActions(item); - - $timeout(function () { - var parentDiv = undefined; - var nextElement; - - nextElement = event.target; - while (nextElement && !parentDiv) { - if (nextElement.className.indexOf('dropdown-kebab-pf') !== -1) { - parentDiv = nextElement; - if (nextElement.className.indexOf('open') !== -1) { - setDropMenuLocation (parentDiv); - } - } - nextElement = nextElement.parentElement; + nextElement = event.target; + while (nextElement && !parentDiv) { + if (nextElement.className.indexOf('dropdown-kebab-pf') !== -1) { + parentDiv = nextElement; + if (nextElement.className.indexOf('open') !== -1) { + setDropMenuLocation (parentDiv); } - }); - }; - }, - - link: function (scope, element, attrs) { - attrs.$observe('config', function () { - scope.config = pfUtils.merge(scope.defaultConfig, scope.config); - if (!scope.config.selectItems) { - scope.config.selectedItems = []; - } - if (!scope.config.multiSelect && scope.config.selectedItems && scope.config.selectedItems.length > 0) { - scope.config.selectedItems = [scope.config.selectedItems[0]]; + } + nextElement = nextElement.parentElement; } }); + }; - scope.itemClick = function (e, item) { - var alreadySelected; - var selectionChanged = false; - var continueEvent = true; + ctrl.itemClick = function (e, item) { + var alreadySelected; + var selectionChanged = false; + var continueEvent = true; - // Ignore disabled item clicks completely - if (scope.checkDisabled(item)) { - return continueEvent; - } + // Ignore disabled item clicks completely + if (ctrl.checkDisabled(item)) { + return continueEvent; + } - if (scope.config && scope.config.selectItems && item) { - if (scope.config.multiSelect && !scope.config.dblClick) { + if (ctrl.config && ctrl.config.selectItems && item) { + if (ctrl.config.multiSelect && !ctrl.config.dblClick) { - alreadySelected = _.find(scope.config.selectedItems, function (itemObj) { - return itemObj === item; - }); + alreadySelected = _.find(ctrl.config.selectedItems, function (itemObj) { + return itemObj === item; + }); - if (alreadySelected) { - // already selected so deselect - scope.config.selectedItems = _.without(scope.config.selectedItems, item); - } else { - // add the item to the selected items - scope.config.selectedItems.push(item); - selectionChanged = true; - } + if (alreadySelected) { + // already selected so deselect + ctrl.config.selectedItems = _.without(ctrl.config.selectedItems, item); } else { - if (scope.config.selectedItems[0] === item) { - if (!scope.config.dblClick) { - scope.config.selectedItems = []; - selectionChanged = true; - } - continueEvent = false; - } else { - scope.config.selectedItems = [item]; + // add the item to the selected items + ctrl.config.selectedItems.push(item); + selectionChanged = true; + } + } else { + if (ctrl.config.selectedItems[0] === item) { + if (!scope.config.dblClick) { + ctrl.config.selectedItems = []; selectionChanged = true; } + continueEvent = false; + } else { + ctrl.config.selectedItems = [item]; + selectionChanged = true; } + } - if (selectionChanged && scope.config.onSelect) { - scope.config.onSelect(item, e); - } - if (selectionChanged && scope.config.onSelectionChange) { - scope.config.onSelectionChange(scope.config.selectedItems, e); - } + if (selectionChanged && ctrl.config.onSelect) { + ctrl.config.onSelect(item, e); } - if (scope.config.onClick) { - scope.config.onClick(item, e); + if (selectionChanged && ctrl.config.onSelectionChange) { + ctrl.config.onSelectionChange(ctrl.config.selectedItems, e); } + } + if (ctrl.config.onClick) { + ctrl.config.onClick(item, e); + } - return continueEvent; - }; + return continueEvent; + }; - scope.dblClick = function (e, item) { - // Ignore disabled item clicks completely - if (scope.checkDisabled(item)) { - return continueEvent; - } + ctrl.dblClick = function (e, item) { + // Ignore disabled item clicks completely + if (ctrl.checkDisabled(item)) { + return continueEvent; + } - if (scope.config.onDblClick) { - scope.config.onDblClick(item, e); - } - }; + if (ctrl.config.onDblClick) { + ctrl.config.onDblClick(item, e); + } + }; - scope.checkBoxChange = function (item) { - if (scope.config.onCheckBoxChange) { - scope.config.onCheckBoxChange(item); - } - }; + ctrl.checkBoxChange = function (item) { + if (ctrl.config.onCheckBoxChange) { + ctrl.config.onCheckBoxChange(item); + } + }; + + ctrl.isSelected = function (item) { + var matchProp = ctrl.config.selectionMatchProp; + var selected = false; + + if (ctrl.config.showSelectBox) { + selected = item.selected; + } else if (ctrl.config.selectItems && ctrl.config.selectedItems.length) { + selected = _.find(ctrl.config.selectedItems, function (itemObj) { + return itemObj[matchProp] === item[matchProp]; + }); + } + return selected; + }; - scope.isSelected = function (item) { - var matchProp = scope.config.selectionMatchProp; - var selected = false; + ctrl.checkDisabled = function (item) { + return ctrl.config.checkDisabled && ctrl.config.checkDisabled(item); + }; - if (scope.config.showSelectBox) { - selected = item.selected; - } else if (scope.config.selectItems && scope.config.selectedItems.length) { - selected = _.find(scope.config.selectedItems, function (itemObj) { - return itemObj[matchProp] === item[matchProp]; - }); - } - return selected; - }; - - scope.checkDisabled = function (item) { - return scope.config.checkDisabled && scope.config.checkDisabled(item); - }; - } - }; + ctrl.$onInit = function () { + ctrl.config = pfUtils.merge(ctrl.defaultConfig, ctrl.config); + if (!ctrl.config.selectItems) { + ctrl.config.selectedItems = []; + } + if (!ctrl.config.multiSelect && ctrl.config.selectedItems && ctrl.config.selectedItems.length > 0) { + ctrl.config.selectedItems = [ctrl.config.selectedItems[0]]; + } + if (ctrl.config.selectItems && ctrl.config.showSelectBox) { + throw new Error('pfListView - ' + + 'Illegal use of pListView component! ' + + 'Cannot allow both select box and click selection in the same list view.'); + } + }; + } }); diff --git a/src/views/listview/list-view.html b/src/views/listview/list-view.html index 20f61b01c..775db616f 100644 --- a/src/views/listview/list-view.html +++ b/src/views/listview/list-view.html @@ -1,40 +1,40 @@
+ ng-repeat="item in $ctrl.items track by $index" + ng-class="{'pf-selectable': $ctrl.selectItems, 'active': $ctrl.isSelected(item), 'disabled': $ctrl.checkDisabled(item), 'list-view-pf-expand-active': item.isExpanded}">
-
- +
+
-
- +
+
- -
+ ng-click="$ctrl.itemClick($event, item)" + ng-dblclick="$ctrl.dblClick($event, item)">
-
+
From d1f0ac4c53b3bb3ca87888b0f481af7984ee92ea Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Tue, 13 Dec 2016 10:45:48 -0500 Subject: [PATCH 2/3] Convert card and list view tests to use new component style --- test/views/cardview/card-view.spec.js | 13 +++++----- test/views/listview/list-view.spec.js | 35 +++++++++++++-------------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/test/views/cardview/card-view.spec.js b/test/views/cardview/card-view.spec.js index baafeb04c..3c91731d7 100644 --- a/test/views/cardview/card-view.spec.js +++ b/test/views/cardview/card-view.spec.js @@ -1,4 +1,4 @@ -describe('Directive: pfCardView', function () { +describe('Component: pfCardView', function () { var $scope; var $compile; var element; @@ -29,14 +29,15 @@ describe('Directive: pfCardView', function () { {uuid: '5', name: 'Five', size: 6781425410, capacity: 7600000000} ]; $scope.cardConfig = { - selectedItems: [] + selectedItems: [], + showSelectBox: true }; - var htmlTmp = '
' + + var htmlTmp = '' + '
{{item.name}}
' + '
{{item.size}}
' + '
{{item.capacity}}
' + - '
'; + ''; compileHTML(htmlTmp, $scope); }); @@ -206,9 +207,9 @@ describe('Directive: pfCardView', function () { showSelectBox: true }; - var htmlTmp = '
' + + var htmlTmp = '' + '
{{item.name}}
' + - '
'; + ''; try { diff --git a/test/views/listview/list-view.spec.js b/test/views/listview/list-view.spec.js index be9c653e2..c560e03b2 100644 --- a/test/views/listview/list-view.spec.js +++ b/test/views/listview/list-view.spec.js @@ -1,4 +1,4 @@ -describe('Directive: pfDataList', function () { +describe('Component: pfDataList', function () { var $scope; var $compile; var element; @@ -114,7 +114,7 @@ describe('Directive: pfDataList', function () { } ]; - var htmlTmp = '
' + '
{{item.name}}
' + - '
'; + ''; compileHTML(htmlTmp, $scope); }); @@ -293,9 +293,9 @@ describe('Directive: pfDataList', function () { showSelectBox: true }; - var htmlTmp = '
' + + var htmlTmp = '' + '
{{item.name}}
' + - '
'; + ''; try { @@ -441,9 +441,9 @@ describe('Directive: pfDataList', function () { expect(menuButtons.length).toBe(5); - var htmlTmp = '
' + + var htmlTmp = '' + '
{{item.name}}
' + - '
'; + ''; compileHTML(htmlTmp, $scope); @@ -458,12 +458,12 @@ describe('Directive: pfDataList', function () { expect(actionArea.length).toBe(5); // Just menu actions - var htmlTmp = '
' + '
{{item.name}}
' + - '
'; + ''; compileHTML(htmlTmp, $scope); @@ -472,12 +472,12 @@ describe('Directive: pfDataList', function () { expect(actionArea.length).toBe(5); // Just button actions - htmlTmp = '
' + '
{{item.name}}
' + - '
'; + ''; compileHTML(htmlTmp, $scope); @@ -486,10 +486,10 @@ describe('Directive: pfDataList', function () { expect(actionArea.length).toBe(5); // Neither button nor menu actions - htmlTmp = '
' + '
{{item.name}}
' + - '
'; + ''; compileHTML(htmlTmp, $scope); @@ -517,7 +517,6 @@ describe('Directive: pfDataList', function () { it('should allow expanding rows', function () { var items; $scope.listConfig.useExpandingRows = true; - $scope.$digest(); items = element.find('.list-view-pf-expand .fa-angle-right'); @@ -532,9 +531,9 @@ describe('Directive: pfDataList', function () { it('should allow expanding rows to disable individual expansion', function () { $scope.systemModel[0].disableRowExpansion = true; $scope.listConfig.useExpandingRows = true; - var htmlTmp = '
' + - '
'; + ''; compileHTML(htmlTmp, $scope); From 9c219a84747b260b175199ab6b5ddc37a91f6d53 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Wed, 14 Dec 2016 10:07:24 -0500 Subject: [PATCH 3/3] Fix scope issue from PR and toolbar to use new component style pf-list-view --- src/toolbars/toolbar-directive.js | 4 ++-- src/views/listview/list-view.component.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/toolbars/toolbar-directive.js b/src/toolbars/toolbar-directive.js index 0a4b9523d..4a7604722 100644 --- a/src/toolbars/toolbar-directive.js +++ b/src/toolbars/toolbar-directive.js @@ -83,7 +83,7 @@
-
+
{{item.name}} @@ -100,7 +100,7 @@ {{item.birthMonth}}
-
+
diff --git a/src/views/listview/list-view.component.js b/src/views/listview/list-view.component.js index c3bedd459..8467bdbb5 100644 --- a/src/views/listview/list-view.component.js +++ b/src/views/listview/list-view.component.js @@ -542,7 +542,7 @@ angular.module('patternfly.views').component('pfListView', { } } else { if (ctrl.config.selectedItems[0] === item) { - if (!scope.config.dblClick) { + if (!ctrl.config.dblClick) { ctrl.config.selectedItems = []; selectionChanged = true; }