Settings: Progress definition: UI improvements

Author: vbakke

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

@@ -16,7 +16,8 @@ <h1>
           <b>UUID</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="uuid" [innerHTML]="currentActivity.uuid"></p>
+      <p id="uuid">uuid: <span [innerHTML]="currentActivity.uuid"></span></p>
+      <p id="level">Level: <span [innerHTML]="currentActivity.level"></span></p>
     </mat-expansion-panel>
 
     <mat-expansion-panel *ngIf="currentActivity.description?.hasContent()">

src/app/model/progress-store.ts

@@ -32,7 +32,7 @@ export class ProgressStore {
     // Sort the progress titles, from most completed, to not started
     this._progressDefinition = progressDefinition;
     this._progressTitles = Object.keys(progressDefinition).sort(
-      (a, b) => progressDefinition[a].weight - progressDefinition[b].weight
+      (a, b) => progressDefinition[a].score - progressDefinition[b].score
     );
     this._progressTitlesDescOrder = this._progressTitles.slice().reverse();
   }
@@ -255,7 +255,7 @@ export class ProgressStore {
 
     for (const progressTitle of this._progressTitlesDescOrder || []) {
       if (teamProgress[progressTitle] !== undefined) {
-        return this._progressDefinition[progressTitle].weight;
+        return this._progressDefinition[progressTitle].score;
       }
     }
     return 0;

src/app/model/types.ts

@@ -6,7 +6,7 @@ export interface TeamProgressFile {
 }
 
 export interface ProgressDefinition {
-  weight: number;
+  score: number;
   definition: string;
 }
 

src/app/pages/settings/settings.component.css

@@ -2,45 +2,32 @@
   margin-top: 1em;
 }
 
-.progress-definition-row {
-  display: grid;
-  grid-template-columns: minmax(100px, 1fr) 100px minmax(200px, 2fr);
-  gap: 1em;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
-  transition: background-color 0.2s;
-  align-items: center;
-}
-
 .progress-definition-row:hover {
   background-color: #f5f5f5;
 }
 
-.progress-weight {
-  text-align: center;
-}
-
 .progress-definitions-grid ::ng-deep .mat-form-field-wrapper {
   padding-bottom: 0;
 } 
 
 .date-format-container {
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: 0.2em;
   width: 25em;
 }
 
-.mat-slider-horizontal {
-  max-width: 100px;
-  width: 100px;
-  min-width: 80px;
-}
-
 .progress-definitions-section {
   margin-top: 1em;
 }
 
+
+.progress-definitions-grid {
+  display: grid;
+  grid-template-columns: auto 5em minmax(200px, 2fr) auto;
+  gap: 0.3em;
+}
+
 .progress-definitions-grid ::ng-deep .mat-form-field-wrapper {
   padding-bottom: 0;
 }
@@ -49,17 +36,28 @@
   top: 0;
 }
 
