Added portal-FE-common - angular upgrade code

Added Layout Component- Footeter, global-search, header, header-menu, search-user, sidebar, tabbar, userbar and also added Account Onbaording changes

Issue-ID: PORTAL-795
Change-Id: I815add150ba12c868c1b0f80f3dfcdf4ea804d70
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

4 files changed, 571 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.html b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.html
new file mode 100644
index 00000000..b1d4d835
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.html
@@ -0,0 +1,128 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+<div id="container" style="width: 100%;" (clickOutside)="clickOutSide($event)">
+  <!-- First Level menu -->
+  <div id="megaMenu-{{item.text.split(' ').join('-')}}"
+    *ngFor="let item of megaMenuDataObject;let megaMenuIndex = index" (mousedown)="loadFirstLevel(megaMenuIndex)"
+    role="presentation" class="header-menu-item-div"><a href="javascript:void(0);" id="parentmenu-tabs" role="menuitem"
+      class="header-menu-item-link">{{item.text}}<b class="caret"></b><span class="sr-only"></span></a>
+
+    <div class="header-secondlevel-menu" *ngIf="item.active_yn=='Y' && hideMenus[megaMenuIndex]">
+      <ul class="header-secondary" role="menu">
+        <!-- Second Level menu -->
+        <li class="header-menu-item-li" id="subItem-{{i.text.split(' ').join('-')}}"
+          *ngFor="let i of item.children;let secondLevelIndex = index"
+          (mousemove)="hideThirdLevelMenu(megaMenuIndex,secondLevelIndex)" role="presentation">
+          <!-- Favorites -->
+
+          <div *ngIf="i.text=='Favorites'">
+            <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>
+            <i id="favorite-star" data-size="large" class="icon-star favorites-icon-active"></i>
+            <div class="header-columns-div" *ngIf="hideSecondLevelMenus[megaMenuIndex][secondLevelIndex]">
+              <div class="header-tertiary-wrapper" id="header-favorites">
+                <ul class="header-tertiary" role="menu">
+                  <li role="presentation">
+                    <div *ngFor="let subItem of (favoritesMenuItems ? favoritesMenuItems : [])"
+                      id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">
+                      <div class="fav-links">
+                        <i id="favorite-selector-favorites-list" class="icon-star favorites-icon-active"
+                          (click)="removeAsFavoriteItem($event, subItem.menuId)"
+                          (mousedown)="removeAsFavoriteItem($event, subItem.menuId)">
+                        </i> <a id="favorites-list" (click)="goToUrl(subItem)">{{subItem.text}}</a>
+                      </div>
+                    </div>
+
+                    <div id="favorites-empty" class="favorites-window-empty" *ngIf="emptyFavorites">
+                      <p id="p-no-favs-icon" class="no-fav-icon">
+                        <span class="icon-star"></span>
+                      </p>
+                      <p id="p-no-favs" class="largeText">{{'No
+                              Favorites'}}</p>
+                      <p id="p-no-favs-desc" class="normal">{{'Add your
+                              favorite items for quick access'}}.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div> <!-- Support or Help -->
+          <div *ngIf="item.text=='Support' || item.text=='Help'" id="second-level-menus-help">
+            <a id="second-level-menus-{{i.text.split(' ').join('-')}}-help" href="javascript:void(0);"
+              (click)="goToUrl(i);auditLog(i,'Support')" class="menu__item" role="menuitem">{{i.text}}</a>
+          </div> <!-- Others -->
+          <div *ngIf="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')">
+            <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>
+            <div class="header-thirdlevel-menu" *ngIf="hideSecondLevelMenus[megaMenuIndex][secondLevelIndex]">
+              <ul class="third-level-menu" role="menu" id="third-level-menus">
+                <!-- Third Level menu -->
+
+                <li *ngFor="let link of i.children" role="presentation"><i id="level3-star-inactive-{{link.menuId}}"
+                    class="icon-star favorites-icon-inactive" data-size="large"
+                    (mousedown)="setAsFavoriteItem($event, link.menuId)"
+                    *ngIf="link.url.length > 1 && isUrlFavorite(link.menuId)==false">
+                  </i> <i id="level3-star-active-{{link.menuId}}"
+                    *ngIf="link.url.length > 1 && isUrlFavorite(link.menuId)" class="icon-star favorites-icon-active"
+                    data-size="large" (mousedown)="removeAsFavoriteItem($event, link.menuId)">
+                  </i> <a class="third-level-title"
+                    (mousedown)="goToUrl(link);auditLog(link,'application')">{{link.text}}</a>
+                  <!-- Fourth Level menu -->
+                  <div *ngFor="let title of link.children">
+                    <i id="level4-star-inactive-{{title.menuId}}" class="icon-star favorites-icon-inactive"
+                      (mousedown)="setAsFavoriteItem($event, title.menuId)"
+                      *ngIf="title.url.length > 1 && isUrlFavorite(title.menuId)==false">
+                    </i> <i id="level4-star-active-{{title.menuId}}" class="icon-star favorites-icon-active"
+                      (mousedown)="removeAsFavoriteItem($event, title.menuId)"
+                      *ngIf="title.url.length > 1 && isUrlFavorite(title.menuId)">
+                    </i> <a href="javascript:void(0);" class="header-tertiaryitem"
+                      [ngClass]="{'disabled': title.disabled}" role="menuitem"
+                      (mousedown)="goToUrl(title);auditLog(title,'functional')">{{title.text}}</a>
+                  </div>
+                </li>
+
+
+
+
+              </ul>
+            </div>
+          </div>
+
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.scss b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.scss
new file mode 100644
index 00000000..d69b8580
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.scss
@@ -0,0 +1,150 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+ .header-menu-item-div
+ {
+     float: left; 
+     margin-right: 5%;
+ 
+ }
+ .header-menu-item-li
+ {
+     float: left; 
+     margin-right: 2%;
+     
+ 
+ }
+ .header-menu-item-link
+ {
+     font-family:"Open Sans", Arial;
+     font-size:16px;
+     color:#999;
+     text-decoration:none;
+     
+ }
+ #parentmenu-tabs:hover {
+     color: #fff;
+ }
+ 
+ 
+ 
+ 
+ .third-level-menu{
+ column-count: 4;
+     line-height: 12px;
+     overflow-x: hidden;
+     overflow-y: hidden;
+     column-gap: 13px;
+     column-rule: 1px outset #d2d2d2;
+     margin-left:20px;
+ }
+ 
+ 
+ 
+ .third-level-menu a{
+  color:black;
+ }
+ 
+ .third-level-menu li a {
+     color: #333;
+     display: inline-flex;
+     padding: 7px 15px;
+     font-family:"Omnes-ECOMP-W02", Arial;
+     margin-top:5px;
+   margin-bottom:5px;
+ }
+ 
+ .third-level-menu li{
+     width:100%;
+     border-bottom: 1px solid #d2d2d2;
+ }
+ 
+ 
+ .b2b-header-tabs .header-secondary .header-subitem a.menu__item{
+   font-size:16px;
+ }
+ 
+ .third-level-title{
+   font-size:15px;
+   font-weight: 700;
+ }
+ .header-secondlevel-menu 
+   {
+     background-color: #fff;
+     position: fixed;
+     right:1%;
+     width: -webkit-fill-available;
+     
+   }
+ 
+   .header-thirdlevel-menu 
+   {
+     background-color: #fff;
+     position: fixed;
+     left:0;
+     height: 70%;    
+     width: 100%;
+   }
+   
+   a.menu__item{
+    font-size:16px;
+    font-family:"Open Sans", Arial;
+    color:#333;
+  }
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
\ No newline at end of file
diff --git a/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.spec.ts b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.spec.ts
new file mode 100644
index 00000000..889f499a
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.spec.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderMenuComponent } from './header-menu.component';
+
+describe('HeaderMenuComponent', () => {
+  let component: HeaderMenuComponent;
+  let fixture: ComponentFixture<HeaderMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.ts b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.ts
new file mode 100644
index 00000000..eb8f747a
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header-menu/header-menu.component.ts
@@ -0,0 +1,231 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import * as _ from 'underscore';
+import { Component, OnInit } from '@angular/core';
+import { MenusService } from 'src/app/shared/services/menus/menus.service';
+import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-header-menu',
+  templateUrl: './header-menu.component.html',
+  styleUrls: ['./header-menu.component.scss']
+})
+export class HeaderMenuComponent implements OnInit {
+  hideMenus: boolean[] = [];
+  hideSecondLevelMenus: boolean[][] = [];
+  hideThirdLevelMenus: boolean[] = [];
+  megaMenuDataObject: any[];
+  favoritesMenuItems: any[];
+  favoritesWindow: boolean;
+  showFavorites: boolean;
+  emptyFavorites: boolean;
+  favoriteItemsCount: number;
+
+  constructor(public router: Router, private menusService: MenusService, private addTabFuntionService: AddTabFunctionService) { }
+
+  ngOnInit() {
+    //this.hideMenus[0] = false;
+    this.getFunctionalMenuForUser();
+
+  }
+
+  unflatten(array: any, parent?: any, tree?: any) {
+    tree = typeof tree !== 'undefined' ? tree : [];
+    parent = typeof parent !== 'undefined' ? parent : { menuId: null };
+    var children = _.filter(array, function (child: any) {
+      return child.parentMenuId == parent.menuId;
+    });
+    if (!_.isEmpty(children)) {
+      if (parent.menuId === null) {
+        tree = children;
+      } else {
+        parent['children'] = children
+      }
+      _.each(children, function (child: any) {
+        this.unflatten(array, child)
+      }, this);
+    }
+
+    return tree;
+  }
+  getFunctionalMenuForUser() {
+    this.menusService.getFunctionalMenuForUser().subscribe((jsonHeaderMenu: any) => {
+      this.megaMenuDataObject = this.unflatten(jsonHeaderMenu);
+      // for (let entry of this.megaMenuDataObject) {
+      //   console.log('First level '+entry.text);
+      //   for (let secondLevel of entry.children)
+      //   {
+      //     if(secondLevel)
+      //   {
+      //     console.log('Second level '+secondLevel.text);
+      //     for (let thirdLevel of secondLevel.children)
+      //   {
+      //     console.log('Third level '+thirdLevel.text);
+      //   }
+      //   }
+
+      //   }
+
+      // }
+
+
+    }, (err) => {
+      console.log('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err);
+    });
+
+  }
+  getFavoriteItems() {
+    this.menusService.getFavoriteItems().toPromise().then((jsonFavourites: any) => {
+      this.favoritesMenuItems = jsonFavourites;
+      if (this.favoritesMenuItems) {
+        this.favoriteItemsCount = this.favoritesMenuItems.length;
+      }
+    }, (err) => {
+      console.log('HeaderCtrl::getFavoriteItems: HeaderCtrl json returned: ' + err);
+    });
+  }
+  loadFirstLevel(index: any) {
+    this.hideMenus = [];
+    this.hideSecondLevelMenus = [];
+    for (let firstLevelIndex = 0; firstLevelIndex < this.megaMenuDataObject.length; firstLevelIndex++) {
+      this.hideMenus.push(false);
+      this.hideSecondLevelMenus.push(new Array(this.megaMenuDataObject[firstLevelIndex].length).fill(false));
+    }
+    this.hideMenus[index] = true;
+    if (!this.favoritesMenuItems) {
+      this.getFavoriteItems();
+    }
+
+  }
+  isUrlFavorite(menuId: any) {
+    if (this.favoritesMenuItems) {
+      var jsonMenu = JSON.stringify(this.favoritesMenuItems);
+      var isMenuFavorite = jsonMenu.indexOf('menuId\":' + menuId);
+      if (isMenuFavorite == -1) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+    else {
+      return false;
+    }
+  }
+  submenuLevelAction(index: any, column: any) {
+    //console.log('index and column' + index + column);
+    if (index == 'Favorites' && this.favoriteItemsCount != 0) {
+      this.favoritesWindow = true;
+      this.showFavorites = true;
+      this.emptyFavorites = false;
+    }
+    if (index == 'Favorites' && this.favoriteItemsCount == 0) {
+      this.favoritesWindow = true;
+      this.showFavorites = false;
+      this.emptyFavorites = true;
+    }
+    if (index != 'Favorites') {
+      this.favoritesWindow = false;
+      this.showFavorites = false;
+      this.emptyFavorites = false;
+    }
+  }
+  hideFavoritesWindow() {
+    this.showFavorites = false;
+    this.emptyFavorites = false;
+  }
+  removeAsFavoriteItem(event: any, menuId: any) {
+    this.menusService.removeFavoriteItem(menuId).subscribe(() => {
+      //angular.element('#' + event.target.id).css('color', '#666666');
+      this.getFavoriteItems();
+    }, (err) => {
+      console.error('HeaderCtrl::removeAsFavoriteItem: API removeFavoriteItem error: ' + err);
+    });
+  }
+  hideThirdLevelMenu(firstLevelIndex: any, secondLevelIndex: any) {
+    this.hideSecondLevelMenus = [];
+    for (let firstLevelIndex = 0; firstLevelIndex < this.megaMenuDataObject.length; firstLevelIndex++) {
+      this.hideSecondLevelMenus.push(new Array(this.megaMenuDataObject[firstLevelIndex].length).fill(false));
+    }
+    this.hideSecondLevelMenus[firstLevelIndex][secondLevelIndex] = true;
+  }
+
+  clickOutSide(event: any) {
+    this.hideMenus = [];
+    this.hideSecondLevelMenus = [];
+    for (let firstLevelIndex = 0; firstLevelIndex < this.megaMenuDataObject.length; firstLevelIndex++) {
+      this.hideMenus.push(false);
+      this.hideSecondLevelMenus.push(new Array(this.megaMenuDataObject[firstLevelIndex].length).fill(false));
+    }
+
+  }
+  setAsFavoriteItem(event: any, menuId: any) {
+
+  }
+  goToUrl(item: any) {
+    //console.log('Get into URL function' + item.url);
+    let url = item.url;
+    let restrictedApp = item.restrictedApp;
+    if (!url) {
+      console.log('HeaderCtrl::goToUrl: No url found for this application, doing nothing..');
+      return;
+    }
+    if (restrictedApp) {
+      window.open(url, '_blank');
+    } else {
+      if (item.url == "getAccess" || item.url == "contactUs") {
+
+        this.router.navigate(['/' + item.url]);
+
+      } else {
+        var tabContent = {
+          id: new Date(),
+          title: item.text,
+          url: item.url,
+          appId: item.appid
+        };
+        this.addTabFuntionService.filter(tabContent);
+      }
+    }
+
+  }
+  auditLog(link: any, action: any) {
+
+  }
+
+}