arti24
/
arti-angular-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some order with formControlName

This commit is contained in:
Artur 2024-11-01 19:29:46 +01:00
parent cd5e726089
commit faa87921e2
5 changed files with 80 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/launch.json vendored
View File

@ -7,8 +7,7 @@
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4201/"
"url": "http://localhost:4200/"
},
{
"name": "ng test",

2
angular.json
View File

@ -62,7 +62,7 @@
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"port": 4201,
"port": 4200,
"host": "0.0.0.0"
},
"configurations": {

14
src/app/asset-calculator/asset-calculator.component.html
View File

@ -12,8 +12,7 @@
<label class="form-label" for="initialValueAsset" >Wartość początkowa ŚT:</label>
</div>
<div class="col col-lg">
<input class="form-control" formControlName="initialValueAsset" [(ngModel)]=initialValueAsset
type="number" id="initialValueAsset" required >
<input class="form-control" formControlName="initialValueAsset" type="number" id="initialValueAsset" required >
@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>
@ -28,8 +27,7 @@
<label class="form-label" for="depreciationRate" >Stawka amortyzacyjna:</label>
</div>
<div class="col-3 col-lg-3">
<input class="form-control" formControlName="depreciationRate" [(ngModel)]=depreciationRate
type="number" id="depreciationRate" />
<input class="form-control" formControlName="depreciationRate" type="number" id="depreciationRate" />
</div>
<div class="col-1 col-lg-1 text-start">
<label for="depreciationRate">%</label>
@ -41,7 +39,7 @@
<label class="form-label">Rozpoczęcie amortyzacji:</label>
</div>
<div class="col-7 col-lg-6">
<input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" [(ngModel)]=year_month placeholder="2024" />
<input type="month" lang="pl" class="form-control" formControlName="year_month" id="year_month" placeholder="2024" />
</div>
@ -52,20 +50,20 @@
<label class="form-label">Metoda amortyzacji:</label>
</div>
<div class="col col-lg" >
<select class="form-select" formControlName="typeDepreciation" [(ngModel)]=typeDepreciation >
<select class="form-select" formControlName="typeDepreciation" >
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
</select>
</div>
</div>
@if( TypeDepreciation.digressive === typeDepreciation() ){
@if( TypeDepreciation.digressive === assetsDepreciationFormGroup.get( 'typeDepreciation' )?.value ) {
<div class="form-group row align-items-center">
<div class="col-5 col-lg text-start ">
<label for="factorValue" class="form-label">Wspólczynnki degresji</label>
</div>
<div class="col col-lg" >
<input type="text" class="form-control" formControlName="factorValue" [(ngModel)]=factorValue />
<input type="text" class="form-control" formControlName="factorValue" />
</div>
</div>
}

124
src/app/asset-calculator/asset-calculator.component.ts
View File

@ -1,78 +1,104 @@
import {Component, effect, OnInit, signal } from '@angular/core';
import {Component, effect, OnInit, OnDestroy, signal } from '@angular/core';
import {ReactiveFormsModule, FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
import {CurrencyPipe,DecimalPipe,PercentPipe, NgFor} from '@angular/common';
import {CurrencyPipe,DecimalPipe,PercentPipe} from '@angular/common';
import {Asset, Positions, AssetPlanPosition, TypeDepreciation, YearMonth, AssetLifeChange } from './assets/asset';
import {AssetService} from './assets/service/asset.service'
@Component({
selector: 'app-asset-calculator',
standalone: true,
imports: [ CurrencyPipe, DecimalPipe, PercentPipe, ReactiveFormsModule, NgFor ] ,
templateUrl: "asset-calculator.component.html",
styleUrl: 'asset-calculator.component.css'
})
export class AssetCalculatorComponent implements OnInit{
interface FormValues {
initialValueAsset: number;
depreciationRate: number;
year_month: string;
typeDepreciation: TypeDepreciation;
factorValue: number;
}
@Component({
selector: 'app-asset-calculator',
standalone: true,
imports: [ CurrencyPipe, DecimalPipe, PercentPipe, ReactiveFormsModule ] ,
templateUrl: "asset-calculator.component.html",
styleUrl: 'asset-calculator.component.css'
})
export class AssetCalculatorComponent implements OnInit, OnDestroy{
amortizations = new Positions();
TypeDepreciation = TypeDepreciation;
initialValueAsset = signal<number>( 3000 );
depreciationRate = signal<number>( 20 );
year_month = signal<string>( "2024-10" );
typeDepreciation = signal< TypeDepreciation>( TypeDepreciation.linear );
factorValue = signal<number>( 2 );
life : AssetLifeChange[] =[] ;
lifeFormArray = new FormArray<FormGroup>([]);
amortizations = new Positions();
assetsDepreciationFormGroup = new FormGroup( {
initialValueAsset : new FormControl( this.initialValueAsset(), [ Validators.required, this.currencyValidator ]),
depreciationRate : new FormControl( this.depreciationRate() ) ,
year_month : new FormControl( ),
typeDepreciation : new FormControl( this.typeDepreciation ),
factorValue : new FormControl( this.factorValue, [Validators.required,Validators.max(2)] ),
initialValueAsset : new FormControl( 3000, [ Validators.required, this.currencyValidator ]),
depreciationRate : new FormControl( 20 ) ,
year_month : new FormControl( "2024-10" ),
typeDepreciation : new FormControl( TypeDepreciation.linear ),
factorValue : new FormControl( 2, [Validators.required,Validators.max(2)] ),
} );
constructor(private assetService : AssetService ){
effect( () => { this.calculate(); });
}
ngOnInit(): void{
this.lifeFormArray.valueChanges.subscribe((value) => {
this.calculate();
})
// const savedAsset = sessionStorage.getItem('assetForCalculator');
// if( savedAsset ) {
// const asset = JSON.parse( savedAsset ) ;
// this.controlsFromAsset( asset );
// }
this.assetsDepreciationFormGroup.valueChanges.subscribe( (value) => this.calculate() );
this.lifeFormArray.valueChanges.subscribe( (value) => this.calculate() );
}
ngOnDestroy(): void {
// Zapisywanie danych przed zniszczeniem komponentu
// const asset = this.controlsToAsset();
// sessionStorage.setItem('assetForCalculator', JSON.stringify(asset));
}
private controlsFromAsset( asset : Asset ) {
if( asset.life.length > 0){
this.assetsDepreciationFormGroup.patchValue({
initialValueAsset: asset.life[0].initial
})
}
}
private controlsToAsset() : Asset {
const formValues = this.assetsDepreciationFormGroup.value as FormValues;
const when = new YearMonth( formValues.year_month );
const asset = new Asset( formValues.depreciationRate, when, formValues.typeDepreciation, formValues.factorValue );
const creationlifeChange = new AssetLifeChange(when, formValues.initialValueAsset , 0, 0);
asset.addChange(creationlifeChange);
for (let changeControlGroup of this.lifeFormArray.controls) {
const initialValueAsset = changeControlGroup.get('initialValueAsset')?.value;
const year_month = changeControlGroup.get('year_month')?.value;
asset.addChange(new AssetLifeChange(new YearMonth(year_month), initialValueAsset, 0, 0));
}
return asset;
}
calculate(){
const when = new YearMonth( this.year_month() )
const asset = new Asset( this.depreciationRate(), when, this.typeDepreciation(), this.factorValue() )
const creationlifeChange = new AssetLifeChange( when, this.initialValueAsset(), 0, 0 );
asset.addChange( creationlifeChange );
for( let changeControlGroup of this.lifeFormArray.controls ){
const initialValueAsset = changeControlGroup.get('initialValueAsset')?.value;
const year_month = changeControlGroup.get('year_month')?.value;
asset.addChange( new AssetLifeChange( new YearMonth( year_month ), initialValueAsset, 0, 0 )) ;
}
const asset = this.controlsToAsset();
this.calculateForAsset( asset );
}
calculateForAsset( asset : Asset ) {
this.assetService.calculate( asset ).subscribe(
positions => { this.amortizations=positions; this.calculateToValues() });
positions => { this.calculateToValues(positions), this.amortizations = positions });
}
calculateToValues() {
calculateToValues( positions:Positions ) {
let sum :number = 0;
let sumThisYear: number = 0;
for(let position of this.amortizations.positions ){
for(let position of positions.positions ){
position.calculatedDepreciation = position.calculatedDepreciation *0.01;
sum += position.calculatedDepreciation;
@ -99,21 +125,13 @@ export class AssetCalculatorComponent implements OnInit{
return regex.test(value) ? null : { invalidCurrency: true };
}
// lifeSignal = signal<FormArray>(this.lifeFormArray);
// changeValuCount = computed(() => this.lifeSignal().length);
addChangeValue() {
const formValues = this.assetsDepreciationFormGroup.value as FormValues;
const change = new AssetLifeChange(new YearMonth( this.year_month() ), 1000, 0, 0 );
const change = new AssetLifeChange(new YearMonth( formValues.year_month ), 1000, 0, 0 );
const newFormGroup = new FormGroup( {
initialValueAsset: new FormControl( change.initial ),
year_month : new FormControl( this.year_month() )
}
)
const newFormGroup = new FormGroup( { initialValueAsset: new FormControl( change.initial ),
year_month : new FormControl( formValues.year_month )})
this.lifeFormArray.push(newFormGroup);

1
src/app/fixed-asset/fixed-asset.component.ts
View File

@ -56,6 +56,7 @@ import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, FormControl, F
})
export class FixedAssetComponent {
static indexNr = 1;
TypeDepreciation = TypeDepreciation;