diff --git a/awx/ui/client/features/jobs/jobs.strings.js b/awx/ui/client/features/jobs/jobs.strings.js index a5b69df13f..6bc6225760 100644 --- a/awx/ui/client/features/jobs/jobs.strings.js +++ b/awx/ui/client/features/jobs/jobs.strings.js @@ -4,6 +4,13 @@ function JobsStrings (BaseString) { const { t } = this; const ns = this.jobs; + ns.sort = { + NAME_ASCENDING: t.s('Name (Ascending)'), + NAME_DESCENDING: t.s('Name (Descending)'), + START_TIME: t.s('Start Time'), + FINISH_TIME: t.s('Finish Time') + }; + ns.list = { PANEL_TITLE: t.s('JOBS'), ROW_ITEM_LABEL_STARTED: t.s('Started'), diff --git a/awx/ui/client/features/jobs/jobsList.controller.js b/awx/ui/client/features/jobs/jobsList.controller.js index 71e12c967f..ed52036ba7 100644 --- a/awx/ui/client/features/jobs/jobsList.controller.js +++ b/awx/ui/client/features/jobs/jobsList.controller.js @@ -28,6 +28,7 @@ function ListJobsController ( // smart-search const name = 'jobs'; const iterator = 'job'; + let paginateQuerySet = {}; let launchModalOpen = false; let refreshAfterLaunchClose = false; @@ -40,6 +41,63 @@ function ListJobsController ( vm.job_dataset = Dataset.data; vm.jobs = Dataset.data.results; + $scope.$watch('$state.params', () => { + setToolbarSort(); + }, true); + + const toolbarSortDefault = { + label: `${strings.get('sort.FINISH_TIME')}`, + value: '-finished' + }; + + function setToolbarSort () { + const orderByValue = _.get($state.params, 'job_search.order_by'); + const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue); + if (sortValue) { + vm.toolbarSortValue = sortValue; + } else { + vm.toolbarSortValue = toolbarSortDefault; + } + } + + vm.toolbarSortOptions = [ + { label: `${strings.get('sort.NAME_ASCENDING')}`, value: 'name' }, + { label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' }, + { label: `${strings.get('sort.START_TIME')}`, value: 'finished' }, + toolbarSortDefault + ]; + + vm.toolbarSortValue = toolbarSortDefault; + + // Temporary hack to retrieve $scope.querySet from the paginate directive. + // Remove this event listener once the page and page_size params + // are represented in the url. + $scope.$on('updateDataset', (event, dataset, queryset) => { + paginateQuerySet = queryset; + }); + + vm.onToolbarSort = (sort) => { + vm.toolbarSortValue = sort; + + const queryParams = Object.assign( + {}, + $state.params.job_search, + paginateQuerySet, + { order_by: sort.value } + ); + + // Update URL with params + $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', () => { $scope.$emit('updateCount', vm.job_dataset.count, 'jobs'); }); diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html index 812f94d9bf..660221968d 100644 --- a/awx/ui/client/features/jobs/jobsList.view.html +++ b/awx/ui/client/features/jobs/jobsList.view.html @@ -14,10 +14,13 @@ + on-collapse="vm.onCollapse" + is-collapsed="vm.isCollapsed" + sort-only="false" + sort-value="vm.toolbarSortValue" + sort-options="vm.toolbarSortOptions" + on-sort="vm.onToolbarSort"> diff --git a/awx/ui/client/features/projects/projectsList.controller.js b/awx/ui/client/features/projects/projectsList.controller.js index e0de2a34be..8b995589c6 100644 --- a/awx/ui/client/features/projects/projectsList.controller.js +++ b/awx/ui/client/features/projects/projectsList.controller.js @@ -13,6 +13,7 @@ function projectsListController ( ) { const vm = this || {}; const [ProjectModel] = resolvedModels; + let paginateQuerySet = {}; $scope.canAdd = ProjectModel.options('actions.POST'); vm.strings = strings; @@ -75,14 +76,28 @@ function projectsListController ( vm.toolbarSortValue = toolbarSortDefault; + // Temporary hack to retrieve $scope.querySet from the paginate directive. + // Remove this event listener once the page and page_size params + // are represented in the url. + $scope.$on('updateDataset', (event, dataset, queryset) => { + paginateQuerySet = queryset; + }); + vm.onToolbarSort = (sort) => { vm.toolbarSortValue = sort; const queryParams = Object.assign( + {}, $state.params.project_search, + paginateQuerySet, { order_by: sort.value } ); + // Update URL with params + $state.go('.', { + project_search: queryParams + }, { notify: false, location: 'replace' }); + qs.search(GetBasePath(vm.list.basePath), queryParams) .then(({ data }) => { vm.dataset = data; diff --git a/awx/ui/client/lib/components/layout/_index.less b/awx/ui/client/lib/components/layout/_index.less index 6214495f82..f1ee8c2ac3 100644 --- a/awx/ui/client/lib/components/layout/_index.less +++ b/awx/ui/client/lib/components/layout/_index.less @@ -200,7 +200,6 @@ &-main { display: flex; - height: 100%; width: 100%; flex-direction: column; padding-bottom: @at-space-4x; diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index 7b8c31b844..28357c46fb 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -71,25 +71,12 @@ .at-List-toolbar-item { padding: 2px 10px; border-left: 1px solid @at-color-list-border; - border-right: 1px solid @at-color-list-border; &:hover { cursor: pointer; background: @at-gray-f2; } - &:first-of-type { - border-right: none; - } - - &:last-of-type { - border: none; - } - - &:first-child { - border-left: 1px solid @at-color-list-border; - } - &.active { background: @at-blue; color: @at-white; @@ -98,12 +85,6 @@ .at-List-toolbarDropdown { border-top-right-radius: @at-border-radius; - padding: 2px 10px; - - &:hover { - cursor: pointer; - background: @at-gray-f2; - } &-toggle { background: none; diff --git a/awx/ui/client/lib/components/list/list-toolbar.partial.html b/awx/ui/client/lib/components/list/list-toolbar.partial.html index 0b29718652..0db249ccce 100644 --- a/awx/ui/client/lib/components/list/list-toolbar.partial.html +++ b/awx/ui/client/lib/components/list/list-toolbar.partial.html @@ -1,7 +1,7 @@ {{ vm.strings.get('toolbar.COMPACT') }} {{ vm.strings.get('toolbar.EXPANDED') }} - + { $scope.dataset = res.data; $scope.collection = res.data.results; - $scope.$emit('updateDataset', res.data); + $scope.$emit('updateDataset', res.data, queryset); }); $scope.searchTerm = null; @@ -77,7 +77,7 @@ function SmartSearchController ( } $scope.dataset = res.data; $scope.collection = res.data.results; - $scope.$emit('updateDataset', res.data); + $scope.$emit('updateDataset', res.data, queryset); }); $scope.searchTerm = null; @@ -164,7 +164,6 @@ function SmartSearchController ( $scope.searchPlaceholder = i18n._('Search'); } }); - listenForTransitionSuccess(); }); @@ -205,7 +204,7 @@ function SmartSearchController ( } $scope.dataset = data; $scope.collection = data.results; - $scope.$emit('updateDataset', data); + $scope.$emit('updateDataset', data, queryset); }) .catch(() => revertSearch(unmodifiedQueryset)); @@ -241,7 +240,7 @@ function SmartSearchController ( } $scope.dataset = data; $scope.collection = data.results; - $scope.$emit('updateDataset', data); + $scope.$emit('updateDataset', data, queryset); }); generateSearchTags(); @@ -271,7 +270,7 @@ function SmartSearchController ( } $scope.dataset = data; $scope.collection = data.results; - $scope.$emit('updateDataset', data); + $scope.$emit('updateDataset', data, queryset); }); $scope.searchTags = qs.stripDefaultParams(queryset, defaults);