Skip to content

Commit 16f76f6

Browse files
jeff-phillips-18jeff-phillips-18
committed
Add pfSimpleSort directive with unit tests and ng-docs
1 parent 87ecda7 commit 16f76f6

12 files changed

+740
-3
lines changed

‎Gruntfile.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,11 @@ module.exports = function (grunt) {
163163
src: ['filters/**/*.html'],
164164
dest: 'templates/filters.js'
165165
},
166+
'patternfly.sort': {
167+
cwd: 'src/',
168+
src: ['sort/**/*.html'],
169+
dest: 'templates/sort.js'
170+
},
166171
'patternfly.views': {
167172
cwd: 'src/',
168173
src: ['views/**/*.html'],

‎dist/angular-patternfly.js

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,20 @@ angular.module('patternfly', [
4343
'patternfly.form',
4444
'patternfly.notification',
4545
'patternfly.select',
46+
'patternfly.sort',
4647
'patternfly.utils',
4748
'patternfly.validation',
4849
'patternfly.views'
4950
]);
5051

52+
;/**
53+
* @name patternfly card
54+
*
55+
* @description
56+
* Sort module for patternfly.
57+
*
58+
*/
59+
angular.module('patternfly.sort', []);
5160
;
5261
angular.module( 'patternfly.utils', [] );
5362
;/**
@@ -2469,6 +2478,233 @@ angular.module('patternfly.select', []).directive('pfSelect', ["$timeout", funct
24692478
}
24702479
};
24712480
}]);
2481+
;/**
2482+
* @ngdoc directive
2483+
* @name patternfly.sort.directive:pfSimpleSort
2484+
*
2485+
* @description
2486+
* Directive for a simple sort component
2487+
* <br><br>
2488+
*
2489+
* @param {object} config configuration settings for the sort:<br/>
2490+
* <ul style='list-style-type: none'>
2491+
* <li>.fields - (Array) List of sortable fields containing:
2492+
* <ul style='list-style-type: none'>
2493+
* <li>.id - (String) Unique Id for the sort field
2494+
* <li>.title - (String) The title to display for the sort field
2495+
* <li>.sortType - (String) The sort type, 'alpha' or 'numeric'
2496+
* </ul>
2497+
* <li>.sortId - (Object) Id of the current sort field
2498+
* <li>.isAscending - (boolean) Current sort direction is ascending. True for ascending, False for descending
2499+
* <li>.onSortChange - ( function(sortId, sortDirection ) Function to call when the current sort params change
2500+
* </ul>
2501+
*
2502+
* @example
2503+
<example module="patternfly.sort">
2504+
<file name="index.html">
2505+
<div ng-controller="ViewCtrl" class="row example-container">
2506+
<div class="col-md-12">
2507+
<div pf-simple-sort id="exampleSimpleSort" config="sortConfig"></div>
2508+
</div>
2509+
<hr class="col-md-12">
2510+
<div class="col-md-12">
2511+
<label class="events-label">Items: </label>
2512+
</div>
2513+
<div class="col-md-12">
2514+
<div ng-repeat="item in items" class="col-md-12 cfme-row-column">
2515+
<div class="row">
2516+
<div class="col-md-3">
2517+
<span>{{item.name}}</span>
2518+
</div>
2519+
<div class="col-md-3">
2520+
<span>{{item.count}}</span>
2521+
</div>
2522+
<div class="col-md-3">
2523+
<span>{{item.description}}</span>
2524+
</div>
2525+
</div>
2526+
</div>
2527+
</div>
2528+
</div>
2529+
</file>
2530+
2531+
<file name="script.js">
2532+
angular.module('patternfly.sort').controller('ViewCtrl', ['$scope',
2533+
function ($scope) {
2534+
$scope.items = [
2535+
{
2536+
name: "Item 7",
2537+
count: 432,
2538+
description: 'Very nice item'
2539+
},
2540+
{
2541+
name: "Item 6",
2542+
count: 22,
2543+
description: 'It lasts forever'
2544+
},
2545+
{
2546+
name: "Item 3",
2547+
count: 632,
2548+
description: 'Good stuff cheap'
2549+
},
2550+
{
2551+
name: "Item 2",
2552+
count: 12,
2553+
description: 'Fantastic'
2554+
},
2555+
{
2556+
name: "Item 9",
2557+
count: 99,
2558+
description: 'It does alright'
2559+
},
2560+
{
2561+
name: "Item 4",
2562+
count: 442,
2563+
description: 'Horrible'
2564+
},
2565+
{
2566+
name: "Item 1",
2567+
count: 42,
2568+
description: 'Most excellent'
2569+
},
2570+
{
2571+
name: "Item 8",
2572+
count: 2,
2573+
description: 'Get it while it lasts'
2574+
},
2575+
{
2576+
name: "Item 5",
2577+
count: 321,
2578+
description: 'Beautiful style'
2579+
}
2580+
];
2581+
2582+
var compareFn = function(item1, item2) {
2583+
var compValue = 0;
2584+
if ($scope.sortConfig.currentField.id === 'name') {
2585+
compValue = item1.name.localeCompare(item2.name);
2586+
} else if ($scope.sortConfig.currentField.id === 'count') {
2587+
compValue = item1.count - item2.count;
2588+
} else if ($scope.sortConfig.currentField.id === 'description') {
2589+
compValue = item1.description.localeCompare(item2.description);
2590+
}
2591+
2592+
if (!$scope.sortConfig.isAscending) {
2593+
compValue = compValue * -1;
2594+
}
2595+
2596+
return compValue;
2597+
};
2598+
2599+
var sortChange = function (sortId, isAscending) {
2600+
$scope.items.sort(compareFn);
2601+
};
2602+
2603+
$scope.sortConfig = {
2604+
fields: [
2605+
{
2606+
id: 'name',
2607+
title: 'Name',
2608+
sortType: 'alpha'
2609+
},
2610+
{
2611+
id: 'count',
2612+
title: 'Count',
2613+
sortType: 'numeric'
2614+
},
2615+
{
2616+
id: 'description',
2617+
title: 'Description',
2618+
sortType: 'alpha'
2619+
}
2620+
],
2621+
onSortChange: sortChange
2622+
};
2623+
}
2624+
]);
2625+
</file>
2626+
</example>
2627+
*/
2628+
angular.module('patternfly.sort').directive('pfSimpleSort',
2629+
function () {
2630+
'use strict';
2631+
return {
2632+
restrict: 'A',
2633+
scope: {
2634+
config: '='
2635+
},
2636+
templateUrl: 'sort/simple-sort.html',
2637+
controller: ["$scope", function ($scope) {
2638+
$scope.setupConfig = function () {
2639+
var updated = false;
2640+
2641+
if ($scope.config.fields === undefined) {
2642+
$scope.config.fields = [];
2643+
}
2644+
2645+
if ($scope.config.fields.length > 0) {
2646+
if ($scope.config.currentField === undefined) {
2647+
$scope.config.currentField = $scope.config.fields[0];
2648+
updated = true;
2649+
}
2650+
if ($scope.config.isAscending === undefined) {
2651+
$scope.config.isAscending = true;
2652+
updated = true;
2653+
}
2654+
}
2655+
2656+
if (updated === true && $scope.config.onSortChange) {
2657+
$scope.config.onSortChange($scope.config.currentField, $scope.config.isAscending);
2658+
}
2659+
};
2660+
2661+
$scope.selectField = function (field) {
2662+
$scope.config.currentField = field;
2663+
2664+
if ($scope.config.onSortChange) {
2665+
$scope.config.onSortChange($scope.config.currentField, $scope.config.isAscending);
2666+
}
2667+
};
2668+
2669+
$scope.changeDirection = function () {
2670+
$scope.config.isAscending = !$scope.config.isAscending;
2671+
2672+
if ($scope.config.onSortChange) {
2673+
$scope.config.onSortChange($scope.config.currentField, $scope.config.currentDirection);
2674+
}
2675+
};
2676+
2677+
$scope.getSortIconClass = function () {
2678+
var iconClass;
2679+
2680+
if ($scope.config.currentField.sortType === 'numeric') {
2681+
if ($scope.config.isAscending) {
2682+
iconClass = 'fa fa-sort-numeric-asc';
2683+
} else {
2684+
iconClass = 'fa fa-sort-numeric-desc';
2685+
}
2686+
} else {
2687+
if ($scope.config.isAscending) {
2688+
iconClass = 'fa fa-sort-alpha-asc';
2689+
} else {
2690+
iconClass = 'fa fa-sort-alpha-desc';
2691+
}
2692+
}
2693+
2694+
return iconClass;
2695+
};
2696+
2697+
$scope.setupConfig();
2698+
}],
2699+
2700+
link: function (scope, element, attrs) {
2701+
scope.$watch('config', function () {
2702+
scope.setupConfig();
2703+
}, true);
2704+
}
2705+
};
2706+
}
2707+
);
24722708
;
24732709
/**
24742710
* @ngdoc directive
@@ -3793,6 +4029,14 @@ angular.module('patternfly.views').directive('pfDataToolbar',
37934029
"<div class=\"alert alert-{{pfNotificationType}}\"><button ng-show=pfNotificationPersistent type=button class=close ng-click=$parent.notifications.remove($index)><span aria-hidden=true>&times;</span><span class=sr-only>Close</span></button> <span class=\"pficon pficon-ok\" ng-show=\"pfNotificationType === 'success'\"></span> <span class=\"pficon pficon-info\" ng-show=\"pfNotificationType === 'info'\"></span> <span class=\"pficon pficon-error-circle-o\" ng-show=\"pfNotificationType === 'danger'\"></span> <span class=\"pficon pficon-warning-triangle-o\" ng-show=\"pfNotificationType === 'warning'\"></span> <strong>{{pfNotificationHeader}}</strong> {{pfNotificationMessage}}</div>"
37944030
);
37954031

4032+
}]);
4033+
;angular.module('patternfly.sort').run(['$templateCache', function($templateCache) {
4034+
'use strict';
4035+
4036+
$templateCache.put('sort/simple-sort.html',
4037+
"<div class=simple-sort><form><div class=form-group><div class=input-group><div dropdown class=input-group-btn><button dropdown-toggle type=button class=\"btn btn-default dropdown-toggle sort-fields\" data-toggle=dropdown aria-haspopup=true aria-expanded=false>{{config.currentField.title}} <span class=caret></span></button><ul class=dropdown-menu><li ng-repeat=\"item in config.fields\" ng-class=\"{'selected': item === config.currentField}\"><a class=sort-field role=menuitem tabindex=-1 ng-click=selectField(item)>{{item.title}}</a></li></ul></div><a><i class=sort-direction ng-class=getSortIconClass() ng-click=changeDirection()></i></a></div></div></form></div>"
4038+
);
4039+
37964040
}]);
37974041
;angular.module('patternfly.views').run(['$templateCache', function($templateCache) {
37984042
'use strict';

‎dist/angular-patternfly.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/styles/angular-patternfly.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,3 +286,24 @@
286286
background-image: none;
287287
color: #999999;
288288
}
289+
290+
.simple-sort .sort-direction {
291+
font-size: 22px;
292+
color: #222222;
293+
margin-left: 5px;
294+
border: none;
295+
padding: 2px;
296+
}
297+
.simple-sort .sort-direction:hover {
298+
color: #0099d3;
299+
}
300+
301+
.simple-sort a {
302+
cursor: pointer;
303+
}
304+
305+
.input-group .input-group-btn .dropdown-menu > .selected > a {
306+
background-color: #0099d3 !important;
307+
border-color: #0076b7 !important;
308+
color: #fff !important;
309+
}

‎dist/styles/angular-patternfly.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎misc/demo.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,7 @@ hr {
6666
height: 90px;
6767
width: 300px;
6868
}
69+
70+
.dropdown-menu > li > a:hover {
71+
background-image: none;
72+
}

‎src/patternfly.module.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ angular.module('patternfly', [
1111
'patternfly.form',
1212
'patternfly.notification',
1313
'patternfly.select',
14+
'patternfly.sort',
1415
'patternfly.utils',
1516
'patternfly.validation',
1617
'patternfly.views'

0 commit comments

Comments
 (0)