[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: Ia1efa4deacdc5701e6205104ac021a6c80ed60ba
Signed-off-by: st782s <statta@research.att.com>

8 files changed, 744 insertions, 0 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_closed_loop.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_closed_loop.html
new file mode 100644
index 00000000..a3a5dfc1
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_closed_loop.html
@@ -0,0 +1,20 @@
+<div style="margin-left:0px; margin-right:50px;" id="fnMenueContent"> 		
+	<div class="pageTitle" align="left">
+
+	        <h1 class="heading1" style="margin-top:20px;">Closed Loop</h1>
+	        <br/>
+	 <br>	        
+	</div>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+	Cloop Server
+	</div>
+	<br>
+
+	<div id="hiddenCamundaDiv" style="width:500px;"></div>
+    <br>
+	<iframe id="camundaFrame" 
+		ng-src="{{camunda_cockpit_url}}"
+		width="100%" height="500"
+	></iframe>
+</div>
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
new file mode 100644
index 00000000..9ffd9810
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
@@ -0,0 +1,42 @@
+<div style="width:80%;margin-bottom:20px">
+		<br/>
+	      <h1 class="heading1">Broadcast Message Edit</h1>
+	    <br/>
+		
+		<div ng-controller="broadcastController" >    
+				 Please edit the broadcast message details below:&nbsp;<br><br>
+			<div class="fn-ebz-container" >
+			        <label class="fn-ebz-text-label"><sup><b>*</b></sup>Message Text:</label><BR>
+			        <textarea name="comment" ng-model="broadcastMessage.messageText" rows="5" cols="200" style="height:100px"></textarea>
+			</div>
+			<br>
+			<div class="fn-ebz-container" >
+			          <label class="fn-ebz-text-label"><sup><b>*</b></sup>Start Date:</label><BR>
+			          <input type="hidden" name="startDateHidden" ng-model="broadcastMessage.startDate">
+			          <input type="text" class="fn-ebz-text" id="startDatepicker" />
+			</div>
+			
+			<div class="fn-ebz-container" style="margin-left:3em" >
+			          <label class="fn-ebz-text-label"><sup><b>*</b></sup>End Date:</label><BR>
+			          <input type="hidden" name="endDateHidden" ng-model="broadcastMessage.endDate">
+			          <input type="text" class="fn-ebz-text" id="endDatepicker" />
+			</div>
+		
+			<div class="fn-ebz-container" style="margin-left:3em"  >
+				<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><BR>
+				<input type="text" class="fn-ebz-text" ng-model="broadcastMessage.sortOrder"
+					maxlength="30" /> 
+			</div>
+		 
+		        <div class="fn-ebz-container" style="margin-left:1em" >	
+						<label  class="fn-ebz-text-label">Server:</label><BR>
+						<div class="form-field" att-select="broadcastSites" ng-model="broadcastMessage.siteCd"></div>
+				</div>
+		          
+				<br>
+			<div align="left" >
+				<button type="submit" ng-click="save();" att-button	btn-type="primary" size="small">Save</button>
+				<button class="button button--information button--small" herf="javascript:void(0)" ng-click="close();">Cancel</button>
+			</div>
+		</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
new file mode 100644
index 00000000..512ce7e8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
@@ -0,0 +1,52 @@
+<div style="width:80%;">
+    
+<div ng-controller="broadcastListController" > 	
+	
+	<h1 class="heading1">Broadcast Messages</h1>
+	<br>
+		<div ng-repeat="location in messageLocations" >
+			{{location.label}} Messages
+			<div title="{{location.label}} Messages">
+				
+			  	<table att-table table-data="location.messages" current-page="1">
+				  	<thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%">No.</th>
+				  			<th att-table-header sortable="false" width="30%">Message Text</th>
+				  			<th att-table-header sortable="false" width="10%">Start Date</th>
+				  			<th att-table-header sortable="false" width="10%">End Date</th>
+				  			<th att-table-header sortable="false" width="10%">Sort Order</th>
+				  			<th att-table-header sortable="false" width="10%">Server</th>
+				  			<th att-table-header sortable="false" width="10%">Active?</th>
+				  			<th att-table-header sortable="false" width="10%">Delete?</th>
+				  		</tr>
+				  	</thead>
+				  	<tbody att-table-row type="body" row-repeat="message in location.messages" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+					  <tr>
+					   {{message.id}}
+					    <td width="10%"><a href="javascript:editMessage({{location.value}},'{{location.label}}',{{message.id}});">{{$index+1}}</a></td>
+					    <td width="30%">{{message.messageText}}</td>
+					    <td width="10%">
+					    	{{message.displayStartDate}}
+					    </td>
+					    <td width="10%">{{message.displayEndDate}}</td>
+					    <td width="10%">{{message.sortOrder}}</td>
+					    <td width="10%">{{message.siteCd}}</td>
+					    <td width="10%">
+					    	<div ng-click="toggleActive(message);">
+					    		<input type="checkbox" ng-model="message.active" att-toggle-main>
+					    	</div>
+					    </td>
+					     <td att-table-body width="10%">
+						    <div ng-click="remove(message);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+					     </td>
+					  </tr>
+					 
+					</tbody>
+				</table>
+			</div>
+			<input att-button btn-type="primary" size="small" class="button" type="button" value="Add" ng-click="editMessage(location);"/>
+	  	  <br/><br/><br/>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
new file mode 100644
index 00000000..433e0c3f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
@@ -0,0 +1,263 @@
+<script type="text/ng-template" id="modal_informative.html">
+       <div class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Success!</h2>
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}</div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+   
+   
+    <script type="text/ng-template" id="delete_informative.html">
+   <div class="modal__warning font-showcase">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the profile?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+   <script type="text/ng-template" id="email_report_informative.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Mailing your report...</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              The report will be sent to your email soon!
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Ok</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_authCode.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the Authorization Code(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_Schedule.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Schedule(s) ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="alternate_number.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Number ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="manage_device.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Line Port ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_virtualOnNet.html">
+  		 <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Virtual On-Net User?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_user_meet_me_conference.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Conference?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="confirmation_informative.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">{{message.title}}</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+    <script type="text/ng-template" id="confirmation_for_delete.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name"> <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This {{message.title}}?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">Deletions are not reversible. {{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+   <script type="text/ng-template" id="modal_warning.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Unable to process your request!</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">Unable to process your request.   <br/>{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+    
+    <script type="text/ng-template" id="modal_warning_message.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Warning</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+
+
+    
+    <script type="text/ng-template" id="modal_prompt.html">
+       <div class="modal__warning font-showcase">
+          <div class="modal__header">
+              <h2 class="font-showcase-font-name">Unable to process your request. </h2>
+              <i class="icon-circle-action-close close-modal modal__header--close"  ng-click="$dismiss()"></i>
+              
+          </div>
+          <div class="divider-container"><hr> </div>      
+          <div class="modal__content">
+              Unable to process your request.   <br/> {{message.text}}
+          </div>
+   </div>
+    </script>
+     <script type="text/ng-template" id="delete_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Device?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_multiple_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete The Device(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
new file mode 100644
index 00000000..b1c9135a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
@@ -0,0 +1,136 @@
+<script type="text/ng-template" id="fn_menu_add_popup.html">
+          <div class="modal__informative font-showcase" style="width:1100px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>
+		      
+            <div class="modal__content" > 
+				<table>
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Label:</label><br>
+								<input id="popupAddMenuItemLabel" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.label" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" style = "display:none" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Parent:</label><br>
+								<input id="popupAddMenuItemParentId" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.parentId" ng-disabled="disableParentId" maxlength="30" /> 
+							</div>
+							<div class="fn-ebz-container" ng-init="getParentData();">
+  								<form name="parentListForm">
+    							<label class="fn-ebz-text-label" for="parentSelect"><sup><b>*</b></sup>Parent:</label><br>
+								<select name="select_projects" id="select_projects" ng-model="addFnMenuItem.parentId">
+									<optgroup label="" ng-repeat="header in childListSelectData">
+										<option label="{{header.label}}" value="{{header.menuId}}" style="color:black;font-weight:bold;">{{header.label}}</option>	
+        									<option  ng-repeat="child in header.children" value="{{child.menuId}}" "{{(addFnMenuItem.parentId===child.menuId) ? 'selected' : '' }}">{{child.label}}</option>
+									</optgroup>
+								</select>
+								<!--
+    							<select class="form-field" name="parentSelect" id="parentSelect" ng-model="addFnMenuItem.parentId">
+								<option>{{getParentLabel(addFnMenuItem.parentId, parentListSelectData)}}</option>
+      							<option ng-repeat="option in parentListSelectData" value="{{option[0]}}" "{{(addFnMenuItem.parentId===option[0]) ? 'selected' : '' }}">{{option[1]}}</option>
+    							</select>
+								-->
+  								</form>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><br>
+								<input id="popupAddMenuItemSortOrder" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.sortOrder" ng-disabled="disableSortOrder"	maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Action:</label><br>
+								<input id="popupAddMenuItemAction" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.action" ng-disabled="disableAction" maxlength="200" /> 
+					        </div>
+						</td>		
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" ng-init="getFunctionCDselectData();">
+  								<form name="functionCDform">
+    							<label class="fn-ebz-text-label" for="repeatSelect"><sup><b>*</b></sup>Function:</label><br>
+    							<select class="form-field" name="repeatSelect" id="repeatSelect" ng-model="addFnMenuItem.functionCd">
+								<option>{{addFnMenuItem.functionCd}}</option>
+      							<option ng-repeat="option in functionCDselectData" value="{{option}}" >{{option}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+						<div class="fn-ebz-container">
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Active:</label><br>
+								<select class="form-field" name="selectActive" ng-model="addFnMenuItem.active">
+  								<option ng-repeat="active in activeStatusOptions" value="{{active.value}}" ng-selected="{{active.value}}=={{addFnMenuItem.active}}" >{{active.title}}</option>
+								</select>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Servlet:</label><br>
+								<input id="popupAddMenuItemServlet" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.servlet" ng-disabled="disableServlet" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Query String:</label><br>
+								<input id="popupAddMenuItemQueryString" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.queryString" ng-disabled="disableQueryString" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>External URL:</label><br>
+								<input id="popupAddMenuItemExternalUrl" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.externalUrl" ng-disabled="disableExternalUrl" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Target:</label><br>
+								<input id="popupAddMenuItemTarget" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.target" ng-disabled="disableTarget" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Menu Set Code:</label><br>
+								<input id="popupAddMenuItemMenuSetCode" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.menuSetCode" ng-disabled="disableMenuSetCode" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Separator:</label><br>
+								<select class="form-field" name="select" ng-model="addFnMenuItem.separator">
+  								<option ng-repeat="separator in separatorStatusOptions" value="{{separator.value}}" ng-selected="{{separator.value}}=={{addFnMenuItem.separator}}" >{{separator.title}}</option>
+								</select>
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Image Source:</label><br>
+								<input id="popupAddMenuItemImageSrc" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.imageSrc" ng-disabled="disableImageSrc" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+				</table>
+            </div>
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="updateFnMenu(addFnMenuItem);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+			<!--
+            <div class="modal__footer">
+            </div>
+			-->
+        </div>
+</script>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
new file mode 100644
index 00000000..2ccdf2af
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
@@ -0,0 +1,129 @@
+<script type="text/ng-template" id="edit_menu_item_popup.html">
+
+          <div class="modal__informative font-showcase" style="width:1100px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>
+			      
+            <div class="modal__content" > 
+				<table>
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Label:</label><br>
+								<input id="popupAddMenuItemLabel" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.label" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" style = "display:none" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Parent:</label><br>
+								<input id="popupAddMenuItemParentId" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.parentId" ng-disabled="disableParentId" maxlength="30" /> 
+							</div>
+							<div class="fn-ebz-container" ng-init="getParentData();">
+  								<form name="parentListForm">
+    							<label class="fn-ebz-text-label" for="parentSelect"><sup><b>*</b></sup>Parent:</label><br>
+    							<select class="form-field" name="parentSelect" id="parentSelect" ng-model="addFnMenuItem.parentId">
+								<option>{{getParentLabel(addFnMenuItem.parentId, parentListSelectData)}}</option>
+      							<option ng-repeat="option in parentListSelectData" value="{{option[0]}}" "{{(addFnMenuItem.parentId===option[0]) ? 'selected' : '' }}">{{option[1]}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><br>
+								<input id="popupAddMenuItemSortOrder" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.sortOrder" ng-disabled="disableSortOrder"	maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Action:</label><br>
+								<input id="popupAddMenuItemAction" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.action" ng-disabled="disableAction" maxlength="30" /> 
+					        </div>
+						</td>		
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" ng-init="getFunctionCDselectData();">
+  								<form name="functionCDform">
+    							<label class="fn-ebz-text-label" for="repeatSelect"><sup><b>*</b></sup>Function:</label><br>
+    							<select class="form-field" name="repeatSelect" id="repeatSelect" ng-model="addFnMenuItem.functionCd">
+								<option>{{addFnMenuItem.functionCd}}</option>
+      							<option ng-repeat="option in functionCDselectData" value="{{option}}" >{{option}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+						<div class="fn-ebz-container">
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Active:</label><br>
+								<select class="form-field" name="selectActive" ng-model="addFnMenuItem.active">
+  								<option ng-repeat="active in activeStatusOptions" value="{{active.value}}" ng-selected="{{active.value}}=={{addFnMenuItem.active}}" >{{active.title}}</option>
+								</select>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Servlet:</label><br>
+								<input id="popupAddMenuItemServlet" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.servlet" ng-disabled="disableServlet" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Query String:</label><br>
+								<input id="popupAddMenuItemQueryString" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.queryString" ng-disabled="disableQueryString" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>External URL:</label><br>
+								<input id="popupAddMenuItemExternalUrl" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.externalUrl" ng-disabled="disableExternalUrl" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Target:</label><br>
+								<input id="popupAddMenuItemTarget" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.target" ng-disabled="disableTarget" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Menu Set Code:</label><br>
+								<input id="popupAddMenuItemMenuSetCode" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.menuSetCode" ng-disabled="disableMenuSetCode" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Separator:</label><br>
+								<select class="form-field" name="select" ng-model="addFnMenuItem.separator">
+  								<option ng-repeat="separator in separatorStatusOptions" value="{{separator.value}}" ng-selected="{{separator.value}}=={{addFnMenuItem.separator}}" >{{separator.title}}</option>
+								</select>
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Image Source:</label><br>
+								<input id="popupAddMenuItemImageSrc" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.imageSrc" ng-disabled="disableImageSrc" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+				</table>
+            </div>
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="updateFnMenu(addFnMenuItem);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+			<!--
+            <div class="modal__footer">
+            </div>
+			-->
+        </div>
+</script>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
new file mode 100644
index 00000000..cbfd6133
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
@@ -0,0 +1,75 @@
+
+<script type="text/ng-template" id="role_functions_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Role Functions</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+				<table att-table
+					table-data="availableRoleFunctions" 
+				  	view-per-page="viewPerPageIgnore" 
+		  			current-page="currentPageIgnore" 
+				  	search-category="searchCategoryIgnore" 
+		  			search-string="searchStringIgnore" 
+				  	total-page="totalPageIgnore">			 
+				<thead att-table-row type="header">
+						<tr>
+							<th att-table-header sortable="false" width="10%"> </th>
+							<th att-table-header sortable="false" width="90%">Role Function</th>
+						</tr>
+					</thead>
+					<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" >
+					  <tr>
+					  
+						<td width="10%">
+							<div ng-click="toggleRoleFunction(availableRoleFunction.selected,availableRoleFunction);">
+							<input type="checkbox" ng-model="availableRoleFunction.selected" att-toggle-main>
+							</div>
+						</td>
+						<td width="90%">{{ availableRoleFunction.name }}</td>
+						
+					  </tr>
+					</tbody>
+				</table>	
+            </div>
+        </div>
+</script>
+
+
+<script type="text/ng-template" id="child_roles_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Child Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<table att-table
+						table-data="availableRoles"
+				  		view-per-page="viewPerPageIgnore" 
+			  			current-page="currentPageIgnore" 
+				  		search-category="searchCategoryIgnore" 
+			  			search-string="searchStringIgnore" 
+				  		total-page="totalPageIgnore">			  
+						<thead att-table-row type="header">
+							<tr>
+								<th att-table-header sortable="false" width="10%"> </th>
+								<th att-table-header sortable="false" width="90%">Role</th>
+							</tr>
+						</thead>
+						<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" >
+							<tr>
+							<td att-table-body width="10%">
+								<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+								<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+								</div>
+							</td>
+							<td att-table-body width="90%">{{ availableRole.name }}</td>
+							</tr>
+						</tbody>
+					</table>	
+            </div>
+        </div>
+</script>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
new file mode 100644
index 00000000..b5fd76ad
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
@@ -0,0 +1,27 @@
+<script type="text/ng-template" id="edit_role_function_popup.html">
+          <div class="modal__informative font-showcase" style="width:400px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+						maxlength="30" /> 
+					</div>
+					<br/>
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="disableCd"
+						maxlength="30" /> 
+					</div>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="saveRoleFunction(editRoleFunction);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            </div>
+        </div>
+</script>
+
+