X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?p=it%2Fotf.git;a=blobdiff_plain;f=otf-frontend%2Fclient%2Fsrc%2Fapp%2Flayout%2Fmanage-group%2Fmanage-group.component.ts;fp=otf-frontend%2Fclient%2Fsrc%2Fapp%2Flayout%2Fmanage-group%2Fmanage-group.component.ts;h=e6ea3568901f9b8ebe11d5ee5ff664ecba933aca;hp=0000000000000000000000000000000000000000;hb=14f6f95c84a4a1fa8774190db4a03fd0214ec55f;hpb=f49bd1efeaaddd4891c1f329b18d8cfb28b3e75b diff --git a/otf-frontend/client/src/app/layout/manage-group/manage-group.component.ts b/otf-frontend/client/src/app/layout/manage-group/manage-group.component.ts new file mode 100644 index 0000000..e6ea356 --- /dev/null +++ b/otf-frontend/client/src/app/layout/manage-group/manage-group.component.ts @@ -0,0 +1,234 @@ +/* Copyright (c) 2019 AT&T Intellectual Property. # +# # +# Licensed under the Apache License, Version 2.0 (the "License"); # +# you may not use this file 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. # +##############################################################################*/ + + +import { Component, OnInit } from '@angular/core'; +import { GroupService } from 'app/shared/services/group.service'; +import { UserService } from 'app/shared/services/user.service'; +import { routerTransition } from '../../router.animations'; +import { MatDialog } from '@angular/material'; +import { UserSelectComponent } from 'app/shared/modules/user-select/user-select.component'; +import { MulticastOperator } from 'rxjs/internal/operators/multicast'; +import { forEach } from '@angular/router/src/utils/collection'; +import { OnboardMechidComponent } from 'app/shared/modules/onboard-mechid/onboard-mechid.component'; +import { DropdownMultiselectComponent } from './dropdown-multiselect.component'; +import { TabbedLayout } from 'ag-grid-community'; +import value from '*.json'; +import { take } from 'rxjs/operators'; +import { object } from '@amcharts/amcharts4/core'; +import { AlertModalComponent } from 'app/shared/modules/alert-modal/alert-modal.component'; + + +@Component({ + selector: 'app-manage-group', + templateUrl: './manage-group.component.pug', + styleUrls: ['./manage-group.component.scss'], + animations: [routerTransition()] +}) +export class ManageGroupComponent implements OnInit { + + public group; + public loading = false; + public users; + public tableData; + public hasMembers = false; + public hasSelectedRows = false; + private gridApi; + private gridColumnApi; + public memberTable; + public rowData; + public multipleRowsSelected = false; + + + public columnDefs = [ + { headerName: 'First Name', field: 'firstName', sortable: true, sort: "asc", filter: true, checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true}, + { headerName: 'Last Name', field: 'lastName', sortable: true, filter: true }, + { headerName: 'Email', field: 'email', sortable: true, filter: true }, + { headerName: 'Roles', field:'roles', sortable: true, filter: true, editable: true, cellEditor: "DropdownMultiselectComponent", cellEditorParams: function (params) { + return { + roles: params.roles, + userId: params._id + }; + } + }, + ]; + + constructor(private groupService: GroupService, private userService: UserService, private modal: MatDialog,) { } + + ngOnInit() { + this.group = {}; + //this.tableData = []; + this.group = this.groupService.getGroup(); + + + this.groupService.groupChange().subscribe(group => { + this.tableData = undefined; + this.rowData = undefined; + this.setComponentData(group); + }); + + this.groupService.get(this.group._id).subscribe((res) => { + this.group = res; + this.setComponentData(this.group); + }); + + + } + + openUserSelect(){ + this.modal.open(UserSelectComponent, { + width: "500px", + data: { + groupId: this.group._id + } + }).afterClosed().subscribe((response) => { + this.groupService.get(this.group._id).subscribe((res) => { + this.group = res; + this.setComponentData(this.group); + }); + + }); + + + } + + onboardMechid(){ + this.modal.open(OnboardMechidComponent, { + width: "500px", + data: { + groupId: this.group._id + } + }).afterClosed().subscribe((response) => { + + }); + } + + removeMembers(){ + let membersToRemove = this.gridApi.getSelectedRows().map(({_id}) => ({_id})); + this.group.members = this.group.members.filter(member => membersToRemove.filter(user => member.userId.toString() == user._id.toString()).length <= 0); + let groupPatch = { + _id : this.group._id, + members: this.group.members + } + //removes the members from the group + this.groupService.patch(groupPatch).subscribe( + (res) => { + this.gridApi.deselectAll(); + this.tableData = this.tableData.filter(member => membersToRemove.filter(user => member._id.toString() == user._id.toString()).length <= 0); + this.rowData = Object.assign([], this.tableData); + }, + (err) => { + this.modal.open(AlertModalComponent, { + data: { + type: "alert", + message: "The was an error removing the user. " + err + } + }); + }); + + } + + setComponentData(group){ + this.gridApi.deselectAll(); + if(!group){ + return; + } + this.loading = true; + this.group = group; + this.users = []; + //this.tableData = []; + //console.log("Running Data") + this.hasMembers = true; + this.columnDefs[this.columnDefs.length-1]["cellEditorParams"]["values"] = this.group.roles; + if(this.group.members){ + + //console.log(this.group) + for(let i = 0; i < this.group.members.length; i++){ + let temp = this.group.members[i]["userId"]; + this.userService.get(temp).subscribe( + (res) => { + let member = res; + member["roles"] = this.group.members[i].roles.join(); + if(!this.tableData){ + this.tableData = []; + } + if(this.tableData.filter(user => user['_id'].toString() == member["_id"].toString()).length <= 0){ + this.tableData.push(member); + }else{ + this.tableData = this.tableData.filter(user => user['_id'].toString() != member["_id"].toString()) + this.tableData.push(member); + } + // console.log(this.tableData); + this.rowData = Object.assign([], this.tableData); + }); + + + } + }else{ + this.hasMembers = false; + } + + + //need to either populate user or pull each user's info + //this.rowData = this.tableData; + //console.log(this.rowData); + } + + editRoles(){ + //console.log(this.tableData); + this.gridApi.refreshCells(); + let memberToEdit = this.gridApi.getSelectedRows().map(({_id}) => ({_id})); + this.modal.open(DropdownMultiselectComponent, { + width: "500px", + data : { + user : memberToEdit, + group: this.group + } + }).afterClosed().subscribe((res) => { + this.groupService.get(this.group._id).subscribe((res) => { + this.group = res; + this.setComponentData(this.group); + }); + }) + } + + onCellClicked(event) { + //console.log(event.colDef.field) + } + + onRowSelected(event){ + if(event.api.getSelectedNodes().length > 0){ + this.hasSelectedRows = true; + if(event.api.getSelectedNodes().length > 1){ + this.multipleRowsSelected = true; + }else{ + this.multipleRowsSelected = false; + } + }else{ + this.hasSelectedRows = false; + this.multipleRowsSelected = false; + } + } + + onGridReady(params){ + this.gridApi = params.api; + //console.log(params.columnApi.autoSizeColumns) + this.gridColumnApi = params.columnApi; + + //auto size the column widths + this.gridColumnApi.autoSizeColumns(['name']); + } + +}