diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self')
4 files changed, 715 insertions, 0 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.html new file mode 100644 index 00000000..94a62d39 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.html @@ -0,0 +1,198 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal SDK + =================================================================== + 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 class="main-container"> + <div id="page-content"> + <h3 class="heading-page" id="profileSearch">Self Profile Detail</h3> + <h4 class="heading-small" *ngIf="isAppCentralized=='true'" style="color:red;">Please use Portal for access + management</h4> + <h4 class="heading-small" *ngIf="isAppCentralized=='false'">Please edit the profile details below:</h4> + <br> + <div class="input-group-first"> + <div class="form-row"> + <label for="textinputID-2a">*Last Name</label><br> + <input [(ngModel)]="profile.lastName" type="text" name="lastName" class="form-control" id="lastName" + style="width: 100%;" [disabled]="isAppCentralized =='true'"> + <div *ngIf="!profile.lastName||profile.lastName.length==0"> + Last name is Required + </div> + </div> + <div class="form-row"> + <label for="textinputID-3a">*First Name</label> + <input [(ngModel)]="profile.firstName" type="text" name="firstName" class="form-control" id="firstName" + style="width: 100%;"> + <div *ngIf="!profile.lastName||profile.lastName.length==0"> + First name is Required + </div> + </div> + <div class="form-row"> + <label for="textinputID-3a">Organization User ID</label> + <input [(ngModel)]="profile.orgUserId" type="text" name="orgUserId" class="form-control" id="orgUserId" + style="width: 100%;" disabled="true"> + </div> + <div class="form-row"> + <label for="textinputID-3a">Organization Manager ID</label> + <input [(ngModel)]="profile.orgManagerUserId" type="text" name="orgManagerUserId" class="form-control" + id="orgManagerUserId" style=" + width: 59%;" disabled="true"> + </div> + </div> + <br> + <div class="input-group"> + + <div class="form-row"> + <label for="textinputID-2a">Login Id + </label> + <input [(ngModel)]="profile.loginId" type="text" name="loginId" class="form-control" id="loginId" style=" + width: 100%;"> + + + </div> + + <div class="form-row"> + <label for="textinputID-3a">Password</label> + <input [(ngModel)]="profile.loginPwd" type="text" name="loginPwd" class="form-control" id="loginPwd" style=" + width: 100%;"> + + + </div> + + <div class="form-row"> + <label for="textinputID-3a">*Phone + </label> + <input [(ngModel)]="profile.phone" type="text" name="phone" class="form-control" id="phone" style=" + width: 100%;"> + </div> + + + <div class="form-row"> + <label for="textinputID-3a">Fax</label> + <input [(ngModel)]="profile.fax" type="text" name="fax" class="form-control" id="fax" style="width: 100%;"> + </div> + + </div> + + <br> + <div class="input-group"> + + <div class="form-row"> + <label for="textinputID-2a">Cellular</label> + <input [(ngModel)]="profile.cellular" type="text" name="cellular" class="form-control" id="cellular" + style="width: 100%;"> + </div> + + <div class="form-row"> + <label for="textinputID-3a">*Email</label> + <input [(ngModel)]="profile.email" type="text" name="email" class="form-control" id="email" + style="width: 100%;"> + </div> + <div class="form-row"> + <label for="textinputID-3a">Address 1</label> + <input [(ngModel)]="profile.address1" type="text" name="address1" class="form-control" id="address1" + style="width: 100%;"> + </div> + + <div class="form-row"> + <label for="textinputID-3a">Address 2</label> + <input [(ngModel)]="profile.address2" type="text" name="address2" class="form-control" id="address2" + style="width: 100%;"> + </div> + + </div> + + <br> + <div class="input-group"> + + <div class="form-row"> + <label for="textinputID-2a">City</label> + <input [(ngModel)]="profile.city" type="text" name="city" class="form-control" id="city" + style="width: 100%;"> + </div> + + <div class="form-row"> + <mat-form-field> + <mat-label> States</mat-label> + <mat-select [(ngModel)]="profile.state"> + <mat-option *ngFor="let state of stateList" [value]="state.value">{{state.label}}</mat-option> + </mat-select> + </mat-form-field> + </div> + + <div class="form-row"> + <label for="textinputID-3a">Zip Code</label> + <input [(ngModel)]="profile.zipCode" type="text" name="zipCode" class="form-control" id="zipCode" + style="width: 100%;"> + </div> + + <div class="form-row"> + <mat-form-field> + <mat-label> Country</mat-label> + <mat-select [(ngModel)]="profile.country"> + <mat-option *ngFor="let country of ociCountries" [value]="country.value">{{country.label}} + </mat-option> + </mat-select> + </mat-form-field> + </div> + </div> + <br> + <div class="input-group"> + <div class="form-row"> + <mat-form-field> + <mat-label> TimeZones</mat-label> + <mat-select [(ngModel)]="profile.timeZoneId"> + <mat-option *ngFor="let timeZone of ociTimeZones" [value]="timeZone.value">{{timeZone.label}} + </mat-option> + </mat-select> + </mat-form-field> + </div> + </div> + <div class="form-row"> + <button class="btn btn-primary" (click)="saveProfile()" *ngIf="(isAppCentralized=='false')" [disabled]="(!profile.lastName||profile.lastName.length==0) || (!profile.firstName||profile.firstName.length==0) || + (!profile.phone||profile.phone.length==0) || (!profile.email||profile.email.length==0)">Save</button> + </div> + <br> + + <div class="assignedRoles" *ngIf="(isAppCentralized=='false' && isUserSystemAdmin)"> + <label>Roles</label> + <!--<a (click)="addNewRoleFunctionModalPopup(profile.roles);" + class="ion ion-md-add-circle-outline"></a>--> + </div> + + + <rdp-data-table [data]="ociavailableRoles" [settings]="settings"></rdp-data-table> + <span class="ecomp-spinner" *ngIf="showSpinner"></span> + </div> +</div>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.scss new file mode 100644 index 00000000..31b56d72 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.scss @@ -0,0 +1,78 @@ +/* + * ============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============================================ + * + * + */ + +table { + width: 100%; +} + +.input-group-first { + position: relative; + display: flex; + /* flex-wrap: wrap; */ + align-items: stretch; + width: 100%; +} + +.form-row { + display: flex; + flex-wrap: wrap; + margin-right: -5px; + margin-left: 20px; +} + +.field-group { + position: relative; + display: block; +} + +body { + font-family: Roboto, Arial, sans-serif; + margin: 0; +} + +.basic-container { + padding: 30px; +} + +.version-info { + font-size: 8pt; + float: right; +} +.assignedRoles{ + margin-left: 10px; +} diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts new file mode 100644 index 00000000..65decafb --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.spec.ts @@ -0,0 +1,97 @@ +/* + * ============LICENSE_START========================================== + * ONAP Portal SDK + * =================================================================== + * Copyright © 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== +* Modification Copyright © 2020 IBM. + * =================================================================== + * + * 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 { SelfComponent } from './self.component'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { MatTableModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { UserService } from 'src/app/shared/services/user/user.service'; +import { Observable } from 'rxjs'; +import { ActivatedRoute } from '@angular/router'; +import { RouterTestingModule } from '@angular/router/testing'; + +xdescribe('SelfComponent', () => { + let component: SelfComponent; + let fixture: ComponentFixture<SelfComponent>; + let userService:UserService; + let tableobj:any=JSON.stringify({"errormessage":"DummyError","stacktrace":"trace"}); + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [ SelfComponent ], + imports: [ + ReactiveFormsModule, + FormsModule, + MatTableModule, + MatSelectModule, + MatSlideToggleModule, + BrowserAnimationsModule, + HttpClientTestingModule, + RouterTestingModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SelfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + userService=TestBed.get(UserService); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('should test ngOnInit method',()=>{ + it('should test subscribe',()=>{ + let spy=spyOn(userService,'getFunctionalMenuStaticDetailSession').and.returnValue(Observable.of('you object')); + component.ngOnInit(); + expect(spy).toHaveBeenCalled(); + }) + }) + +}); diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.ts new file mode 100644 index 00000000..7396b23c --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/user-profile/profile/self/self.component.ts @@ -0,0 +1,342 @@ +/* + * ============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============================================ + * + * + */ + +import { Component, OnInit } from '@angular/core'; +import { UserService } from 'src/app/shared/services/user/user.service'; +import { User } from 'src/app/shared/services/user/user'; +import { ProfileService } from '../profile.service'; +import { MatTableDataSource } from '@angular/material'; +import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; +import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component'; +import { ErrorModalComponent } from 'src/app/modals/error-modal/error-modal.component'; +import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component'; +import { Column, ColumnTypes, DataTableSettings } from 'portalsdk-tag-lib'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-self', + templateUrl: './self.component.html', + styleUrls: ['./self.component.scss'] +}) +export class SelfComponent implements OnInit { + + constructor(public userService: UserService, + public profileService: ProfileService, + private ngModal: NgbModal, + private route: ActivatedRoute) { } + + user: User; + isAppCentralized; + response; + result; + postData: { + profile: any, + selectedCountry: any, + selectedState: any, + selectedTimeZone: any + } = { profile: "", selectedCountry: "", selectedState: "", selectedTimeZone: "" }; + + profile: { + lastName: any, firstName: any, orgUserId: any, orgManagerUserId: any, loginId: any,loginPwd: any,phone: any,fax: any,cellular: any, + email: any;address1: any,address2: any,city: any,state :any,zipCode: any,country: any,timeZoneId: any,id: any,roles: any + } = { + lastName: "", firstName: "", orgUserId: "", orgManagerUserId: "", loginId: "",loginPwd: "",phone: "",fax: "", + cellular: "", email: "",address1: "",address2: "",city: "",state:"" ,zipCode: "",country: "",timeZoneId: "",id: "",roles: "" + }; + + oriProfile; + profileId; + ociavailableRoles; + ociTimeZones; + ociCountries; + stateList; + isUserSystemAdmin; + availableRoles: Array<any> = []; + dataSource: MatTableDataSource<any>; + showSpinner:boolean; + + userRolesHeader = ["name", "active"]; + closeResult: string; + selectedCountry; + selectedState; + selectedTimeZone; + finalSelectedRoles: any; + + public settings; + public columns: any = []; + + + ngOnInit() { + this.profileId = ""; + //console.log("ngOnInit called ",this.profileId); + if(this.route.snapshot.queryParams['profile_id']){ + this.profileId = this.route.snapshot.queryParams['profile_id']; + } + this.showSpinner = false; + this.finalSelectedRoles = []; + let result = this.userService.getFunctionalMenuStaticDetailSession(); + let user; + result.subscribe(user => { + this.user = user; + this.isAppCentralized = this.user.isAppCentralized; + }); + if (this.profileId != undefined && this.profileId != "") { + this.getProfileById(this.profileId); + } else { + this.getSelfProfileDetail(); + } + } + + /** + * Get Self Profile Details + */ + getSelfProfileDetail() { + this.showSpinner = true; + this.response = this.profileService.getSelfProfile(); + this.response.subscribe(data => { + this.assignProfileDetails(data); + }); + this.showSpinner = false; + } + + /** + * Get Profile Details by ProfileId + */ + getProfileById(profileId) { + this.showSpinner = true; + this.profileService.getProfileById(profileId).subscribe(response => { + this.assignProfileDetails(response); + }) + this.showSpinner = false; + } + + assignProfileDetails(data) { + let res; + res = data; + this.result = JSON.parse(res.data); + + this.profile = JSON.parse(this.result.profile); + this.oriProfile = JSON.parse(this.result.profile); /*original value*/ + + this.profileId = this.profile.id; + this.ociavailableRoles = this.profile.roles; + //console.log("Profile specific roles : ", this.ociavailableRoles); + this.ociTimeZones = JSON.parse(this.result.timeZones); + this.ociCountries = JSON.parse(this.result.countries); + this.stateList = JSON.parse(this.result.stateList); + + for (let state of this.stateList) { + if (state.value == this.profile.state) { + this.profile.state = state.value; + } + } + + for (let country of this.ociCountries) { + if (country.value == this.profile.country) { + this.profile.country = country.value; + } + } + + for (let timeZone of this.ociTimeZones) { + if (timeZone.value == this.profile.timeZoneId) { + this.profile.timeZoneId = timeZone.value; + } + } + + this.columns.push(new Column("name", "Name", ColumnTypes.TEXT, false, null)); + this.settings = new DataTableSettings() + this.settings.columns = this.columns; + this.settings.isPaginationEnabled = false; + this.settings.isReadOnly = true; + this.settings.isTableSearchEnabled = false; + this.settings.isToggleEnabled = true; + + if (this.ociavailableRoles != null) { + for (let role of this.ociavailableRoles) { + role.selected = false; + for (let profileRole of this.profile.roles) { + if (profileRole.id === role.id) { + role.selected = true; + } + if (role.id === 1) { + this.isUserSystemAdmin = true; + } + } + this.availableRoles.push(role); + } + } + } + + /** + * Remove Role + * @param role + */ + removeRole(role: any) { + const modalRef = this.ngModal.open(InformationModalComponent); + modalRef.componentInstance.title = 'Confirmation'; + modalRef.componentInstance.message = `Are you sure you want to remove ${role.name} ?`; + modalRef.result.then((result) => { + if (result === 'Ok') { + this.profileService.removeRole(role, this.profileId).subscribe(data => { + this.getSelfProfileDetail(); + }) + } + }, (reason) => { + this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; + }); + } + + /** + * Add User Role + * @param role + */ + addUserRole(role: any) { + const modalRef = this.ngModal.open(InformationModalComponent); + modalRef.componentInstance.title = 'Confirmation'; + modalRef.componentInstance.message = `Are you sure you want to add ${role.name} ?`; + modalRef.result.then((result) => { + if (result === 'Ok') { + this.profileService.addUserRole(role, this.profileId).subscribe(data => { + this.getSelfProfileDetail(); + }) + } + }, (reason) => { + this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; + }); + } + + private getDismissReason(reason: any): string { + if (reason === ModalDismissReasons.ESC) { + return 'by pressing ESC'; + } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { + return 'by clicking on a backdrop'; + } else { + return `with: ${reason}`; + } + + } + + /** + * Save User Profile + */ + saveProfile() { + + if (this.oriProfile.loginId != this.profile.loginId) { + const modalRef = this.ngModal.open(ErrorModalComponent); + modalRef.componentInstance.message = `Login ID cannot be changed?`; + return; + } + if (this.oriProfile.loginPwd != this.profile.loginPwd) { + const modalRef = this.ngModal.open(ErrorModalComponent); + modalRef.componentInstance.message = `Login pwd cannot be changed?`; + return; + } + + this.postData.profile = this.profile; + this.postData.selectedCountry = this.profile.country != null ? this.profile.country : ""; + this.postData.selectedState = this.profile.state != null ? this.profile.state : ""; + this.postData.selectedTimeZone = this.profile.timeZoneId != null ? this.profile.timeZoneId : ""; + + + for( let state of this.stateList) + { + if(state.value == this.profile.state){ + this.postData.selectedState = state.value; + } + } + + for( let country of this.ociCountries) + { + if(country.value == this.profile.country){ + this.postData.selectedCountry = country.value; + } + } + for( let timeZone of this.ociTimeZones) + { + if(timeZone.value == this.profile.timeZoneId){ + this.postData.selectedTimeZone = timeZone.value; + } + } + + + this.response = this.profileService.saveProfile(this.postData, this.profileId); + this.response.subscribe(data => { + const modalRef = this.ngModal.open(ConfirmationModalComponent); + let response; + modalRef.componentInstance.message = `Profile got saved Successfully`; + modalRef.result.then((result) => { + if (result === 'Close') { + this.getSelfProfileDetail(); + } + }, (reason) => { + this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; + }); + + }); + } + + /** + * toggleRoles + * @param _element + */ + toggleRoles(_element) { + if (this.ociavailableRoles) { + for (var i = 0; i < this.ociavailableRoles.length; i++) { + var availableRole = this.ociavailableRoles[i]; + if (availableRole.selected && !this.finalSelectedRoles.includes(availableRole)) { + this.finalSelectedRoles.push(availableRole); + } + } + } + + if (!_element.selected) { + for (var i = 0; i < this.finalSelectedRoles.length; i++) { + var availableRole = this.finalSelectedRoles[i]; + if (availableRole.id == _element.id + && availableRole.name == _element.name) { + this.finalSelectedRoles.splice(i, 1); + } + } + } + if(_element.selected){ + this.addUserRole(_element); + }else{ + this.removeRole(_element); + } + } +} |