Administrator can now view details of teams assigned to each project …

client/src/app/admin-view-projects/admin-view-projects.component.html

@@ -20,7 +20,7 @@
             <a class="waves-effect waves-light btn green darken-3" (click)="viewTasks(project)">view tasks</a>
           </td>
           <td>
-            <a class="waves-effect waves-light btn blue darken-3" routerLink="/dashboard/teams">team</a>
+            <a class="waves-effect waves-light btn blue darken-3" (click)="viewTeam(project)">team</a>
           </td>
         </tr>
       </tbody>

client/src/app/admin-view-projects/admin-view-projects.component.ts

@@ -60,4 +60,17 @@ export class AdminViewProjectsComponent implements OnInit {
     this.router.navigateByUrl('/dashboard/tasks');
   }
 
+  // navigate to the team details page to see all details about the project team
+
+  viewTeam(project) {
+    // store project id in local storage for future reference
+
+    localStorage.removeItem('project-id');
+    localStorage.setItem('project-id', project._id);
+
+    // use router to navigate to admin view team page
+
+    this.router.navigateByUrl('/dashboard/teams/admin-view-team');
+  }
+
 }

client/src/app/admin-view-team/admin-view-team.component.css

@@ -0,0 +1,15 @@
+.add-btn-area {
+    margin: 5%;
+}
+
+.add-btn {
+    border-radius: 25px;
+}
+
+.team-info {
+    margin: 5%;
+}
+
+.collection-item-head {
+    margin: 2% !important;
+}

client/src/app/admin-view-team/admin-view-team.component.html

@@ -1,3 +1,30 @@
-<p>
-  admin-view-team works!
-</p>
+<div class="team-info">
+  <div class="card team-info-card">
+    <div class="card-action red">
+      <h6 class="white-text center">Team Information</h6>
+    </div>
+    <div class="card-content center center-align">
+      <ul class="collection">
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Team Name:</b></p>
+            <p>{{teams.team_name}}</p>
+        </li>
+
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Team Project:</b></p>
+            <p>{{teams.team_project}}</p>
+        </li>
+
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Team Lead:</b></p>
+            <p>{{teams.team_lead}}</p>
+        </li>
+
+        <li class="collection-item center-align">
+            <p class="collection-item-head"><b>Team Description:</b></p>
+            <p>{{teams.team_description}}</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

client/src/app/admin-view-team/admin-view-team.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TeamsService } from '../services/teams.service';
 
 @Component({
   selector: 'app-admin-view-team',
@@ -7,9 +8,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdminViewTeamComponent implements OnInit {
 
-  constructor() { }
+  teams;
+
+  constructor(private teamsService: TeamsService) { }
 
   ngOnInit() {
+    // access teams service method getUserTeams to return data on the team associated with the project
+
+    this.teamsService.getProjectTeam().subscribe(res => {
+      this.teams = res;
+    });
   }
 
 }

client/src/app/view-user-teams/view-user-teams.component.ts

@@ -26,7 +26,6 @@ export class ViewUserTeamsComponent implements OnInit {
 
     this.teamsService.getProjectTeam().subscribe(res => {
       this.teams = res;
-      console.log(this.teams);
 
       // store team id in local storage for easy identification