Add sort to users tokens list

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

@@ -91,15 +91,15 @@ function ApplicationsRun ($stateExtender, strings) {
                 controllerAs: 'vm'
             }
         },
+        searchPrefix: 'application',
         params: {
             application_search: {
                 value: {
-                    order_by: 'name',
+                    page_size: 10,
-                    page_size: 10
+                    order_by: 'name'
-                },
+                }
             }
         },
-        searchPrefix: 'application',
         resolve: {
             resolvedModels: [
                 'ApplicationModel',

awx/ui/client/features/users/tokens/tokens.strings.js

@@ -41,6 +41,11 @@ function TokensStrings (BaseString) {
         PERSONAL_ACCESS_TOKEN: t.s('Personal Access Token'),
         HEADER: appName => t.s('{{ appName }} Token', { appName }),
     };
+
+    ns.sort = {
+        NAME_ASCENDING: t.s('Name (Ascending)'),
+        NAME_DESCENDING: t.s('Name (Descending)')
+    };
 }
 
 TokensStrings.$inject = ['BaseStringService'];

awx/ui/client/features/users/tokens/users-tokens-list.controller.js

@@ -16,7 +16,6 @@ function ListTokensController (
     models
 ) {
     const vm = this || {};
-
     const { token } = models;
 
     vm.strings = strings;
@@ -27,19 +26,61 @@ function ListTokensController (
     // smart-search
     const name = 'tokens';
     const iterator = 'token';
-    const key = 'token_dataset';
+    let paginateQuerySet = {};
 
-    $scope.list = { iterator, name, basePath: 'tokens' };
+    vm.token_dataset = Dataset.data;
-    $scope.collection = { iterator };
+    vm.tokens = Dataset.data.results;
-    $scope[key] = Dataset.data;
+    vm.list = { iterator, name, basePath: 'tokens' };
-    vm.tokensCount = Dataset.data.count;
+    vm.basePath = `${GetBasePath('users')}${$state.params.user_id}/tokens`;
-    $scope[name] = Dataset.data.results;
+
-    $scope.$on('updateDataset', (e, dataset) => {
+    $scope.$on('updateDataset', (e, dataset, queryset) => {
-        $scope[key] = dataset;
+        vm.token_dataset = dataset;
-        $scope[name] = dataset.results;
+        vm.tokens = dataset.results;
-        vm.tokensCount = dataset.count;
+        paginateQuerySet = queryset;
     });
 
+    $scope.$watchCollection('$state.params', () => {
+        setToolbarSort();
+    });
+
+    const toolbarSortDefault = {
+        label: `${strings.get('sort.NAME_ASCENDING')}`,
+        value: 'application__name'
+    };
+
+    vm.toolbarSortOptions = [
+        toolbarSortDefault,
+        {
+            label: `${strings.get('sort.NAME_DESCENDING')}`,
+            value: '-application__name'
+        }
+    ];
+
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'token_search.order_by');
+        const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
+        if (sortValue) {
+            vm.toolbarSortValue = sortValue;
+        } else {
+            vm.toolbarSortValue = toolbarSortDefault;
+        }
+    }
+
+    vm.onToolbarSort = (sort) => {
+        vm.toolbarSortValue = sort;
+        const queryParams = Object.assign(
+            {},
+            $state.params.token_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        // Update URL with params
+        $state.go('.', {
+            token_search: queryParams
+        }, { notify: false, location: 'replace' });
+    };
+
     vm.getScopeString = str => {
         if (str === 'Read') {
             return vm.strings.get('add.SCOPE_READ_LABEL');

awx/ui/client/features/users/tokens/users-tokens-list.partial.html

@@ -2,11 +2,11 @@
     <smart-search
         class="at-List-search"
         django-model="tokens"
-        base-path="tokens"
+        base-path="{{ vm.basePath }}"
         iterator="token"
-        list="list"
+        list="vm.list"
-        dataset="token_dataset"
+        dataset="vm.token_dataset"
-        collection="collection"
+        collection="vm.tokens"
         search-tags="searchTags">
     </smart-search>
     <div class="at-List-toolbarAction">
@@ -20,9 +20,15 @@
         </button>
     </div>
 </div>
-
+<at-list-toolbar
-<at-list results="tokens">
+    ng-if="vm.tokens.length > 0"
-    <at-row ng-repeat="token in tokens">
+    sort-only="true"
+    sort-value="vm.toolbarSortValue"
+    sort-options="vm.toolbarSortOptions"
+    on-sort="vm.onToolbarSort">
+</at-list-toolbar>
+<at-list results="vm.tokens">
+    <at-row ng-repeat="token in vm.tokens">
         <div class="at-Row-items">
             <at-row-item
                 header-value="{{ token.summary_fields.application.name ?
@@ -59,8 +65,8 @@
     </at-row>
 </at-list>
 <paginate
-    collection="tokens"
+    collection="vm.tokens"
-    dataset="token_dataset"
+    dataset="vm.token_dataset"
     iterator="token"
-    base-path="tokens">
+    base-path="{{ vm.basePath }}">
 </paginate>

awx/ui/client/features/users/tokens/users-tokens-list.route.js

@@ -39,8 +39,8 @@ export default {
     params: {
         token_search: {
             value: {
-                page_size: 5,
+                page_size: 10,
-                order_by: 'application'
+                order_by: 'application__name'
             }
         }
     },