Merge "Added Contact-Us Component and Service"

10 files changed, 1122 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.html b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.html
new file mode 100644
index 00000000..0d710f98
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.html
@@ -0,0 +1,156 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2017 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 class="container">
+  <!--Modal Headers-->
+  <div class="modal-header">
+    <h4 class="modal-title">Manage Contact Us</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+        <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <!--Modal Body goes here-->
+  <div class="modal-body">
+    <div class="c-ecomp-portal-abs-table contactus-manage-table">
+      <table b2b-table id="table-main" table-data="contactUsList"	current-page="ignoredCurrentPage">
+        <thead b2b-table-row type="header">
+          <tr>
+            <th id="th-users-0" b2b-table-header key="ecomp_function" default-sort="a">App Name</th>
+            <th id="th-users-1" b2b-table-header key="app_name" sortable="true">Contact	Name</th>
+            <th id="th-users-2" b2b-table-header key="app_name" sortable="true">Contact	Email</th>
+            <th id="th-users-3" b2b-table-header key="role_name" sortable="true">Contact URL</th>
+            <th id="th-users-4" b2b-table-header key="role_name" sortable="true">Description</th>
+            <th id="th-users-5" b2b-table-header key="role_name" sortable="true">Edit</th>
+            <th id="th-users-6" b2b-table-header key="role_name" sortable="true">Delete</th>
+          </tr>
+        </thead>
+        <!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->
+        <tbody b2b-table-row type="body" class="table-body" track-by="$index" *ngFor="let rowData of contactUsList; index as i">
+          <tr id="tr-rowData" ng-click="">
+            <td b2b-table-body>
+              <div id="users-page-td-appName" [innerHtml]="rowData.appName"></div>
+            </td>
+            <td b2b-table-body>
+              <div id="users-page-td-name" [hidden]="showEdit" [innerHtml]="rowData.contactName"></div> 
+              <input	class="input-inline-edit-text" type="text"	*ngIf="showEdit"	[(ngModel)]="rowData.contactName" />
+            </td>
+            <td b2b-table-body>
+              <div id="users-page-td-email" [hidden]="showEdit"	[innerHtml]="rowData.contactEmail"></div> 
+              <input	class="input-inline-edit-text" type="text"	*ngIf="showEdit"	[(ngModel)]="rowData.contactEmail" />
+            </td>
+            <td b2b-table-body>
+              <div id="users-page-td-url" [hidden]="showEdit"	[innerHtml]="rowData.url"></div> 
+              <input		class="input-inline-edit-text" type="text"	*ngIf="showEdit" [(ngModel)]="rowData.url" />
+            </td>
+            <td b2b-table-body>
+              <div id="users-page-td-descr" [hidden]="showEdit"		[innerHtml]=" rowData.description"></div> 
+              <input	class="input-inline-edit-text" type="text"	*ngIf="showEdit"	[(ngModel)]="rowData.description" />
+            </td>
+            <td b2b-table-body>
+              <div class="edit-contact-us" [hidden]="showEdit">
+                  <span class="icon-edit" (click)="showEdit=true">
+                      <i class="icon ion-md-create"></i>
+                  </span>
+              </div> 
+              <span *ngIf="showEdit" (click)="editContactUs(rowData)"> 
+                  <i class="icon ion-md-save"></i>
+              </span>
+            </td>
+            <td b2b-table-body>
+              <div class="delete-contact-us">
+                <span class="icon-trash" (click)="delContactUs(rowData)">
+                    <i class="icon ion-md-trash"></i>
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  
+    <div class="divider-line"></div>
+  
+    <div class="contactus-addWidgetHeader">
+      <div id="addWidgetHeader" class="contact-us-margin">
+        <p class="edit-contactus-title">Add Application Contact Information</p>
+      </div>
+      <div id="addWidget" class="contact-us-margin">
+        <div>
+          <form name="contactForm" novalidate autocomplete="off">
+            <div id="add-contact-us-field-appname" class="add-contact-us-field">
+              <mat-form-field class="contact-us-applications-select">
+                  <mat-label> <span id="required" class="mots-property-label-spn"	visible="false"> *</span>Application Name </mat-label>
+                  <mat-select name="contact-us-applications-select" id="application" 
+                    name="applicationName" [(ngModel)]="selectedApp" [(value)]="selected">
+                    <mat-option *ngFor="let d of contactUsAllAppList" [value]="d" >{{d.title}}</mat-option>
+                  </mat-select>
+              </mat-form-field>
+              <div id="mots-property-label-required"	*ngIf="selectedApp==null || selectedApp==''">
+                <small class="mandatory-categories">App Name is Required</small>
+              </div>
+            </div>
+            <br>
+            <div class="addApplicationContactInfo">
+              <div id="add-contact-us-field-contactname"	class="add-contact-us-field">
+                <div id="property-label-name" class="property-label">Contact Name</div>
+                <input id="property-input-name" name="name" class="input-text-area" type="text"	[(ngModel)]="newContactUs.contactName" />
+              </div>
+              <div id="add-contact-us-field-email" class="add-contact-us-field">
+                <div id="property-label-email" class="property-label">Contact Email</div>
+                <input id="property-input-email" name="email" class="input-text-area" type="text" [(ngModel)]="newContactUs.contactEmail" />
+              </div>
+              <div id="add-contact-us-field-url" class="add-contact-us-field">
+                <div id="property-label-url" class="property-label">Contact	URL</div>
+                <input id="property-input-url" name="url" class="input-text-area" type="text" [(ngModel)]="newContactUs.url" />
+              </div>
+            </div>
+            <div id="add-contact-us-field-desc" class="add-contact-us-field-des">
+              <div id="property-label-desc" class="property-label">Description</div>
+              <textarea id="property-input-desc" name="description"	class="property-label-desc-txtarea" [(ngModel)]="newContactUs.description"></textarea>
+            </div>
+          </form>
+        </div>		
+      </div>
+    </div>
+  </div>
+  <!--Modal Footer goes Here-->
+  <div class="modal-footer">
+      <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Close</button> &nbsp;
+      <button type="button" class="btn btn-primary" (click)="addNewContactUs()">Add New</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.scss b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.scss
new file mode 100644
index 00000000..bff240e2
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.scss
@@ -0,0 +1,79 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+ ::ng-deep .modal-dialog { 
+    max-width: 1200px;
+    width: 1200px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.addApplicationContactInfo{
+    display: inline-flex;
+}
+
+.addApplicationContactInfo input[type="text"] {
+    width: 22em;
+    margin-right: 8px;
+}
+
+.property-label-desc-txtarea {
+    overflow: auto;
+    resize: vertical;
+    width: 67em;
+}
+
+.divider-line{
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    padding-bottom: 50px;
+}
+
+.edit-contactus-title {
+    margin-top: 28px;
+    margin-bottom: 1rem;
+    font-size: 23px;
+}
+
+.required:before {
+    color: #cf2a2a;
+    margin-right: 2px;
+    content: "* ";
+    position: absolute;
+    top: 45px;
+    left: 28px;
+}
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.spec.ts b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.spec.ts
new file mode 100644
index 00000000..06b6995a
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============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 { ContactUsManageComponent } from './contact-us-manage.component';
+
+describe('ContactUsManageComponent', () => {
+  let component: ContactUsManageComponent;
+  let fixture: ComponentFixture<ContactUsManageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactUsManageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactUsManageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.ts b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.ts
new file mode 100644
index 00000000..e04ccb77
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.ts
@@ -0,0 +1,182 @@
+/*-
+ * ============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 { Component, OnInit, Input} from '@angular/core';
+import { ContactUsService } from '../../../shared/services/index';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-contact-us-manage',
+  templateUrl: './contact-us-manage.component.html',
+  styleUrls: ['./contact-us-manage.component.scss']
+})
+export class ContactUsManageComponent implements OnInit {
+
+  contactUsList = [];
+  contactUsAllAppList = [];
+  result: any;
+  selectedApp: any;
+  showEdit: boolean = false;
+  newContactUs ={
+    appId:'',
+    appName:'',
+    description:'',
+    contactName:'',
+    contactEmail:'',
+    url:'' ,
+    activeYN:''    			
+ };
+  
+
+  constructor(public activeModal: NgbActiveModal, public ngbModal: NgbModal, public contactUsService: ContactUsService) { }
+
+  ngOnInit() {
+
+    this.getContactUsList();
+    this.getListOfApp();
+  }
+
+  getContactUsList(){
+    console.log("getContactUsList called...");
+    this.contactUsService.getContactUs()
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("getContactUsList Data :: ", _data);
+        if (this.result.response == null || this.result.response == 'undefined') {
+            console.log('ContactUsService::getContactUsList Failed: Result or result.data is null');
+        }else{
+          for(var i=0; i<this.result.response.length;i++){
+            if(this.result.response[i].appId!=1)
+              this.contactUsList.push(this.result.response[i]);
+          }
+        }
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  getListOfApp(){
+    console.log("getListOfApp called...");
+    this.contactUsService.getListOfApp()
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("getListOfApp Data :: ", _data);
+        if (this.result == null || this.result == 'undefined') {
+            console.log('ContactUsService::getListOfApp Failed: Result or result.data is null');
+        }else{
+          let res1 = this.result;
+          let realAppIndex = 0;
+          this.contactUsAllAppList.length=0;
+          console.log("this.contactUsList ",this.contactUsList)
+          for (var i = 1; i <= res1.length; i++) {
+              if (!res1[i - 1].restrictedApp) {
+                var okToAdd = true;
+                for(var j =0; j<this.contactUsList.length;j++){
+                  if(res1[i - 1].title == this.contactUsList[j].appName){
+                    okToAdd=false;
+                    console.log("okToAdd=false res1[i - 1].title ",res1[i - 1].title);
+                  }
+                }
+                // not allowed to add(duplicate) another entry if the app is already available in the table
+                if(okToAdd){
+                  if(res1[i - 1].title){
+                    this.contactUsAllAppList.push({
+                        index: realAppIndex,
+                        title: res1[i - 1].title,
+                        value: res1[i - 1].index
+                    });
+                  }       
+                  realAppIndex = realAppIndex + 1;
+                }         
+              }
+          }
+        }
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  addNewContactUs(){
+    console.log("Calling addNewContactUs");
+    let selectedApplication = this.selectedApp;
+    this.newContactUs.appId = selectedApplication.value;
+    this.newContactUs.appName = selectedApplication.title;
+    console.log("newContactUsObj ",this.newContactUs);
+    this.contactUsService.addContactUs(this.newContactUs)
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("addContactUs response :: ", _data);
+        this.contactUsList.push(this.newContactUs);
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  editContactUs(contactObj: any){
+
+    var contactUsObj={
+      appId:contactObj.appId,
+      appName:contactObj.appName,
+      description:contactObj.description,
+      contactName:contactObj.contactName,
+      contactEmail:contactObj.contactEmail,
+      url:contactObj.url,       		
+    };
+
+    this.contactUsService.modifyContactUs(contactUsObj)
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("editContactUsFun response :: ", _data);
+        this.showEdit=false;
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  delContactUs(appObj: any){
+      this.contactUsService.removeContactUs(appObj.appId)
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("delContactUsFun response :: ", _data);
+        this.contactUsList.splice(appObj, 1);
+      },error =>{
+        console.log(error);
+      });
+  }
+
+}
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.html b/portal-FE-common/src/app/pages/contact-us/contact-us.component.html
new file mode 100644
index 00000000..5930c382
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.html
@@ -0,0 +1,163 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2017 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 class="container">
+    <div id="contact-us-title" class="w-ecomp-main-view-title">
+        <h1 class="heading-page">Contact Us</h1>
+    </div>
+    <button type="button" style="float: right;" class="btn btn-primary" (click)="editContactUsModal()">
+      <i class="icon ion-md-person-add"></i>Edit Contact Us
+    </button>
+    <div class="w-ecomp-contactUs-home">
+       <div class="contactUs-home-container" id="page-content">
+          <div class="admins-page-main">
+              <div class="contactUs-general-div">
+                <span class="contactUs-txt">
+                  To report an issue with ECOMP Portal, open a ticket at the 
+                  <a href="{{ush_TicketInfoUrl}}" target="_blank">User Self Help system</a>.
+                </span><br />
+              </div>
+            
+              <div class="contactUs-general-div">
+                <span class="contactUs-txt">
+                  To give feedback to the ECOMP Portal team, send email to 
+                  <a href="mailto:{{portalInfo_Address}}" target="_top">{{portalInfo_Address}}</a>. 
+                </span><br />
+              </div>
+            
+              <div class="contactUs-general-div">
+                <span class="contactUs-txt">
+                  To learn more about ECOMP Portal, visit the 
+                  <a href="{{feedback_Url}}" target="_blank">ECOMP Portal wiki</a> (may need to request access).
+                </span><br />
+              </div>
+
+              <!-- Function Categories -->		
+              <div id="appFunctionInfo" class="w-ecomp-main-view-title"> Application Functions
+                <br />
+                <div b2b-table table-data="contact.functionalTableData" class="b2b-table-div">
+                    <table mat-table [dataSource]="dataSource" matSort>
+                       <!-- Category -->
+                      <ng-container matColumnDef="category">
+                          <th id="col1" mat-header-cell *matHeaderCellDef> Category  </th>
+                          <td id="rowheader_t1_{{i}}-category" 
+                            mat-cell *matCellDef="let element; let i = index;"> {{element.category}}
+                          </td>
+                        </ng-container>
+                    
+                        <!-- Application Name Column -->
+                        <ng-container matColumnDef="eCOMPFunctions">
+                          <th id="col2" mat-header-cell *matHeaderCellDef> ECOMP Functions </th>
+                          <td id="rowheader_t1_{{i}}-eCOMPFunctions" 
+                            mat-cell *matCellDef="let element; let i=index;"> {{element.functions}} </td>
+                        </ng-container>
+
+                         <!-- Application Name Column -->
+                        <ng-container matColumnDef="eCOMPApplications">
+                          <th id="col2" mat-header-cell *matHeaderCellDef> ECOMP Applications </th>
+                          <td id="rowheader_t1_{{i}}-eCOMPApplications" 
+                            mat-cell *matCellDef="let element; let i=index;"> 
+                            <a href="javascript:void(0)" (click)="showApplicationInfo(element.app_Id)">
+                              {{element.app_Name}} 
+                            </a>
+                          </td>
+                        </ng-container>
+                         
+                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    </table>                    
+                </div>
+            </div><br />
+                
+            <!-- Display applicationInfo panels -->
+            <div id="allAppInfo">
+                <div class="w-ecomp-main-view-title"> All Applications</div>	<br />	
+                <div class="contactUs-general-div">
+                  <div class="contact-us-table">
+                  <div class="c-ecomp-portal-abs-table default contactUs-table-ht">
+                    <div *ngFor="let rowData of appTable; index as i" class="contactUs-collapsible-panel">
+                        <div id="{{rowData.app_Id}}" class="contactUs-table-ht" class="contactUs-panel-header" (click)="showApplicationInfo(rowData.app_Id)">
+                            <span id="appId{{i}}" class="contactUs-table-spn">{{rowData.app_name}}</span>
+                            <span class="contactUs-table-title-sp">&nbsp;&nbsp;
+                               <span id="arrowup{{rowData.app_Id}}" [hidden]="showUp" title="Collapse app contact section" class="icon-controls-upPRIMARY">
+                                <i class="fa fa-2x fa-angle-up" aria-hidden="true"></i>
+                               </span>&nbsp;&nbsp;
+                               
+                               <span id="arrowdown{{rowData.app_Id}}" [hidden]="showDown" title="Expand app contact section" class="icon-controls-down">
+                                <i class="fa fa-2x fa-angle-down" aria-hidden="true"></i>
+                               </span>
+                            </span>
+                        </div>
+                        <div id="collapse{{rowData.app_Id}}" [hidden]="true" class="contactUs-collapsible-panel">
+                            <div class="contactUs-txt" [hidden]="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 
+                                <span class="contactUs-collapsible-panel-spn"> 
+                                  No application information is available. Please use the links above to contact the ECOMP Portal team. 
+                                </span>
+                            </div>
+                            <div class="contactUs-txt" *ngIf="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 
+                                <table class="contactUs-main-table">
+                                <tr>
+                                  <td class="contactUs-panel-labels contactUs-main-panel-labels">Contact:</td>
+                                  <td class="contactUs-panel-labels contactUs-main-panel-value">{{rowData.contact_name}}</td>
+                                </tr>
+                                <tr>
+                                  <td class="contactUs-panel-labels">Email:</td>
+                                  <td class="contactUs-panel-labels"><a href="mailto:{{rowData.contact_email}}" target="_top">{{rowData.contact_email}}</a></td>
+                                </tr>
+                                <tr>
+                                  <td class="contactUs-panel-labels">Info URL:</td>
+                                  <td class="contactUs-panel-labels"><a href="{{rowData.url_Info}}" target="_blank">{{rowData.url_Info}}</a></td>
+                                </tr>
+                                <tr>
+                                  <td class="contactUs-panel-labels">Description:</td>
+                                  <td class="contactUs-panel-labels">{{rowData.desc}}</td>
+                                </tr>
+                                <tr>
+                                  <td class="contactUs-panel-labels">Get access:</td>
+                                  <td class="contactUs-panel-labels"><a href="javascript:void(0)" (click)="goGetAccess(rowData.app_name);">Click for application and role information</a></td>
+                                </tr>
+                                </table>
+                              </div>				
+                        </div>
+                    </div>
+                  </div>
+                  </div>
+                </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.scss b/portal-FE-common/src/app/pages/contact-us/contact-us.component.scss
new file mode 100644
index 00000000..b3fb8d6a
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.scss
@@ -0,0 +1,74 @@
+
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2017 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============================================
+ *
+ * 
+ */
+.w-ecomp-contactUs-home .contactUs-txt {
+    font-weight: 400;
+    color: #666;
+    font-size: 15px;
+    font-family: Omnes-ECOMP-W02-Medium,Arial;
+    margin: 10px;
+}
+
+.w-ecomp-contactUs-home .contactUs-home-container .contactUs-general-div {
+    margin: auto!important;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
+    margin-bottom: 0;
+    width: 1170px;
+}
+
+.w-ecomp-contactUs-home .w-ecomp-main-view-title {
+    font-family: Omnes-ECOMP-W02,Arial;
+    font-size: 20px;
+}
+
+button#edit-button-contact-us {
+    float: right;
+}
+
+.container th{
+    padding-bottom: 15px;
+    font-weight: bold;
+}
+
+.w-ecomp-contactUs-home .contactUs-collapsible-panel {
+    margin: auto;
+}
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.spec.ts b/portal-FE-common/src/app/pages/contact-us/contact-us.component.spec.ts
new file mode 100644
index 00000000..db77e078
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============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 { ContactUsComponent } from './contact-us.component';
+
+describe('ContactUsComponent', () => {
+  let component: ContactUsComponent;
+  let fixture: ComponentFixture<ContactUsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactUsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.ts b/portal-FE-common/src/app/pages/contact-us/contact-us.component.ts
new file mode 100644
index 00000000..d58733bd
--- /dev/null
+++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.ts
@@ -0,0 +1,196 @@
+/*-
+ * ============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 { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+import { MatSort, MatPaginator } from '@angular/material';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ContactUsService } from '../../shared/services/index';
+import { ContactUsManageComponent } from './contact-us-manage/contact-us-manage.component';
+
+@Component({
+  selector: 'app-contact-us',
+  templateUrl: './contact-us.component.html',
+  styleUrls: ['./contact-us.component.scss']
+})
+export class ContactUsComponent implements OnInit {
+
+  contactUsList: Array<Object> = [];
+  appTable: Array<Object> = [];
+  functionalTableData: Array<Object> = [];
+
+  ush_TicketInfoUrl: string;
+  portalInfo_Address: string;
+  feedback_Url: string;
+  showUp: boolean = true;
+  showDown: boolean = false;
+
+  result: any;
+  isEditMode: boolean = false;
+  displayedColumns: string[] = ['category', 'eCOMPFunctions','eCOMPApplications'];
+  dataSource = new MatTableDataSource(this.functionalTableData);
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(public contactUsService: ContactUsService, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    this.appTable=[];
+    this.functionalTableData=[];
+
+    this.getContactUSPortalDetails();
+    this.updateContactUsTable();
+    this.getAppCategoryFunctions()
+  }
+
+  getContactUSPortalDetails(){
+    console.log("getContactUSPortalDetails called...");
+    this.contactUsService.getContactUSPortalDetails()
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("getContactUSPortalDetails Data :: ", _data);
+        if (this.result.response == null || this.result.response == 'undefined') {
+            console.log('ContactUsService::getContactUSPortalDetails Failed: Result or result.data is null');
+        }else{
+          var source = JSON.parse(this.result.response);
+          this.ush_TicketInfoUrl = source.ush_ticket_url; 
+          this.portalInfo_Address = source.feedback_email_address; 
+          this.feedback_Url = source.portal_info_url;
+        }
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  updateContactUsTable(){
+    console.log("updateContactUsTable called...");
+    this.contactUsService.getAppsAndContacts()
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("getAppsAndContacts Data :: ", _data);
+        if (this.result.response == null || this.result.response == 'undefined') {
+            console.log('ContactUsService::getAppsAndContacts Failed: Result or result.data is null');
+        }else{
+          var tableData=[];
+          var source = this.result.response;
+          for(var i=0; i<source.length; i++) {
+            var dataArr = source[i];
+            if ( !dataArr.appName  || dataArr.appId == 1) {
+              continue;
+            }
+
+            var dataTemp={
+              app_name: dataArr.appName,
+              contact_name: dataArr.contactName,
+              contact_email: dataArr.contactEmail,
+              desc: dataArr.description,
+              url_Info: dataArr.url,
+              app_Id: dataArr.appId,
+            }
+            
+            tableData.push(dataTemp);
+          }   
+
+          this.appTable=tableData;
+        }
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  getAppCategoryFunctions(){
+    console.log("getAppCategoryFunctions called");
+    this.contactUsService.getAppCategoryFunctions()
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("getAppCategoryFunctions Data :: ", _data);
+        if (this.result.response == null || this.result.response == 'undefined') {
+            console.log('ContactUsService::getAppCategoryFunctions Failed: Result or result.data is null');
+        }else{
+            var tablefunctionalData=[];
+            var source = this.result.response;
+            for(var i=0;i<source.length; i++) {
+              var datafunctionalArr = source[i];
+                var datafuntionalTemp={
+                  category: datafunctionalArr.category,
+                  app_Name: datafunctionalArr.application,
+                  functions: datafunctionalArr.functions,
+                  app_Id: datafunctionalArr.appId,
+                }
+                tablefunctionalData.push(datafuntionalTemp);
+            }              	
+            this.functionalTableData = tablefunctionalData;
+            this.populateTableData(this.functionalTableData);
+        }
+      },error =>{
+        console.log(error);
+    });
+  }
+
+  populateTableData(functionalTableData: Array<Object>){
+    this.dataSource = new MatTableDataSource(functionalTableData);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  editContactUsModal() {
+    const modalRef = this.ngbModal.open(ContactUsManageComponent, { size: 'lg' });
+  }
+
+  showApplicationInfo(appId: any){
+    console.log("AppId Contact US...",appId);
+    let appInfoDiv = document.getElementById('collapse'+appId);
+    let uparrowDiv = document.getElementById('arrowup'+appId);
+    let downarrowDiv = document.getElementById('arrowdown'+appId);
+
+    if(!appInfoDiv.getAttribute('hidden')){
+      appInfoDiv.setAttribute("hidden","true");
+      uparrowDiv.setAttribute("hidden", "true");
+      downarrowDiv.removeAttribute("hidden");
+    }else if(appInfoDiv.getAttribute('hidden')){
+      appInfoDiv.removeAttribute("hidden");
+      uparrowDiv.removeAttribute("hidden");
+      downarrowDiv.setAttribute("hidden","true");
+    }
+  }
+
+  goGetAccess(app_name: any){
+    console.log("Get Access :: goGetAccess method implemetation is pending... appName : ",app_name);
+  }
+
+}
diff --git a/portal-FE-common/src/app/shared/services/contact-us/contact-us.service.spec.ts b/portal-FE-common/src/app/shared/services/contact-us/contact-us.service.spec.ts
new file mode 100644
index 00000000..03d55d05
--- /dev/null
+++ b/portal-FE-common/src/app/shared/services/contact-us/contact-us.service.spec.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============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 { TestBed } from '@angular/core/testing';
+
+import { ContactUsService } from './contact-us.service';
+
+describe('ContactUsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ContactUsService = TestBed.get(ContactUsService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/shared/services/contact-us/contact-us.service.ts b/portal-FE-common/src/app/shared/services/contact-us/contact-us.service.ts
new file mode 100644
index 00000000..c46abab2
--- /dev/null
+++ b/portal-FE-common/src/app/shared/services/contact-us/contact-us.service.ts
@@ -0,0 +1,96 @@
+/*-
+ * ============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 { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../../environments/environment';
+import { Observable } from 'rxjs';
+import * as uuid from 'uuid';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactUsService {
+
+  api = environment.api;
+  resp:string;
+  headerParams = {'X-Widgets-Type': 'all', 'X-ECOMP-RequestID': uuid.v4() };
+
+  constructor(private http: HttpClient) { }
+
+  getListOfApp(): Observable<any>{ 
+    let getListOfAppURL  = this.api.availableApps;
+    return this.http.get(getListOfAppURL , { withCredentials: true } );
+  }
+
+  getContactUs(): Observable<any>{ 
+    let getContactUsURL  = this.api.getContactUS;
+    return this.http.get(getContactUsURL , { withCredentials: true } );
+  }
+
+  getAppsAndContacts(): Observable<any>{ 
+    let getAppsAndContactsURL  = this.api.getAppsAndContacts;
+    return this.http.get(getAppsAndContactsURL , { withCredentials: true } );
+  }
+
+  getContactUSPortalDetails(): Observable<any>{ 
+    let getContactUSPortalDetailsURL  = this.api.getContactUSPortalDetails;
+    return this.http.get(getContactUSPortalDetailsURL , { withCredentials: true } );
+  }
+
+  getAppCategoryFunctions(): Observable<any>{ 
+    let getAppCategoryFunctionsURL  = this.api.getAppCategoryFunctions;
+    return this.http.get(getAppCategoryFunctionsURL , { withCredentials: true } );
+  }
+
+  addContactUs(newContactUs: any): Observable<any>{
+    let addContactUsURL  = this.api.saveContactUS;
+    return this.http.post(addContactUsURL, newContactUs, { withCredentials: true });
+  }
+
+  modifyContactUs(contactUsObj: any): Observable<any>{
+    let modifyContactUsURL  = this.api.saveContactUS;
+    return this.http.post(modifyContactUsURL, contactUsObj, { withCredentials: true });
+  }
+
+  removeContactUs(id: any): Observable<any>{
+    let removeContactUsURL  = this.api.deleteContactUS + '/' + id;
+    return this.http.post(removeContactUsURL, { withCredentials: true });
+  }
+
+}