Merge branch 'feat/central-loader-heatmap' into experiment

Author: vbakke

.prettierrc.json

@@ -7,6 +7,6 @@
     "arrowParens": "avoid",
     "trailingComma": "es5",
     "bracketSameLine": true,
-    "printWidth": 80,
+    "printWidth": 120,
     "endOfLine": "auto"
   }

TODO-central-loader.md

@@ -1,24 +1,47 @@
 # ToDo
 
+
 ## Doing
+- Load TeamProgress yaml
+    - Store teamProgress as part of activityStore under each activity
+    - How to deal with deleted progress??? (Do later)
+- Refactor Circular Heatmap
+    - Update progress (when slider is moved) when new sector is selected
+    - show progress for each activity on the slider
+    - update progress for each activity in the sector, on teams change
 
 ## Next
-- Filter: tags: Fix update on SPACE key
-- Show Latest info i activity-description modal view
+- Load TeamProgress yaml
+    - Store in localStorage
+    - Handle boolean for backwards compatibility
+    - Merge localStorage and YAML
+- Progress Slider
+    - Data model, contains date, so warning about downgrade can show date
+    - Handle when previous value does not have a date (backwards compatibility)
+    - Catch close to save new progresses
+- Store TeamProgress to localStorage
+- Load localStorage TeamProgress
+- Export TeamProgress yaml
+- Filters
+    - filter teams
+    - filter none => all
+
 
 
 ## Later
-- Make sure loader.load() only runs once (even with navigations)
-- Load TeamProgress yaml
+- Add validation for meta.yaml, progress step: include 0% and 100%, and increacing values
+- Merge in experiment's way of generating circ heat
+- Fix dependsOn that is uuid (e.g. 83057028-0b77-4d2e-8135-40969768ae88)
 - Sort linear list of activities (sorted by level, dim)
-- Substitute Circular Heatmap
-- Store TeamProgress
-- Load localStorage TeamProgress
 - Move META_FILE constant from data service to main app
-
-- Substitute Activity Detail
+- Filter: tags: Fix update on SPACE key (trouble)
 
 # Done
+- Load YAML progress
+- Navigate to activity-description without site reload
+- Refactor Dependecy graph
+- Refactor activity-description
+- Make sure loader.load() only runs once (even with navigations)
 - Handle parsing errors, like Circular Heatmap
 - Filter: Make filters for subdimensions
 - Matrix: toggle chips

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { DependencyGraphComponent } from './component/dependency-graph/dependenc
 import { TeamsComponent } from './component/teams/teams.component';
 import { ToStringValuePipe } from './pipe/to-string-value.pipe';
 import { ModalMessageComponent } from './component/modal-message/modal-message.component';
