From 1525c6d97e96931332e2d55abf9b7d02eb4b83d2 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 4 Mar 2019 11:25:58 -0500 Subject: [PATCH 1/3] Extend Toolbar directive to include sort dropdown --- .../lib/components/components.strings.js | 6 +++ awx/ui/client/lib/components/list/_index.less | 37 +++++++++++++++++++ .../components/list/list-toolbar.directive.js | 16 +++++++- .../components/list/list-toolbar.partial.html | 25 +++++++++++-- 4 files changed, 79 insertions(+), 5 deletions(-) diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 78edb30b85..ce5de265b3 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -113,6 +113,12 @@ function ComponentsStrings (BaseString) { ns.list = { DEFAULT_EMPTY_LIST: t.s('Please add items to this list.') }; + + ns.toolbar = { + COMPACT: t.s('Compact'), + EXPANDED: t.s('Expanded'), + SORT_BY: t.s('SORT BY') + }; } ComponentsStrings.$inject = ['BaseStringService']; diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index d01b4e48fe..7b8c31b844 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -96,6 +96,43 @@ } } +.at-List-toolbarDropdown { + border-top-right-radius: @at-border-radius; + padding: 2px 10px; + + &:hover { + cursor: pointer; + background: @at-gray-f2; + } + + &-toggle { + background: none; + border: none; + padding: 0; + } + + &-toggleText { + margin-right: 10px; + } + + &-menu { + border-bottom-left-radius: @at-border-radius; + border-bottom-right-radius: @at-border-radius; + border-top-left-radius: 0; + border-top-right-radius: 0; + left: auto; + margin: 0; + right: 0; + width: 100%; + } + + &-menuHeader { + color: @at-gray-646972; + font-weight: bold; + pointer-events: none; + } +} + .at-List-container { border: @at-border-default-width solid @at-color-list-border; border-radius: @at-border-radius; diff --git a/awx/ui/client/lib/components/list/list-toolbar.directive.js b/awx/ui/client/lib/components/list/list-toolbar.directive.js index 57183e32af..7e3ed8eee9 100644 --- a/awx/ui/client/lib/components/list/list-toolbar.directive.js +++ b/awx/ui/client/lib/components/list/list-toolbar.directive.js @@ -1,5 +1,12 @@ const templateUrl = require('~components/list/list-toolbar.partial.html'); +function AtListToolbar (strings) { + const vm = this || {}; + vm.strings = strings; +} + +AtListToolbar.$inject = ['ComponentsStrings']; + function atListToolbar () { return { restrict: 'E', @@ -9,9 +16,14 @@ function atListToolbar () { scope: { onExpand: '=', onCollapse: '=', - sortOnly: '=', isCollapsed: '=', - } + onSort: '<', + sortOnly: '=', + sortOptions: '<', + sortValue: '<' + }, + controller: AtListToolbar, + controllerAs: 'vm' }; } 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 4511be1760..d7b6d15f81 100644 --- a/awx/ui/client/lib/components/list/list-toolbar.partial.html +++ b/awx/ui/client/lib/components/list/list-toolbar.partial.html @@ -1,5 +1,24 @@
-
Compact
-
Expanded
-
Sort
+
{{ vm.strings.get('toolbar.COMPACT') }}
+
{{ vm.strings.get('toolbar.EXPANDED') }}
+
+ +
    +
  • + {{ vm.strings.get('toolbar.SORT_BY') }} +
    • +
  • + {{ option.label }} +
    • +
+
\ No newline at end of file From 8100fc1cfb2b9d926f24ae7608de76471a4c6e5c Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 4 Mar 2019 11:27:16 -0500 Subject: [PATCH 2/3] Add toolbar sort configuration to project list --- .../features/projects/projects.strings.js | 5 +++ .../projects/projectsList.controller.js | 32 +++++++++++++++++++ .../features/projects/projectsList.view.html | 30 +++++++++-------- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/awx/ui/client/features/projects/projects.strings.js b/awx/ui/client/features/projects/projects.strings.js index c09f3104d9..7512f0f339 100644 --- a/awx/ui/client/features/projects/projects.strings.js +++ b/awx/ui/client/features/projects/projects.strings.js @@ -46,6 +46,11 @@ function ProjectsStrings (BaseString) { HEADER: this.error.HEADER, CALL: this.error.CALL, }; + + ns.sort = { + NAME_ASCENDING: t.s('Name (Ascending)'), + NAME_DESCENDING: t.s('Name (Descending)') + }; } ProjectsStrings.$inject = ['BaseStringService']; diff --git a/awx/ui/client/features/projects/projectsList.controller.js b/awx/ui/client/features/projects/projectsList.controller.js index 59fffee931..690018f3fe 100644 --- a/awx/ui/client/features/projects/projectsList.controller.js +++ b/awx/ui/client/features/projects/projectsList.controller.js @@ -27,6 +27,8 @@ function projectsListController ( }; vm.dataset = Dataset.data; vm.projects = Dataset.data.results; + vm.querySet = $state.params.project_search; + $scope.$watch('vm.dataset.count', () => { $scope.$emit('updateCount', vm.dataset.count, 'projects'); }); @@ -48,6 +50,36 @@ function projectsListController ( } }, true); + const toolbarSortDefault = { + label: `${strings.get('sort.NAME_ASCENDING')}`, + value: 'name' + }; + + vm.toolbarSortOptions = [ + toolbarSortDefault, + { + label: `${strings.get('sort.NAME_DESCENDING')}`, + value: '-name' + } + ]; + + vm.toolbarSortValue = toolbarSortDefault; + + vm.onToolbarSort = (sort) => { + vm.toolbarSortValue = sort; + + const queryParams = Object.assign( + vm.querySet, + { order_by: sort.value } + ); + + qs.search(GetBasePath(vm.list.basePath), queryParams) + .then(({ data }) => { + vm.dataset = data; + vm.projects = vm.dataset.results; + }); + }; + $scope.$on('ws-jobs', (e, data) => { $log.debug(data); if (vm.projects) { diff --git a/awx/ui/client/features/projects/projectsList.view.html b/awx/ui/client/features/projects/projectsList.view.html index 7949234ddc..d3693e2234 100644 --- a/awx/ui/client/features/projects/projectsList.view.html +++ b/awx/ui/client/features/projects/projectsList.view.html @@ -21,10 +21,13 @@ + on-collapse="vm.onCollapse" + is-collapsed="vm.isCollapsed" + sort-only="false" + sort-value="vm.toolbarSortValue" + sort-options="vm.toolbarSortOptions" + on-sort="vm.onToolbarSort"> -
@@ -56,16 +59,16 @@
@@ -77,7 +80,7 @@ - @@ -98,6 +101,7 @@ collection="vm.projects" dataset="vm.dataset" iterator="project" - base-path="projects"> + base-path="projects" + query-set="vm.querySet"> \ No newline at end of file From 80adcaab81de769cd8a78b61ec00df80698c4a4c Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 4 Mar 2019 14:40:15 -0500 Subject: [PATCH 3/3] Set sort dropdown to state param order_by value --- .../features/projects/projectsList.controller.js | 14 ++++++++++++-- .../features/projects/projectsList.view.html | 3 +-- .../lib/components/list/list-toolbar.partial.html | 2 +- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/awx/ui/client/features/projects/projectsList.controller.js b/awx/ui/client/features/projects/projectsList.controller.js index 690018f3fe..e0de2a34be 100644 --- a/awx/ui/client/features/projects/projectsList.controller.js +++ b/awx/ui/client/features/projects/projectsList.controller.js @@ -27,7 +27,6 @@ function projectsListController ( }; vm.dataset = Dataset.data; vm.projects = Dataset.data.results; - vm.querySet = $state.params.project_search; $scope.$watch('vm.dataset.count', () => { $scope.$emit('updateCount', vm.dataset.count, 'projects'); @@ -48,8 +47,19 @@ function projectsListController ( } else { vm.activeId = ''; } + setToolbarSort(); }, true); + function setToolbarSort () { + const orderByValue = _.get($state.params, 'project_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.NAME_ASCENDING')}`, value: 'name' @@ -69,7 +79,7 @@ function projectsListController ( vm.toolbarSortValue = sort; const queryParams = Object.assign( - vm.querySet, + $state.params.project_search, { order_by: sort.value } ); diff --git a/awx/ui/client/features/projects/projectsList.view.html b/awx/ui/client/features/projects/projectsList.view.html index d3693e2234..0fa6e90168 100644 --- a/awx/ui/client/features/projects/projectsList.view.html +++ b/awx/ui/client/features/projects/projectsList.view.html @@ -101,7 +101,6 @@ collection="vm.projects" dataset="vm.dataset" iterator="project" - base-path="projects" - query-set="vm.querySet"> + base-path="projects"> \ No newline at end of file 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 d7b6d15f81..0b29718652 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') }}
-
+