Merge pull request #3367 from marshmalien/feat-toolbar-sort-jobs-list

Add toolbar sort to Jobs lists

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

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'),

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');
     });

awx/ui/client/features/jobs/jobsList.view.html

@@ -14,10 +14,13 @@
     </div>
     <at-list-toolbar
         ng-if="vm.jobs.length > 0"
-        sort-only="false"
-        on-collapse="vm.onCollapse"
         on-expand="vm.onExpand"
-        is-collapsed="vm.isCollapsed">
+        on-collapse="vm.onCollapse"
+        is-collapsed="vm.isCollapsed"
+        sort-only="false"
+        sort-value="vm.toolbarSortValue"
+        sort-options="vm.toolbarSortOptions"
+        on-sort="vm.onToolbarSort">
     </at-list-toolbar>
     <at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
         <!-- TODO: implement resources are missing red indicator as present in mockup -->

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;

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;

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;

awx/ui/client/lib/components/list/list-toolbar.partial.html

@@ -1,7 +1,7 @@
 <div class="at-List-toolbar--attached">
     <div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">{{ vm.strings.get('toolbar.COMPACT') }}</div>
     <div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">{{ vm.strings.get('toolbar.EXPANDED') }}</div>
-    <div ng-if="sortOptions" class="at-List-toolbarDropdown dropdown">
+    <div ng-if="sortOptions" class="at-List-toolbar-item at-List-toolbarDropdown dropdown">
         <button
             class="at-List-toolbarDropdown-toggle dropdown-toggle"
             data-display="static"

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);
             });
         };
 

awx/ui/client/src/shared/paginate/paginate.directive.js

@@ -8,7 +8,7 @@ export default ['templateUrl',
                 dataset: '=',
                 iterator: '@',
                 basePath: '@',
-                querySet: '=',
+                querySet: '=?',
                 maxVisiblePages: '@',
                 hideViewPerPage: '='
             },

awx/ui/client/src/shared/smart-search/smart-search.controller.js

@@ -46,7 +46,7 @@ function SmartSearchController (
                     qs.search(path, queryset).then((res) => {
                         $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);