Refactor: Modernize budget viewer state with Signals

angular.json

@@ -33,6 +33,7 @@
     "features-activities": "libs/features/activities",
     "features-budgetting-budget-explorer-burnchart": "libs/features/budgetting/budget-explorer-burnchart",
     "features-budgetting-budget-planning": "libs/features/budgetting/budget-planning",
+    "features-budgetting-notes-budget-notes": "libs/features/budgetting/notes/budget-notes",
     "features-finance-banking-activate-banking": "libs/features/finance/banking/activate-banking",
     "features-finance-banking-allocations": "libs/features/finance/banking/allocations",
     "features-finance-banking-main": "libs/features/finance/banking/main",

libs/features/budgetting/budgets/src/lib/components/budget-table/budget-table.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild, InputSignal } from '@angular/core';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatDialog } from '@angular/material/dialog';
@@ -22,9 +22,9 @@ import { ChildBudgetsModalComponent } from '../../modals/child-budgets-modal/chi
 
 export class BudgetTableComponent {
 
-  private _sbS = new SubSink();
 
-  @Input() budgets$: Observable<{overview: BudgetRecord[], budgets: any[]}>;
+
+  @Input() budgets!: InputSignal<{overview: BudgetRecord[], budgets: any[]}>;
   @Input() canPromote = false;
 
   @Output() doPromote: EventEmitter<void> = new EventEmitter();
@@ -42,12 +42,7 @@ export class BudgetTableComponent {
               private _dialog: MatDialog,
   ) { }
 
-  ngOnInit(): void {
-    this._sbS.sink = this.budgets$.pipe(tap((o) => {
-      this.overviewBudgets = o.overview;
-      this.dataSource.data = o.budgets;
-    })).subscribe();
-  }
+
 
   /** 
  * Checks whether the user has access to a certain feature.
@@ -69,6 +64,9 @@ export class BudgetTableComponent {
   ngAfterViewInit(): void {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
+
+    this.overviewBudgets = this.budgets().overview;
+    this.dataSource.data = this.budgets().budgets;
   }
 
   filterAccountRecords(event: Event) {

libs/features/budgetting/budgets/src/lib/pages/select-budget/select-budget.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <div class="table-container">
-      <app-budget-table [budgets$]="allBudgets$"></app-budget-table>
+      <app-budget-table [budgets]="allBudgets()"></app-budget-table>
     </div>
   </div>
 </app-page>

libs/features/budgetting/budgets/src/lib/pages/select-budget/select-budget.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject, signal, computed, effect, Injector } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
 import { cloneDeep as ___cloneDeep, flatMap as __flatMap } from 'lodash';
-import { Observable, combineLatest, map, tap } from 'rxjs';
+import { Observable, combineLatest, map, tap, Subject } from 'rxjs';
 
 import { Logger } from '@iote/bricks-angular';
 
@@ -23,32 +23,36 @@ import { CreateBudgetModalComponent } from '../../components/create-budget-modal
 export class SelectBudgetPageComponent implements OnInit
 {
   /** Overview which contains all budgets of an organisation */
-  overview$!: Observable<OrgBudgetsOverview>;
-  sharedBudgets$: Observable<any[]>;
-
-  showFilter = false;
+  overview = signal<OrgBudgetsOverview | undefined>(undefined);
+  sharedBudgets = signal<any[]>([]);
 
   // budgetsLoaded: boolean = false;
 
-  allBudgets$: Observable<{overview: BudgetRecord[], budgets: any[]}>;
-
-  constructor(private _orgBudgets$$: OrgBudgetsStore,
-              private _budgets$$: BudgetsStore,
-              private _dialog: MatDialog,
-              private _logger: Logger) 
-  { }
+  allBudgets = signal<{overview: BudgetRecord[], budgets: any[]}>({overview: [], budgets: []});
 
+    private _orgBudgets$$: OrgBudgetsStore = inject(OrgBudgetsStore);
+    private _budgets$$: BudgetsStore = inject(BudgetsStore);
+    private _dialog: MatDialog = inject(MatDialog);
+    private _logger: Logger = inject(Logger);
   ngOnInit() {
-    this.overview$ = this._orgBudgets$$.get();
-    this.sharedBudgets$ = this._budgets$$.get();
-
-    this.allBudgets$ = combineLatest([this.overview$, this._budgets$$.get()])
-                      .pipe(map(([overview, budgets]) => {return {overview: __flatMap(overview), budgets: __flatMap(budgets)}}),
-                            map((overview) => {
-                              const trBudgets = overview.budgets.map((budget: any) => {budget['endYear'] = budget.startYear + budget.duration - 1; return budget;})
-                              // this.budgetsLoaded = true;
-                              return {overview: overview.overview, budgets: trBudgets}
-                            }));
+    this._orgBudgets$$.get().subscribe(overview => this.overview.set(overview));
+    this._budgets$$.get().subscribe(budgets => this.sharedBudgets.set(budgets));
+
+    this.allBudgets = computed(() => {
+      const overviewData = this.overview();
+      const sharedBudgetsData = this.sharedBudgets();
+
+      if (!overviewData || !sharedBudgetsData) {
+        return { overview: [], budgets: [] };
+      }
+
+      const trBudgets = sharedBudgetsData.map((budget: any) => {
+        budget['endYear'] = budget.startYear + budget.duration - 1;
+        return budget;
+      });
+
+      return { overview: __flatMap(overviewData), budgets: __flatMap(trBudgets) };
+    });
   }
 
   applyFilter(event: Event) {
@@ -86,7 +90,7 @@ export class SelectBudgetPageComponent implements OnInit
   }
 
   /** Activate budget -> Promote to be used in  */
-  setActive(record: BudgetRecord) 
+  setActive(record: BudgetRecord)
   {
     const toSave = ___cloneDeep(record.budget);
 
@@ -102,7 +106,6 @@ export class SelectBudgetPageComponent implements OnInit
     this._budgets$$.update(toSave)
       .subscribe(() => {
         (<any> record).updating = false;
-        this._logger.log(() => `Updated Budget with id ${toSave.id}. Set as an active budget for this org.`) 
+        this._logger.log(() => `Updated Budget with id ${toSave.id}. Set as an active budget for this org.`)
       });
-  }
-}
+  }}

