otf-frontend/client/src/app/layout/manage-group/manage-group.component.ts

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 import { Component, OnInit } from '@angular/core';\r
  18 import { GroupService } from 'app/shared/services/group.service';\r
  19 import { UserService } from 'app/shared/services/user.service';\r
  20 import { routerTransition } from '../../router.animations';\r
  21 import { MatDialog } from '@angular/material';\r
  22 import { UserSelectComponent } from 'app/shared/modules/user-select/user-select.component';\r
  23 import { MulticastOperator } from 'rxjs/internal/operators/multicast';\r
  24 import { forEach } from '@angular/router/src/utils/collection';\r
  25 import { OnboardMechidComponent } from 'app/shared/modules/onboard-mechid/onboard-mechid.component';\r
  26 import { DropdownMultiselectComponent } from './dropdown-multiselect.component';\r
  27 import { TabbedLayout } from 'ag-grid-community';\r
  28 import value from '*.json';\r
  29 import { take } from 'rxjs/operators';\r
  30 import { object } from '@amcharts/amcharts4/core';\r
  31 import { AlertModalComponent } from 'app/shared/modules/alert-modal/alert-modal.component';\r
  32 \r
  33 \r
  34 @Component({\r
  35   selector: 'app-manage-group',\r
  36   templateUrl: './manage-group.component.pug',\r
  37   styleUrls: ['./manage-group.component.scss'],\r
  38   animations: [routerTransition()]\r
  39 })\r
  40 export class ManageGroupComponent implements OnInit {\r
  41 \r
  42   public group;\r
  43   public loading = false;\r
  44   public users;\r
  45   public tableData; \r
  46   public hasMembers = false;\r
  47   public hasSelectedRows = false;\r
  48   private gridApi;\r
  49   private gridColumnApi;\r
  50   public memberTable;\r
  51   public rowData;\r
  52   public multipleRowsSelected = false;\r
  53  \r
  54 \r
  55   public columnDefs = [\r
  56     { headerName: 'First Name', field: 'firstName', sortable: true, sort: "asc", filter: true, checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true},\r
  57     { headerName: 'Last Name', field: 'lastName', sortable: true, filter: true },\r
  58     { headerName: 'Email', field: 'email', sortable: true, filter: true },\r
  59     { headerName: 'Roles', field:'roles', sortable: true, filter: true, editable: true, cellEditor: "DropdownMultiselectComponent", cellEditorParams: function (params) {\r
  60         return {\r
  61             roles: params.roles,\r
  62             userId: params._id\r
  63         };\r
  64     }\r
  65     },\r
  66   ];\r
  67 \r
  68   constructor(private groupService: GroupService, private userService: UserService, private modal: MatDialog,) { }\r
  69 \r
  70   ngOnInit() {\r
  71     this.group = {};\r
  72     //this.tableData = [];\r
  73     this.group = this.groupService.getGroup();\r
  74    \r
  75     \r
  76     this.groupService.groupChange().subscribe(group => {\r
  77       this.tableData = undefined;\r
  78       this.rowData = undefined;\r
  79       this.setComponentData(group);\r
  80     });\r
  81 \r
  82     this.groupService.get(this.group._id).subscribe((res) => {\r
  83       this.group = res;\r
  84       this.setComponentData(this.group);\r
  85     });\r
  86 \r
  87     \r
  88   }\r
  89 \r
  90   openUserSelect(){\r
  91     this.modal.open(UserSelectComponent, {\r
  92       width: "500px",\r
  93       data: {\r
  94           groupId: this.group._id\r
  95       }\r
  96     }).afterClosed().subscribe((response) => {\r
  97       this.groupService.get(this.group._id).subscribe((res) => {\r
  98         this.group = res;\r
  99         this.setComponentData(this.group);\r
 100       });\r
 101 \r
 102     });\r
 103     \r
 104       \r
 105   }\r
 106 \r
 107   onboardMechid(){\r
 108     this.modal.open(OnboardMechidComponent, {\r
 109       width: "500px",\r
 110       data: {\r
 111           groupId: this.group._id\r
 112       }\r
 113     }).afterClosed().subscribe((response) => {\r
 114 \r
 115     });\r
 116   }\r
 117 \r
 118   removeMembers(){\r
 119     let membersToRemove = this.gridApi.getSelectedRows().map(({_id}) => ({_id}));\r
 120     this.group.members = this.group.members.filter(member => membersToRemove.filter(user => member.userId.toString() == user._id.toString()).length <= 0); \r
 121     let groupPatch = {\r
 122       _id : this.group._id,\r
 123       members: this.group.members\r
 124     }\r
 125     //removes the members from the group\r
 126     this.groupService.patch(groupPatch).subscribe(\r
 127       (res) => {\r
 128         this.gridApi.deselectAll();\r
 129         this.tableData = this.tableData.filter(member => membersToRemove.filter(user => member._id.toString() == user._id.toString()).length <= 0);\r
 130         this.rowData = Object.assign([], this.tableData);\r
 131       }, \r
 132       (err) => {\r
 133         this.modal.open(AlertModalComponent, {\r
 134           data: {\r
 135             type: "alert",\r
 136             message: "The was an error removing the user. " + err\r
 137           }\r
 138         });\r
 139     });\r
 140     \r
 141   }\r
 142 \r
 143   setComponentData(group){\r
 144     this.gridApi.deselectAll();\r
 145     if(!group){\r
 146       return;\r
 147     }\r
 148     this.loading = true;\r
 149     this.group = group;\r
 150     this.users = [];\r
 151     //this.tableData = [];\r
 152     //console.log("Running Data")\r
 153     this.hasMembers = true;\r
 154     this.columnDefs[this.columnDefs.length-1]["cellEditorParams"]["values"] = this.group.roles;\r
 155     if(this.group.members){\r
 156       \r
 157       //console.log(this.group)\r
 158       for(let i = 0; i < this.group.members.length; i++){\r
 159         let temp = this.group.members[i]["userId"];\r
 160         this.userService.get(temp).subscribe(\r
 161         (res) => {\r
 162           let member = res;\r
 163           member["roles"] = this.group.members[i].roles.join();\r
 164           if(!this.tableData){\r
 165             this.tableData = [];\r
 166           }\r
 167           if(this.tableData.filter(user => user['_id'].toString() == member["_id"].toString()).length <= 0){\r
 168             this.tableData.push(member);\r
 169           }else{\r
 170             this.tableData = this.tableData.filter(user => user['_id'].toString() != member["_id"].toString())\r
 171             this.tableData.push(member);\r
 172           }\r
 173          // console.log(this.tableData);\r
 174           this.rowData = Object.assign([], this.tableData);\r
 175         });\r
 176         \r
 177         \r
 178       }\r
 179     }else{\r
 180       this.hasMembers = false;\r
 181     }\r
 182     \r
 183     \r
 184     //need to either populate user or pull each user's info\r
 185     //this.rowData = this.tableData;\r
 186     //console.log(this.rowData);\r
 187   }\r
 188 \r
 189   editRoles(){\r
 190     //console.log(this.tableData);\r
 191     this.gridApi.refreshCells();\r
 192     let memberToEdit = this.gridApi.getSelectedRows().map(({_id}) => ({_id}));\r
 193     this.modal.open(DropdownMultiselectComponent, {\r
 194       width: "500px",\r
 195       data : { \r
 196         user : memberToEdit,\r
 197         group: this.group\r
 198       }\r
 199     }).afterClosed().subscribe((res) => {\r
 200       this.groupService.get(this.group._id).subscribe((res) => {\r
 201         this.group = res;\r
 202         this.setComponentData(this.group);\r
 203       });\r
 204     })\r
 205   }\r
 206 \r
 207   onCellClicked(event) {\r
 208     //console.log(event.colDef.field)\r
 209   }\r
 210 \r
 211   onRowSelected(event){\r
 212     if(event.api.getSelectedNodes().length > 0){\r
 213       this.hasSelectedRows = true;\r
 214       if(event.api.getSelectedNodes().length > 1){\r
 215         this.multipleRowsSelected = true;\r
 216       }else{\r
 217         this.multipleRowsSelected = false;\r
 218       }\r
 219     }else{\r
 220       this.hasSelectedRows = false;\r
 221       this.multipleRowsSelected = false;\r
 222     }\r
 223   }\r
 224 \r
 225   onGridReady(params){\r
 226     this.gridApi = params.api;\r
 227     //console.log(params.columnApi.autoSizeColumns)\r
 228     this.gridColumnApi = params.columnApi;\r
 229 \r
 230     //auto size the column widths\r
 231     this.gridColumnApi.autoSizeColumns(['name']);\r
 232   }\r
 233 \r
 234 }\r