diff options
author | 2020-01-14 15:23:08 +0000 | |
---|---|---|
committer | 2020-01-14 15:23:08 +0000 | |
commit | 36df7fab068105b4337a1f32c412749d0b1d37cb (patch) | |
tree | dd43d3c64386693da33c15501979a9fa011634c1 /portal-FE-common/src/app | |
parent | 147d575c4899aa1abf32fbb7fd8d89ad181167a2 (diff) | |
parent | 98a997e3f7a3f76856f2a57d5d0069763533cabc (diff) |
Merge "application catalog upgraded version"
Diffstat (limited to 'portal-FE-common/src/app')
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; + } + }); + + } +} |