libs/features/budgetting/notes/budget-notes/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}

libs/features/budgetting/notes/budget-notes/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/features/budgetting/notes/budget-notes/README.md

@@ -0,0 +1,11 @@
+# features-budgetting-notes-budget-notes
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test features-budgetting-notes-budget-notes` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Running lint
+
+Run `nx lint features-budgetting-notes-budget-notes` to execute the lint via [ESLint](https://eslint.org/).

libs/features/budgetting/notes/budget-notes/jest.config.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+export default {
+  displayName: 'features-budgetting-notes-budget-notes',
+  preset: '../../../../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory:
+    '../../../../../coverage/libs/features/budgetting/notes/budget-notes',
+};

libs/features/budgetting/notes/budget-notes/project.json

@@ -0,0 +1,26 @@
+{
+  "name": "features-budgetting-notes-budget-notes",
+  "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/features/budgetting/notes/budget-notes/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/features/budgetting/notes/budget-notes/**/*.ts"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/features/budgetting/notes/budget-notes/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  },
+  "tags": []
+}

libs/features/budgetting/notes/budget-notes/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/features-budgetting-notes-budget-notes';

libs/features/budgetting/notes/budget-notes/src/lib/features-budgetting-notes-budget-notes.spec.ts

@@ -0,0 +1,9 @@
+import { featuresBudgettingNotesBudgetNotes } from './features-budgetting-notes-budget-notes';
+
+describe('featuresBudgettingNotesBudgetNotes', () => {
+  it('should work', () => {
+    expect(featuresBudgettingNotesBudgetNotes()).toEqual(
+      'features-budgetting-notes-budget-notes'
+    );
+  });
+});

libs/features/budgetting/notes/budget-notes/src/lib/features-budgetting-notes-budget-notes.ts

@@ -0,0 +1,3 @@
+export function featuresBudgettingNotesBudgetNotes(): string {
+  return 'features-budgetting-notes-budget-notes';
+}

libs/features/budgetting/notes/budget-notes/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/features/budgetting/notes/budget-notes/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

libs/features/budgetting/notes/budget-notes/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.base.json

@@ -62,6 +62,9 @@
       "@app/features/budgetting/budgets": [
         "libs/features/budgetting/budgets/src/index.ts"
       ],
+      "@app/features/budgetting/notes/budget-notes": [
+        "libs/features/budgetting/notes/budget-notes/src/index.ts"
+      ],
       "@app/features/dashboard/main": [
         "libs/features/dashboard/main/src/index.ts"
       ],