Restrore working asset

angular.json

@@ -25,7 +25,6 @@
               {
                 "glob": "**/*",
                 "input": "public"
-
               }
             ],
             "styles": [
@@ -53,14 +52,17 @@
               "outputHashing": "all"
             },
             "en": {
-              "localize": ["en"],
+              "localize": [
+                "en"
+              ],
               "outputPath": "dist/arti-angular-app-en"
             },
             "pl": {
-              "localize": ["pl"],
+              "localize": [
+                "pl"
+              ],
               "outputPath": "dist/arti-angular-app-pl"
             },
-
             "development": {
               "optimization": false,
               "extractLicenses": false,
@@ -108,8 +110,22 @@
             ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
+  }
 }

eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -31,6 +32,8 @@
     "@angular/compiler-cli": "^18.2.0",
     "@angular/localize": "^18.2.4",
     "@types/jasmine": "~5.1.0",
+    "angular-eslint": "18.4.0",
+    "eslint": "^9.13.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
@@ -38,6 +41,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.2",
+    "typescript-eslint": "8.10.0",
     "vite": "^5.4.10"
   }
 }

src/app/asset-calculator/asset-calculator.component.html

@@ -31,7 +31,7 @@
 
                 <div class="form-group row align-items-center">
                     <div class="col-5 col-lg-6 text-start ">
-                        <label class="form-label" for="rate" i18n="@@depreciationRate" >{{  'asset-calculator.depreciationRate' | translate }}</label>
+                        <label class="form-label" for="rate"  >{{  'asset-calculator.depreciationRate' | translate }}</label>
                     </div>   
                     <div class="col-3 col-lg-3">
                         <input class="form-control" formControlName="rate"   type="number" id="rate"  /> 
@@ -43,10 +43,10 @@
 
                 <div class="form-group row align-items-center ">
                     <div class="col-5 col-lg-6 text-start ">
-                        <label class="form-label" i18n="@@startOfDepreciation" >{{  'asset-calculator.startOfDepreciation' | translate }} </label>
+                        <label class="form-label" for="startDepreciation"  >{{  'asset-calculator.startOfDepreciation' | translate }} </label>
                     </div>
                     <div class="col-7 col-lg-6">
-                        <input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month"	placeholder="2024" />
+                        <input type="month" lang="pl" class="form-control" formControlName="startDepreciation" id="startDepreciation"	placeholder="2024" />
         
                     </div>
 
@@ -54,10 +54,10 @@
 
                 <div class="form-group row align-items-center">   
                     <div class="col-5 col-lg text-start " >       
-                        <label class="form-label" (click)=addChangeValue()  >{{  'asset-calculator.depreciationMethod' | translate }}</label>
+                        <label class="form-label" for="typeDepreciation"  >{{  'asset-calculator.depreciationMethod' | translate }}</label>
                     </div>
                     <div class="col col-lg" >
-                        <select class="form-select" formControlName="typeDepreciation"   >                           
+                        <select class="form-select" formControlName="typeDepreciation" id="typeDepreciation"  >                           
                             <option [ngValue]=TypeDepreciation.linear selected="selected" >{{  'asset-calculator.linear' | translate }}</option>
                             <option [ngValue]=TypeDepreciation.digressive >{{  'asset-calculator.digressive' | translate }}</option>
                         </select>
@@ -138,7 +138,7 @@
                                 <td>{{ position.calculatedDepreciation | number:'1.2-2' }}</td>
                                 <td>{{ position.sum | number:'1.2-2' }}</td>
                             </tr>	
