New version of Depreciation Calculator

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

@@ -20,19 +20,19 @@
      </div>
      <div class="row">
 
-            <form [formGroup]=assetsDepreciationForm class="frame"> 
+            <form [formGroup]=assetsDepreciationFormGroup class="frame"> 
                 
                 <div class="align-items-start" >
                 <div class="form-group row">
                     <label for="initialValueAsset" class="form-label col-auto" >Wartość początkowa środka trwałego:</label>
                     <div class="col">
-                        <input type="number" class="form-control" id="initialValueAsset"
+                        <input formControlName="initialValueAsset"  [(ngModel)]=initialValueAsset 
+                             type="number" class="form-control" id="initialValueAsset"
                              aria-describedby="initialValueHelpInline" 
-                            formControlName="initialValueAsset" required
+                             required >
-                            [(ngModel)]=initialValueAsset  >
             
                     </div>        
-                    @if(assetsDepreciationForm.get('initialValueSet')?.invalid && assetsDepreciationForm.get('initialValueSet')?.touched){
+                    @if(assetsDepreciationFormGroup.get('initialValueSet')?.invalid && assetsDepreciationFormGroup.get('initialValueSet')?.touched){
                         <div class="text-danger col-auto"> Wartość niepoprawna!. Podaj kwotę w zł np 3000.05 (czyli 3000 zł i 5 gr)</div>
                     }@else{
                     }
@@ -41,9 +41,8 @@
                 <div class="form-group row">
                     <label for="depreciationRate" class="form-label col-auto" >Stawka amortyzacyjna w procentach:</label>
                     <div class="col">
-                            <input type="number" class="form-control" id="depreciationRate"  
+                        <input formControlName="depreciationRate" [(ngModel)]=depreciationRate
-                            formControlName="depreciationRate"
+                            type="number" class="form-control" id="depreciationRate"  /> 
-                            [(ngModel)]=depreciationRate  /> 
                     </div>
                 </div>     
                 <div class="form-group row">
@@ -80,19 +79,46 @@
                     </div>
                 }
 
-                <!--
+                <!-- <input  class="btn btn-secondary col-auto" name="calculate"   
-                <input  class="btn btn-secondary col-auto" name="calculate"   
+                        [disabled]=assetsDepreciationFormGroup.invalid (click)=calculate()   type="button" value="Wylicz "> -->
-                        [disabled]=assetsDepreciationForm.invalid (click)=calculate()   type="button" value="Wylicz ">
                   
-                -->
             </div>   
         </form>
+        <div class="col-1">
             <input  class="btn btn-secondary col-auto" name="addChangeValue"  
-                [disabled]=assetsDepreciationForm.invalid (click)=addChangeValue()   type="button" value="Dodaj zmianę wartości ">
+               [disabled]=assetsDepreciationFormGroup.invalid (click)=addChangeValue()   type="button" value="Dodaj zmianę wartości ">
-                  
-
         </div>
-
+        @if( lifeFormArray.controls.length > 0 ){
+        <div>   
+            <div class="row">
+                  <div class="col-11 h1 text-center mt-3" >Zmiany wartości</div>
+            </div>
+            <div class="row">
+                <table class="table table-striped ">
+                    <thead>
+                        <tr>
+                            <th scope="col">Lp</th>
+                            <th scope="col">Rok</th>
+                            <th scope="col">Miesiąc</th> 
+                            <th scope="col">Zmiana</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @for( changeGroup of lifeFormArray.controls; track  $index ) {
+                            <tr [formGroup] = changeGroup >
+                                <th scope="row">{{$index+1}}</th>
+                                <td><input class="form-control" formControlName="year" ></td>
+                                <td><input class="form-control" formControlName="month"></td>
+                                <td><input class="form-control" formControlName="initialValueAsset"  placeholder="Wprowadź wartość {{$index}}"></td> 
+                                <td><button class="btn btn-secondary" type="button" (click)=removeChange($index)>Usuń</button>
+                            </tr>	
+                        } 
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    }
+    <div>
 
         <div class="h1 text-center mt-3" style="--bs-bg-opacity: .2;">Plan amortyzacji</div>
         <div class="frame2 ">
