Merge pull request #231 from ptechofficial/master

Activity Tags feature completed

Author: 0x41head

package-lock.json

@@ -17,11 +17,12 @@
     "@angular/compiler": "^13.0.0",
     "@angular/core": "^13.0.0",
     "@angular/forms": "^13.0.0",
+    "@angular/localize": "^13.0.0",
     "@angular/material": "^13.0.0",
     "@angular/platform-browser": "^13.0.0",
     "@angular/platform-browser-dynamic": "^13.0.0",
     "@angular/router": "^13.0.0",
-    "@angular/localize": "^13.0.0", 
+    "@ngneat/until-destroy": "^10.0.0-beta.0",
     "d3": "^7.5.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^13.0.1",

package.json

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
 

src/app/app.module.ts

@@ -1,41 +1,57 @@
-.content{
-    width: 100%;
-    /*background-color: gainsboro;*/
-}
-.mat-form-field{
-    margin: 20px;
-    width: 90%;
-} 
+.content {
+  width: 100%;
+  /*background-color: gainsboro;*/
+}
+.mat-form-field {
+  margin: 20px;
+  margin-bottom: 0;
+  width: 90%;
+}
 
-.matrix-table{
-    margin: 20px;
+.matrix-table {
+  margin: 20px;
 }
 
-.mat-cell{
-    padding: 20px;
-    width: 12.5%;
-    max-width: 17%;
-    word-wrap: break-word;
+.mat-cell {
+  padding: 20px;
+  /* padding-bottom: 0; */
+  width: 12.5%;
+  max-width: 17%;
+  word-wrap: break-word;
 }
 
-.mat-header-cell{
-    padding: 10px;
-    width: 12.5%;
-    max-width: 17%;
-    word-wrap: break-word;
-    font-size: 16px;  
-    font-weight: bold;
+.mat-header-cell {
+  padding: 10px;
+  width: 12.5%;
+  max-width: 17%;
+  word-wrap: break-word;
+  font-size: 16px;
+  font-weight: bold;
 }
 
-.table-small-width{
-    width: 5%;
-    max-width: 9%;
+.table-small-width {
+  width: 5%;
+  max-width: 9%;
 }
 
-button{
-    background-color: white;
-    border: none;
-    text-align: left;
-    cursor:pointer;
+button {
+  background-color: white;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tags-task {
+  font-weight: 800;
+  font-style: italic;
+  color: rgb(0, 113, 151);
+  font-size: 12px;
+}
+.reset-button {
+  background-color: #66bb6a;
+  display: block;
+  margin: 0 20px;
+  padding: 7px 12px;
+  border-radius: 16px;
+  font: 500 14px / 20px Roboto, 'Helvetica Neue', sans-serif;
 }
-  

src/app/component/matrix/matrix.component.css

@@ -1,33 +1,33 @@
 <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-form-field class="activity-chip-list">
+    <mat-label>SubDimension Filter</mat-label>
+    <mat-chip-list #chipList selectable multiple>
       <mat-chip
-        color="primary"
-        *ngFor="let row of rowsCurrentlyBeingShown"
-        (removed)="remove(row)"
-        [selected]="true">
-        {{ row }}
-        <button matChipRemove>
-          <mat-icon>cancel</mat-icon>
-        </button>
+        #c="matChip"
+        *ngFor="let subDimension of listSubDimension"
+        (click)="toggleSubDimensionSelection(c)"
+        [value]="subDimension"
+        selected>
+        {{ subDimension }}
       </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-form-field class="activity-chip-list">
+    <mat-label>Activity Tag Filter</mat-label>
+    <mat-chip-list selectable multiple>
+      <mat-chip
+        #c="matChip"
+        *ngFor="let tag of listTags"
+        (click)="toggleTagSelection(c)"
+        [value]="tag"
+        selected>
+        {{ tag }}
+      </mat-chip>
+    </mat-chip-list>
+  </mat-form-field>
+
+  <button class="reset-button" (click)="reload()">RESET</button>
 
   <table
     mat-table
@@ -64,6 +64,7 @@
           <ul>
             <li *ngFor="let task of element[lvl]; index as j">
               <button
+                style="margin-bottom: 1em"
                 (click)="
                   navigate(element.Dimension, element.SubDimension, i + 1, task)
                 ">
@@ -76,11 +77,33 @@
                     else elseBlock
                   "></div>
                 <ng-template #thenBlock>
-                  <p style="color: green">{{ task }}</p>
+                  <p style="color: green; margin: 0">{{ task }}</p>
                 </ng-template>
                 <ng-template #elseBlock>
-                  <p>{{ task }}</p>
+                  <p style="margin: 0">{{ task }}</p>
                 </ng-template>
+                <span class="tags-task">
+                  [
+                  <span
+                    *ngFor="
+                      let tag of YamlObject[element.Dimension][
+                        element.SubDimension
+                      ][task].tags;
+                      let i = index
+                    ">
+                    {{ tag }}
+                    <span
+                      *ngIf="
+                        i + 1 <
+                        YamlObject[element.Dimension][element.SubDimension][
+                          task
+                        ].tags.length
+                      ">
+                      ,
+                    </span>
+                  </span>
+                  ]
+                </span>
               </button>
             </li>
           </ul>

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

@@ -1,10 +1,11 @@
 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 { MatAutocomplete } from '@angular/material/autocomplete';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
 import { MatrixComponent } from './matrix.component';
+import { MatChip } from '@angular/material/chips';
 
 describe('MatrixComponent', () => {
   let component: MatrixComponent;
@@ -14,7 +15,7 @@ describe('MatrixComponent', () => {
     await TestBed.configureTestingModule({
       providers: [ymlService, HttpClientTestingModule],
       imports: [RouterTestingModule, HttpClientModule],
-      declarations: [MatrixComponent, MatAutocomplete],
+      declarations: [MatrixComponent, MatChip],
     }).compileComponents();
   });
 
@@ -36,10 +37,13 @@ describe('MatrixComponent', () => {
   });
 
   it('check for chip deletion', () => {
-    component.rowsCurrentlyBeingShown = ['row1', 'row2'];
-    component.remove('row1');
+    component.listSubDimension = ['row1', 'row2'];
+    component.currentSubDimensions = ['row2'];
+    component.listTags = ['row1', 'row2'];
+    component.currentTags = ['row2'];
     const newChipRow = ['row2'];
     fixture.detectChanges();
-    expect(component.rowsCurrentlyBeingShown).toEqual(newChipRow);
+    expect(component.currentSubDimensions).toEqual(newChipRow);
+    expect(component.currentTags).toEqual(newChipRow);
   });
 });