Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

Sort

The sort component allows users to select sorting criteria. The component creates a button and dropdown menu to provide sorting options.

Sort settings

  • bb-sort — Creates a button and dropdown menu to provide sorting options.
    • bb-sort-item — Specifies a sorting option to include in the menu.
      • bb-sort-item-select — Specifies a function to be called when users click the sorting option.
      • bb-sort-item-active(Optional.) Indicates whether the sorting option is active. (Default: false)
    • bb-sort-append-to-body(Optional.) Appends the dropdown menu to the document body. To append the menu, include this attribute with no value in the bb-sort element.

Demo

{{item.label}}
{{item.title}}
Assigned to {{item.assignee}}
Created {{item.date | date }}
{{item.note}}

Markup

<div ng-controller="SortTestController as sortCtrl">
    <bb-sort
     bb-sort-append-to-body>
        <bb-sort-item 
            ng-repeat="item in sortCtrl.sortOptions" 
            bb-sort-item-active="sortCtrl.initialState === item.id"
            bb-sort-item-select="sortCtrl.sortItems(item)">
        {{item.label}}
        </bb-sort-item>
    </bb-sort>

    <div>
        <bb-repeater bb-repeater-expand-mode="none">
            <bb-repeater-item ng-repeat="item in sortCtrl.sortedItems">
                <bb-repeater-item-title>
                    {{item.title}}
                </bb-repeater-item-title>
                <bb-repeater-item-content>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-xs-6">
                            Assigned to {{item.assignee}}
                        </div>
                        <div class="col-xs-6">
                            Created {{item.date | date }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            {{item.note}}
                        </div>
                    </div>
                </bb-repeater-item-content>
            </bb-repeater-item>
        </bb-repeater>
    </div>
</div>

JavaScript

(function () {
    'use strict';


    function SortTestController() {
        var self = this,
            repeaterItems;

        function selectItem(item) {
            var result = repeaterItems.sort(function (a, b) {
                var descending = item.descending ? -1 : 1,
                    sortProperty = item.name;
                if (a[sortProperty] > b[sortProperty]) {
                    return (descending);
                } else if (a[sortProperty] < b[sortProperty]) {
                    return (-1 * descending);
                } else {
                    return 0;
                }
            });

            self.sortedItems = repeaterItems;
        }

        function initSort() {
            self.initialState = self.sortOptions[4].id;
            selectItem(self.sortOptions[4]);
        }
        
        repeaterItems = [
            {
                title: 'Call Robert Hernandez',
                note: 'Robert recently gave a very generous gift. We should call to thank him.',
                assignee: 'Debby Fowler',
                date: new Date('12/22/2015')
            },
            {
                title: 'Send invitation to ball',
                note: 'The Spring Ball is coming up soon. Let\'s get those invitations out!',
                assignee: 'Debby Fowler',
                date: new Date('1/1/2016')
            },
            {
                title: 'Clean up desk',
                note: 'File and organize papers.',
                assignee: 'Tim Howard',
                date: new Date('2/2/2016')
            },
            {
                title: 'Investigate leads',
                note: 'Check out leads for important charity event funding.',
                assignee: 'Larry Williams',
                date: new Date('4/5/2016')
            },
            {
                title: 'Send thank you note',
                note: 'Send a thank you note to Timothy for his donation.',
                assignee: 'Catherine Hooper',
                date: new Date('11/11/2015')
            }
        ];
        
        self.sortItems = selectItem;

        self.sortOptions = [
            {
                id: 1,
                label: 'Assigned to (A - Z)',
                name: 'assignee',
                descending: false
            },
            {
                id: 2,
                label: 'Assigned to (Z - A)',
                name: 'assignee',
                descending: true
            },
            {
                id: 3,
                label: 'Date created (newest first)',
                name: 'date',
                descending: true
            },
            {
                id: 4,
                label: 'Date created (oldest first)',
                name: 'date',
                descending: false
            },
            {
                id: 5,
                label: 'Note title (A - Z)',
                name: 'title',
                descending: false
            },
            {
                id: 6,
                label: 'Note title (Z - A)',
                name: 'title',
                descending: true
            }
        ];

        initSort();
        
    }

    angular.module('stache')
        .controller('SortTestController', SortTestController);
})();