utilize new list on projects template list

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

@@ -0,0 +1,12 @@
+function IndexTemplatesController (strings, dataset) {
+    let vm = this;
+    vm.strings = strings;
+    vm.count = dataset.data.count;
+}
+
+IndexTemplatesController.$inject = [
+    'TemplatesStrings',
+    'Dataset'
+];
+
+export default IndexTemplatesController;

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

@@ -1,11 +1,9 @@
 import TemplatesStrings from './templates.strings';
-import ListController from './list-templates.controller';
 
 const MODULE_NAME = 'at.features.templates';
 
 angular
     .module(MODULE_NAME, [])
-    .controller('ListController', ListController)
     .service('TemplatesStrings', TemplatesStrings);
 
 export default MODULE_NAME;

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

@@ -0,0 +1,10 @@
+<div ui-view="form"></div>
+<at-panel>
+    <at-panel-heading>
+        {{:: vm.strings.get('list.PANEL_TITLE') }}
+        <div class="at-Panel-headingTitleBadge" ng-show="vm.count">
+            {{ vm.count }}
+        </div>
+    </at-panel-heading>
+    <div ui-view="templatesList"></div>
+</at-panel>

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

@@ -0,0 +1,55 @@
+import { N_ } from '../../../src/i18n';
+import templatesListController from '../templatesList.controller';
+
+const templatesListTemplate = require('~features/templates/templatesList.view.html');
+
+export default {
+    url: "/templates",
+    name: 'projects.edit.templates',
+    params: {
+        template_search: {
+            dynamic: true,
+            value: {
+            },
+        }
+    },
+    ncyBreadcrumb: {
+        label: N_("JOB TEMPLATES")
+    },
+    views: {
+        'related': {
+            controller: templatesListController,
+            templateUrl: templatesListTemplate,
+            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 searchPath = GetBasePath('unified_job_templates');
+
+                const searchParam = _.assign($stateParams.template_search, {
+                    jobtemplate__project: $stateParams.project_id });
+
+                Wait('start');
+                return qs.search(searchPath, searchParam)
+                    .finally(() => Wait('stop'));
+            }
+        ],
+    }
+};

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

