Skip to content

Commit 9f9789d

Browse files
dlabrecqdlabrecq
authored
Merge pull request #374 from dgutride/convert-views-module
Convert card and list view in views module
2 parents 41b605c + 9c219a8 commit 9f9789d

File tree

7 files changed

+367
-380
lines changed

7 files changed

+367
-380
lines changed

‎src/toolbars/toolbar-directive.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<label class="events-label">Valid Items: </label>
8484
</div>
8585
<div class="col-md-12 list-view-container" ng-if="viewType == 'listView'">
86-
<div pf-list-view config="listConfig" items="items">
86+
<pf-list-view config="listConfig" items="items">
8787
<div class="list-view-pf-description">
8888
<div class="list-group-item-heading">
8989
{{item.name}}
@@ -100,10 +100,10 @@
100100
{{item.birthMonth}}
101101
</div>
102102
</div>
103-
</div>
103+
</pf-list-view>
104104
</div>
105105
<div class="col-md-12 card-view-container" ng-if="viewType == 'cardView'">
106-
<div pf-card-view config="vm.listConfig" items="items">
106+
<pf-card-view config="vm.listConfig" items="items">
107107
<div class="col-md-12">
108108
<span>{{item.name}}</span>
109109
</div>
@@ -113,7 +113,7 @@
113113
<div class="col-md-12">
114114
<span>{{item.birthMonth}}</span>
115115
</div>
116-
</div>
116+
</pf-card-view>
117117
</div>
118118
<div class="col-md-12">
119119
<label class="events-label">Current Filters: </label>

src/views/cardview/card-view-directive.js renamed to src/views/cardview/card-view.component.js

