Merge pull request #3576 from marshmalien/feat-toolbar-sort-template-list

Add sort toolbar to template lists

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

awx/ui/client/features/templates/routes/organizationsTemplatesList.route.js

@@ -21,7 +21,11 @@ export default {
         template_search: {
             dynamic: true,
             value: {
-                type: 'workflow_job_template,job_template',
+                type: 'job_template',
+                order_by: 'name',
+                page_size: '20',
+                or__jobtemplate__project__organization: null,
+                or__jobtemplate__inventory__organization: null
             },
         }
     },
@@ -60,11 +64,11 @@ export default {
             ($stateParams, Wait, GetBasePath, qs) => {
                 const searchPath = GetBasePath('unified_job_templates');
 
-                const searchParam = _.assign($stateParams.template_search, {
+                const searchParam = Object.assign(
-                    or__project__organization: $stateParams.organization_id,
+                    $stateParams.template_search, {
-                    or__jobtemplate__inventory__organization: $stateParams.organization_id,
+                    or__jobtemplate__project__organization: $stateParams.organization_id,
-                });
+                    or__jobtemplate__inventory__organization: $stateParams.organization_id}
-
+                );
                 Wait('start');
                 return qs.search(searchPath, searchParam)
                     .finally(() => Wait('stop'));

awx/ui/client/features/templates/routes/projectsTemplatesList.route.js

@@ -6,11 +6,15 @@ const templatesListTemplate = require('~features/templates/templatesList.view.ht
 export default {
     url: "/templates",
     name: 'projects.edit.templates',
+    searchPrefix: 'template',
     params: {
         template_search: {
             dynamic: true,
             value: {
-                type: 'workflow_job_template,job_template',
+                type: 'job_template',
+                order_by: 'name',
+                page_size: '20',
+                jobtemplate__project: null
             },
         }
     },

awx/ui/client/features/templates/routes/templatesList.route.js

@@ -25,6 +25,8 @@ export default {
             dynamic: true,
             value: {
                 type: 'workflow_job_template,job_template',
+                order_by: 'name',
+                page_size: '20'
             },
         }
     },

awx/ui/client/features/templates/templates.strings.js

@@ -143,6 +143,11 @@ function TemplatesStrings (BaseString) {
         CANCEL: t.s('CANCEL'),
         SAVE_AND_EXIT: t.s('SAVE & EXIT')
     };
+
+    ns.sort = {
+        NAME_ASCENDING: t.s('Name (Ascending)'),
+        NAME_DESCENDING: t.s('Name (Descending)')
+    };
 }
 
 TemplatesStrings.$inject = ['BaseStringService'];

awx/ui/client/features/templates/templatesList.controller.js

@@ -36,6 +36,7 @@ function ListTemplatesController(
     let refreshAfterLaunchClose = false;
     let pendingRefresh = false;
     let refreshTimerRunning = false;
+    let paginateQuerySet = {};
 
     vm.strings = strings;
     vm.templateTypes = mapChoices(choices);
@@ -61,6 +62,39 @@ function ListTemplatesController(
     };
     vm.dataset = Dataset.data;
     vm.templates = Dataset.data.results;
+    vm.defaultParams = $state.params.template_search;
+
+    const toolbarSortDefault = {
+        label: `${strings.get('sort.NAME_ASCENDING')}`,
+        value: 'name'
+    };
+
+    vm.toolbarSortOptions = [
+        toolbarSortDefault,
+        { label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' }
+    ];
+
+    vm.toolbarSortValue = toolbarSortDefault;
+
+    $scope.$on('updateDataset', (event, dataset, queryset) => {
+        paginateQuerySet = queryset;
+    });
+
+    vm.onToolbarSort = (sort) => {
+        vm.toolbarSortValue = sort;
+
+        const queryParams = Object.assign(
+            {},
+            $state.params.template_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        // Update params
+        $state.go('.', {
+            template_search: queryParams
+        }, { notify: false, location: 'replace' });
+    };
 
     $scope.$watch('vm.dataset.count', () => {
         $scope.$emit('updateCount', vm.dataset.count, 'templates');
@@ -75,6 +109,7 @@ function ListTemplatesController(
         } else {
             vm.activeId = "";
         }
+        setToolbarSort();
     }, true);
 
     $scope.$on(`ws-jobs`, () => {
@@ -203,15 +238,25 @@ function ListTemplatesController(
         }
     };
 
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'template_search.order_by');
+        const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
+        if (sortValue) {
+            vm.toolbarSortValue = sortValue;
+        } else {
+            vm.toolbarSortValue = toolbarSortDefault;
+        }
+    }
+
     function refreshTemplates() {
         Wait('start');
         let path = GetBasePath('unified_job_templates');
         qs.search(path, $state.params.template_search, { 'X-WS-Session-Quiet': true })
-            .then(function(searchResponse) {
+        .then(function(searchResponse) {
-                vm.dataset = searchResponse.data;
+            vm.dataset = searchResponse.data;
-                vm.templates = vm.dataset.results;
+            vm.templates = vm.dataset.results;
-            })
+        })
-            .finally(() => Wait('stop'));
+        .finally(() => Wait('stop'));
         pendingRefresh = false;
         refreshTimerRunning = true;
         $timeout(() => {

awx/ui/client/features/templates/templatesList.view.html

@@ -8,6 +8,7 @@
             list="vm.list"
             collection="vm.templates"
             dataset="vm.dataset"
+            default-params="vm.defaultParams"
             search-tags="vm.searchTags"
             search-bar-full-width="vm.isPortalMode">
         </smart-search>
@@ -33,10 +34,13 @@
     </div>
     <at-list-toolbar
         ng-if="vm.templates.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.templates" id="templates_list">
         <at-row ng-repeat="template in vm.templates"

awx/ui/client/src/organizations/list/organizations-list.controller.js

@@ -43,45 +43,50 @@ export default ['$stateParams', '$scope', '$rootScope',
 
         function parseCardData(cards) {
             return cards.map(function(card) {
-                var val = {},
+                var val = {};
-                    url = '/#/organizations/' + card.id + '/';
                 val.user_capabilities = card.summary_fields.user_capabilities;
                 val.name = card.name;
                 val.id = card.id;
                 val.description = card.description || undefined;
                 val.links = [];
                 val.links.push({
-                    href: url + 'users',
+                    sref: `organizations.users({organization_id: ${card.id}})`,
+                    srefOpts: { inherit: false },
                     name: i18n._("USERS"),
                     count: card.summary_fields.related_field_counts.users,
                     activeMode: 'users'
                 });
                 val.links.push({
-                    href: url + 'teams',
+                    sref: `organizations.teams({organization_id: ${card.id}})`,
+                    srefOpts: { inherit: false },
                     name: i18n._("TEAMS"),
                     count: card.summary_fields.related_field_counts.teams,
                     activeMode: 'teams'
                 });
                 val.links.push({
-                    href: url + 'inventories',
+                    sref: `organizations.inventories({organization_id: ${card.id}})`,
+                    srefOpts: { inherit: false },
                     name: i18n._("INVENTORIES"),
                     count: card.summary_fields.related_field_counts.inventories,
                     activeMode: 'inventories'
                 });
                 val.links.push({
-                    href: url + 'projects',
+                    sref: `organizations.projects({organization_id: ${card.id}})`,
+                    srefOpts: { inherit: false },
                     name: i18n._("PROJECTS"),
                     count: card.summary_fields.related_field_counts.projects,
                     activeMode: 'projects'
                 });
                 val.links.push({
-                    href: url + 'job_templates',
+                    sref: `organizations.job_templates({organization_id: ${card.id}, or__jobtemplate__project__organization: ${card.id}, or__jobtemplate__inventory__organization: ${card.id}})`,
+                    srefOpts: { inherit: false },
                     name: i18n._("JOB TEMPLATES"),
                     count: card.summary_fields.related_field_counts.job_templates,
                     activeMode: 'job_templates'
                 });
                 val.links.push({
-                    href: url + 'admins',
+                    sref: `organizations.admins({organization_id: ${card.id}})`,
+                    srefOpts: { inherit: false },
                     name: i18n._("ADMINS"),
                     count: card.summary_fields.related_field_counts.admins,
                     activeMode: 'admins'

awx/ui/client/src/organizations/list/organizations-list.partial.html

@@ -83,7 +83,8 @@
                                 {{ link.count }}
                             </span>
                             <a class="OrgCards-linkName"
-                                ng-href="{{ link.href }}">
+                                ui-sref="{{ link.sref }}"
+                                ui-sref-opts="{{ link.srefOpts }}">
                                 {{ link.name }}
                             </a>
                         </div>