changes in chip selection

Author: ptechofficial

src/app/component/circular-heatmap/circular-heatmap.component.html

@@ -193,21 +193,21 @@ <h2>Nothing to show</h2>
               <mat-chip-list selectable>
                 <mat-chip
                   #c="matChip"
-                  (click)="toggleTeamSelection(c)"
+                  (click)="toggleTeamGroupSelection(c)"
                   selected>
                   All
                 </mat-chip>
                 <mat-chip
                   #c="matChip"
                   *ngFor="let group of teamGroups | keyvalue"
-                  (click)="toggleTeamSelection(c)">
+                  (click)="toggleTeamGroupSelection(c)">
                   {{ group.key }}
                 </mat-chip>
               </mat-chip-list>
             </mat-form-field>
             <mat-form-field>
               <mat-label>Team Filter</mat-label>
-              <mat-chip-list selectable>
+              <mat-chip-list selectable multiple>
                 <mat-chip
                   #c="matChip"
                   *ngFor="let team of teamList"

src/app/component/circular-heatmap/circular-heatmap.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChildren,
+  QueryList,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import * as d3 from 'd3';
 import * as yaml from 'js-yaml';
@@ -42,7 +48,11 @@ export class CircularHeatmapComponent implements OnInit {
   taskDetails: any;
   showOverlay: boolean;
 
-  constructor(private yaml: ymlService, private router: Router) {
+  constructor(
+    private yaml: ymlService,
+    private router: Router,
+    private changeDetector: ChangeDetectorRef
+  ) {
     this.showOverlay = false;
   }
 
@@ -178,30 +188,29 @@ export class CircularHeatmapComponent implements OnInit {
 
   // Team Filter BEGINS
 
-  toggleTeamSelection(chip: MatChip) {
+  @ViewChildren(MatChip) chips!: QueryList<MatChip>;
+
+  // Define an array to store MatChip components
+  matChipsArray: MatChip[] = [];
+  toggleTeamGroupSelection(chip: MatChip) {
     chip.toggleSelected();
     let currChipValue = chip.value.replace(/\s/g, '');
-    let visibilityUpdated = false;
+
     if (chip.selected) {
       this.selectedTeamChips = [currChipValue];
       if (currChipValue == 'All') {
         this.teamVisible = this.teamList;
-        console.log('All', this.teamList);
-        visibilityUpdated = true;
       } else {
         this.teamVisible = [];
 
         (
           Object.keys(this.teamGroups) as (keyof typeof this.teamGroups)[]
         ).forEach((key, index) => {
           if (key === currChipValue) {
+            console.log('group selected');
             this.teamVisible = this.teamGroups[key];
-            visibilityUpdated = true;
           }
         });
-        if (!visibilityUpdated) {
-          this.teamVisible.push(currChipValue);
-        }
       }
     } else {
       this.selectedTeamChips = this.selectedTeamChips.filter(
@@ -210,10 +219,41 @@ export class CircularHeatmapComponent implements OnInit {
     }
     console.log('Selected Chips', this.selectedTeamChips);
     console.log('Team Visible', this.teamVisible);
+    console.log('All chips', this.matChipsArray);
 
     // Update heatmap based on selection
+    this.updateChips(true);
     this.reColorHeatmap();
   }
+
+  toggleTeamSelection(chip: MatChip) {
+    chip.toggleSelected();
+    let currChipValue = chip.value.replace(/\s/g, '');
+    let visibilityUpdated = false;
+    if (chip.selected) {
+      this.teamVisible.push(currChipValue);
+      this.selectedTeamChips = [];
+    } else {
+      this.teamVisible = this.teamVisible.filter(o => o !== currChipValue);
+    }
+    console.log('Selected Chips', this.selectedTeamChips);
+    console.log('Team Visible', this.teamVisible);
+    console.log('All chips', this.matChipsArray);
+    // Update heatmap based on selection
+    this.updateChips(false);
+    this.reColorHeatmap();
+  }
+
+  ngAfterViewInit() {
+    // Putting all the chips inside an array
+
+    setTimeout(() => {
+      this.matChipsArray = this.chips.toArray();
+    }, 100);
+  }
+  updateChips(fromTeamGroup: boolean) {
+    console.log('updating chips');
+  }
   // Team Filter ENDS
 
   teamCheckbox(taskIndex: number, teamKey: any) {