Lines changed: 105 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.views.directive:pfCardView
3+
* @name patternfly.views.component:pfCardView
4+
* @restrict E
45
*
56
* @description
6-
* Directive for rendering cards in a view
7+
* Component for rendering cards in a view
78
* <br><br>
89
*
910
* @param {object} config configuration settings for the cards:<br/>
@@ -39,7 +40,7 @@
3940
</style>
4041
<div ng-controller="ViewCtrl" class="row" style="display:inline-block; width: 100%;">
4142
<div class="col-md-12">
42-
<div pf-card-view id="exampleCardView" config="config" items="items">
43+
<pf-card-view id="exampleCardView" config="config" items="items">
4344
<div class="col-md-12">
4445
<span>{{item.name}}</span>
4546
</div>
@@ -49,7 +50,7 @@
4950
<div class="col-md-12">
5051
<span>{{item.city}}, {{item.state}}</span>
5152
</div>
52-
</div>
53+
</pf-card-view>
5354
</div>
5455
<hr class="col-md-12">
5556
<div class="col-md-12">
@@ -191,134 +192,123 @@
191192
</file>
192193
</example>
193194
*/
194-
angular.module('patternfly.views').directive('pfCardView', function (pfUtils) {
195-
'use strict';
196-
return {
197-
restrict: 'A',
198-
scope: {
199-
config: '=?',
200-
items: '=',
201-
eventId: '@id'
202-
},
203-
transclude: true,
204-
templateUrl: 'views/cardview/card-view.html',
205-
controller: function ($scope) {
206-
$scope.defaultConfig = {
207-
selectItems: false,
208-
multiSelect: false,
209-
dblClick: false,
210-
selectionMatchProp: 'uuid',
211-
selectedItems: [],
212-
checkDisabled: false,
213-
showSelectBox: true,
214-
onSelect: null,
215-
onSelectionChange: null,
216-
onCheckBoxChange: null,
217-
onClick: null,
218-
onDblClick: null
219-
};
195+
angular.module('patternfly.views').component('pfCardView', {
196+
bindings: {
197+
config: '=?',
198+
items: '=',
199+
eventId: '@id'
200+
},
201+
transclude: true,
202+
templateUrl: 'views/cardview/card-view.html',
203+
controller: function (pfUtils) {
204+
'use strict';
205+
var ctrl = this;
206+
ctrl.defaultConfig = {
207+
selectItems: false,
208+
multiSelect: false,
209+
dblClick: false,
210+
selectionMatchProp: 'uuid',
211+
selectedItems: [],
212+
checkDisabled: false,
213+
showSelectBox: true,
214+
onSelect: null,
215+
onSelectionChange: null,
216+
onCheckBoxChange: null,
217+
onClick: null,
218+
onDblClick: null
219+
};
220220

221-
$scope.config = pfUtils.merge($scope.defaultConfig, $scope.config);
222-
if ($scope.config.selectItems && $scope.config.showSelectBox) {
223-
throw new Error('pfCardView - ' +
224-
'Illegal use of pfCardView directive! ' +
225-
'Cannot allow both select box and click selection in the same card view.');
226-
}
227-
},
228-
link: function (scope, element, attrs) {
229-
attrs.$observe('config', function () {
230-
scope.config = pfUtils.merge(scope.defaultConfig, scope.config);
231-
if (!scope.config.selectItems) {
232-
scope.config.selectedItems = [];
233-
}
234-
if (!scope.config.multiSelect && scope.config.selectedItems && scope.config.selectedItems.length > 0) {
235-
scope.config.selectedItems = [scope.config.selectedItems[0]];
236-
}
237-
});
221+
ctrl.itemClick = function (e, item) {
222+
var alreadySelected;
223+
var selectionChanged = false;
224+
var continueEvent = true;
238225

239-
scope.itemClick = function (e, item) {
240-
var alreadySelected;
241-
var selectionChanged = false;
242-
var continueEvent = true;
243-
244-
// Ignore disabled item clicks completely
245-
if (scope.checkDisabled(item)) {
246-
return continueEvent;
247-
}
226+
// Ignore disabled item clicks completely
227+
if (ctrl.checkDisabled(item)) {
228+
return continueEvent;
229+
}
248230

249-
if (scope.config && scope.config.selectItems && item) {
250-
if (scope.config.multiSelect && !scope.config.dblClick) {
231+
if (ctrl.config && ctrl.config.selectItems && item) {
232+
if (ctrl.config.multiSelect && !ctrl.config.dblClick) {
251233

252-
alreadySelected = _.find(scope.config.selectedItems, function (itemObj) {
253-
return itemObj === item;
254-
});
234+
alreadySelected = _.find(ctrl.config.selectedItems, function (itemObj) {
235+
return itemObj === item;
236+
});
255237

256-
if (alreadySelected) {
257-
// already selected so deselect
258-
scope.config.selectedItems = _.without(scope.config.selectedItems, item);
259-
} else {
260-
// add the item to the selected items
261-
scope.config.selectedItems.push(item);
262-
selectionChanged = true;
263-
}
238+
if (alreadySelected) {
239+
// already selected so deselect
240+
ctrl.config.selectedItems = _.without(ctrl.config.selectedItems, item);
264241
} else {
265-
if (scope.config.selectedItems[0] === item) {
266-
if (!scope.config.dblClick) {
267-
scope.config.selectedItems = [];
268-
selectionChanged = true;
269-
}
270-
continueEvent = false;
271-
} else {
272-
scope.config.selectedItems = [item];
242+
// add the item to the selected items
243+
ctrl.config.selectedItems.push(item);
244+
selectionChanged = true;
245+
}
246+
} else {
247+
if (ctrl.config.selectedItems[0] === item) {
248+
if (!ctrl.config.dblClick) {
249+
ctrl.config.selectedItems = [];
273250
selectionChanged = true;
274251
}
252+
continueEvent = false;
253+
} else {
254+
ctrl.config.selectedItems = [item];
255+
selectionChanged = true;
275256
}
257+
}
276258

277-
if (selectionChanged && scope.config.onSelect) {
278-
scope.config.onSelect(item, e);
279-
}
280-
if (selectionChanged && scope.config.onSelectionChange) {
281-
scope.config.onSelectionChange(scope.config.selectedItems, e);
282-
}
259+
if (selectionChanged && ctrl.config.onSelect) {
260+
ctrl.config.onSelect(item, e);
283261
}
284-
if (scope.config.onClick) {
285-
scope.config.onClick(item, e);
262+
if (selectionChanged && ctrl.config.onSelectionChange) {
263+
ctrl.config.onSelectionChange(ctrl.config.selectedItems, e);
286264
}
265+
}
266+
if (ctrl.config.onClick) {
267+
ctrl.config.onClick(item, e);
268+
}
287269

288-
return continueEvent;
289-
};
270+
return continueEvent;
271+
};
290272

291-
scope.dblClick = function (e, item) {
292-
if (scope.config.onDblClick) {
293-
scope.config.onDblClick(item, e);
294-
}
295-
};
273+
ctrl.dblClick = function (e, item) {
274+
if (ctrl.config.onDblClick) {
275+
ctrl.config.onDblClick(item, e);
276+
}
277+
};
296278

297-
scope.checkBoxChange = function (item) {
298-
if (scope.config.onCheckBoxChange) {
299-
scope.config.onCheckBoxChange(item);
300-
}
301-
};
279+
ctrl.checkBoxChange = function (item) {
280+
if (ctrl.config.onCheckBoxChange) {
281+
ctrl.config.onCheckBoxChange(item);
282+
}
283+
};
302284

303-
scope.isSelected = function (item) {
304-
var matchProp = scope.config.selectionMatchProp;
305-
var selected = false;
285+
ctrl.isSelected = function (item) {
286+
var matchProp = ctrl.config.selectionMatchProp;
287+
var selected = false;
306288

307-
if (scope.config.showSelectBox) {
308-
selected = item.selected;
309-
} else {
310-
if (scope.config.selectedItems.length) {
311-
return _.find(scope.config.selectedItems, function (itemObj) {
312-
return itemObj[matchProp] === item[matchProp];
313-
});
314-
}
289+
if (ctrl.config.showSelectBox) {
290+
selected = item.selected;
291+
} else {
292+
if (ctrl.config.selectedItems.length) {
293+
return _.find(ctrl.config.selectedItems, function (itemObj) {
294+
return itemObj[matchProp] === item[matchProp];
295+
});
315296
}
316-
return selected;
317-
};
297+
}
298+
return selected;
299+
};
318300

319-
scope.checkDisabled = function (item) {
320-
return scope.config.checkDisabled && scope.config.checkDisabled(item);
321-
};
322-
}
323-
};
301+
ctrl.checkDisabled = function (item) {
302+
return ctrl.config.checkDisabled && ctrl.config.checkDisabled(item);
303+
};
304+
305+
ctrl.$onInit = function () {
306+
ctrl.config = pfUtils.merge(ctrl.defaultConfig, ctrl.config);
307+
if (ctrl.config.selectItems && ctrl.config.showSelectBox) {
308+
throw new Error('pfCardView - ' +
309+
'Illegal use of pfCardView component! ' +
310+
'Cannot allow both select box and click selection in the same card view.');
311+
}
312+
};
313+
}
324314
});

‎src/views/cardview/card-view.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<div class="card-view-pf">
2-
<div class="card" ng-repeat="item in items"
3-
ng-class="{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}">
2+
<div class="card" ng-repeat="item in $ctrl.items"
3+
ng-class="{'pf-selectable': $ctrl.selectItems, 'active': $ctrl.isSelected(item), 'disabled': $ctrl.checkDisabled(item)}">
44
<div class="card-content"
5-
ng-click="itemClick($event, item)"
6-
ng-dblclick="dblClick($event, item)">
5+
ng-click="$ctrl.itemClick($event, item)"
6+
ng-dblclick="$ctrl.dblClick($event, item)">
77
<div pf-transclude="parent" ></div>
88
</div>
9-
<div class="card-check-box" ng-if="config.showSelectBox">
10-
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="checkDisabled(item)" ng-change="checkBoxChange(item)"/>
9+
<div class="card-check-box" ng-if="$ctrl.config.showSelectBox">
10+
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="$ctrl.checkDisabled(item)" ng-change="$ctrl.checkBoxChange(item)"/>
1111
</div>
1212
</div>
1313
</div>

0 commit comments

Comments
 (0)