-.progress-definitions-grid .progress-key {
+.grid-cell.progress-key {
   font-weight: 500;
 }
 
-.progress-definitions-grid .progress-weight input {
-  color: #f66;
-  text-align: center;
+.grid-cell.progress-score {
+  text-align: right;
+  padding-right: 0.5em;
 }
 
-.progress-definitions-grid .progress-definition {
-  color: #333;
+.grid-cell.action-buttons,
+.grid-cell.progress-definition {
+  margin-bottom: 0.8em;
+}
+
+
+.grid-cell.progress-score span, 
+.grid-cell.action-buttons {
+  color: #aaa;
+}
+.grid-cell.action-buttons {
+  align-self: center;
+  justify-self: center;
 }
 
 .selectable-list {
@@ -78,12 +76,6 @@
   flex: 1;
 }
 
-.progress-definitions-grid {
-  display: grid;
-  grid-template-columns: auto 5em minmax(200px, 2fr) auto;
-  gap: 1em;
-}
-
 .edit-hint {
   color: #666;
   font-size: 0.9em;
@@ -94,9 +86,24 @@ mat-icon.mandatory-icon {
     padding: 8px;
 }
 
+.help-text {
+  font-size: 0.75em;
+  color: #666;
+  margin-top: 0.5em;
+}
+
 
 @media screen and (max-width: 650px) {
   .progress-definitions-grid {
-    grid-template-columns: auto;
+    grid-template-columns: auto 5em;
   } 
+  
+  .grid-cell.action-buttons,
+  .grid-cell.progress-definition {
+    margin-bottom: 1.8em;
+  }
+
+  .edit-hint {
+    display: none;
+  }
 }

src/app/pages/settings/settings.component.html

@@ -72,8 +72,8 @@ <h2>Progress Definitions</h2>
         <ng-template #displayProgress>
           <ng-container *ngFor="let definition of definitionsFormArray.controls; let i = index">
             <div class="grid-cell progress-key">{{ getFormGroupValue(definition, 'key') }}</div>
-            <div class="grid-cell progress-weight">
-              {{ getFormGroupValue(definition, 'weight') }}%
+            <div class="grid-cell progress-score">
+              {{ getFormGroupValue(definition, 'score') }}%
             </div>
             <div class="grid-cell progress-definition">
               {{ getFormGroupValue(definition, 'definition') }}
@@ -83,22 +83,22 @@ <h2>Progress Definitions</h2>
         </ng-template>
         <ng-template #editProgress>
           <ng-container *ngFor="let definition of definitionsFormArray.controls; let i = index">
-            <mat-form-field appearance="outline">
+            <mat-form-field appearance="outline" class="grid-cell progress-key edit">
               <mat-label>Name</mat-label>
               <input matInput [value]="getFormGroupValue(definition, 'key')" />
             </mat-form-field>
 
-            <mat-form-field appearance="outline">
+            <mat-form-field appearance="outline" class="grid-cell progress-score edit">
               <mat-label>Score</mat-label>
               <input
                 matInput
-                class="progress-weight"
-                [value]="getFormGroupValue(definition, 'weight')"
+                class="progress-score"
+                [value]="getFormGroupValue(definition, 'score')"
                 [disabled]="getFormGroupValue(definition, 'mandatory')" />
               <span matSuffix>%</span>
             </mat-form-field>
 
-            <mat-form-field appearance="outline">
+            <mat-form-field appearance="outline" class="grid-cell progress-definition edit">
               <mat-label>Definition</mat-label>
               <textarea
                 matInput
@@ -108,13 +108,15 @@ <h2>Progress Definitions</h2>
                 [value]="getFormGroupValue(definition, 'definition')"></textarea>
             </mat-form-field>
 
-            <div>
+            <div class="grid-cell action-buttons edit">
               <mat-icon
+                title="You cannot remove this definition"
                 *ngIf="definition.get('mandatory')?.value"
                 class="material-icons-outlined mandatory-icon"
                 >lock</mat-icon
               >
               <button
+                title="Delete"
                 *ngIf="!definition.get('mandatory')?.value"
                 mat-icon-button
                 (click)="removeProgressDefinition(i)"
@@ -125,9 +127,15 @@ <h2>Progress Definitions</h2>
           </ng-container>
         </ng-template>
       </div>
+      <div class="help-text" *ngIf="editingProgressDefinitions">
+        <p>
+          Customize progression steps for the activites. Some prefer a timewise progression, such as
+          <em>Planned-In progress-Implemented</em>. Some prefer a maturity wise progression, such as
+          <em>Low maturity-Medium maturity-High maturity</em>.
+        </p>
+        <p>Make sure to add a good definition, so that everyone aligns.</p>
+        <p>A progress stage of 0% and 100% is mandatory. The rest is up to you.</p>
+      </div>
     </div>
-    <span *ngIf="editingProgressDefinitions">
-      Changes will be lost if you navigate away without accepting.
-    </span>
   </mat-card>
 </div>

src/app/pages/settings/settings.component.ts

@@ -123,9 +123,9 @@ export class SettingsComponent implements OnInit {
       this.definitionsFormArray.push(
         this.formBuilder.group({
           key: [key],
-          weight: [progDef.weight * 100],
+          score: [progDef.score * 100],
           definition: [progDef.definition],
-          mandatory: progDef.weight == 1 || progDef.weight == 0,
+          mandatory: progDef.score == 1 || progDef.score == 0,
         })
       );
     });
@@ -135,7 +135,7 @@ export class SettingsComponent implements OnInit {
     this.definitionsFormArray.push(
       this.formBuilder.group({
         key: [''],
-        weight: [0],
+        score: [0],
         definition: [''],
       })
     );

src/app/service/loader/data-loader.service.ts

@@ -150,7 +150,7 @@ export class LoaderService {
 
     for (let state of Object.keys(meta.progressDefinition)) {
       let progressDef = meta.progressDefinition[state];
-      let value: string | number = progressDef.weight;
+      let value: string | number = progressDef.score;
 
       if (typeof value === 'string') {
         let isPercentage: boolean = (value as string).includes('%');
@@ -162,11 +162,11 @@ export class LoaderService {
           errors.push(`The progress value for '${state}' must be between 0% and 100%`);
           continue;
         }
-        progressDef.weight = value;
+        progressDef.score = value;
       }
     }
 
-    const values = Object.values(meta.progressDefinition).map(def => def.weight);
+    const values = Object.values(meta.progressDefinition).map(def => def.score);
     if (Math.min(...values) !== 0) {
       errors.push(`The meta.progressDefinition must specify a name for 0% completed`);
     }

src/app/service/sector-service.ts

@@ -29,7 +29,7 @@ export class SectorService {
     this.allProgress = progress;
     this.progressValues = progressStates;
     this.progressStates = Object.keys(progressStates).sort(
-      (a, b) => progressStates[b].weight - progressStates[a].weight
+      (a, b) => progressStates[b].score - progressStates[a].score
     );
   }
 

src/assets/Markdown Files/TODO-v4.md

@@ -4,13 +4,27 @@
   - UI: Toggle: edit / view
   - UI: 0% and 100%: No delete, no edit Weight
   - UI: Edit
-  - 
+
   - UI: Add
   - UI: Delete
   - Save / Accept
   - Revert
 
+- Settings: Proper text under Progress
+
 ## Next
+- Heatmap: Add #uuid to URL, and allow navigation on clicks in dependencies
+- Heatmap: Add a "pinching" of heat map colors, to differenciate 0.00 an 0.01
+- Matrix: Search (incl descr search), based on Mapping
+- Reorder menu
+
+### Align DSOMM-data and DSOMM
+- DSOMM-data: Sort linear list of activities (sorted by dim, level)
+- DSOMM-data: Update generated filename and data structure to adhere to this new DSOMM standard
+- DSOMM-data: Include version number in generated yaml file
+- DSOMM: Read latest "activities.yaml" from DSOMM-data's github repo, if missing locally
+- DSOMM: Read latest "activities.yaml" from DSOMM-data's github repo, to check for any new releases
+
 
 ## ToDo
 ### Settings
@@ -22,17 +36,14 @@
 ### Matrix
 - Matrix: Add a Close/Back button
 - Matrix: Remember filters when returning to matrix page
-- Matrix: Search (incl descr search), based on Mapping
 - Matrix: Filter on Usefulness, and Difficulties
 ### Teams
 - Teams: Allow user to re-order teams and groups
 - Teams: Bug: Editing name, pushes the item last
 - Teams: Allow editing dates for progress stages
 ### Heatmap:
-- Heatmap: Add #uuid to URL, and allow navigation on clicks in dependencies
 - Heatmap: Fix: asterisk marks when modified
   - ViewController needs to know about changes vs temp storage
-- Heatmap: Bug: Clicking on grey sector leaves cursor on that sector
 - Heatmap: Bug: Selecting a team group does not always get deselected when flipping teams
 - Heatmap: meta-yaml: If progress definition is missing, default to 0% + 100% 
 - Heatmap: Revert to boolean checkboxes, if definition is only 0% and 100%
@@ -52,17 +63,10 @@
 - Move About Us, last, renaming to About DSOMM
 - Move all getMetaString into MetaStore()
 - Add fallbacks for getMetaString in MetaStore()
-- Fix dependsOn that is uuid (e.g. 83057028-0b77-4d2e-8135-40969768ae88)
 - Refactor: Labels for knowledge, time, resources, and usefulness (used by both Matrix and Heatmap)
 - Move META_FILE constant from data service to main app
 - Check if loader can be optimized by load in yaml in parallel
-- Proxy Grafana Faro data: https://grafana.com/docs/grafana-cloud/monitor-applications/frontend-observability/instrument/data-proxy/  
 
-## Align DSOMM-data and DSOMM
-- DSOMM-data: Sort linear list of activities (sorted by dim, level)
-- DSOMM-data: Update generated filename and data structure to adhere to this new DSOMM standard
-- DSOMM-data: Include version number in generated yaml file
-- DSOMM: Read latest "generated.yaml" from DSOMM-data's github repo, to check for any new releases
 
 # Later
 - App: Search activities, across title description etc
@@ -81,6 +85,7 @@
 - Meta.yaml: Allow admins to customize the terms 'Team' and 'Group' (e.g. to 'App' and 'Portfolio')
 
 # Done
+- Fix dependsOn that is uuid (e.g. 83057028-0b77-4d2e-8135-40969768ae88)
 - Settings: Make settings page for Date format and Max maturity level
 - Dependency: Make connecting nodes clickable for navigation
 - Dependency: Handle dependsOn uuid, not just name