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);
})();