feat: add store for limits

Author: manfredsteyer

.detective/hash

@@ -1 +1 @@
-e6d098d0ee25f35c33cd2d20d4638ffd07f51fe1, v1.1.1
+bf3b350647d4b87dda725cc854504af6a0779b6d, v1.1.2

.detective/log

@@ -1,3 +1,25 @@
+"Manfred Steyer <manfred.steyer@gmx.net>,Fri Sep 27 21:59:41 2024 +0200	719f061ae9dfba3795d03390d5e0e297f256cd71,feat: add store for limits"
+1	1	.detective/hash
+10	0	.detective/log
+19	0	apps/frontend/src/app/data/limits.store.ts
+8	1	apps/frontend/src/app/features/coupling/coupling.component.html
+21	8	apps/frontend/src/app/features/coupling/coupling.component.ts
+2	0	apps/frontend/src/app/model/limits.ts
+2	2	apps/frontend/src/app/ui/limits/limits.component.html
+5	7	apps/frontend/src/app/ui/limits/limits.component.ts
+32	0	package-lock.json
+2	0	package.json
+
+"Manfred Steyer <manfred.steyer@gmx.net>,Fri Sep 27 21:19:56 2024 +0200	78933966b3593f52c81fe26a3472b0c7a46eee71,chore(frontend): remove unneeded linting directive"
+0	1	apps/frontend/src/app/ui/graph/graph.ts
+
+"Manfred Steyer <manfred.steyer@gmx.net>,Fri Sep 27 14:48:06 2024 +0200	bc87b324a60db023efb3bbeb2d82d5e193e1db35,chore(release): publish 1.1.2"
+5	14	.detective/config.json
+1	1	.detective/hash
+5	0	.detective/log
+14	0	CHANGELOG.md
+1	1	apps/backend/package.json
+
 "Manfred Steyer <manfred.steyer@gmx.net>,Fri Sep 27 14:46:09 2024 +0200	955828b34c0cfce98bbd78073d6fdeee761b7191,feat(frontend): show actual number of changed lines in team alignment"
 1	1	.detective/hash
 110	0	.detective/log

apps/frontend/src/app/data/limits.store.ts

@@ -0,0 +1,15 @@
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+
+import { initLimits, Limits } from '../model/limits';
+
+export const LimitsStore = signalStore(
+  { providedIn: 'root' },
+  withState({
+    limits: initLimits,
+  }),
+  withMethods((store) => ({
+    updateLimits(limits: Limits) {
+      patchState(store, { limits });
+    },
+  }))
+);

apps/frontend/src/app/features/coupling/coupling.component.html

@@ -18,7 +18,12 @@
     </mat-icon>
   </div>
   @if (type() === 'changes') {
-  <app-limits [(limits)]="limits" [totalCommits]="totalCommits()"></app-limits>
+  <app-limits
+    [limits]="limits()"
+    (limitsChange)="updateLimits($event)"
+    [totalCommits]="totalCommits()"
+  >
+  </app-limits>
   }
 </div>
 

apps/frontend/src/app/features/coupling/coupling.component.ts

@@ -16,13 +16,14 @@ import {
 } from 'rxjs';
 
 import { CouplingService } from '../../data/coupling.service';
+import { LimitsStore } from '../../data/limits.store';
 import { StatusStore } from '../../data/status.store';
 import {
   CouplingResult,
   initCouplingResult,
 } from '../../model/coupling-result';
 import { GraphType } from '../../model/graph-type';
-import { initLimits, Limits } from '../../model/limits';
+import { initLimits, Limits, LimitType } from '../../model/limits';
 import { Graph, CouplingNodeDefinition } from '../../ui/graph/graph';
 import { GraphComponent } from '../../ui/graph/graph.component';
 import { LimitsComponent } from '../../ui/limits/limits.component';
