added svcapi ui and camunda code
[it/otf.git] / otf-frontend / client / src / app / layout / manage-group / manage-group.component.ts
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 (file)
index 0000000..e6ea356
--- /dev/null
@@ -0,0 +1,234 @@
+/*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
+#                                                                              #\r
+#   Licensed under the Apache License, Version 2.0 (the "License");            #\r
+#   you may not use this file except in compliance with the License.           #\r
+#   You may obtain a copy of the License at                                    #\r
+#                                                                              #\r
+#       http://www.apache.org/licenses/LICENSE-2.0                             #\r
+#                                                                              #\r
+#   Unless required by applicable law or agreed to in writing, software        #\r
+#   distributed under the License is distributed on an "AS IS" BASIS,          #\r
+#   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
+#   See the License for the specific language governing permissions and        #\r
+#   limitations under the License.                                             #\r
+##############################################################################*/\r
+\r
+\r
+import { Component, OnInit } from '@angular/core';\r
+import { GroupService } from 'app/shared/services/group.service';\r
+import { UserService } from 'app/shared/services/user.service';\r
+import { routerTransition } from '../../router.animations';\r
+import { MatDialog } from '@angular/material';\r
+import { UserSelectComponent } from 'app/shared/modules/user-select/user-select.component';\r
+import { MulticastOperator } from 'rxjs/internal/operators/multicast';\r
+import { forEach } from '@angular/router/src/utils/collection';\r
+import { OnboardMechidComponent } from 'app/shared/modules/onboard-mechid/onboard-mechid.component';\r
+import { DropdownMultiselectComponent } from './dropdown-multiselect.component';\r
+import { TabbedLayout } from 'ag-grid-community';\r
+import value from '*.json';\r
+import { take } from 'rxjs/operators';\r
+import { object } from '@amcharts/amcharts4/core';\r
+import { AlertModalComponent } from 'app/shared/modules/alert-modal/alert-modal.component';\r
+\r
+\r
+@Component({\r
+  selector: 'app-manage-group',\r
+  templateUrl: './manage-group.component.pug',\r
+  styleUrls: ['./manage-group.component.scss'],\r
+  animations: [routerTransition()]\r
+})\r
+export class ManageGroupComponent implements OnInit {\r
+\r
+  public group;\r
+  public loading = false;\r
+  public users;\r
+  public tableData; \r
+  public hasMembers = false;\r
+  public hasSelectedRows = false;\r
+  private gridApi;\r
+  private gridColumnApi;\r
+  public memberTable;\r
+  public rowData;\r
+  public multipleRowsSelected = false;\r
\r
+\r
+  public columnDefs = [\r
+    { headerName: 'First Name', field: 'firstName', sortable: true, sort: "asc", filter: true, checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true},\r
+    { headerName: 'Last Name', field: 'lastName', sortable: true, filter: true },\r
+    { headerName: 'Email', field: 'email', sortable: true, filter: true },\r
+    { headerName: 'Roles', field:'roles', sortable: true, filter: true, editable: true, cellEditor: "DropdownMultiselectComponent", cellEditorParams: function (params) {\r
+        return {\r
+            roles: params.roles,\r
+            userId: params._id\r
+        };\r
+    }\r
+    },\r
+  ];\r
+\r
+  constructor(private groupService: GroupService, private userService: UserService, private modal: MatDialog,) { }\r
+\r
+  ngOnInit() {\r
+    this.group = {};\r
+    //this.tableData = [];\r
+    this.group = this.groupService.getGroup();\r
+   \r
+    \r
+    this.groupService.groupChange().subscribe(group => {\r
+      this.tableData = undefined;\r
+      this.rowData = undefined;\r
+      this.setComponentData(group);\r
+    });\r
+\r
+    this.groupService.get(this.group._id).subscribe((res) => {\r
+      this.group = res;\r
+      this.setComponentData(this.group);\r
+    });\r
+\r
+    \r
+  }\r
+\r
+  openUserSelect(){\r
+    this.modal.open(UserSelectComponent, {\r
+      width: "500px",\r
+      data: {\r
+          groupId: this.group._id\r
+      }\r
+    }).afterClosed().subscribe((response) => {\r
+      this.groupService.get(this.group._id).subscribe((res) => {\r
+        this.group = res;\r
+        this.setComponentData(this.group);\r
+      });\r
+\r
+    });\r
+    \r
+      \r
+  }\r
+\r
+  onboardMechid(){\r
+    this.modal.open(OnboardMechidComponent, {\r
+      width: "500px",\r
+      data: {\r
+          groupId: this.group._id\r
+      }\r
+    }).afterClosed().subscribe((response) => {\r
+\r
+    });\r
+  }\r
+\r
+  removeMembers(){\r
+    let membersToRemove = this.gridApi.getSelectedRows().map(({_id}) => ({_id}));\r
+    this.group.members = this.group.members.filter(member => membersToRemove.filter(user => member.userId.toString() == user._id.toString()).length <= 0); \r
+    let groupPatch = {\r
+      _id : this.group._id,\r
+      members: this.group.members\r
+    }\r
+    //removes the members from the group\r
+    this.groupService.patch(groupPatch).subscribe(\r
+      (res) => {\r
+        this.gridApi.deselectAll();\r
+        this.tableData = this.tableData.filter(member => membersToRemove.filter(user => member._id.toString() == user._id.toString()).length <= 0);\r
+        this.rowData = Object.assign([], this.tableData);\r
+      }, \r
+      (err) => {\r
+        this.modal.open(AlertModalComponent, {\r
+          data: {\r
+            type: "alert",\r
+            message: "The was an error removing the user. " + err\r
+          }\r
+        });\r
+    });\r
+    \r
+  }\r
+\r
+  setComponentData(group){\r
+    this.gridApi.deselectAll();\r
+    if(!group){\r
+      return;\r
+    }\r
+    this.loading = true;\r
+    this.group = group;\r
+    this.users = [];\r
+    //this.tableData = [];\r
+    //console.log("Running Data")\r
+    this.hasMembers = true;\r
+    this.columnDefs[this.columnDefs.length-1]["cellEditorParams"]["values"] = this.group.roles;\r
+    if(this.group.members){\r
+      \r
+      //console.log(this.group)\r
+      for(let i = 0; i < this.group.members.length; i++){\r
+        let temp = this.group.members[i]["userId"];\r
+        this.userService.get(temp).subscribe(\r
+        (res) => {\r
+          let member = res;\r
+          member["roles"] = this.group.members[i].roles.join();\r
+          if(!this.tableData){\r
+            this.tableData = [];\r
+          }\r
+          if(this.tableData.filter(user => user['_id'].toString() == member["_id"].toString()).length <= 0){\r
+            this.tableData.push(member);\r
+          }else{\r
+            this.tableData = this.tableData.filter(user => user['_id'].toString() != member["_id"].toString())\r
+            this.tableData.push(member);\r
+          }\r
+         // console.log(this.tableData);\r
+          this.rowData = Object.assign([], this.tableData);\r
+        });\r
+        \r
+        \r
+      }\r
+    }else{\r
+      this.hasMembers = false;\r
+    }\r
+    \r
+    \r
+    //need to either populate user or pull each user's info\r
+    //this.rowData = this.tableData;\r
+    //console.log(this.rowData);\r
+  }\r
+\r
+  editRoles(){\r
+    //console.log(this.tableData);\r
+    this.gridApi.refreshCells();\r
+    let memberToEdit = this.gridApi.getSelectedRows().map(({_id}) => ({_id}));\r
+    this.modal.open(DropdownMultiselectComponent, {\r
+      width: "500px",\r
+      data : { \r
+        user : memberToEdit,\r
+        group: this.group\r
+      }\r
+    }).afterClosed().subscribe((res) => {\r
+      this.groupService.get(this.group._id).subscribe((res) => {\r
+        this.group = res;\r
+        this.setComponentData(this.group);\r
+      });\r
+    })\r
+  }\r
+\r
+  onCellClicked(event) {\r
+    //console.log(event.colDef.field)\r
+  }\r
+\r
+  onRowSelected(event){\r
+    if(event.api.getSelectedNodes().length > 0){\r
+      this.hasSelectedRows = true;\r
+      if(event.api.getSelectedNodes().length > 1){\r
+        this.multipleRowsSelected = true;\r
+      }else{\r
+        this.multipleRowsSelected = false;\r
+      }\r
+    }else{\r
+      this.hasSelectedRows = false;\r
+      this.multipleRowsSelected = false;\r
+    }\r
+  }\r
+\r
+  onGridReady(params){\r
+    this.gridApi = params.api;\r
+    //console.log(params.columnApi.autoSizeColumns)\r
+    this.gridColumnApi = params.columnApi;\r
+\r
+    //auto size the column widths\r
+    this.gridColumnApi.autoSizeColumns(['name']);\r
+  }\r
+\r
+}\r