@@ -1,16 +1,14 @@
-import ListController from './list-templates.controller';
-const listTemplate = require('~features/templates/list.view.html');
-import { N_ } from '../../src/i18n';
+import { N_ } from '../../../src/i18n';
+import templatesListController from '../templatesList.controller';
+import indexController from '../index.controller';
+
+const indexTemplate = require('~features/templates/index.view.html');
+const templatesListTemplate = require('~features/templates/templatesList.view.html');
 
 export default {
     name: 'templates',
     route: '/templates',
     ncyBreadcrumb: {
-        // TODO: this would be best done with our
-        // strings file pattern, but it's not possible to
-        // get a handle on this route within a DI based
-        // on the state tree generation as present in
-        // src/templates currently
         label: N_("TEMPLATES")
     },
     data: {
@@ -33,8 +31,13 @@ export default {
     searchPrefix: 'template',
     views: {
         '@': {
-            controller: ListController,
-            templateUrl: listTemplate,
+            templateUrl: indexTemplate,
+            controller: indexController,
+            controllerAs: 'vm'
+        },
+        'templatesList@templates': {
+            controller: templatesListController,
+            templateUrl: templatesListTemplate,
             controllerAs: 'vm',
         }
     },

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

@@ -0,0 +1,114 @@
+<at-panel-body>
+    <div class="at-List-toolbar">
+        <smart-search
+            class="at-List-search"
+            django-model="templates"
+            base-path="unified_job_templates"
+            iterator="template"
+            list="list"
+            dataset="template_dataset"
+            collection="collection"
+            search-tags="searchTags"
+            query-set="querySet">
+        </smart-search>
+        <div class="at-List-toolbarAction" ng-show="canAdd">
+            <button
+                type="button"
+                class="at-List-toolbarActionButton at-Button--success"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+                    &#43; {{:: vm.strings.get('list.ADD_BUTTON_LABEL') }}
+                    <span class="at-List-toolbarDropdownCarat"></span>
+                    <span class="sr-only">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
+                <li>
+                    <a ui-sref="templates.addJobTemplate">
+                        {{:: vm.strings.get('list.ADD_DD_JT_LABEL') }}
+                    </a>
+                </li>
+                <li>
+                    <a ui-sref="templates.addWorkflowJobTemplate">
+                        {{:: vm.strings.get('list.ADD_DD_WF_LABEL') }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <at-list results="templates">
+        <!-- TODO: implement resources are missing red indicator as present in mockup -->
+        <at-row ng-repeat="template in templates"
+            ng-class="{'at-Row--active': (template.id === vm.activeId)}"
+            template-id="{{ template.id }}">
+            <div class="at-Row--invalid" ng-show="vm.isInvalid(template)">
+                <at-popover state="vm.invalidTooltip"></at-popover>
+            </div>
+            <div class="at-Row-items">
+                <at-row-item
+                    header-value="{{ template.name }}"
+                    header-link="/#/templates/job_template/{{ template.id }}"
+                    header-tag="{{ vm.templateTypes[template.type] }}"
+                    ng-if="template.type === 'job_template'">
+                </at-row-item>
+                <at-row-item
+                    header-value="{{ template.name }}"
+                    header-link="/#/templates/workflow_job_template/{{ template.id }}"
+                    header-tag="{{ vm.templateTypes[template.type] }}"
+                    ng-if="template.type === 'workflow_job_template'">
+                </at-row-item>
+                <at-row-item
+                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ACTIVITY') }}"
+                    smart-status="template">
+                </at-row-item>
+                <at-row-item
+                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
+                    value="{{ template.summary_fields.inventory.name }}"
+                    value-link="/#/inventories/inventory/{{ template.summary_fields.inventory.id }}">
+                </at-row-item>
+                <at-row-item
+                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
+                    value="{{ template.summary_fields.project.name }}"
+                    value-link="/#/projects/{{ template.summary_fields.project.id }}">
+                </at-row-item>
+                <!-- TODO: add see more for creds -->
+                <at-row-item
+                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
+                    tag-values="template.summary_fields.credentials"
+                    tags-are-creds="true">
+                </at-row-item>
+                <at-row-item
+                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
+                    value="{{ vm.getModified(template) }}">
+                </at-row-item>
+                <at-row-item
+                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
+                    value="{{ vm.getLastRan(template) }}">
+                </at-row-item>
+                <labels-list class="LabelList" show-delete="false" is-row-item="true">
+                </labels-list>
+            </div>
+            <div class="at-Row-actions">
+                <at-launch-template template="template"
+                    ng-show="template.summary_fields.user_capabilities.start">
+                </at-launch-template>
+                <at-row-action icon="fa-calendar" ng-click="vm.scheduleTemplate(template)"
+                    ng-show="template.summary_fields.user_capabilities.schedule">
+                </at-row-action>
+                <at-row-action icon="fa-copy" ng-click="vm.copyTemplate(template)"
+                    ng-show="template.summary_fields.user_capabilities.copy">
+                </at-row-action>
+                <at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)"
+                    ng-show="template.summary_fields.user_capabilities.delete">
+                </at-row-action>
+            </div>
+        </at-row>
+    </at-list>
+    <paginate
+        collection="collection"
+        dataset="template_dataset"
+        iterator="template"
+        base-path="unified_job_templates"
+        query-set="querySet">
+    </paginate>
+</at-panel-body>

awx/ui/client/src/projects/main.js

@@ -13,7 +13,8 @@ import { N_ } from '../i18n';
 import GetProjectPath from './factories/get-project-path.factory';
 import GetProjectIcon from './factories/get-project-icon.factory';
 import GetProjectToolTip from './factories/get-project-tool-tip.factory';
-import ProjectsTemplatesRoute from './projects-templates.route';
+
+import ProjectsTemplatesRoute from '~features/templates/routes/projectsTemplatesList.route';
 import ProjectsStrings from './projects.strings';
 
 export default

awx/ui/client/src/templates/labels/labelsList.directive.js

@@ -93,8 +93,10 @@ export default
                     };
 
                     if (scope.$parent.$parent.template) {
-                        scope.labels = scope.$parent.$parent.template.summary_fields.labels.results.slice(0, 5);
-                        scope.count = scope.$parent.$parent.template.summary_fields.labels.count;
+                        if (_.has(scope, '$parent.$parent.template.summary_fields.labels.results')) {
+                            scope.labels = scope.$parent.$parent.template.summary_fields.labels.results.slice(0, 5);
+                            scope.count = scope.$parent.$parent.template.summary_fields.labels.count;
+                        }
                     } else if (scope.$parent.$parent.job) {
                         if (_.has(scope, '$parent.$parent.job.summary_fields.labels.results')) {
                             scope.labels = scope.$parent.$parent.job.summary_fields.labels.results.slice(0, 5);

awx/ui/client/src/templates/main.js

@@ -19,7 +19,7 @@ import WorkflowForm from './workflows.form';
 import InventorySourcesList from './inventory-sources.list';
 import TemplateList from './templates.list';
 import TemplatesStrings from './templates.strings';
-import listRoute from '~features/templates/list.route.js';
+import listRoute from '~features/templates/routes/templatesList.route.js';
 import templateCompletedJobsRoute from '~features/jobs/routes/templateCompletedJobs.route.js';
 
 export default