From 970a714291845fe34d3ce2df38aa5be5fb762f6d Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 5 Mar 2019 15:08:24 -0500 Subject: [PATCH 1/6] Update URL params when sorting on projects list --- .../features/projects/projectsList.controller.js | 15 +++++++++++++++ .../src/shared/paginate/paginate.controller.js | 2 +- .../src/shared/paginate/paginate.directive.js | 2 +- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/awx/ui/client/features/projects/projectsList.controller.js b/awx/ui/client/features/projects/projectsList.controller.js index e0de2a34be..c9f4ac95cf 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 = null; $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/src/shared/paginate/paginate.controller.js b/awx/ui/client/src/shared/paginate/paginate.controller.js index 6da86f4880..2f279784d8 100644 --- a/awx/ui/client/src/shared/paginate/paginate.controller.js +++ b/awx/ui/client/src/shared/paginate/paginate.controller.js @@ -55,7 +55,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q } $scope.dataset = res.data; $scope.collection = res.data.results; - $scope.$emit('updateDataset', res.data); + $scope.$emit('updateDataset', res.data, queryset); }); }; diff --git a/awx/ui/client/src/shared/paginate/paginate.directive.js b/awx/ui/client/src/shared/paginate/paginate.directive.js index 73d6eed26b..b07ad12212 100644 --- a/awx/ui/client/src/shared/paginate/paginate.directive.js +++ b/awx/ui/client/src/shared/paginate/paginate.directive.js @@ -8,7 +8,7 @@ export default ['templateUrl', dataset: '=', iterator: '@', basePath: '@', - querySet: '=', + querySet: '=?', maxVisiblePages: '@', hideViewPerPage: '=' }, From 661a54d3560c1e886afae0d42a068ca9112ffb46 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 5 Mar 2019 15:09:12 -0500 Subject: [PATCH 2/6] Add toolbar sort to Jobs list --- awx/ui/client/features/jobs/jobs.strings.js | 7 +++ .../features/jobs/jobsList.controller.js | 58 +++++++++++++++++++ .../client/features/jobs/jobsList.view.html | 9 ++- 3 files changed, 71 insertions(+), 3 deletions(-) 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..bfc20c0f47 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 = null; 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); + + 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; + } + } + + const toolbarSortDefault = { + label: `${strings.get('sort.FINISH_TIME')}`, + value: '-finished' + }; + + 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"> From 67753b790cb2a67b243b1b6dccfb47c58023c701 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 6 Mar 2019 10:48:14 -0500 Subject: [PATCH 3/6] Move toolbar default variable above the toolbar setting funciton --- awx/ui/client/features/jobs/jobsList.controller.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/awx/ui/client/features/jobs/jobsList.controller.js b/awx/ui/client/features/jobs/jobsList.controller.js index bfc20c0f47..620173cbc4 100644 --- a/awx/ui/client/features/jobs/jobsList.controller.js +++ b/awx/ui/client/features/jobs/jobsList.controller.js @@ -45,6 +45,11 @@ function ListJobsController ( 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); @@ -55,11 +60,6 @@ function ListJobsController ( } } - const toolbarSortDefault = { - label: `${strings.get('sort.FINISH_TIME')}`, - value: '-finished' - }; - vm.toolbarSortOptions = [ { label: `${strings.get('sort.NAME_ASCENDING')}`, value: 'name' }, { label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' }, From 31f5d13a69c9ac43873c64a1470ce257be75f5d6 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 6 Mar 2019 12:19:55 -0500 Subject: [PATCH 4/6] Initialize paginate queryset with an empty object --- awx/ui/client/features/jobs/jobsList.controller.js | 2 +- awx/ui/client/features/projects/projectsList.controller.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/awx/ui/client/features/jobs/jobsList.controller.js b/awx/ui/client/features/jobs/jobsList.controller.js index 620173cbc4..ed52036ba7 100644 --- a/awx/ui/client/features/jobs/jobsList.controller.js +++ b/awx/ui/client/features/jobs/jobsList.controller.js @@ -28,7 +28,7 @@ function ListJobsController ( // smart-search const name = 'jobs'; const iterator = 'job'; - let paginateQuerySet = null; + let paginateQuerySet = {}; let launchModalOpen = false; let refreshAfterLaunchClose = false; diff --git a/awx/ui/client/features/projects/projectsList.controller.js b/awx/ui/client/features/projects/projectsList.controller.js index c9f4ac95cf..8b995589c6 100644 --- a/awx/ui/client/features/projects/projectsList.controller.js +++ b/awx/ui/client/features/projects/projectsList.controller.js @@ -13,7 +13,7 @@ function projectsListController ( ) { const vm = this || {}; const [ProjectModel] = resolvedModels; - let paginateQuerySet = null; + let paginateQuerySet = {}; $scope.canAdd = ProjectModel.options('actions.POST'); vm.strings = strings; From 2d15d133597033ad974b0401a22d1ef3a45970af Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Wed, 6 Mar 2019 15:04:06 -0500 Subject: [PATCH 5/6] Refactor styles and add queryset to updateDataset event emmitters --- awx/ui/client/lib/components/list/_index.less | 19 ------------------- .../components/list/list-toolbar.partial.html | 2 +- .../smart-search/smart-search.controller.js | 11 +++++------ 3 files changed, 6 insertions(+), 26 deletions(-) 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') }}
-
+