Merge pull request #677 from jlmitch5/sprint1UIFixes

Updated to ui add/edit/list crud interactions
This commit is contained in:
jlmitch5 2016-01-25 15:19:05 -05:00
commit 1979c33225
11 changed files with 108 additions and 35 deletions

View File

@ -27,7 +27,7 @@
font-weight: bold;
white-space: nowrap;
padding-bottom: 25px;
min-height: 40px;
min-height: 45px;
}
.Form-title--is_superuser{

View File

@ -246,3 +246,8 @@ table, tbody {
background-color: @list-no-items-bg;
color: @list-no-items-txt;
}
.List-editButton--selected {
background-color: @list-actn-bg-hov !important;
color: @list-actn-icn-hov;
}

View File

@ -1061,20 +1061,6 @@ var tower = angular.module('Tower', [
$rootScope.$on("$stateChangeStart", function (event, next, nextParams, prev) {
// broadcast event change if editing crud object
if ($location.$$path.split("/")[2]) {
var list = $location.$$path.split("/")[1];
var id = $location.$$path.split("/")[2];
delete $rootScope.listBeingEdited;
delete $rootScope.rowBeingEdited;
$rootScope.$broadcast("EditIndicatorChange", list, id);
} else if ($rootScope.addedAnItem) {
delete $rootScope.addedAnItem;
} else {
$rootScope.$broadcast("RemoveIndicator");
}
// this line removes the query params attached to a route
if(prev && prev.$$route &&
@ -1128,6 +1114,23 @@ var tower = angular.module('Tower', [
activateTab();
});
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
// broadcast event change if editing crud object
if ($location.$$path.split("/")[2]) {
var list = $location.$$path.split("/")[1];
var id = $location.$$path.split("/")[2];
delete $rootScope.listBeingEdited;
delete $rootScope.rowBeingEdited;
$rootScope.$broadcast("EditIndicatorChange", list, id);
} else if ($rootScope.addedAnItem) {
delete $rootScope.addedAnItem;
} else {
$rootScope.$broadcast("RemoveIndicator");
}
});
if (!Authorization.getToken() || !Authorization.isUserLoggedIn()) {
// User not authenticated, redirect to login page
$rootScope.sessionExpired = false;

View File

@ -112,7 +112,7 @@ export function ProjectsList ($scope, $rootScope, $location, $log, $stateParams,
if ($scope.removeChoicesHere) {
$scope.removeChoicesHere();
}
$scope.removeChoicesHere = $scope.$on('choicesCompleteProject', function () {
$scope.removeChoicesHere = $scope.$on('choicesCompleteProjectList', function () {
var opt;
list.fields.scm_type.searchOptions = $scope.project_scm_type_options;
@ -164,13 +164,13 @@ export function ProjectsList ($scope, $rootScope, $location, $log, $stateParams,
$scope.search(list.iterator);
});
if ($scope.removeChoicesReady) {
$scope.removeChoicesReady();
if ($scope.removeChoicesReadyList) {
$scope.removeChoicesReadyList();
}
$scope.removeChoicesReady = $scope.$on('choicesReadyProject', function () {
$scope.removeChoicesReadyList = $scope.$on('choicesReadyProjectList', function () {
choiceCount++;
if (choiceCount === 2) {
$scope.$emit('choicesCompleteProject');
$scope.$emit('choicesCompleteProjectList');
}
});
@ -180,7 +180,7 @@ export function ProjectsList ($scope, $rootScope, $location, $log, $stateParams,
url: defaultUrl,
field: 'status',
variable: 'project_status_options',
callback: 'choicesReadyProject'
callback: 'choicesReadyProjectList'
});
// Load the list of options for Kind
@ -189,7 +189,7 @@ export function ProjectsList ($scope, $rootScope, $location, $log, $stateParams,
url: defaultUrl,
field: 'scm_type',
variable: 'project_scm_type_options',
callback: 'choicesReadyProject'
callback: 'choicesReadyProjectList'
});
$scope.showActivity = function () {

View File

@ -14,7 +14,7 @@
export function TeamsList($scope, $rootScope, $location, $log, $stateParams,
Rest, Alert, TeamList, GenerateList, Prompt, SearchInit, PaginateInit,
ReturnToCaller, ClearScope, ProcessErrors, SetTeamListeners, GetBasePath,
SelectionInit, Wait, Stream, $state) {
SelectionInit, Wait, Stream, $state, Refresh) {
ClearScope();
@ -25,7 +25,22 @@ export function TeamsList($scope, $rootScope, $location, $log, $stateParams,
mode = (paths[0] === 'teams') ? 'edit' : 'select',
url;
generator.inject(list, { mode: mode, scope: $scope });
var injectForm = function() {
generator.inject(list, { mode: mode, scope: $scope });
};
injectForm();
$scope.$on("RefreshTeamsList", function() {
injectForm();
Refresh({
scope: $scope,
set: 'teams',
iterator: 'team',
url: GetBasePath('teams') + "?order_by=name&page_size=" + $scope.team_page_size
});
});
$scope.selected = [];
url = GetBasePath('base') + $location.path() + '/';
@ -111,7 +126,7 @@ TeamsList.$inject = ['$scope', '$rootScope', '$location', '$log',
'$stateParams', 'Rest', 'Alert', 'TeamList', 'generateList', 'Prompt',
'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
'ProcessErrors', 'SetTeamListeners', 'GetBasePath', 'SelectionInit', 'Wait',
'Stream', '$state'
'Stream', '$state', 'Refresh'
];
@ -154,6 +169,7 @@ export function TeamsAdd($scope, $rootScope, $compile, $location, $log,
.success(function (data) {
Wait('stop');
$rootScope.flashMessage = "New team successfully created!";
$rootScope.$broadcast("EditIndicatorChange", "users", data.id);
$location.path('/teams/' + data.id);
})
.error(function (data, status) {
@ -195,6 +211,8 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log,
$scope.permission_label = {};
$scope.permission_search_select = [];
$scope.$emit("RefreshTeamsList");
// return a promise from the options request with the permission type choices (including adhoc) as a param
var permissionsChoice = fieldChoices({
scope: $scope,

View File

@ -14,7 +14,7 @@
export function UsersList($scope, $rootScope, $location, $log, $stateParams,
Rest, Alert, UserList, GenerateList, Prompt, SearchInit, PaginateInit,
ReturnToCaller, ClearScope, ProcessErrors, GetBasePath, SelectionInit,
Wait, Stream, $state) {
Wait, Stream, $state, Refresh) {
ClearScope();
@ -26,7 +26,21 @@ export function UsersList($scope, $rootScope, $location, $log, $stateParams,
url = (base === 'organizations') ? GetBasePath('organizations') + $stateParams.organization_id + '/users/' :
GetBasePath('teams') + $stateParams.team_id + '/users/';
generator.inject(UserList, { mode: mode, scope: $scope });
var injectForm = function() {
generator.inject(UserList, { mode: mode, scope: $scope });
};
injectForm();
$scope.$on("RefreshUsersList", function() {
injectForm();
Refresh({
scope: $scope,
set: 'users',
iterator: 'user',
url: GetBasePath('users') + "?order_by=username&page_size=" + $scope.user_page_size
});
});
$scope.selected = [];
@ -101,7 +115,8 @@ export function UsersList($scope, $rootScope, $location, $log, $stateParams,
UsersList.$inject = ['$scope', '$rootScope', '$location', '$log',
'$stateParams', 'Rest', 'Alert', 'UserList', 'generateList', 'Prompt',
'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
'ProcessErrors', 'GetBasePath', 'SelectionInit', 'Wait', 'Stream', '$state'
'ProcessErrors', 'GetBasePath', 'SelectionInit', 'Wait', 'Stream', '$state',
'Refresh'
];
@ -173,6 +188,7 @@ export function UsersAdd($scope, $rootScope, $compile, $location, $log,
var base = $location.path().replace(/^\//, '').split('/')[0];
if (base === 'users') {
$rootScope.flashMessage = 'New user successfully created!';
$rootScope.$broadcast("EditIndicatorChange", "users", data.id);
$location.path('/users/' + data.id);
}
else {
@ -226,6 +242,8 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log,
$scope.permission_label = {};
$scope.permission_search_select = [];
$scope.$emit("RefreshUsersList");
// return a promise from the options request with the permission type choices (including adhoc) as a param
var permissionsChoice = fieldChoices({
scope: $scope,
@ -265,6 +283,11 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log,
if ($scope.removePostRefresh) {
$scope.removePostRefresh();
}
$scope.removePostRefresh = $scope.$on('PostRefresh', function () {
// Cleanup after a delete
Wait('stop');
$('#prompt-modal').modal('hide');
});
$scope.PermissionAddAllowed = false;

View File

@ -81,6 +81,7 @@
.LoginModal-alert {
opacity: 1;
display: flex;
}
.LoginModal-alert.ng-hide {

View File

@ -14,16 +14,28 @@
Welcome to Ansible Tower!  Please sign in.
</div>
<div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionExpired">
<i class="LoginModal-alertIcon fa fa-exclamation-triangle">Your session timed out due to inactivity. Please sign in.</i>
<i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
<div class="LoginModal-alertText">
Your session timed out due to inactivity. Please sign in.
</div>
</div>
<div class="LoginModal-alert LoginModal-alert--error" ng-show="sessionLimitExpired">
<i class="LoginModal-alertIcon fa fa-exclamation-triangle">Maximum per-user sessions reached. Please sign in.</i>
<i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
<div class="LoginModal-alertText">
Maximum per-user sessions reached. Please sign in.
</div>
</div>
<div class="LoginModal-alert LoginModal-alert--error" ng-show="attemptFailed">
<i class="LoginModal-alertIcon fa fa-exclamation-triangle">Invalid username and/or password. Please try again.</i>
<i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
<div class="LoginModal-alertText">
Invalid username and/or password. Please try again.
</div>
</div>
<div class="LoginModal-alert LoginModal-alert--error" ng-show="thirdPartyAttemptFailed">
<i class="LoginModal-alertIcon fa fa-exclamation-triangle">{{ thirdPartyAttemptFailed }}</i>
<i class="LoginModal-alertIcon fa fa-exclamation-triangle"></i>
<div class="LoginModal-alertText">
{{ thirdPartyAttemptFailed }}
</div>
</div>
<form id="login-form"
name="loginForm"

View File

@ -28,6 +28,7 @@
<div class="OrgCards-actionItems">
<button class="OrgCards-actionItem
List-actionButton"
ng-class="{'List-editButton--selected': activeCard === card.id || card.isActiveCard }"
ng-click="editOrganization(card.id)">
<i class="OrgCards-actionItemIcon fa fa-pencil">
</i>

View File

@ -501,6 +501,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
innerTable += (field_action === 'delete') ? "List-actionButton--delete" : "";
innerTable += (field_action === 'cancel') ? "cancel red-txt" : "";
innerTable += "\" ";
// debugger;
// rowBeingEdited === '{{ " + list.iterator + ".id }}' && listBeingEdited === '" + list.name + "' ? 'List-tableRow--selected' : ''";
innerTable += (field_action === 'edit') ? "ng-class=\"[rowBeingEdited === '{{ " + list.iterator + ".id }}' && listBeingEdited === '" + list.name + "' ? 'List-editButton--selected' : '']\"" : "";
innerTable += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
innerTable += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
innerTable += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";

View File

@ -10,15 +10,22 @@ export default ['$http', function($http) {
// get the name of the object
return $http.get(url + "?id=" + id)
.then(function (data) {
var name = data.data.results[0].name;
var queryValue, queryType;
if (data.data.results[0].type === "user") {
queryValue = data.data.results[0].username;
queryType = "username";
} else {
queryValue = data.data.results[0].name;
queryType = "name";
}
// get how many results are less than or equal to
// the name
return $http.get(url + "?name__lte=" + name)
return $http.get(url + "?" + queryType + "__lte=" + queryValue)
.then(function (data) {
// divide by the page size to get what
// page the data should be on
var count = data.data.count;
return Math.ceil(count/pageSize);
return Math.ceil(count/parseInt(pageSize));
});
});
}