Feature/freeform users

app/workgroup/directives/modals/addPlaceholderUser/addPlaceholderUser.css

@@ -0,0 +1,60 @@
+.add-placeholder-user__input {
+  width: 30%;
+  padding-left: 10px;
+  padding-top: 10px;
+}
+
+.add-placeholder-user__label {
+  padding-left: 20px;
+  font-weight: bold;
+}
+
+.add-placeholder-user__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding: 10px;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  background-color: rgb(248, 248, 248);
+}
+
+.add-placeholder-user__warning {
+  padding: 10px;
+  color: gray;
+}
+
+.add-placeholder-users__input-container {
+  display: flex;
+}
+
+
+.add-placeholder-user .neon-dark-confirm-btn,
+.add-placeholder-user .neon-dark-confirm-btn:focus,
+.add-placeholder-user .neon-dark-confirm-btn:active,
+.add-placeholder-user .neon-dark-confirm-btn {
+  background-color: rgb(48, 54, 65);
+  border-color: rgb(48, 54, 65);
+  color: white;
+}
+
+.add-placeholder-user .neon-dark-confirm-btn:hover {
+  background-color: rgb(18, 24, 35); /* Darker Version for hover */
+  color: white;
+}
+
+.add-placeholder-user .neon-dark-confirm-btn.disabled,
+.add-placeholder-user .neon-dark-confirm-btn.disabled:hover,
+.add-placeholder-user .neon-dark-confirm-btn.disabled:focus,
+.add-placeholder-user .neon-dark-confirm-btn.disabled:active {
+  background-color: rgb(48, 54, 65);
+  color: white;
+}
+
+.add-placeholder-user__cancel-button {
+  margin-right: 5px;
+  margin-left: 5px;
+  color: #303641;
+  background-color: white;
+  border: 1px solid #D6D6D6;
+}

app/workgroup/directives/modals/addPlaceholderUser/addPlaceholderUser.html

@@ -0,0 +1,44 @@
+<div class="add-placeholder-user">
+  <div class="add-placeholder-user__warning">
+    Please note: This form should only be used to add a user if they do NOT have a kerberos account yet.
+    <br />
+    This user will not be able to login to IPA (until you provide the kerberos login id),
+    but you will be able to refer to them in IPA and include them in your scheduling plans.
+  </div>
+  <div class="add-placeholder-users__input-container">
+    <ipa-input class="add-placeholder-user__input" value="view.firstName"
+              place-holder="'First Name'"
+              on-update="updateSectionGroupCost(sectionGroupCost)"
+              ng-show="!isLiveDataScenario">
+    </ipa-input>
+
+    <ipa-input class="add-placeholder-user__input" value="view.lastName"
+              place-holder="'Last Name'"
+              on-update="isPlaceholderUserValid()">
+    </ipa-input>
+
+    <ipa-input class="add-placeholder-user__input" value="view.email"
+              place-holder="'Email'"
+              on-update="isPlaceholderUserValid()">
+    </ipa-input>
+  </div>
+
+  <div class="add-placeholder-user__footer">
+    <button ng-click="close()"
+            type="button"
+            class="btn btn-default add-placeholder-user__cancel-button">
+      Cancel
+    </button>
+    <button ng-if="isPlaceholderUserValid()"
+            type="button" class="btn neon-dark-confirm-btn"
+            ng-click="addPlaceholderUser()">
+            Add
+    </button>
+    <button ng-if="!isPlaceholderUserValid()"
+            type="button" class="disabled btn btn-info neon-dark-confirm-btn"
+            tooltip-placement="left"
+            uib-tooltip="{{view.validationMessage}}">
+            Add
+    </button>
+  </div>
+</div>

app/workgroup/directives/modals/addPlaceholderUser/addPlaceholderUser.js

