Merge pull request #3453 from marshmalien/feat-toolbar-sort-application-tokens-list

Add sort to application tokens list

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

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

@@ -41,7 +41,9 @@ function ApplicationsStrings (BaseString) {
 
     ns.sort = {
         NAME_ASCENDING: t.s('Name (Ascending)'),
-        NAME_DESCENDING: t.s('Name (Descending)')
+        NAME_DESCENDING: t.s('Name (Descending)'),
+        USERNAME_ASCENDING: t.s('Username (Ascending)'),
+        USERNAME_DESCENDING: t.s('Username (Descending)')
     };
 }
 

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

@@ -91,6 +91,14 @@ function ApplicationsRun ($stateExtender, strings) {
                 controllerAs: 'vm'
             }
         },
+        params: {
+            application_search: {
+                value: {
+                    order_by: 'name',
+                    page_size: 10
+                },
+            }
+        },
         searchPrefix: 'application',
         resolve: {
             resolvedModels: [
@@ -291,8 +299,8 @@ function ApplicationsRun ($stateExtender, strings) {
         params: {
             user_search: {
                 value: {
-                    order_by: 'user',
-                    page_size: 20
+                    order_by: 'user__username',
+                    page_size: 10
                 },
                 dynamic: true
             }

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

@@ -7,32 +7,71 @@ function ListApplicationsUsersController (
     $filter,
     $scope,
     Dataset,
-    resolvedModels,
     strings,
-    $stateParams,
+    $state,
     GetBasePath
 ) {
     const vm = this || {};
-    // const application = resolvedModels;
-
     vm.strings = strings;
+
     // smart-search
     const name = 'users';
     const iterator = 'user';
-    const key = 'user_dataset';
+    let paginateQuerySet = {};
 
-    $scope.list = { iterator, name, basePath: 'applications' };
-    $scope.collection = { iterator };
-    $scope.tokenBasePath = `${GetBasePath('applications')}${$stateParams.application_id}/tokens`;
-    $scope[key] = Dataset.data;
-    vm.usersCount = Dataset.data.count;
-    $scope[name] = Dataset.data.results;
-    $scope.$on('updateDataset', (e, dataset) => {
-        $scope[key] = dataset;
-        $scope[name] = dataset.results;
-        vm.usersCount = dataset.count;
+    vm.user_dataset = Dataset.data;
+    vm.users = Dataset.data.results;
+    vm.list = { iterator, name, basePath: 'applications' };
+    vm.basePath = `${GetBasePath('applications')}${$state.params.application_id}/tokens`;
+
+    $scope.$on('updateDataset', (e, dataset, queryset) => {
+        vm.user_dataset = dataset;
+        vm.users = dataset.results;
+        paginateQuerySet = queryset;
     });
 
+    $scope.$watchCollection('$state.params', () => {
+        setToolbarSort();
+    });
+
+    const toolbarSortDefault = {
+        label: `${strings.get('sort.USERNAME_ASCENDING')}`,
+        value: 'user__username'
+    };
+
+    vm.toolbarSortOptions = [
+        toolbarSortDefault,
+        {
+            label: `${strings.get('sort.USERNAME_DESCENDING')}`,
+            value: '-user__username'
+        }
+    ];
+
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'user_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.user_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        // Update URL with params
+        $state.go('.', {
+            user_search: queryParams
+        }, { notify: false, location: 'replace' });
+    };
+
     vm.getLastUsed = user => {
         const lastUsed = _.get(user, 'last_used');
 
@@ -56,9 +95,8 @@ ListApplicationsUsersController.$inject = [
     '$filter',
     '$scope',
     'Dataset',
-    'resolvedModels',
     'ApplicationsStrings',
-    '$stateParams',
+    '$state',
     'GetBasePath'
 ];
 

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

@@ -2,17 +2,23 @@
     <smart-search
         class="at-List-search"
         django-model="users"
-        base-path="{{ tokenBasePath }}"
+        base-path="{{ vm.basePath }}"
         iterator="user"
-        list="list"
-        dataset="user_dataset"
-        collection="collection"
+        list="vm.list"
+        dataset="vm.user_dataset"
+        collection="vm.users"
         search-tags="searchTags">
     </smart-search>
 </div>
-
-<at-list results="users">
-    <at-row ng-repeat="user in users">
+<at-list-toolbar
+    ng-if="vm.users.length > 0"
+    sort-only="true"
+    sort-value="vm.toolbarSortValue"
+    sort-options="vm.toolbarSortOptions"
+    on-sort="vm.onToolbarSort">
+</at-list-toolbar>
+<at-list results="vm.users">
+    <at-row ng-repeat="user in vm.users">
         <div class="at-Row-items">
             <at-row-item
                 header-value="{{ user.summary_fields.user.username | sanitize }}"
@@ -29,3 +35,9 @@
         </div>
     </at-row>
 </at-list>
+<paginate
+    collection="vm.users"
+    dataset="vm.user_dataset"
+    iterator="user"
+    base-path="{{ vm.basePath }}">
+</paginate>