arti-angular-app/src/app/fixed-asset/fixed-asset.component.ts

144 lines
4.4 KiB
TypeScript

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Asset, TypeDepreciation, YearMonthUtil, AssetLifeChange } from '../assets/asset';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
@Component({
selector: 'app-fixed-asset',
standalone: true,
imports: [ReactiveFormsModule],
template:`
<div class="container">
<h2 class="text-center m-2">Lista środków trwałych</h2>
<div class="table-responsive">
<table id="assets" class="table table-bordered">
<thead>
<tr>
<th class="col-2">Numer inwentarzowy</th>
<th class="col-2">Wartość</th>
<th class="col-2">Metoda amortyzacji</th>
<!-- <th class="col-2">Stawka</th>
<th class="col-2"></th> -->
</tr>
</thead>
<tbody>
@for( assetFormGroup of assetFormArray.controls; track $index ) {
<tr [formGroup] = "assetFormGroup">
<td> <input class="form-control" formControlName="nrInv" type="text" readonly></td>
<td> <input class="form-control" formControlName="initialValue" type="number" placeholder="Wprowadź wartość"></td>
<!-- <td>
<select class="form-select" formControlName="typeDepreciation" >
<option [ngValue]=TypeDepreciation.linear selected="selected">Liniowa</option>
<option [ngValue]=TypeDepreciation.digressive >Dygresywna</option>
</select>
</td>
<td> <input class="form-control" formControlName="depreciationRate" type="number" /> </td> -->
<td class="col-2">
<input type="button" class="btn btn-outline-secondary" (click)="delete($index)" value="Usuń Składnik">
</td>
</tr>
}
</tbody>
</table>
</div>
<input type="button" (click)=addNew() class="btn btn-outline-secondary" value="Dodaj Składnik">
</div>
`,
styleUrl: './fixed-asset.component.css'
})
export class FixedAssetComponent {
static STORAGE_KEY = "fixed_assets";
static indexNr = 1;
TypeDepreciation = TypeDepreciation;
assetFormArray : FormArray<FormGroup>;
constructor( private fb: FormBuilder ){
this.assetFormArray = this.fb.array<FormGroup>([])
}
ngOnInit(): void {
const savedAssets = localStorage.getItem( FixedAssetComponent.STORAGE_KEY) ;
if( savedAssets ) {
this.assetsToControls( JSON.parse( savedAssets ) );
}
}
ngOnDestroy(): void {
localStorage.setItem( FixedAssetComponent.STORAGE_KEY, JSON.stringify( this.controlsToAssets() ) );
}
private assetsToControls( assetsArray: [ string, Asset ][]) {
const assetsMap = new Map<string, Asset>( assetsArray );
assetsMap.forEach( (asset, key) => {
this.addRow( key, asset.life[0].initial );
});
}
private controlsToAssets(): [string, Asset][] {
const assets = new Map<string, Asset>();
this.assetFormArray.controls.forEach( control => {
const nrInv = control.get('nrInv')?.value;
const initialValue = control.get('initialValue')?.value;
const yearMonth = YearMonthUtil.toToday();
const asset = new Asset( yearMonth );
const assetLifeChange = new AssetLifeChange( yearMonth, initialValue, 0, 0 );
asset.addChange( assetLifeChange );
assets.set( nrInv, asset );
});
return Array.from( assets.entries() );
}
delete( index : number ){
this.assetFormArray.removeAt( index );
}
addNew(){
this.addRow( "NrInv" + FixedAssetComponent.indexNr++, 1000 );
}
addRow( nrInv_:string, initial_: number ):void{
const newRow = this.fb.group({
nrInv : [ nrInv_ ],
initialValue : [ initial_ ],
});
// typeDepreciation : [ TypeDepreciation.linear ],
// depreciationRate : [ 10 ],
// year_month : [ year_month ]
this.assetFormArray.push( newRow );
}
// uniqueColumnValidator(): ValidatorFn {
// return (control: AbstractControl): ValidationErrors | null => {
// const values = this.assetFormArray.map(field => field.value) || [];
// const uniqueValues = new Set(values);
// return uniqueValues.size !== values.length ? { uniqueColumn: true } : null;
// };
// }
}