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">