update portal mode templates list to new style

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

@@ -0,0 +1,79 @@
+import { templateUrl } from '../../../src/shared/template-url/template-url.factory';
+import { N_ } from '../../../src/i18n';
+import templatesListController from '../templatesList.controller';
+
+const templatesListTemplate = require('~features/templates/templatesList.view.html');
+
+export default {
+    name: 'portalMode',
+    url: '/portal',
+    reloadOnSearch: true,
+    ncyBreadcrumb: {
+        label: N_('MY VIEW')
+    },
+    data: {
+        socket: {
+            "groups": {
+                "jobs": ["status_changed"]
+            }
+        }
+    },
+    params: {
+        template_search: {
+            dynamic: true,
+            value: {
+                type: 'workflow_job_template,job_template',
+            },
+        }
+    },
+    searchPrefix: 'template',
+    views: {
+        '@': {
+            templateUrl: templateUrl('portal-mode/portal-mode-layout'),
+            controller: ['$scope', '$state',
+                function($scope, $state) {
+
+                    $scope.filterUser = function() {
+                        $state.go('portalMode.myJobs');
+                    };
+
+                    $scope.filterAll = function() {
+                        $state.go('portalMode.allJobs');
+                    };
+                }
+            ]
+        },
+        'templates@portalMode': {
+            templateUrl: templatesListTemplate,
+            controller: templatesListController,
+            controllerAs: 'vm'
+        }
+    },
+    resolve: {
+        resolvedModels: [
+            'JobTemplateModel',
+            'WorkflowJobTemplateModel',
+            (JobTemplate, WorkflowJobTemplate) => {
+                const models = [
+                    new JobTemplate(['options']),
+                    new WorkflowJobTemplate(['options']),
+                ];
+                return Promise.all(models);
+            },
+        ],
+        Dataset: [
+            '$stateParams',
+            'Wait',
+            'GetBasePath',
+            'QuerySet',
+            ($stateParams, Wait, GetBasePath, qs) => {
+                const searchParam = $stateParams.template_search;
+                const searchPath = GetBasePath('unified_job_templates');
+
+                Wait('start');
+                return qs.search(searchPath, searchParam)
+                    .finally(() => Wait('stop'));
+            }
+        ],
+    }
+};

awx/ui/client/src/portal-mode/main.js

@@ -4,16 +4,14 @@
  * All Rights Reserved
  *************************************************/
 
-import route from './portal-mode.route';
+// import route from './portal-mode.route';
+import templatesRoute from '~features/templates/routes/portalModeTemplatesList.route.js';
 import myJobsRoute from '~features/jobs/routes/portalModeMyJobs.route.js';
 import allJobsRoute from '~features/jobs/routes/portalModeAllJobs.route.js';
-import PortalJobTemplateList from './portal-job-templates.list';
-
 export default
  	angular.module('portalMode', [])
-    .factory('PortalJobTemplateList', PortalJobTemplateList)
  		.run(['$stateExtender', function($stateExtender){
- 			  $stateExtender.addState(route);
+        $stateExtender.addState(templatesRoute);
         $stateExtender.addState(myJobsRoute);
         $stateExtender.addState(allJobsRoute);
  		}]);

awx/ui/client/src/portal-mode/portal-job-templates.list.js

@@ -1,40 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-
-export default ['i18n', function(i18n) {
-    return {
-
-        name: 'job_templates',
-        iterator: 'job_template',
-        editTitle: i18n._('JOB TEMPLATES'),
-        listTitle: i18n._('JOB TEMPLATES'),
-        index: false,
-        hover: true,
-        well: true,
-        emptyListText: i18n._('There are no job templates to display at this time'),
-        searchBarFullWidth: true,
-        fields: {
-            name: {
-                key: true,
-                label: i18n._('Name'),
-                columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8',
-                linkTo: '/#/templates/job_template/{{job_template.id}}',
-                awToolTip: '{{job_template.description | sanitize}}',
-                dataPlacement: 'top'
-            }
-        },
-
-        actions: {
-        },
-
-        fieldActions: {
-            submit: {
-                // uses the at-launch-template directive
-                launch: true
-            }
-        }
-    };}];

awx/ui/client/src/portal-mode/portal-mode-job-templates.controller.js

