Add sort toolbar to applications list

awx/ui/client/features/applications/applications.strings.js

@@ -38,6 +38,11 @@ function ApplicationsStrings (BaseString) {
     ns.inputs = {
         ORGANIZATION_PLACEHOLDER: t.s('SELECT AN ORGANIZATION')
     };
+
+    ns.sort = {
+        NAME_ASCENDING: t.s('Name (Ascending)'),
+        NAME_DESCENDING: t.s('Name (Descending)')
+    };
 }
 
 ApplicationsStrings.$inject = ['BaseStringService'];

awx/ui/client/features/applications/list-applications.controller.js

@@ -8,14 +8,17 @@ function ListApplicationsController (
     $scope,
     $state,
     Dataset,
+    GetBasePath,
     ProcessErrors,
     Prompt,
+    qs,
     resolvedModels,
     strings,
-    Wait,
+    Wait
 ) {
     const vm = this || {};
     const application = resolvedModels;
+    let paginateQuerySet = {};
 
     vm.strings = strings;
     vm.activeId = $state.params.application_id;
@@ -32,16 +35,62 @@ function ListApplicationsController (
     $scope[key] = Dataset.data;
     vm.applicationsCount = Dataset.data.count;
     $scope[name] = Dataset.data.results;
-    $scope.$on('updateDataset', (e, dataset) => {
+
+    $scope.$on('updateDataset', (e, dataset, queryset) => {
         $scope[key] = dataset;
         $scope[name] = dataset.results;
         vm.applicationsCount = dataset.count;
+        // Remove paginateQuerySet once the page and page_size params
+        // are represented in the url.
+        paginateQuerySet = queryset;
     });
 
     vm.tooltips = {
         add: strings.get('tooltips.ADD')
     };
 
+    const toolbarSortDefault = {
+        label: `${strings.get('sort.NAME_ASCENDING')}`,
+        value: 'name'
+    };
+
+    vm.toolbarSortOptions = [
+        toolbarSortDefault,
+        { label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' }
+    ];
+
+    vm.toolbarSortValue = toolbarSortDefault;
+
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'application_search.order_by');
+        const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
+        if (sortValue) {
+            vm.toolbarSortValue = sortValue;
+        } else {
+            vm.toolbarSortValue = toolbarSortDefault;
+        }
+    }
+
+    $scope.$watch('$state.params', () => {
+        setToolbarSort();
+    }, true);
+
+    vm.onToolbarSort = (sort) => {
+        vm.toolbarSortValue = sort;
+
+        const queryParams = Object.assign(
+            {},
+            $state.params.application_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        // Update URL with params
+        $state.go('.', {
+            application_search: queryParams
+        }, { notify: false, location: 'replace' });
+    };
+
     vm.getModified = app => {
         const modified = _.get(app, 'modified');
 
@@ -111,8 +160,10 @@ ListApplicationsController.$inject = [
     '$scope',
     '$state',
     'Dataset',
+    'GetBasePath',
     'ProcessErrors',
     'Prompt',
+    'QuerySet',
     'resolvedModels',
     'ApplicationsStrings',
     'Wait'

awx/ui/client/features/applications/list-applications.view.html

@@ -30,7 +30,13 @@
                 </button>
             </div>
         </div>
-
+        <at-list-toolbar
+            ng-if="vm.applicationsCount > 0"
+            sort-only="true"
+            sort-value="vm.toolbarSortValue"
+            sort-options="vm.toolbarSortOptions"
+            on-sort="vm.onToolbarSort">
+        </at-list-toolbar>
         <at-list results="applications">
             <at-row ng-repeat="application in applications"
                 ng-class="{'at-Row--active': (application.id === vm.activeId)}">
@@ -61,7 +67,6 @@
         base-path="applications"
         iterator="application"
         dataset="application_dataset"
-        collection="applications"
-        query-set="application_queryset">
+        collection="applications">
     </paginate>
 </at-panel>