diff --git a/awx/ui/client/features/applications/applications.strings.js b/awx/ui/client/features/applications/applications.strings.js index f6fb73f56a..fc25eeea80 100644 --- a/awx/ui/client/features/applications/applications.strings.js +++ b/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']; diff --git a/awx/ui/client/features/applications/list-applications.controller.js b/awx/ui/client/features/applications/list-applications.controller.js index db1bb88b5d..27fb31340e 100644 --- a/awx/ui/client/features/applications/list-applications.controller.js +++ b/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' diff --git a/awx/ui/client/features/applications/list-applications.view.html b/awx/ui/client/features/applications/list-applications.view.html index 14b9d8c7b2..c6bf19fdf3 100644 --- a/awx/ui/client/features/applications/list-applications.view.html +++ b/awx/ui/client/features/applications/list-applications.view.html @@ -30,7 +30,13 @@ - + + @@ -61,7 +67,6 @@ base-path="applications" iterator="application" dataset="application_dataset" - collection="applications" - query-set="application_queryset"> + collection="applications">