+import { ProgressSliderComponent } from './component/progress-slider/progress-slider.component';
 import {
   MatDialogModule,
   MAT_DIALOG_DATA,
@@ -48,6 +49,7 @@ import {
     ToStringValuePipe,
     UserdayComponent,
     ModalMessageComponent,
+    ProgressSliderComponent,
   ],
   imports: [
     BrowserModule,

src/app/component/activity-description/activity-description.component.html

@@ -1,7 +1,7 @@
 <div class="content-box">
   <h1>
-    {{ currentActivity.dimension }} -> {{ currentActivity.subDimension }}:
-    {{ currentActivity.activityName }}
+    {{ currentActivity.category }} -> {{ currentActivity.dimension }}:
+    {{ currentActivity.name }}
   </h1>
 
   <div class="example-action-buttons">
@@ -52,9 +52,7 @@ <h1>
           <b>Implementation Guide</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p
-        id="implementatonGuide"
-        [innerHTML]="currentActivity.implementatonGuide"></p>
+      <p id="implementatonGuide" [innerHTML]="currentActivity.implementatonGuide"></p>
     </mat-expansion-panel>
 
     <mat-expansion-panel>
@@ -63,11 +61,9 @@ <h1>
           <b>Difficulty of Implementation</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p>
-        Knowledge: {{ this.KnowledgeLabels[this.currentActivity.knowledge] }}
-      </p>
-      <p>Time: {{ this.GeneralLabels[this.currentActivity.time] }}</p>
-      <p>Resources: {{ this.GeneralLabels[this.currentActivity.resources] }}</p>
+      <p>Knowledge: {{ this.KnowledgeLabel }}</p>
+      <p>Time: {{ this.TimeLabel }}</p>
+      <p>Resources: {{ this.ResourceLabel }}</p>
     </mat-expansion-panel>
 
     <mat-expansion-panel *ngIf="currentActivity.usefulness !== -1">
@@ -76,7 +72,7 @@ <h1>
           <b>Usefulness</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p>{{ this.GeneralLabels[this.currentActivity.usefulness] }}</p>
+      <p>{{ this.UsefullnessLabel }}</p>
     </mat-expansion-panel>
 
     <mat-expansion-panel>
@@ -86,9 +82,7 @@ <h1>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-accordion multi="true">
-        <mat-expansion-panel
-          id="teamsEvidence"
-          *ngFor="let item of this.currentActivity.teamsEvidence | keyvalue">
+        <mat-expansion-panel id="teamsEvidence" *ngFor="let item of this.currentActivity.teamsEvidence | keyvalue">
           <mat-expansion-panel-header>
             <mat-panel-title>
               <b [innerHTML]="item.key"></b>
@@ -116,8 +110,7 @@ <h1>
       </mat-expansion-panel-header>
       <p>
         <mat-accordion multi="true">
-          <mat-expansion-panel
-            *ngFor="let implement of this.currentActivity.implementation">
+          <mat-expansion-panel *ngFor="let implement of this.currentActivity.implementation">
             <mat-expansion-panel-header>
               <mat-panel-title>
                 <b [innerHTML]="implement['name']"></b>
@@ -220,12 +213,7 @@ <h1>
           <b>Implemented By</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <div
-        *ngIf="
-          currentActivity.teamsImplemented;
-          then thenBlock;
-          else elseBlock
-        "></div>
+      <div *ngIf="currentActivity.teamsImplemented; then thenBlock; else elseBlock"></div>
       <ng-template #thenBlock>
         <ul class="teams-implemented-list">
           <li *ngFor="let item of currentActivity.teamsImplemented | keyvalue">
@@ -246,12 +234,9 @@ <h1>
           <b>Depends on</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <app-dependency-graph
-        dimension="{{ currentActivity.dimension }}"
-        subDimension="{{ currentActivity.subDimension }}"
-        activityName="{{
-          currentActivity.activityName
-        }}"></app-dependency-graph>
+      <div *ngIf="currentActivity && currentActivity.name">
+        <app-dependency-graph [activityName]="currentActivity.name"></app-dependency-graph>
+      </div>
     </mat-expansion-panel>
 
     <mat-expansion-panel>

src/app/component/activity-description/activity-description.component.spec.ts

@@ -5,18 +5,29 @@ import { sample } from 'rxjs';
 import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
 
 import { ActivityDescriptionComponent } from './activity-description.component';
+import { LoaderService } from 'src/app/service/loader/data-loader.service';
+import { MockLoaderService } from 'src/app/service/loader/mock-data-loader.service';
+
+let mockLoaderService: MockLoaderService;
 
 describe('ActivityDescriptionComponent', () => {
   let component: ActivityDescriptionComponent;
   let fixture: ComponentFixture<ActivityDescriptionComponent>;
+  mockLoaderService = new MockLoaderService({});
 
+  /* eslint-disable */
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers: [ymlService, HttpClient, HttpHandler],
+      providers: [
+        HttpClient,
+        HttpHandler,
+        { provide: LoaderService, useValue: mockLoaderService },
+      ],
       imports: [RouterTestingModule],
       declarations: [ActivityDescriptionComponent],
     }).compileComponents();
   });
