diff options
Diffstat (limited to 'portal-FE-common/src/app/pages/dashboard-application-catalog')
4 files changed, 484 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.html b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.html new file mode 100644 index 00000000..3169fa01 --- /dev/null +++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.html @@ -0,0 +1,87 @@ +<!-- + ============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 style="height: 100%;"> + <div class="simulateGridHeader"> + <span class="simulateGridHeaderTitle">{{'Applications'}}<span class="dashboardSortHeader">{{'Sort by'}}:</span> + <div class="dashboard-dropdown" id="sort-by-dropdownid-{{selectedSortType.value}}"> + <mat-form-field> + <mat-select [(ngModel)]="this.selectedSortType.value"> + <mat-option *ngFor="let option of sortOptions" [value]="option.value" + (click)="sortTypeChanged(option.value)">{{option.title}}</mat-option> + </mat-select> + </mat-form-field> + </div> + </span> + + </div> + + <div style="height: 100%;"> + <gridster [options]="options" class="appCatalogue-boarder" > + + + <div *ngFor="let item of layout"> + <gridster-item [item]="item"> + <div class="gridster-box"> + <div class="gridster-box-header"> + + <mat-icon class="icon-content-gridguide">drag_handle</mat-icon> + <h3>{{ item.name | elipsis: 13}}</h3> + + + </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>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.scss b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.scss new file mode 100644 index 00000000..2ab9d6b0 --- /dev/null +++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.scss @@ -0,0 +1,130 @@ +/* + * ============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============================================ + * + * + */ +.simulateGridHeader{ + position: relative; + height: 50px !important; + border: 1px solid #d3d3d3; + border-bottom: 0; + background-color: #E5E5E5; + white-space: nowrap; + text-overflow: ellipsis; + z-index: 1; +} + +.simulateGridHeaderTitle{ + line-height: 44px; + margin-left: 26px; + font-family: "Omnes-ECOMP-W02", Arial; + font-size: 18px; + 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; +} + +/* apps gridsters */ +ul { + list-style: none; +} +.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-header i { +font-size: 22px; +} + +.gridster-box-content { + padding: 59px; +} +.gridster-box:hover{ + transform: scale(1.1); +} +.gridster-box-header-btns { + top: 15px; + right: 10px; + position: absolute; +} +.dashboardSortHeader{ + margin-top: -44px; + margin-left: 700px; + } + + .dashboard-dropdown + { + position: absolute; + margin-top: -50px; + left: 82%; + top: 42px; + } + .appCatalogue-boarder{ + background-color: #eee; + border: 1px dashed white; + height: 80%; + } + + .icon-content-gridguide{ + cursor:move; + font-size: 14px; + }
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.spec.ts b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.spec.ts new file mode 100644 index 00000000..48c91804 --- /dev/null +++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-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 { DashboardApplicationCatalogComponent } from './dashboard-application-catalog.component'; + +describe('DashboardApplicationCatalogComponent', () => { + let component: DashboardApplicationCatalogComponent; + let fixture: ComponentFixture<DashboardApplicationCatalogComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardApplicationCatalogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardApplicationCatalogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.ts b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.ts new file mode 100644 index 00000000..baaa4c49 --- /dev/null +++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.ts @@ -0,0 +1,205 @@ +/*- + * ============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'; +import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service'; + +@Component({ + selector: 'app-dashboard-application-catalog', + templateUrl: './dashboard-application-catalog.component.html', + styleUrls: ['./dashboard-application-catalog.component.scss'] +}) +export class DashboardApplicationCatalogComponent implements OnInit { + + widgetCatalogData: IWidgetCatalog[]; + appCatalogData: IApplicationCatalog[]; + resultAccessValue: string; + orgUserId: string; + firstName: string; + lastName: string; + selectedSortType: any; + sortOptions: Array<any>; + + 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 addTabFuntionService: AddTabFunctionService) { + this.sortOptions = [{ + index: 0, + value: 'N', + title: 'Name' + }, + { + index: 1, + value: 'L', + title: 'Last used' + }, + { + index: 2, + value: 'F', + title: 'Most used' + }, + { + index: 3, + value: 'M', + title: 'Manual' + } + ]; + this.selectedSortType = {}; + } + + ngOnInit() { + this.applicationCatalogService.clearCatalog(); + //this.selectedSortType = this.sortOptions[0]; + this.getUserAppsSortTypePreference(); + // + // //this.getUserAppsSortTypePreference(); + //this.getAppCatalogService('N'); + } + + getUserAppsSortTypePreference() { + this.applicationCatalogService.getUserAppsSortTypePreference().subscribe(data => { + //console.log("getUserAppsSortTypePreference data"+data); + if (data) { + var resJson: any = {}; + resJson.value = data; + if (resJson.value === "N" || resJson.value === "") { + resJson.index = 0; + + } else if (resJson.value === "L") { + resJson.index = 1; + + } else if (resJson.value === "F") { + resJson.index = 2; + + } else { + resJson.index = 3; + + } + + this.selectedSortType = this.sortOptions[resJson.index]; + //console.log(this.selectedSortType); + this.getAppCatalogService(data); + } + }, error => { + console.log('getUserAppsSortTypePreference Error Object' + error.message); + }); + + } + + sortTypeChanged(userAppSortTypePref: string) { + //console.log("check whether get into the method"); + if (!userAppSortTypePref) { + this.selectedSortType = this.sortOptions[0]; + } + else { + this.sortOptions.forEach(obj => { + if (obj.value == userAppSortTypePref) { + this.selectedSortType = obj; + } + }) + + } + + this.getAppCatalogService(userAppSortTypePref); + this.saveAppsSortTypePreference(this.selectedSortType); + + } + + getAppCatalogService(userAppSortTypePref: string) { + //console.log("getAppCatalogServices called"); + this.applicationCatalogService.getAppsOrderBySortPref(userAppSortTypePref).subscribe(data => { + //console.log("Response data" + data); + this.appCatalogData = data; + if (data) { + this.applicationCatalogService.layout = []; + for (let entry of data) { + //console.log("Check the URL" + environment.api.appThumbnail); + var appCatalog = { + x: -1, + y: -1, + id: entry.id, + name: entry.name, + subHeaderText: entry.notes, + imageLink: environment.api.appThumbnail.replace(':appId', <string><any>entry.id), + restrictedApp: entry.restrictedApp, + select: entry.select, + access: entry.access, + pending: entry.pending, + order: entry.order, + url: entry.url, + appid: entry.id + }; + this.applicationCatalogService.addItem(appCatalog); + } + } + }, error => { + console.log('getAppCatalogServices Error Object' + error); + }); + }; + + saveAppsSortTypePreference(selectedSortType: any) { + this.applicationCatalogService.saveAppsSortTypePreference(selectedSortType).subscribe(); + + } + + openAddRoleModal(item: any) { + //console.log("OpenModal check" + item.id+" "+item.url); + if (item.restrictedApp) { + // Link-based apps open in their own browser tab + window.open(item.url, '_blank'); + } else{ + var tabContent = { + id: new Date(), + title: item.name, + url: item.url, + appId: item.appid + }; + this.addTabFuntionService.filter(tabContent); + } + } +}
\ No newline at end of file |