@@ -1,15 +0,0 @@
-/*************************************************
- * Copyright (c) 2016 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-export function PortalModeJobTemplatesController($scope, PortalJobTemplateList, Dataset) {
-    var list = PortalJobTemplateList;
-    // search init
-    $scope.list = list;
-    $scope[`${list.iterator}_dataset`] = Dataset.data;
-    $scope[list.name] = $scope[`${list.iterator}_dataset`].results;
-}
-
-PortalModeJobTemplatesController.$inject = ['$scope','PortalJobTemplateList', 'job_templatesDataset'];

awx/ui/client/src/portal-mode/portal-mode-layout.partial.html

@@ -1,9 +1,18 @@
 <div class="tab-pane PortalMode">
     <div ng-cloak id="portal-landing">
         <div class="PortalMode-container">
-            <div ui-view="job-templates" class="PortalMode-panel--left Panel">
+            <div class="PortalMode-panel PortalMode-panel--left Panel">
+                <div id="portal-container-job-templates">
+                    <div class="List-header">
+                        <div class="List-title">
+                            <div class="List-titleText" translate>JOB TEMPLATES</div>
+                        </div>
+                    </div>
+                    <div ui-view="templates">
+                    </div>
+                </div>
             </div>
-            <div class="PortalMode-panel--right">
+            <div class="PortalMode-panel PortalMode-panel--right">
                 <div id="portal-container-jobs" class="Panel">
                     <div class="List-header">
                         <div class="List-title">

awx/ui/client/src/portal-mode/portal-mode.block.less

@@ -10,20 +10,23 @@
 .PortalMode-panel--left{
 	.OnePlusOne-panel--left;
 }
+
 .PortalMode-panel--right{
 	.OnePlusOne-panel--right;
 	.List-tableHeader:last-of-type{
 		text-align:left;
 	}
+}
 
-    .List-header {
+.PortalMode-panel .List-header {
 		height: 14px;
 		margin-bottom: 20px;
-    }
 }
+
 .PortalMode-panelHeader{
 	.OnePlusOne-panelHeader;
 }
+
 .PortalMode-filterHolder {
 	position: absolute;
 	right: 1px;

awx/ui/client/src/portal-mode/portal-mode.route.js

@@ -1,66 +0,0 @@
-import { templateUrl } from '../shared/template-url/template-url.factory';
-import { PortalModeJobTemplatesController } from './portal-mode-job-templates.controller';
-import { N_ } from '../i18n';
-
-// Using multiple named views requires a parent layout
-// https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
-export default {
-    name: 'portalMode',
-    url: '/portal?{job_template_search:queryset}',
-    reloadOnSearch: true,
-    ncyBreadcrumb: {
-        label: N_('MY VIEW')
-    },
-    params: {
-        job_template_search: {
-            value: {
-                page_size: '20',
-                order_by: 'name'
-            },
-            dynamic: true
-        }
-    },
-    data: {
-        socket: {
-            "groups": {
-                "jobs": ["status_changed"]
-            }
-        }
-    },
-    views: {
-        '@': {
-            templateUrl: templateUrl('portal-mode/portal-mode-layout'),
-            controller: ['$scope', '$state',
-                function($scope, $state) {
-
-                    $scope.filterUser = function() {
-                        $state.go('portalMode.myJobs');
-                    };
-
-                    $scope.filterAll = function() {
-                        $state.go('portalMode.allJobs');
-                    };
-                }
-            ]
-        },
-        // named ui-views inside the above
-        'job-templates@portalMode': {
-            templateProvider: function(PortalJobTemplateList, generateList) {
-                let html = generateList.build({
-                    list: PortalJobTemplateList,
-                    mode: 'edit'
-                });
-                return html + '<prompt prompt-data="promptData" on-finish="launchJob()"></prompt>';
-            },
-            controller: PortalModeJobTemplatesController
-        }
-    },
-    resolve: {
-        job_templatesDataset: ['PortalJobTemplateList', 'QuerySet', '$stateParams', 'GetBasePath',
-            function(list, qs, $stateParams, GetBasePath) {
-                let path = GetBasePath(list.basePath) || GetBasePath(list.name);
-                return qs.search(path, $stateParams[`${list.iterator}_search`]);
-            }
-        ]
-    }
-};