Activity: Display Tags and Implemented by

Author: vbakke

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

@@ -55,6 +55,35 @@
   list-style: none;
 }
 
+/* Ensure panel titles don't wrap */
+mat-panel-title b {
+  white-space: nowrap;
+}
+
+/* Implemented By Grid - dynamic columns based on content */
+.implemented-by-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+  padding: 0;
+  width: 100%;
+}
+
+/* Responsive design for smaller screens */
+@media (max-width: 550px) {
+  .implemented-by-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+  }
+}
+
+@media (max-width: 350px) {
+  .implemented-by-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
+
 .difficulty-summary {
   display: flex;
   gap: 15px;
@@ -96,7 +125,7 @@
   justify-content: space-around;
   flex-wrap: wrap;
   gap: 15px;
-  padding: 10px 0;
+  padding: 0;
 }
 
 .difficulty-detail-item {
@@ -197,6 +226,7 @@ mat-icon.mat-icon {
   gap: 4px;
   flex: 1;
   min-width: 0;
+  max-height: 37px;
 }
 
 .ref-section strong {
@@ -224,7 +254,7 @@ mat-icon.mat-icon {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
-  padding: 15px 0;
+  padding: 0;
   width: 100%;
 }
 
@@ -382,6 +412,30 @@ mat-icon.mat-icon {
   margin: 0;
 }
 
+.tags-section {
+  margin-top: 20px;
+  padding: 16px 0;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tag-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: var(--background-secondary);
+  color: var(--text-secondary);
+  border-radius: 16px;
+  font-size: 0.6em;
+  font-weight: 500;
+  border: 1px solid var(--text-tertiary);
+  transition: background-color 0.2s, transform 0.1s;
+}
+
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
   /* Level badges in dark mode - maintain readability */

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

@@ -22,7 +22,7 @@ <h1>
     <span class="level">Level {{ currentActivity.level }}</span>
     <div class="uuid"><span class="uuid-label">id: </span><span class="uuid-value">{{ currentActivity.uuid }}</span></div>
   </div>
-  <mat-accordion multi="true">
+  <mat-accordion class="activity-details" multi="true">
     <mat-expansion-panel *ngIf="currentActivity.description?.hasContent()" [expanded]="true">
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -209,7 +209,11 @@ <h3><b>Usefulness</b></h3>
               <span
                 class="ref-values"
                 *ngIf="currentActivity?.references?.openCRE?.length; else creEmpty">
-                <a href="https://www.opencre.org/" target="_blank" class="cre-link">View OpenCRE</a>
+                <a
+                  *ngFor="let openCRE of currentActivity?.references?.openCRE"
+                  target="_blank"
+                  [href]="openCRE">
+                  View OpenCRE</a>
               </span>
               <ng-template #creEmpty>-</ng-template>
             </span>
@@ -304,7 +308,7 @@ <h3><b>Usefulness</b></h3>
       *ngIf="currentActivity.implementation?.length">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <b>Implementation</b>
+          <b>Tools</b>
           <div class="implementation-preview" [class.hidden]="implementationPanel.expanded">
             <span class="tool-count-badge"
               >{{ currentActivity.implementation?.length || 0 }} tools</span
@@ -327,35 +331,47 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
       </div>
     </mat-expansion-panel>
 
-    <mat-expansion-panel>
+    <mat-expansion-panel [expanded]="isNarrowScreen" #implementedByPanel>
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <b>Implemented By</b>
+          <b>Implemented by</b>
+          <div class="references-summary" [class.hidden]="implementedByPanel.expanded">
+            <span
+              class="ref-section"
+              *ngFor="let progressTitle of progressTitlesWithTeams">
+              <strong>{{ progressTitle }}:</strong>
+              <span class="ref-values">
+                <span
+                  *ngFor="let teamName of teamsByProgressTitle.get(progressTitle); let last = last"
+                  >{{ teamName }}<span *ngIf="!last">, </span></span
+                >
+              </span>
+            </span>
+            <span class="ref-section" *ngIf="teamsImplemented.size === 0">
+              <span class="ref-values">No teams have started this activity yet</span>
+            </span>
+          </div>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <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">
-            <b>{{ item.key }}</b
-            >:{{ item.value }}
-          </li>
-        </ul>
-      </ng-template>
-      <ng-template #elseBlock
-        >teamsImplemented variable not present <br />
-        <p *ngIf="currentActivity.isImplemented === false">Not Implemented</p>
-        <p *ngIf="currentActivity.isImplemented === true">Implemented</p>
+      <div class="implemented-by-grid" *ngIf="teamsImplemented.size > 0; else noTeamsBlock">
+        <div class="reference-column" *ngFor="let progressTitle of progressTitlesWithTeams">
+          <div class="reference-header">{{ progressTitle }}</div>
+          <div class="reference-values">
+            <span class="reference-value" *ngFor="let teamName of teamsByProgressTitle.get(progressTitle)">
+              {{ teamName }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <ng-template #noTeamsBlock>
+        <p>No teams have started implementing this activity yet.</p>
       </ng-template>
     </mat-expansion-panel>
   </mat-accordion>
 
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      <mat-panel-title>
-        <b>Tags</b>
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <p [innerHTML]="currentActivity.tags"></p>
-  </mat-expansion-panel>
+  <div class="tags-section" *ngIf="currentActivity.tags?.length && currentActivity.tags?.[0] !== 'none'">
+    <div class="tags-container">
+      <span class="tag-chip" *ngFor="let tag of currentActivity.tags">{{ tag }}</span>
+    </div>
+  </div>
 </div>

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

@@ -13,6 +13,7 @@ import {
 import { MatAccordion } from '@angular/material/expansion';
 import { Activity } from '../../model/activity-store';
 import { LoaderService } from '../../service/loader/data-loader.service';
+import { TeamName, ProgressTitle } from '../../model/types';
 
 @Component({
   selector: 'app-activity-description',
@@ -36,6 +37,9 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
   ISO22Version: string = 'ISO 27001:2022';
   openCREVersion: string = 'OpenCRE';
   isNarrowScreen: boolean = false;
+  teamsImplemented: Map<TeamName, ProgressTitle> = new Map();
+  teamsByProgressTitle: Map<ProgressTitle, TeamName[]> = new Map();
+  progressTitlesWithTeams: ProgressTitle[] = [];
 
   @ViewChildren(MatAccordion) accordion!: QueryList<MatAccordion>;
 
@@ -75,6 +79,53 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
       this.ResourceLabel = dataStore.getMetaString('labels', activity.difficultyOfImplementation.resources - 1);
       this.UsefulnessLabel = dataStore.getMetaString('labels', activity.usefulness - 1);
       /* eslint-enable */
+      
+      // Get teams that have implemented this activity
+      this.updateTeamsImplemented();
+    }
+  }
+
+  updateTeamsImplemented() {
+    this.teamsImplemented.clear();
+    this.teamsByProgressTitle.clear();
+    this.progressTitlesWithTeams = [];
+    
+    const dataStore = this.loader.datastore;
+    if (!dataStore || !dataStore.progressStore || !dataStore.meta || !this.currentActivity.uuid) {
+      return;
+    }
+
+    const teams = dataStore.meta.teams;
+    const progressStore = dataStore.progressStore;
+    const activityUuid = this.currentActivity.uuid;
+
+    // Get all progress titles (excluding the first one which is "Not started")
+    const inProgressTitles = progressStore.getInProgressTitles();
+    const completedTitle = progressStore.getCompletedProgressTitle();
+    const allProgressTitles = [...inProgressTitles, completedTitle];
+
+    // Check each team to see if they have started or completed this activity
+    for (const teamName of teams) {
+      const progressTitle = progressStore.getTeamProgressTitle(activityUuid, teamName);
+      const progressValue = progressStore.getTeamActivityProgressValue(activityUuid, teamName);
+      
+      // Only include teams that have made progress (value > 0)
+      if (progressValue > 0) {
+        this.teamsImplemented.set(teamName, progressTitle);
+        
+        // Group teams by progress title
+        if (!this.teamsByProgressTitle.has(progressTitle)) {
+          this.teamsByProgressTitle.set(progressTitle, []);
+        }
+        this.teamsByProgressTitle.get(progressTitle)!.push(teamName);
+      }
+    }
+
+    // Create ordered list of progress titles that have teams (skip "Not started")
+    for (const progressTitle of allProgressTitles) {
+      if (this.teamsByProgressTitle.has(progressTitle)) {
+        this.progressTitlesWithTeams.push(progressTitle);
+      }
     }
   }