@@ -0,0 +1,66 @@
+import './addPlaceholderUser.css';
+
+let addPlaceholderUser = function (WorkgroupActionCreators) {
+  return {
+    restrict: 'E',
+    template: require('./addPlaceholderUser.html'),
+    replace: true,
+    scope: {
+      isVisible: '='
+    },
+    link: function (scope) {
+      scope.view = {
+        firstName: "",
+        lastName: "",
+        email: "",
+        validationMessage: ""
+      };
+
+      scope.addPlaceholderUser = function() {
+        var user = {
+          firstName: scope.view.firstName,
+          lastName: scope.view.lastName,
+          email: scope.view.email
+        };
+
+        WorkgroupActionCreators.addPlaceholderUser(user);
+        scope.close();
+      };
+
+      scope.isPlaceholderUserValid = function() {
+        if (
+          !scope.view.firstName &&
+          !scope.view.lastName &&
+          !scope.view.email
+        ) {
+          scope.view.validationMessage = "";
+          return false;
+        }
+
+        if (!scope.view.firstName) {
+          scope.view.validationMessage = "First name is required";
+          return false;
+        }
+
+        if (!scope.view.lastName) {
+          scope.view.validationMessage = "Last name is required";
+          return false;
+        }
+
+        if (!scope.view.email) {
+          scope.view.validationMessage = "Email is required";
+          return false;
+        }
+
+        scope.view.validationMessage = "";
+        return true;
+      };
+
+      scope.close = function () {
+        scope.isVisible = false;
+      };
+    } // end link
+	};
+};
+
+export default addPlaceholderUser;

app/workgroup/directives/peopleAndRoles/rolesTable/rolesTable.css

@@ -73,3 +73,47 @@
 	padding: 10px;
 	color: #aaabae;
 }
