From 839d681b70fb6979b0694fb2c20454c30c904001 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Wed, 8 May 2013 11:18:59 -0400 Subject: [PATCH] Latest UI changes --- lib/static/web/app/index.html | 4 + lib/static/web/app/js/app.js | 14 +- .../web/app/js/controllers/Inventories.js | 27 +- lib/static/web/app/js/controllers/Teams.js | 328 ++++++++++++++++++ lib/static/web/app/js/forms/Teams.js | 65 ++++ lib/static/web/app/js/helpers/refresh.js | 4 + lib/static/web/app/js/helpers/teams.js | 109 ++++++ lib/static/web/app/js/lists/Teams.js | 59 ++++ lib/static/web/app/partials/teams.html | 3 + 9 files changed, 602 insertions(+), 11 deletions(-) create mode 100644 lib/static/web/app/js/controllers/Teams.js create mode 100644 lib/static/web/app/js/forms/Teams.js create mode 100644 lib/static/web/app/js/helpers/teams.js create mode 100644 lib/static/web/app/js/lists/Teams.js create mode 100644 lib/static/web/app/partials/teams.html diff --git a/lib/static/web/app/index.html b/lib/static/web/app/index.html index bc5c8dc1dd..92c5857289 100644 --- a/lib/static/web/app/index.html +++ b/lib/static/web/app/index.html @@ -26,17 +26,20 @@ + + + @@ -48,6 +51,7 @@ + diff --git a/lib/static/web/app/js/app.js b/lib/static/web/app/js/app.js index 33803a25f2..eba7c9ac0a 100644 --- a/lib/static/web/app/js/app.js +++ b/lib/static/web/app/js/app.js @@ -33,6 +33,9 @@ angular.module('ansible', [ 'HostHelper', 'GroupFormDefinition', 'GroupListDefinition', + 'TeamsListDefinition', + 'TeamFormDefinition', + 'TeamHelper' ]) .config(['$routeProvider', function($routeProvider) { $routeProvider. @@ -60,7 +63,7 @@ angular.module('ansible', [ when('/inventories/:id/groups/add', { templateUrl: 'partials/inventories.html', controller: GroupsAdd }). - when('/inventories/:inventory_id/groups/:id', { templateUrl: 'partials/inventories.html', + when('/inventories/:inventory_id/groups/:id', { templateUrl: 'partials/inventories.html', controller: GroupsEdit }). when('/organizations', { templateUrl: 'partials/organizations.html', @@ -83,6 +86,15 @@ angular.module('ansible', [ when('/organizations/:organization_id/users/:id', { templateUrl: 'partials/users.html', controller: UsersEdit }). + + when('/teams', { templateUrl: 'partials/teams.html', + controller: TeamsList }). + + when('/teams/add', { templateUrl: 'partials/teams.html', + controller: TeamsAdd }). + + when('/teams/:id', { templateUrl: 'partials/teams.html', + controller: TeamsEdit }). when('/users', { templateUrl: 'partials/users.html', controller: UsersList }). diff --git a/lib/static/web/app/js/controllers/Inventories.js b/lib/static/web/app/js/controllers/Inventories.js index a7a20ea740..670d7553c7 100644 --- a/lib/static/web/app/js/controllers/Inventories.js +++ b/lib/static/web/app/js/controllers/Inventories.js @@ -105,17 +105,24 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res }); if (scope.selected.length > 0 ) { + var inventory = null; for (var i=0; i < scope.selected.length; i++) { - var inventory = scope.inventoies[scope.selected[i]].name; - Rest.post(scope.inventories[scope.selected[i]]) - .success( function(data, status, headers, config) { - scope.queue.push({ result: 'success', data: data, status: status }); - scope.$emit('callFinished'); - }) - .error( function(data, status, headers, config) { - scope.queue.push({ result: 'error', data: data, status: status, headers: headers }); - scope.$emit('callFinished'); - }); + for (var j=0; j < scope.inventories.length; j++) { + if (scope.inventories[j].id == scope.selected[i]) { + inventory = scope.inventories[j]; + } + } + if (inventory !== null) { + Rest.post(inventory) + .success( function(data, status, headers, config) { + scope.queue.push({ result: 'success', data: data, status: status }); + scope.$emit('callFinished'); + }) + .error( function(data, status, headers, config) { + scope.queue.push({ result: 'error', data: data, status: status, headers: headers }); + scope.$emit('callFinished'); + }); + } } } else { diff --git a/lib/static/web/app/js/controllers/Teams.js b/lib/static/web/app/js/controllers/Teams.js new file mode 100644 index 0000000000..4507b7a773 --- /dev/null +++ b/lib/static/web/app/js/controllers/Teams.js @@ -0,0 +1,328 @@ +/************************************ + * Copyright (c) 2013 AnsibleWorks, Inc. + * + * + * Teams.js + * + * Controller functions for the Team model. + * + */ + +'use strict'; + +function TeamsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, TeamList, + GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, + ClearScope, ProcessErrors, SetTeamListeners) +{ + ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior + //scope. + var list = TeamList; + var defaultUrl = '/api/v1/teams/'; + var view = GenerateList; + var paths = $location.path().replace(/^\//,'').split('/'); + var mode = (paths[0] == 'teams') ? 'edit' : 'select'; // if base path 'teams', we're here to add/edit teams + var scope = view.inject(list, { mode: mode }); // Inject our view + scope.selected = []; + + SetTeamListeners({ scope: scope, set: 'teams', iterator: list.iterator }); + SearchInit({ scope: scope, set: 'teams', list: list, url: defaultUrl }); + PaginateInit({ scope: scope, list: list, url: defaultUrl }); + scope.search(list.iterator); + + LoadBreadCrumbs(); + + scope.addTeam = function() { + $location.path($location.path() + '/add'); + } + + scope.editTeam = function(id) { + $location.path($location.path() + '/' + id); + } + + scope.deleteTeam = function(id, name) { + + var action = function() { + var url = defaultUrl + id + '/'; + Rest.setUrl(url); + Rest.delete() + .success( function(data, status, headers, config) { + $('#prompt-modal').modal('hide'); + scope.search(list.iterator); + }) + .error( function(data, status, headers, config) { + $('#prompt-modal').modal('hide'); + ProcessErrors(scope, data, status, null, + { hdr: 'Error!', msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status }); + }); + }; + + Prompt({ hdr: 'Delete', + body: 'Are you sure you want to delete ' + name + '?', + action: action + }); + } + + scope.lookupOrganization = function(organization_id) { + Rest.setUrl('/api/v1/organization/' + organization_id + '/'); + Rest.get() + .success( function(data, status, headers, config) { + return data.name; + }); + } + + scope.finishSelection = function() { + Rest.setUrl('/api/v1' + $location.path() + '/'); // We're assuming the path matches the api path. + // Will this always be true?? + scope.queue = []; + + scope.$on('callFinished', function() { + // We call the API for each selected user. We need to hang out until all the api + // calls are finished. + if (scope.queue.length == scope.selected.length) { + // All the api calls finished + $('input[type="checkbox"]').prop("checked",false); + scope.selected = []; + var errors = 0; + for (var i=0; i < scope.queue.length; i++) { + if (scope.queue[i].result == 'error') { + errors++; + // there is no way to know which user raised the error. no data comes + // back from the api call. + // $('td.username-column').each(function(index) { + // if ($(this).text() == scope.queue[i].username) { + // $(this).addClass("error"); + // } + // }); + } + } + if (errors > 0) { + Alert('Error', 'There was an error while adding one or more of the selected teams.'); + } + else { + ReturnToCaller(1); + } + } + }); + + if (scope.selected.length > 0 ) { + var team = null; + for (var i=0; i < scope.selected.length; i++) { + for (var j=0; j < scope.teams.length; j++) { + if (scope.teams[j].id == scope.selected[i]) { + team = scope.teams[j]; + } + } + if (team !== null) { + Rest.post(team) + .success( function(data, status, headers, config) { + scope.queue.push({ result: 'success', data: data, status: status }); + scope.$emit('callFinished'); + }) + .error( function(data, status, headers, config) { + scope.queue.push({ result: 'error', data: data, status: status, headers: headers }); + scope.$emit('callFinished'); + }); + } + } + } + else { + ReturnToCaller(); + } + } + + scope.toggle_team = function(idx) { + if (scope.selected.indexOf(idx) > -1) { + scope.selected.splice(scope.selected.indexOf(idx),1); + } + else { + scope.selected.push(idx); + } + } +} + +TeamsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'TeamList', 'GenerateList', + 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors', + 'SetTeamListeners' ]; + + +function TeamsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, TeamForm, + GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, + GenerateList, OrganizationList, SearchInit, PaginateInit, TeamLookUpOrganizationInit) +{ + ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior + //scope. + + // Inject dynamic view + var defaultUrl = '/api/v1/teams/'; + var form = TeamForm; + var generator = GenerateForm; + var scope = generator.inject(form, {mode: 'add', related: false}); + generator.reset(); + LoadBreadCrumbs(); + TeamLookUpOrganizationInit({ scope: scope }); + + // Save + scope.formSave = function() { + Rest.setUrl(defaultUrl); + var data = {} + for (var fld in form.fields) { + data[fld] = scope[fld]; + } + Rest.post(data) + .success( function(data, status, headers, config) { + ReturnToCaller(); + }) + .error( function(data, status, headers, config) { + ProcessErrors(scope, data, status, form, + { hdr: 'Error!', msg: 'Failed to add new inventory. Post returned status: ' + status }); + }); + }; + + // Reset + scope.formReset = function() { + // Defaults + generator.reset(); + }; +} + +TeamsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'TeamForm', 'GenerateForm', + 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GenerateList', + 'OrganizationList', 'SearchInit', 'PaginateInit', 'TeamLookUpOrganizationInit' ]; + + +function TeamsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, TeamForm, + GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, + RelatedPaginateInit, ReturnToCaller, ClearScope, TeamLookUpOrganizationInit, Prompt) +{ + ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior + //scope. + + var defaultUrl='/api/v1/teams/'; + var generator = GenerateForm; + var form = InventoryForm; + var scope = generator.inject(form, {mode: 'edit', related: true}); + generator.reset(); + var base = $location.path().replace(/^\//,'').split('/')[0]; + var master = {}; + var id = $routeParams.id; + var relatedSets = {}; + + TeamLookUpOrganizationInit({ scope: scope }); + + // After inventory is loaded, retrieve each related set and any lookups + scope.$on('teamLoaded', function() { + Rest.setUrl(scope['organization_url']); + Rest.get() + .success( function(data, status, headers, config) { + scope['organization_name'] = data.name; + master['organization_name'] = data.name; + }) + .error( function(data, status, headers, config) { + ProcessErrors(scope, data, status, null, + { hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.orgnization_url + '. GET status: ' + status }); + }); + for (var set in relatedSets) { + scope.search(relatedSets[set].iterator); + } + }); + + // Retrieve detail record and prepopulate the form + Rest.setUrl(defaultUrl + ':id/'); + Rest.get({ params: {id: id} }) + .success( function(data, status, headers, config) { + LoadBreadCrumbs({ path: '/teams/' + id, title: data.name }); + for (var fld in form.fields) { + if (data[fld]) { + scope[fld] = data[fld]; + master[fld] = scope[fld]; + } + } + var related = data.related; + for (var set in form.related) { + if (related[set]) { + relatedSets[set] = { url: related[set], iterator: form.related[set].iterator }; + } + } + + // Initialize related search functions. Doing it here to make sure relatedSets object is populated. + RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets }); + RelatedPaginateInit({ scope: scope, relatedSets: relatedSets }); + scope['organization_url'] = data.related.organization; + scope.$emit('teamLoaded'); + }) + .error( function(data, status, headers, config) { + ProcessErrors(scope, data, status, form, + { hdr: 'Error!', msg: 'Failed to retrieve team: ' + $routeParams.id + '. GET status: ' + status }); + }); + + // Save changes to the parent + scope.formSave = function() { + Rest.setUrl(defaultUrl + $routeParams.id); + var data = {} + for (var fld in form.fields) { + data[fld] = scope[fld]; + } + Rest.put(data) + .success( function(data, status, headers, config) { + var base = $location.path().replace(/^\//,'').split('/')[0]; + (base == 'inventories') ? ReturnToCaller() : ReturnToCaller(1); + }) + .error( function(data, status, headers, config) { + ProcessErrors(scope, data, status, form, + { hdr: 'Error!', msg: 'Failed to update team: ' + $routeParams.id + '. PUT status: ' + status }); + }); + }; + + // Cancel + scope.formReset = function() { + generator.reset(); + for (var fld in master) { + scope[fld] = master[fld]; + } + }; + + // Related set: Add button + scope.add = function(set) { + $rootScope.flashMessage = null; + $location.path('/' + base + '/' + $routeParams.id + '/' + set + '/add'); + }; + + // Related set: Edit button + scope.edit = function(set, id, name) { + $rootScope.flashMessage = null; + $location.path('/' + base + '/' + $routeParams.id + '/' + set + '/' + id); + }; + + // Related set: Delete button + scope.delete = function(set, itm_id, name, title) { + $rootScope.flashMessage = null; + + var action = function() { + var url = defaultUrl + id + '/' + set + '/'; + Rest.setUrl(url); + Rest.post({ id: itm_id, disassociate: 1 }) + .success( function(data, status, headers, config) { + $('#prompt-modal').modal('hide'); + scope.search(form.related[set].iterator); + }) + .error( function(data, status, headers, config) { + $('#prompt-modal').modal('hide'); + ProcessErrors(scope, data, status, null, + { hdr: 'Error!', msg: 'Call to ' + url + ' failed. POST returned status: ' + status }); + }); + }; + + Prompt({ hdr: 'Delete', + body: 'Are you sure you want to remove ' + name + ' from ' + scope.name + ' ' + title + '?', + action: action + }); + + } + +} + +TeamsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'TeamForm', + 'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', + 'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'TeamLookUpOrganizationInit', 'Prompt' + ]; + \ No newline at end of file diff --git a/lib/static/web/app/js/forms/Teams.js b/lib/static/web/app/js/forms/Teams.js new file mode 100644 index 0000000000..3a90f110e2 --- /dev/null +++ b/lib/static/web/app/js/forms/Teams.js @@ -0,0 +1,65 @@ +/********************************************* + * Copyright (c) 2013 AnsibleWorks, Inc. + * + * Teams.js + * Form definition for Team model + * + * + */ +angular.module('TeamFormDefinition', []) + .value( + 'TeamForm', { + + addTitle: 'Create Team', //Legend in add mode + editTitle: '{{ name }}', //Legend in edit mode + name: 'team', + well: true, + + fields: { + name: { + label: 'Name', + type: 'text', + addRequired: true, + editRequired: true, + capitalize: true + }, + description: { + label: 'Description', + type: 'text', + addRequired: true, + editRequired: true + }, + organization: { + label: 'Organization', + type: 'lookup', + sourceModel: 'organization', + sourceField: 'name', + addRequired: true, + editRequired: true, + ngClick: 'lookUpOrganization()' + } + }, + + buttons: { //for now always generates