1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | /** * @ngdoc directive * @name patternfly.sort.component:pfSort * @restrict E * * @description * Sort component * <br><br> * * @param {object} config configuration settings for the sort:<br/> * <ul style='list-style-type: none'> * <li>.fields - (Array) List of sortable fields containing: * <ul style='list-style-type: none'> * <li>.id - (String) Unique Id for the sort field * <li>.title - (String) The title to display for the sort field * <li>.sortType - (String) The sort type, 'alpha' or 'numeric' * </ul> * <li>.currentField - (Object) Currently selected field * <li>.isAscending - (boolean) Current sort direction is ascending. True for ascending, False for descending * <li>.onSortChange - ( function(sortId, sortDirection ) Function to call when the current sort params change * </ul> * * @example <example module="patternfly.sort"> <file name="index.html"> <div ng-controller="ViewCtrl" class="row example-container"> <div class="col-md-12"> <pf-sort id="exampleSort" config="sortConfig"></pf-sort> </div> <hr class="col-md-12"> <div class="col-md-12"> <label class="events-label">Items: </label> </div> <div class="col-md-12"> <div ng-repeat="item in items" class="col-md-12 cfme-row-column"> <div class="row"> <div class="col-md-3"> <span>{{item.name}}</span> </div> <div class="col-md-3"> <span>{{item.count}}</span> </div> <div class="col-md-3"> <span>{{item.description}}</span> </div> </div> </div> </div> </div> </file> <file name="script.js"> angular.module('patternfly.sort').controller('ViewCtrl', ['$scope', function ($scope) { $scope.items = [ { name: "Item 7", count: 432, description: 'Very nice item' }, { name: "Item 6", count: 22, description: 'It lasts forever' }, { name: "Item 3", count: 632, description: 'Good stuff cheap' }, { name: "Item 2", count: 12, description: 'Fantastic' }, { name: "Item 9", count: 99, description: 'It does alright' }, { name: "Item 4", count: 442, description: 'Horrible' }, { name: "Item 1", count: 42, description: 'Most excellent' }, { name: "Item 8", count: 2, description: 'Get it while it lasts' }, { name: "Item 5", count: 321, description: 'Beautiful style' } ]; var compareFn = function(item1, item2) { var compValue = 0; if ($scope.sortConfig.currentField.id === 'name') { compValue = item1.name.localeCompare(item2.name); } else if ($scope.sortConfig.currentField.id === 'count') { compValue = item1.count - item2.count; } else if ($scope.sortConfig.currentField.id === 'description') { compValue = item1.description.localeCompare(item2.description); } if (!$scope.sortConfig.isAscending) { compValue = compValue * -1; } return compValue; }; var sortChange = function (sortId, isAscending) { $scope.items.sort(compareFn); }; $scope.sortConfig = { fields: [ { id: 'name', title: 'Name', sortType: 'alpha' }, { id: 'count', title: 'Count', sortType: 'numeric' }, { id: 'description', title: 'Description', sortType: 'alpha' } ], onSortChange: sortChange }; } ]); </file> </example> */ |