+
+.roles-table__placeholder-update-validation {
+	padding-top: 2px;
+	padding-bottom: 2px;
+	min-height: 1.3em;
+	line-height: 1;
+	color: gray;
+}
+
+.roles-table__placeholder {
+	color: #ffeb3c;
+	border: 1px solid;
+	border-radius: 4px;
+	font-size: 15px;
+	padding-top: 3px;
+	padding-left: 4px;
+	padding-right: 4px;
+	padding-bottom: 3px;
+}
+
+.roles-table__update-placeholder-ui {
+	padding-top: 5px;
+}
+
+.roles-table__update-placeholder-container {
+	display: flex;
+}
+
+.roles-table__update-placeholder-input {
+	margin-left: -5px;
+}
+
+.roles-table__update-placeholder-buttons {
+	padding-right: 2px;
+}
+
+.roles-table__placeholder-person-ui {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.roles-table__match {
+	border-bottom:1px solid #f3f3f3;
+}

app/workgroup/directives/peopleAndRoles/rolesTable/rolesTable.html

@@ -7,23 +7,58 @@
 					ng-change="searchOnChange()" typeahead-loading="view.loadingPeople" typeahead-no-results="view.noResults"
 					typeahead-wait-ms="400" typeahead-min-length="2" typeahead-on-select="searchUsersResultSelected($item, $model, $label, $event)"
 					class="form-control typeahead"
-					typeahead-template-url="popupTemplate.html">
-
-				<ul class="typeahead-status dropdown-menu" ng-show="view.noResults">
-					<li><a>No results</a></li>
-				</ul>
+					typeahead-popup-template-url="popupTemplate.html">
+
 				<i ng-show="view.loadingPeople || ui.addUserPending"><spinner size="20"></spinner></i>
 				<i ng-hide="users.searchQuery || view.loadingPeople" class="entypo-search"></i>
 				<i ng-show="users.searchQuery && !view.loadingPeople && !ui.addUserPending" class="entypo-cancel" ng-click="clearUserSearch()"></i>
 				<script type="text/ng-template" id="popupTemplate.html">
-					<a href="#" style='border-bottom:1px solid #f3f3f3;'>
-						<strong>{{ match.model.name }}</strong>
-						<div class="row">
-							<div class="col-sm-4">
-								{{ match.model.email }}
-							</div>
-						</div>
-					</a>
+					<div>
+						<ul class="typeahead-status dropdown-menu" ng-show="matches.length > 1">
+							<li ng-repeat="match in matches" ng-click="selectMatch($index)">
+								<a ng-if="match.model.name != 'newPlaceholder'" href="#" class="roles-table__match">
+									<strong>{{ match.model.name }}</strong>
+									<div class="row">
+										<div class="col-sm-4">
+											{{ match.model.email }}
+										</div>
+									</div>
+								</a>
+
+								<a ng-if="match.model.name == 'newPlaceholder'" href="#"
+								   class="roles-table__match"
+								   tooltip-append-to-body="true"
+								   uib-tooltip="Add a user that does not yet have a kerberos account"
+								   ng-click="selectMatch($index)">
+									<div class="row">
+										<div class="col-sm-4">
+											<strong>Add Placeholder Person</strong>
+										</div>
+									</div>
+								</a>
+							</li>
+						</ul>
+						<ul class="typeahead-status dropdown-menu" ng-show="matches.length == 1">
+							<li>
+								<a class="roles-table__match">
+									No results
+								</a>
+							</li>
+							<li ng-repeat="match in matches" ng-click="selectMatch($index)">
+								<a ng-if="match.model.name == 'newPlaceholder'" href="#"
+								   class="roles-table__match"
+								   tooltip-append-to-body="true"
+								   uib-tooltip="Add a user that does not yet have a kerberos account"
+								   ng-click="selectMatch($index)">
+									<div class="row">
+										<div class="col-sm-4">
+											<strong>Add Placeholder Person</strong>
+										</div>
+									</div>
+								</a>
+							</li>
+						</ul>
+					</div>
 				</script>	
 				<span class="input-group-btn">
 					<button ng-disabled="!users.newUser.name || ui.addUserPending"
@@ -35,10 +70,16 @@
 			</div>
 			<!-- /input-group -->
 		</div>
-		<!-- /.col-lg-6 -->
 	</div>
 
 	<table class="roles-table__table">
+		<colgroup>
+			<col style="width: 25%;">
+			<col style="width: 25%;">
+			<col style="width: 25%;">
+			<col style="width: 25%;">
+		</colgroup>
+
 		<thead>
 			<tr>
 				<th class="roles-table__table-header">
@@ -70,7 +111,48 @@
 			    ng-if="(activeRoleId == -1 && (userRole.roleId == 11 || userRole.roleId == 12 || userRole.roleId == 13)) || (userRole.roleId == activeRoleId && (activeRoleId != 9 || userRole.displayPresence))">
 				<!-- Name -->
 				<td class="roles-table__table-cell">
-					{{ userRole.userDisplayName }}
+					<div>
+						{{ userRole.userDisplayName }}
+						<span class="roles-table__placeholder" ng-show="userRole.userIsPlaceholder">
+							<i class="glyphicon glyphicon-warning-sign clickable" ng-click="openPlaceholderUpdateUI()" uib-tooltip="User cannot login to IPA until a valid kerberos loginId is provided"></i>
+						</span>
+					</div>
+					<div class="roles-table__update-placeholder-ui" ng-show="userRole.userIsPlaceholder && view.placeholderUpdate.show">
+						<div class="roles-table__update-placeholder-container">
+							<div class="roles-table__update-placeholder-input">
+								<ipa-input value="view.placeholderUpdate.loginId"
+								           place-holder="'Enter valid loginId'"
+								           style="padding-right: 5px;"
+								           on-update="isPlaceholderUpdateValid()">
+								</ipa-input>
+							</div>
+
+							<div class="roles-table__update-placeholder-buttons">
+								<button class="btn btn-primary"
+								        confirm-button="updatePlaceholderUser(userRole)"
+								        message="Are you sure you want to update {{ userRole.userDisplayName }}'s name, email and loginId?"
+								        yes="Update" no="Cancel" placement="right"
+								        ng-show="view.placeholderUpdate.loginId.length > 0 && view.placeholderUpdate.isValid">
+									Update
+								</button>
+								<button class="btn btn-primary disabled"
+								        tooltip-append-to-body="true"
+								        uib-tooltip="Please enter a valid kerberos loginid"
+								        ng-show="view.placeholderUpdate.loginId.length == 0 || !view.placeholderUpdate.isValid">
+									Update
+								</button>
+							</div>
+
+							<div>
+								<button class="btn btn-default" ng-click="closePlaceholderUpdateUI()">
+									Cancel
+								</button>
+							</div>
+						</div>
+						<div class="roles-table__placeholder-update-validation">
+							{{ view.placeholderUpdate.validationMessage }}
+						</div>
+					</div>
 				</td>
 
 				<!-- Email -->