@@ -54,6 +55,8 @@ const COUPLING_TIP =
   styleUrl: './coupling.component.css',
 })
 export class CouplingComponent {
+  private limitsStore = inject(LimitsStore);
+
   private couplingService = inject(CouplingService);
   private eventService = inject(EventService);
   private statusStore = inject(StatusStore);
@@ -66,7 +69,8 @@ export class CouplingComponent {
 
   totalCommits = this.statusStore.commits;
   groupByFolder = signal(false);
-  limits = signal(initLimits);
+
+  limits = this.limitsStore.limits;
   minConnections = signal(1);
 
   couplingResult$ = combineLatest({
@@ -94,8 +98,12 @@ export class CouplingComponent {
     );
   }
 
+  updateLimits(limits: Limits): void {
+    this.limitsStore.updateLimits(limits);
+  }
+
   toGraph(result: CouplingResult): Graph {
-    result.matrix = this.clearSelfLinks(result.matrix);
+    result.matrix = clearSelfLinks(result.matrix);
 
     console.log('result', result);
 
@@ -116,11 +124,11 @@ export class CouplingComponent {
 
     return graph;
   }
+}
 
-  private clearSelfLinks(matrix: number[][]): number[][] {
-    for (let i = 0; i < matrix.length; i++) {
-      matrix[i][i] = 0;
-    }
-    return matrix;
+function clearSelfLinks(matrix: number[][]): number[][] {
+  for (let i = 0; i < matrix.length; i++) {
+    matrix[i][i] = 0;
   }
+  return matrix;
 }

apps/frontend/src/app/model/limits.ts

@@ -1,9 +1,13 @@
+export type LimitType = 'COMMITS' | 'MONTHS';
+
 export interface Limits {
+  limitType: LimitType;
   limitCommits: number;
   limitMonths: number;
 }
 
 export const initLimits: Limits = {
+  limitType: 'COMMITS' as LimitType,
   limitCommits: 1000,
   limitMonths: 0,
 };

apps/frontend/src/app/ui/limits/limits.component.html

@@ -1,13 +1,16 @@
 <div class="form-container">
   <mat-form-field appearance="fill" class="form-field type">
-    <mat-select [ngModel]="selected()" (ngModelChange)="optionChanged($event)">
+    <mat-select
+      [ngModel]="limits().limitType"
+      (ngModelChange)="optionChanged($event)"
+    >
       @for (option of options; track option.id) {
       <mat-option value="{{ option.id }}">{{ option.label }}</mat-option>
       }
     </mat-select>
   </mat-form-field>
 
-  @if (selected() === 'COMMITS') {
+  @if (limits().limitType === 'COMMITS') {
   <mat-form-field appearance="outline" class="form-field commits">
     <mat-label>Max. Commits</mat-label>
     <input

apps/frontend/src/app/ui/limits/limits.component.ts

@@ -1,24 +1,15 @@
 import { DecimalPipe } from '@angular/common';
-import {
-  Component,
-  computed,
-  inject,
-  input,
-  model,
-  signal,
-} from '@angular/core';
+import { Component, computed, inject, input, model } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { Limits } from '../../model/limits';
-
-type OptionId = 'COMMITS' | 'MONTHS';
+import { Limits, LimitType } from '../../model/limits';
 
 interface Option {
-  id: OptionId;
+  id: LimitType;
   label: string;
 }
 
@@ -41,7 +32,6 @@ const initMonths = 12;
 })
 export class LimitsComponent {
   limits = model.required<Limits>();
-  selected = signal<OptionId>('COMMITS');
   totalCommits = input<number>(0);
 
   decimal = inject(DecimalPipe);
@@ -54,26 +44,28 @@ export class LimitsComponent {
     return '';
   });
 
-  optionChanged(option: OptionId) {
-    this.selected.set(option);
+  optionChanged(option: LimitType) {
     if (option === 'COMMITS') {
       this.limits.set({
         limitCommits: initCommits,
         limitMonths: 0,
+        limitType: 'COMMITS',
       });
     } else {
       this.limits.set({
         limitCommits: 0,
         limitMonths: initMonths,
+        limitType: 'MONTHS',
       });
     }
   }
 
   update(commits: number, months: number): void {
-    this.limits.set({
+    this.limits.update((limits) => ({
+      ...limits,
       limitCommits: commits,
       limitMonths: months,
-    });
+    }));
   }
 
   options: Option[] = [

package-lock.json

@@ -13,6 +13,8 @@
     "@angular/platform-browser": "~18.2.0",
     "@angular/platform-browser-dynamic": "~18.2.0",
     "@angular/router": "~18.2.0",
+    "@ngrx/operators": "^18.0.2",
+    "@ngrx/signals": "^18.0.2",
     "@softarc/sheriff-core": "^0.17.1",
     "axios": "^1.6.0",
     "chart.js": "^4.4.4",