application catalog upgraded version

Application catalog upgraded version

Issue-ID: PORTAL-799
Change-Id: I9bc85a3cd98083342b971fff7d5a140f223c34df
Signed-off-by: jegadeeshbabu3 <jegadeesh.babu@att.com>

4 files changed, 558 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.html b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.html
new file mode 100644
index 00000000..af54d276
--- /dev/null
+++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.html
@@ -0,0 +1,143 @@
+<!--
+  ============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>
+  <div id="page-content">
+    <div id="title">
+      <h1>{{'Application Catalog'}}</h1>
+    </div>
+    <div>
+      <div>
+        <div id="container" class="simulateCatGridHeader">
+          <span class="simulateCatGridHeaderDetails"> Click the check
+            boxes below to choose which applications are shown on the <a [routerLink]="['/applicationsHome']">home
+              page</a>.
+          </span> <br> <br>
+          <div>
+            <div class="catalog-radio-div">
+              <label class="radio">
+                <span>{{'Filter'}}: </span>
+              </label>
+            </div>
+            <div class="catalog-radio-div">
+              <label class="radio">
+                <input type="radio" [(ngModel)]="radioValue" id="radio-button-all" name="All" value="All">
+                <i class="skin"></i>
+                <span>{{'All'}}</span>
+              </label>
+            </div>
+            <div class="catalog-radio-div">
+              <label class="radio">
+                <input type="radio" [(ngModel)]="radioValue" id="radio-button-accessible" name="Accessible"
+                  value="Accessible">
+                <i class="skin"></i>
+                <span>{{'Accessible'}}</span>
+              </label>
+            </div>
+            <div class="catalog-radio-div">
+              <label class="radio">
+                <input type="radio" [(ngModel)]="radioValue" id="radio-button-homepage" name="Selected"
+                  value="Selected">
+                <i class="skin"></i>
+                <span>{{'On Home Page'}}</span>
+              </label>
+            </div>
+
+          </div>
+        </div>
+        <div>
+          <div>
+            <gridster [options]="options" class="appCatalogue-boarder">
+
+
+              <div *ngFor="let item of layout">
+              <gridster-item [item]="item" *ngIf="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')">
+                <div class="gridster-box" [ngStyle]="{'color': !item.access ? 'lightgray':''}">
+                  <div class="gridster-box-header">
+
+                    <mat-icon class="icon-content-gridguide">drag_handle</mat-icon>
+                    <h3>{{ item.name | elipsis: 13}}</h3>
+                    <span style="position: absolute;right:1em" *ngIf="item.access || isUserSuperAdmin">
+                      <label id="widget-checkbox-label" class="checkbox">
+
+                        <input type="checkbox" id="{{item.name.split(' ').join('-')}}-checkbox"
+                          [(ngModel)]="item.select" (ngModelChange)="storeSelection(item)" />
+
+
+                        <i class="skin"></i>
+                      </label>
+                    </span>
+
+
+                  </div>
+                  <div class="gridster-box-content" [ngStyle]="{'cursor':'pointer',
+										'background-image': 'url('+(item.imageLink)+')',
+										'order': item.order, 
+										'background-color':'white',
+										'background-repeat': 'no-repeat',
+                    'background-size': '168px 118px',
+                     'height': '80%'}" (click)="openAddRoleModal(item)">
+                  </div>
+
+                </div>
+              </gridster-item>
+            </div>
+
+
+
+            </gridster>
+          </div>
+        </div>
+
+      </div>
+
+      <div id="widgets-disclaimer" class="w-ecomp-main-disclaimer">
+        To request access to an application widget, please visit the <a>Get Access</a> page.
+      </div>
+    </div>
+  </div>
+</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/application-catalog/application-catalog.component.scss b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.scss
new file mode 100644
index 00000000..29198a52
--- /dev/null
+++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.scss
@@ -0,0 +1,174 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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============================================
+ *
+ * 
+ */
+
+
+
+ :host {  .toolbar {
+  height: 100px;
+  display: flex;
+}  gridster {
+  display: flex;
+  height: calc(100vh - 115px);
+  flex-direction: column;
+}}
+.icon-content-gridguide{
+  cursor:move;
+  font-size: 14px; 
+  }
+  .form-row {
+    margin-top: -14px;
+}
+.griditem-header{
+  
+  
+    border-bottom: 1px;
+    border-bottom-color: solid gray;
+    
+  
+  
+}
+
+.checkbox, .radio {
+min-height: 10px; 
+padding-left: 0px; 
+}
+
+.simulateCatGridHeader{
+	position: relative;
+    height: 70px !important;
+    border: 1px solid #d3d3d3;
+    border-bottom: 0;
+    background-color: #E5E5E5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+}
+
+.simulateCatGridHeaderTitle{
+	line-height: 20px;
+	margin-top: 10px;
+	 margin-left: 26px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 18px; 
+    color: #444444;
+    float: left;
+}
+
+.simulateCatGridHeaderRadio{
+    line-height: 20px;
+    margin-top: 10px; 
+    margin-left: 10px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 12px;
+    color: #444444;
+    float: left; 
+}
+
+.simulateCatGridHeaderDetails{
+	line-height: 20px;
+    margin-left: 10px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 12px; 
+    color: #444444;
+    float: left;
+}
+
+.simulateGridHeaderHandle{
+	cursor: move;
+    margin: 12px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+    vertical-align: middle;
+    -ms-interpolation-mode: bicubic;
+    display: block;
+}
+
+.catalog-radio-div{ 
+	display:inline-block; 
+	margin-right:5px; 
+} 
+
+.appCatalogue-boarder{
+  background-color: #eee;
+  border: 1px dashed white;
+  
+  overflow-y: auto;
+  overflow-x: hidden;
+  }
+
+  .gridster-box {
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+ 	transition: transform 0.5s ease-out;
+}
+.gridster-box-header {
+    background-color: #fff;
+    padding: 0 0px 0 10px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+    height: 50px !important;
+}
+.gridster-box-header h3 {
+    margin-top: 15px;
+    display: inline-block;
+    font-size: 70%;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+.gridster-box-content {
+    padding: 59px;
+}
+.gridster-box:hover{
+    transform: scale(1.1);
+}
+.gridster-box-header-btns {
+    top: 15px;
+    right: 10px;
+    position: absolute;
+}
+.checkbox input{
+ margin: 6px;
+    left: 112px;
+    top: -20px;
+    }
+.checkbox .skin {
+    left: 125px;
+    top: -18px;
+}
diff --git a/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.spec.ts b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.spec.ts
new file mode 100644
index 00000000..1967d254
--- /dev/null
+++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.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 { ApplicationCatalogComponent } from './application-catalog.component';
+
+describe('ApplicationCatalogComponent', () => {
+  let component: ApplicationCatalogComponent;
+  let fixture: ComponentFixture<ApplicationCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ApplicationCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApplicationCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.ts b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.ts
new file mode 100644
index 00000000..f571dcaa
--- /dev/null
+++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.ts
@@ -0,0 +1,179 @@
+/*-
+ * ============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 } from '@angular/core';
+import { GridsterConfig, GridsterItem } from 'angular-gridster2';
+import { ApplicationCatalogService } from '../../shared/services/application-catalog/application-catalog.service';
+import { IApplicationCatalog } from '../../shared/model/application-catalog.model';
+import { IWidgetCatalog } from '../../shared/model/widget-catalog.model';
+import { environment } from 'src/environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { CatalogModalComponent } from '../catalog-modal/catalog-modal.component';
+import { ExternalRequestAccessService } from 'src/app/shared/services/external-request-access-service/external-request-access.service';
+import { UsersService } from 'src/app/shared/services/users/users.service';
+
+@Component({
+  selector: 'app-application-catalog',
+  templateUrl: './application-catalog.component.html',
+  styleUrls: ['./application-catalog.component.scss']
+})
+export class ApplicationCatalogComponent implements OnInit {
+  widgetCatalogData: IWidgetCatalog[];
+  appCatalogData: IApplicationCatalog[];
+  resultAccessValue: string;
+  orgUserId: string;
+  firstName: string;
+  lastName: string;
+  radioValue: any;
+  isUserSuperAdmin: boolean;
+
+  get options(): GridsterConfig {
+    return this.applicationCatalogService.options;
+  } get layout(): GridsterItem[] {
+    return this.applicationCatalogService.layout;
+  } constructor(private applicationCatalogService: ApplicationCatalogService, private externalRequestAccessService: ExternalRequestAccessService, private userService: UsersService, private modal: NgbModal) { }
+
+  ngOnInit() {
+    this.applicationCatalogService.clearCatalog();
+    this.radioValue = 'All';
+    this.callAppCatalogExecutor();
+  }
+
+  callAppCatalogExecutor() {
+    //Check whether Admin is Super Admin
+    this.checkAdminIsSuperAdmin();
+    //To fetch ML value
+    this.getExternalAccess();
+
+    //Call user profile service
+    this.getUserProfile();
+
+    //Call Application Catalog services
+    this.getAppCatalogService();
+  }
+
+  checkAdminIsSuperAdmin() {
+    this.applicationCatalogService.checkIfUserIsSuperAdmin().subscribe(data => {
+      this.isUserSuperAdmin = data;
+    }, error => {
+      console.log('checkAdminIsSuperAdmin Error Object' + error);
+    });
+  }
+
+  getAppCatalogService() {
+    //console.log("getAppCatalogServices called");
+    this.applicationCatalogService.getAppCatalog().subscribe(data => {
+      //console.log("Response data" + data);
+      this.appCatalogData = data;
+      for (let entry of this.appCatalogData) {
+        //console.log("Check the URL" + environment.api.appThumbnail);
+        var appCatalog = {
+          x: -1,
+          y: -1,
+          id: entry.id,
+          name: entry.name,
+          mlAppName: entry.mlAppName,
+          imageLink: environment.api.appThumbnail.replace(':appId', <string><any>entry.id),
+          restricted: entry.restricted,
+          select: entry.select,
+          access: entry.access,
+          pending: entry.pending,
+          mlproperty: this.resultAccessValue
+        };
+        this.applicationCatalogService.addItem(appCatalog);
+      }
+    }, error => {
+      console.log('getAppCatalogServices Error Object' + error);
+    });
+  };
+
+  storeSelection(appCatalogData: any) {
+    //console.log("Store selection called " + appCatalogData.name);
+    var pendingFlag: boolean = false;
+    if (appCatalogData.access)
+      pendingFlag = false;
+    else
+      pendingFlag = appCatalogData.pending;
+
+    var appData = {
+      appId: appCatalogData.id,
+      select: appCatalogData.select,
+      pending: pendingFlag
+    };
+    this.applicationCatalogService.updateManualAppSort(appData).subscribe(data => {
+      //console.log("Update App sort data" + data);
+    }, error => {
+      console.log('Update App sort error' + error);
+    });
+
+    this.applicationCatalogService.updateAppCatalog(appData).subscribe(data => {
+      //console.log("Update App Catalog data" + data);
+    }, error => {
+      console.log('Update App Catalog error' + error);
+    });
+  };
+  openAddRoleModal(item: any) {
+    //console.log("OpenModal check" + item.id);
+    if ((!item.restricted) && (item.mlproperty)) {
+      this.modal.open(CatalogModalComponent);
+    }
+  }
+
+  getExternalAccess() {
+    //console.log("getExternalAccess service called");
+    this.externalRequestAccessService.getExternalRequestAccessServiceInfo().subscribe(data => {
+      //console.log("Response data" + data);
+      if (data)
+        this.resultAccessValue = data.accessValue;
+    }, error => {
+      console.log('getExternalAccess Error object' + error);
+    });
+  }
+
+  getUserProfile() {
+    const userProfileObservable = this.userService.getUserProfile();
+    userProfileObservable.subscribe((userProfile: any) => {
+      //console.log('UserProfile is ' + userProfile);
+      if (userProfile) {
+        this.orgUserId = userProfile.orgUserId;
+        this.firstName = userProfile.firstName;
+        this.lastName = userProfile.lastName;
+      }
+    });
+
+  }
+}