Team component: dynamic team data from teams.yaml

Author: ptechofficial

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { ReadmeToHtmlComponent } from './component/readme-to-html/readme-to-html
 import { UsageComponent } from './component/usage/usage.component';
 import { AboutUsComponent } from './component/about-us/about-us.component';
 import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component';
+import { Teams } from './component/teams/teams.component';
 
 @NgModule({
   declarations: [
@@ -34,6 +35,7 @@ import { DependencyGraphComponent } from './component/dependency-graph/dependenc
     UsageComponent,
     AboutUsComponent,
     DependencyGraphComponent,
+    Teams,
   ],
   imports: [
     BrowserModule,

src/app/component/teams/teams.component.html

@@ -6,40 +6,12 @@ <h2>Team List</h2>
     </ul>
   </div>
   <h2>Team Group</h2>
-  <h3>Group 123</h3>
-  <div class="team-list">
-    <ul>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-    </ul>
-  </div>
-  <h3>Group 123</h3>
-  <div class="team-list">
-    <ul>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-    </ul>
-  </div>
-  <h3>Group 123</h3>
-  <div class="team-list">
-    <ul>
-      <li>Team 1</li>
-      <li>Team 2</li>
-      <li>Team 3</li>
-    </ul>
+  <div class="group-expand" *ngFor="let group of teamGroups | keyvalue">
+    <h3>{{ group.key }}</h3>
+    <div class="team-list">
+      <ul>
+        <li *ngFor="let team of group.value">{{ team }}</li>
+      </ul>
+    </div>
   </div>
 </div>

src/app/component/teams/teams.component.spec.ts

@@ -1,4 +1,10 @@
+import { HttpClientModule, HttpHandler } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+// import { MatAutocomplete } from '@angular/material/autocomplete';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
+import { MatChip } from '@angular/material/chips';
 
 import { Teams } from './teams.component';
 
@@ -8,7 +14,9 @@ describe('Teams', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [Teams],
+      providers: [ymlService, HttpClientTestingModule],
+      imports: [RouterTestingModule, HttpClientModule],
+      declarations: [Teams, MatChip],
     }).compileComponents();
   });
 

src/app/component/teams/teams.component.ts

@@ -10,7 +10,7 @@ import * as yaml from 'js-yaml';
 export class Teams implements OnInit {
   YamlObject: any;
   teamList: any;
-  teamGroups: any;
+  teamGroups: Map<string, string[]> = new Map();
 
   constructor(private yaml: ymlService) {}
   ngOnInit(): void {
@@ -27,4 +27,7 @@ export class Teams implements OnInit {
       console.log('teamGroups', this.teamGroups);
     });
   }
+  getTeamArray(key: string): string[] {
+    return this.teamGroups.get(key) || [];
+  }
 }