Merge pull request #3401 from marshmalien/feat-toolbar-sort-applications-list

Add sort toolbar to applications list

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

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

@@ -12,10 +12,11 @@ function ListApplicationsController (
     Prompt,
     resolvedModels,
     strings,
-    Wait,
+    Wait
 ) {
     const vm = this || {};
     const application = resolvedModels;
+    let paginateQuerySet = {};
 
     vm.strings = strings;
     vm.activeId = $state.params.application_id;
@@ -32,16 +33,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');
 

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>

awx/ui/client/features/jobs/jobsList.controller.js

@@ -74,6 +74,8 @@ function ListJobsController (
     // are represented in the url.
     $scope.$on('updateDataset', (event, dataset, queryset) => {
         paginateQuerySet = queryset;
+        vm.jobs = dataset.results;
+        vm.job_dataset = dataset;
     });
 
     vm.onToolbarSort = (sort) => {
@@ -90,12 +92,6 @@ function ListJobsController (
         $state.go('.', {
             job_search: queryParams
         }, { notify: false, location: 'replace' });
-
-        qs.search(SearchBasePath, queryParams)
-            .then(({ data }) => {
-                vm.jobs = data.results;
-                vm.job_dataset = data;
-            });
     };
 
     $scope.$watch('vm.job_dataset.count', () => {

awx/ui/client/features/projects/projectsList.controller.js

@@ -80,6 +80,8 @@ function projectsListController (
     // Remove this event listener once the page and page_size params
     // are represented in the url.
     $scope.$on('updateDataset', (event, dataset, queryset) => {
+        vm.dataset = dataset;
+        vm.projects = dataset.results;
         paginateQuerySet = queryset;
     });
 
@@ -97,12 +99,6 @@ function projectsListController (
         $state.go('.', {
             project_search: queryParams
         }, { notify: false, location: 'replace' });
-
-        qs.search(GetBasePath(vm.list.basePath), queryParams)
-            .then(({ data }) => {
-                vm.dataset = data;
-                vm.projects = vm.dataset.results;
-            });
     };
 
     $scope.$on('ws-jobs', (e, data) => {