Merge pull request #3356 from marshmalien/feat-toolbar-sort-projects-list

Add toolbar sort to projects list Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
2026-02-04 11:08:13 -03:30 · 2019-03-04 21:31:44 +00:00
parent 2934fabd98 80adcaab81
commit aad185e785
7 changed files with 141 additions and 17 deletions
--- 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'];
--- a/awx/ui/client/features/projects/projectsList.controller.js
+++ b/awx/ui/client/features/projects/projectsList.controller.js
@@ -27,6 +27,7 @@ function projectsListController (
    };
    vm.dataset = Dataset.data;
    vm.projects = Dataset.data.results;
+
    $scope.$watch('vm.dataset.count', () => {
        $scope.$emit('updateCount', vm.dataset.count, 'projects');
    });
@@ -46,8 +47,49 @@ 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'
+    };
+
+    vm.toolbarSortOptions = [
+        toolbarSortDefault,
+        {
+            label: `${strings.get('sort.NAME_DESCENDING')}`,
+            value: '-name'
+        }
+    ];
+
+    vm.toolbarSortValue = toolbarSortDefault;
+
+    vm.onToolbarSort = (sort) => {
+        vm.toolbarSortValue = sort;
+
+        const queryParams = Object.assign(
+            $state.params.project_search,
+            { 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) {
--- a/awx/ui/client/features/projects/projectsList.view.html
+++ b/awx/ui/client/features/projects/projectsList.view.html
@@ -21,10 +21,13 @@
    </div>
    <at-list-toolbar
        ng-if="vm.projects.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.projects">
        <at-row ng-repeat="project in vm.projects"
@@ -44,7 +47,7 @@
                        <div aw-tool-tip="{{ project.scm_update_tooltip }}"
                        data-tip-watch="project.scm_update_tooltip"
                        data-placement="top">
-                            <div class="at-RowAction" 
+                            <div class="at-RowAction"
                                ng-class="{'at-RowAction--disabled': project.scm_update_disabled }"
                                ng-click="vm.SCMUpdate(project.id, $event)"
                                ng-show="project.summary_fields.user_capabilities.start">
@@ -56,16 +59,16 @@
                        </at-row-action>
                        <at-row-action icon="fa-trash" ng-click="vm.deleteProject(project.id, project.name)"
                            ng-show="(project.status !== 'updating'
-                            && project.status !== 'running' 
-                            && project.status !== 'pending' 
-                            && project.status !== 'waiting')  
+                            && project.status !== 'running'
+                            && project.status !== 'pending'
+                            && project.status !== 'waiting')
                            && project.summary_fields.user_capabilities.delete">
                        </at-row-action>
                        <at-row-action icon="fa-minus-circle" ng-click="vm.cancelUpdate(project)"
-                            ng-show="(project.status == 'updating' 
-                            || project.status == 'running' 
-                            || project.status == 'pending' 
-                            || project.status == 'waiting') 
+                            ng-show="(project.status == 'updating'
+                            || project.status == 'running'
+                            || project.status == 'pending'
+                            || project.status == 'waiting')
                            && project.summary_fields.user_capabilities.start">
                        </at-row-action>
                    </div>
@@ -77,7 +80,7 @@
                        </div>
                        <at-truncate string="{{ project.scm_revision }}" maxLength="7"></at-truncate>
                    </div>
-                    <at-row-item 
+                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ORGANIZATION')}}"
                        value="{{ project.summary_fields.organization.name }}"
                        value-link="/#/organizations/{{ project.organization }}">
--- 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'];
--- 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;
--- 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'
    };
 }

--- 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 @@
 <div class="at-List-toolbar--attached">
-  <div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">Compact</div>
-  <div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">Expanded</div>
-  <div class="at-List-toolbar-item">Sort</div>
+    <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">
+        <button
+            class="at-List-toolbarDropdown-toggle dropdown-toggle"
+            data-display="static"
+            data-toggle="dropdown">
+            <span class="at-List-toolbarDropdown-toggleText">{{ sortValue.label }}</span>
+            <i class="fa fa-angle-down" aria-hidden="true"></i>
+        </button>
+        <ul class="at-List-toolbarDropdown-menu dropdown-menu">
+            <li class="at-List-toolbarDropdown-menuHeader dropdown-item">
+                {{ vm.strings.get('toolbar.SORT_BY') }}
+            </li>
+            <li
+                class="dropdown-item"
+                ng-repeat="option in sortOptions"
+                ng-click="onSort(option)">
+                {{ option.label }}
+            </li>
+        </ul>
+    </div>
 </div>