@@ -108,7 +134,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                    @for (position of positions.positions; track $index) {
+                    @for (position of amortizations.positions; track $index) {
                         <tr [class]="clazz(position)" >
                             <th scope="row">{{$index+1}}</th>
                             <td>{{ position.when.year }}</td>
@@ -116,7 +142,7 @@
                             <td>{{ position.calculatedDepreciation | number:'1.2-2' }}</td>
                             <td>{{ position.sum | number:'1.2-2' }}</td>
                         </tr>	
-                        @if( 12 == position.when.month || $index == positions.positions.length-1){
+                        @if( 12 == position.when.month || $index == amortizations.positions.length-1){
                         <tr>
                             <td colspan="4">
                             </td>    
@@ -132,5 +158,7 @@
             </table>
         </div>
     </div>
+
+
 </div>
 

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

@@ -1,6 +1,6 @@
-import {Component,  effect, OnInit, signal } from '@angular/core';
+import {Component,  effect, computed, OnInit, signal } from '@angular/core';
-import {ReactiveFormsModule,  FormGroup, Validators, FormControl} from '@angular/forms';
+import {ReactiveFormsModule,  FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
-import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
+import {CurrencyPipe,DecimalPipe,PercentPipe, NgFor} from '@angular/common';
 import {AssetsModule} from './assets/assets.module'
 import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange } from './assets/asset';
 import {AssetService} from './assets/service/asset.service'
@@ -8,7 +8,7 @@ import {AssetService} from './assets/service/asset.service'
 @Component({
   selector: 'app-asset-calculator',
   standalone: true,
-  imports: [ CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule, ReactiveFormsModule ] ,
+  imports: [ CurrencyPipe, DecimalPipe, PercentPipe, AssetsModule, ReactiveFormsModule, NgFor ] ,
   templateUrl: "asset-calculator.component.html",
   styleUrl: 'asset-calculator.component.css'
 })
@@ -16,8 +16,6 @@ export class AssetCalculatorComponent implements OnInit{
 
 	TypeDepreciation = TypeDepreciation;
 
-	// Asset{}
-	
 	initialValueAsset = signal<number>( 3000 );
 	depreciationRate  = signal<number>( 20 );
 	year              = signal<number>( 2024 );
@@ -25,51 +23,58 @@ export class AssetCalculatorComponent implements OnInit{
 	typeDepreciation  = signal< TypeDepreciation>( TypeDepreciation.linear );
 	factorValue       = signal<number>( 2 );
 
-	// Asset
+	life 			  : AssetLifeChange[] =[] ;
+	lifeFormArray     = new FormArray<FormGroup>([]);
 
-	addChangeValue() {
+ 	amortizations     = new Positions();
-		throw new Error('Method not implemented.');
-	}
 
 
-
+	assetsDepreciationFormGroup = new FormGroup(	{    
-	positions = new Positions();
-
-	assetsDepreciationForm = new FormGroup(	{    
 		initialValueAsset : new FormControl( this.initialValueAsset(), [ Validators.required, this.currencyValidator ]),    
 		depreciationRate  : new FormControl( this.depreciationRate() ) ,
 		year              : new FormControl( this.year() ),
 		month 			  : new FormControl( this.month() ),
 		typeDepreciation  : new FormControl( this.typeDepreciation ),
-		factorValue       : new FormControl( this.factorValue, [Validators.required,Validators.max(2)] )
+		factorValue       : new FormControl( this.factorValue, [Validators.required,Validators.max(2)] ),
+
 	} );
 
     constructor(private assetService : AssetService ){
+
 		effect( () => {  this.calculate();	});	
+		
     }
 
 	ngOnInit(): void{
-		
+		this.lifeFormArray.valueChanges.subscribe((value) => {
+			this.calculate();
+		})
 	}
 
 	calculate(){
 		const when  = new YearMonth( this.year(), this.month() )
 		const asset = new Asset( this.depreciationRate(),	when, this.typeDepreciation(), this.factorValue() )
 		const creationlifeChange = new AssetLifeChange( when, this.initialValueAsset(), 0, 0 );
-		asset.addChange(creationlifeChange);
+		asset.addChange( creationlifeChange );
+		for( let changeControlGroup of this.lifeFormArray.controls ){
+			const initialValueAsset = changeControlGroup.get('initialValueAsset')?.value;
+			const year = changeControlGroup.get('year')?.value;
+			const month= changeControlGroup.get('month')?.value
+			asset.addChange( new AssetLifeChange( new YearMonth( year, month ), initialValueAsset, 0, 0 )) ;
+		}
 		this.calculateForAsset( asset );
 	}
 
 	calculateForAsset( asset : Asset ) { 
 		this.assetService.calculate( asset ).subscribe( 
-			positions => { this.positions=positions; this.calculateToValues() });
+			positions => { this.amortizations=positions; this.calculateToValues() });
 
     }
 
     calculateToValues() {
 		let sum :number = 0;
 		let sumThisYear: number = 0;
-		for(let position of this.positions.positions ){
+		for(let position of this.amortizations.positions ){
 			position.calculatedDepreciation = position.calculatedDepreciation *0.01;
 
 			sum += position.calculatedDepreciation;
@@ -96,5 +101,28 @@ export class AssetCalculatorComponent implements OnInit{
 		return regex.test(value) ? null : { invalidCurrency: true };
 	}
 
+	//  lifeSignal        = signal<FormArray>(this.lifeFormArray);
 
+
+	// changeValuCount = computed(() => this.lifeSignal().length);
+
+
+	addChangeValue() {
+		const change = new AssetLifeChange(new YearMonth( this.year(), this.month()), 1000, 0, 0 );
+	
+		const newFormGroup = new FormGroup( 	{
+			initialValueAsset: new FormControl( change.initial ),
+			year 			 : new FormControl( change.when.year ),
+			month			 : new FormControl( change.when.month )
+		} )
+
+		this.lifeFormArray.push(newFormGroup);
+
+		// this.lifeSignal.set( this.lifeFormArray );
+	}
+
+	removeChange(index: number) {
+
+		this.lifeFormArray.removeAt(index);
+	}
 }

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

@@ -41,7 +41,7 @@ export class Asset {
     life : AssetLifeChange[]=[];
 
 
-    addChange( change : AssetLifeChange){
+    addChange( change : AssetLifeChange ){
         this.life.push( change );
     }