-                            @if( 12 == position.when.month || $index == amortizations.positions.length-1){
+                            @if( 12 === position.when.month || $index === amortizations.positions.length-1){
                                 <tr>
                                     <td colspan="3">
                                     </td>    

src/app/asset-calculator/asset-calculator.component.ts

@@ -1,22 +1,21 @@
-import { Component,  OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component,  OnInit, OnDestroy } from '@angular/core';
-import { ReactiveFormsModule,  FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
+import { ReactiveFormsModule,  FormGroup, Validators, FormControl,  FormBuilder, AbstractControl } from '@angular/forms';
 import { DecimalPipe }  from '@angular/common';
 
 import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange, AssetDepreciationMethod, YearMonthUtil } from '../assets/asset';
 import {AssetService} from '../assets/service/asset.service'
 import {TranslateModule} from "@ngx-translate/core";
-import { debounceTime } from 'rxjs/operators';
+
 
 interface FormValues {
 	initialValueAsset: number;
 	rate: number;
-	year_month: string;
+	startDepreciation: string;
 	typeDepreciation: TypeDepreciation;
 	factor: number;
 }
 @Component({
 	selector: 'app-asset-calculator',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: [ DecimalPipe, ReactiveFormsModule, TranslateModule ] ,
 	templateUrl: "asset-calculator.component.html",
@@ -25,25 +24,29 @@ interface FormValues {
 export class AssetCalculatorComponent implements OnInit, OnDestroy{
 	
 	TypeDepreciation  = TypeDepreciation;
+
+	lifeFormArray     ;
+	assetsDepreciationFormGroup : FormGroup;
 	amortizations     = new Positions();
 
+    constructor(private fb: FormBuilder,
+		        private assetService : AssetService){
 
-	lifeFormArray     = new FormArray<FormGroup>([]);
+		this.assetsDepreciationFormGroup = new FormGroup({    
-
+			initialValueAsset : new FormControl<number>( 6000, [ Validators.required, this.currencyValidator ]),    
-	assetsDepreciationFormGroup = new FormGroup({    
-		initialValueAsset : new FormControl<number>( 5000, [ Validators.required, this.currencyValidator ]),    
 			rate              : new FormControl<number>( 20 ) ,
-		year_month        : new FormControl<string>( "2024-10" ),
+			startDepreciation : new FormControl<string>( new Date().toISOString().slice(0, 7) ),
 			typeDepreciation  : new FormControl<TypeDepreciation>( TypeDepreciation.linear ),
 			factor            : new FormControl<number>( 2/*, [Validators.required,Validators.max(2)]*/ ),
 	
 		} as {
 			[key in keyof FormValues]: FormControl<FormValues[key]>
 		});
+		this.lifeFormArray = this.fb.array<FormGroup>([]);
+
+		this.assetsDepreciationFormGroup.valueChanges.subscribe( () => this.calculate() );
+		this.lifeFormArray.valueChanges.subscribe( () => this.calculate() );
 
-    constructor(private assetService : AssetService, private cdr: ChangeDetectorRef){
-		this.assetsDepreciationFormGroup.valueChanges.pipe(debounceTime(300)).subscribe( (value) => this.calculate() );
-		this.lifeFormArray.valueChanges.pipe(debounceTime(300)).subscribe( (value) => this.calculate() );	
 	}
 
 
@@ -54,8 +57,13 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
 	}
 
 	ngOnDestroy(): void {
+		const asset = this.controlsToAsset();
 		// Zapisywanie danych przed zniszczeniem komponentu
-		localStorage.setItem('assetForCalculator', JSON.stringify(this.controlsToAsset()));
+		this.saveInStorage( asset );
+	}
+
+	private saveInStorage( asset : Asset  ) {
+		localStorage.setItem('assetForCalculator', JSON.stringify(asset));
 	}
 
 	private assetToControls( asset : Asset )  {
@@ -76,16 +84,16 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
 					year_month: YearMonthUtil.toTxt( lifeChange.when )
 				} );
 			});
+	  
 		}
-		this.cdr.detectChanges(); // Immediately update the view after patching
 
 	}
 
 	private controlsToAsset() : Asset {
 
-		const formValues = this.assetsDepreciationFormGroup.getRawValue();
+		const formValues = this.assetsDepreciationFormGroup.getRawValue() as FormValues;
 
-		const when 	     = new YearMonth( formValues.year_month );
+		const when 	     = new YearMonth( formValues.startDepreciation);
 		const asset 	 = new Asset( when );
 		
 		const method 	 = new AssetDepreciationMethod( when.year, formValues.rate, formValues.typeDepreciation, formValues.factor );
@@ -105,23 +113,26 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
 
 	calculate(){
 		const asset = this.controlsToAsset();
+		this.saveInStorage( asset );
 		this.assetService.calculate(asset).subscribe(positions => {
-			this.amortizations = positions;
 			this.calculateToValues(positions);
-			this.cdr.markForCheck(); // Trigger change detection
+			this.amortizations = positions;
+
 		});
 
 	}
 
 	calculateForAsset( asset : Asset ) { 
 		this.assetService.calculate( asset ).subscribe( 
-			positions => { this.calculateToValues(positions), this.amortizations = positions });
+			positions => { 
+				this.calculateToValues( positions ); 
+				this.amortizations = positions });
 
     }
 
     calculateToValues( positions:Positions )  {
-		let sum :number = 0;
+		let sum = 0;
-		let sumThisYear: number = 0;
+		let sumThisYear = 0;
 		positions.positions.forEach(position => {
 			position.calculatedDepreciation *= 0.01;
 			sum += position.calculatedDepreciation;
@@ -142,7 +153,7 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
     }
 
 	  // Walidator dla kwoty
-	currencyValidator(control: any) {
+	currencyValidator(control: AbstractControl) {
 		const value = control.value;
 		const regex = /^\d+(\.\d{1,2})?$/; // Akceptuje liczby z maksymalnie dwoma miejscami po przecinku
 		return regex.test(value) ? null : { invalidCurrency: true };
@@ -151,19 +162,17 @@ export class AssetCalculatorComponent implements OnInit, OnDestroy{
 	addChangeValue() {
 		const formValues = this.assetsDepreciationFormGroup.value as FormValues;
 
-		const change = new AssetLifeChange(new YearMonth( formValues.year_month ), 1000, 0, 0 );
+		const change = new AssetLifeChange(new YearMonth( formValues.startDepreciation ), 1000, 0, 0 );
 	
 		const newFormGroup = new FormGroup( { initialValueAsset: new FormControl( change.initial ),
-											  year_month	   : new FormControl( formValues.year_month )})
+											  year_month	   : new FormControl( formValues.startDepreciation )})
 
 		this.lifeFormArray.push(newFormGroup);
 		
-		this.cdr.markForCheck(); // Notify Angular of change
 	}
 
 	removeChange(index: number) {
 
 		this.lifeFormArray.removeAt(index);
-		this.cdr.markForCheck(); // Trigger detection after removal
 	}
 }

src/app/assets/asset.ts

@@ -91,7 +91,7 @@ export class Asset {
 
 export class AssetsContainer{
 
-    assets: Map<string,Asset> = new Map();
+    assets: Map<string,Asset> = new Map<string,Asset> ();
 
     delete( nrInv: string ){
         this.assets.delete(nrInv);
@@ -114,9 +114,9 @@ export class AssetsContainer{
 
 export class AssetPlanPosition{
     when : YearMonth = new YearMonth('0-0');
-    calculatedDepreciation : number = 0;
+    calculatedDepreciation  = 0;
-    sum:number = 0;
+    sum = 0;
-    sumThisYear:number = 0;
+    sumThisYear = 0;
 
 }