+  /* eslint-enable */
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ActivityDescriptionComponent);
@@ -31,8 +42,8 @@ describe('ActivityDescriptionComponent', () => {
   it('check if header is being generated', () => {
     const testDimension = 'Sample Dimension';
     const testSubDimension = 'Sample subDimension';
-    component.currentActivity.dimension = testDimension;
-    component.currentActivity.subDimension = testSubDimension;
+    component.currentActivity.category = testDimension;
+    component.currentActivity.dimension = testSubDimension;
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
     const heading = HTMLElement.querySelector('h1')!;
@@ -54,11 +65,8 @@ describe('ActivityDescriptionComponent', () => {
     component.currentActivity.description = testDescription;
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const contentDisplayedinParagraphTag =
-      HTMLElement.querySelector('#description')!;
-    expect(contentDisplayedinParagraphTag.textContent).toContain(
-      testDescription
-    );
+    const contentDisplayedinParagraphTag = HTMLElement.querySelector('#description')!;
+    expect(contentDisplayedinParagraphTag.textContent).toContain(testDescription);
   });
 
   it('check if risk is being generated', () => {
@@ -75,8 +83,7 @@ describe('ActivityDescriptionComponent', () => {
     component.currentActivity.measure = testMeasure;
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const contentDisplayedinParagraphTag =
-      HTMLElement.querySelector('#measure')!;
+    const contentDisplayedinParagraphTag = HTMLElement.querySelector('#measure')!;
     expect(contentDisplayedinParagraphTag.textContent).toContain(testMeasure);
   });
 
@@ -85,12 +92,8 @@ describe('ActivityDescriptionComponent', () => {
     component.currentActivity.implementatonGuide = testImplementationGuide;
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const contentDisplayedinParagraphTag = HTMLElement.querySelector(
-      '#implementatonGuide'
-    )!;
-    expect(contentDisplayedinParagraphTag.textContent).toContain(
-      testImplementationGuide
-    );
+    const contentDisplayedinParagraphTag = HTMLElement.querySelector('#implementatonGuide')!;
+    expect(contentDisplayedinParagraphTag.textContent).toContain(testImplementationGuide);
   });
 
   it('check if evidence is being generated', () => {
@@ -102,30 +105,24 @@ describe('ActivityDescriptionComponent', () => {
     console.log('parentElement', parentElement[1].textContent);
     const lengthOfObject = Object.keys(testEvidence).length;
     for (var i = 0; i > lengthOfObject; i++)
-      expect(parentElement[i].textContent).toContain(
-        Object.keys(testEvidence)[i] + Object.values(testEvidence)[i]
-      );
+      expect(parentElement[i].textContent).toContain(Object.keys(testEvidence)[i] + Object.values(testEvidence)[i]);
   });
 
   it('check if assessment is being generated', () => {
     const testAssessment = 'Sample Assessment';
     component.currentActivity.assessment = testAssessment;
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const contentDisplayedinParagraphTag =
-      HTMLElement.querySelector('#assessment')!;
-    expect(contentDisplayedinParagraphTag.textContent).toContain(
-      testAssessment
-    );
+    const contentDisplayedinParagraphTag = HTMLElement.querySelector('#assessment')!;
+    expect(contentDisplayedinParagraphTag.textContent).toContain(testAssessment);
   });
 
   it('check if comments is being generated', () => {
     const testComments = 'Sample Comments';
     component.currentActivity.comments = testComments;
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const contentDisplayedinParagraphTag =
-      HTMLElement.querySelector('#comments')!;
+    const contentDisplayedinParagraphTag = HTMLElement.querySelector('#comments')!;
     expect(contentDisplayedinParagraphTag.textContent).toContain(testComments);
   });
 
@@ -142,8 +139,7 @@ describe('ActivityDescriptionComponent', () => {
 
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
-    const contentDisplayedinParagraphTag =
-      HTMLElement.querySelectorAll('#references')!;
+    const contentDisplayedinParagraphTag = HTMLElement.querySelectorAll('#references')!;
 
     expect(contentDisplayedinParagraphTag[0].textContent).toContain(
       component.SAMMVersion +
@@ -152,8 +148,7 @@ describe('ActivityDescriptionComponent', () => {
         testISO[0] +
         component.ISO22Version +
         testISO22[0] +
-        component.openCREVersion +
-        uuid
+        component.openCREVersion
     );
   });
 });