Merge pull request #133 from 0x41head/angular-ui

Added filter by planned and performed actvities for mapping section

Author: 0x41head

src/app/component/mapping/mapping.component.css

@@ -3,6 +3,11 @@
   background-color: gainsboro;
 }
 
+.mat-form-field{
+  margin: 20px;
+  width: 90%;
+}
+ 
 .matrix-table{
   margin: 20px;
 }

src/app/component/mapping/mapping.component.html

@@ -1,6 +1,33 @@
 <div class="content">
+  
   <app-top-header section="Mappings"></app-top-header>
 
+  <mat-form-field class="example-chip-list" appearance="fill">
+    <mat-label>Filter</mat-label>
+    <mat-chip-list #chipList aria-label="Filter" color="primary">
+      <mat-chip
+        *ngFor="let chip of currentChip"
+        (removed)="remove(chip)">
+        {{chip}}
+        <button matChipRemove>
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip>
+      <input
+        #chipInput
+        [formControl]="chipCtrl"
+        [matAutocomplete]="auto"
+        [matChipInputFor]="chipList"
+        [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+    </mat-chip-list>
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+      <mat-option *ngFor="let fruit of filteredChips | async" [value]="fruit">
+        {{fruit}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+  
+
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 matrix-table" >
 
     <ng-container matColumnDef="dimension">

src/app/component/mapping/mapping.component.ts

@@ -1,6 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import { MatTableDataSource } from '@angular/material/table';
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import {ElementRef, ViewChild} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
 
 export interface MappingElement {
   dimension: string;
@@ -17,14 +24,31 @@ export interface MappingElement {
   styleUrls: ['./mapping.component.css']
 })
 export class MappingComponent implements OnInit {
-  MAPPING_DATA:MappingElement[]=[]
-  dataSource:any= new MatTableDataSource<MappingElement>(this.MAPPING_DATA);  
+  allMappingData:MappingElement[]=[]
+  plannedMappingData:MappingElement[]=[]
+  performedMappingData:MappingElement[]=[]
+
+  dataSource:any= new MatTableDataSource<MappingElement>(this.allMappingData);  
   YamlObject:any;
 
   displayedColumns: string[] = ['dimension', 'subDimension', 'taskName','samm2' ,'ISO'];
   allDimensionNames:string[]=[];
   temporaryMappingElement:any
-  constructor(private yaml:ymlService) { }
+
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+  chipCtrl = new FormControl('');
+  filteredChips: Observable<string[]>;
+  currentChip: string[] = ['Performed Activities','Planned Activities'];
+  allChips: string[] = ['Performed Activities','Planned Activities'];
+
+  @ViewChild('chipInput') chipInput!: ElementRef<HTMLInputElement>;
+
+  constructor(private yaml:ymlService) { 
+    this.filteredChips = this.chipCtrl.valueChanges.pipe(
+      startWith(null),
+      map((x: string | null) => (x ? this._filter(x) : this.allChips.slice())),
+    );
+  }
 
   ngOnInit(): void {
     //gets value from generated folder 
@@ -44,6 +68,7 @@ export class MappingComponent implements OnInit {
       }
       // weird fix to render DOM for table viewing in angular material
       this.dataSource._data.next(this.dataSource.data);
+      this.allMappingData=this.dataSource.data
     })
 
     //this.dataSource=new MatTableDataSource([...this.dataSource]);
@@ -57,7 +82,46 @@ export class MappingComponent implements OnInit {
     this.temporaryMappingElement={"dimension":dim,"subDimension":subDim,"taskName":task,"ISO":ISOArray,"samm2":SAMMArray}
     //console.log(this.temp)
     this.dataSource.data.push(this.temporaryMappingElement)
+    if(this.YamlObject[dim][subDim][task]['isImplemented']){
+      this.performedMappingData.push(this.temporaryMappingElement)
+    }
+    else{
+      this.plannedMappingData.push(this.temporaryMappingElement)
+    }
 
   }
 
+  remove(chip: string): void {
+    const index = this.currentChip.indexOf(chip);
+    //console.log(fruit)
+    if (index >= 0) {
+      this.currentChip.splice(index, 1);
+    }
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    this.currentChip.push(event.option.viewValue);
+    if((this.currentChip.length>1)||(this.currentChip.length==0)){ // both planned and performed actvities are selected
+      this.dataSource._data.next(this.allMappingData);
+    }
+    else{
+      if(this.currentChip[0]=='Planned Activities'){ // planned actvities shows planned data
+        this.dataSource._data.next(this.plannedMappingData);
+        console.log(this.plannedMappingData)
+      }
+      else {
+        this.dataSource._data.next(this.performedMappingData); // performed actvities shows performed data
+        console.log(this.performedMappingData)
+      }
+    }
+
+    this.chipInput.nativeElement.value = '';
+    this.chipCtrl.setValue(null);
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.allChips.filter(chip => chip.toLowerCase().includes(filterValue));
+  }
 }

src/app/component/matrix/matrix.component.html

@@ -1,31 +1,31 @@
 <div class="content">
 <app-top-header section="Matrix"></app-top-header>
 <mat-form-field class="example-chip-list">
-    <mat-label>Filter</mat-label>
-    <mat-chip-list #chipList aria-label="Filter" color="primary">
-      <mat-chip
-        color="primary"
-        *ngFor="let row of rowsCurrentlyBeingShown"
-        (removed)="remove(row)"
-        [selected]=true>
-        {{row}}
-        <button matChipRemove>
-          <mat-icon>cancel</mat-icon>
-        </button>
-      </mat-chip>
-      <input
-        #rowInput
-        [formControl]="rowCtrl"
-        [matAutocomplete]="auto"
-        [matChipInputFor]="chipList"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
-    </mat-chip-list>
-    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
-      <mat-option *ngFor="let row of filteredRows | async" [value]="row">
-        {{row}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
+  <mat-label>Filter</mat-label>
+  <mat-chip-list #chipList aria-label="Filter" color="primary">
+    <mat-chip
+      color="primary"
+      *ngFor="let row of rowsCurrentlyBeingShown"
+      (removed)="remove(row)"
+      [selected]=true>
+      {{row}}
+      <button matChipRemove>
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </mat-chip>
+    <input
+      #rowInput
+      [formControl]="rowCtrl"
+      [matAutocomplete]="auto"
+      [matChipInputFor]="chipList"
+      [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+  </mat-chip-list>
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+    <mat-option *ngFor="let row of filteredRows | async" [value]="row">
+      {{row}}
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>
 
 
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 matrix-table">