New version of assets

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

@@ -1,11 +1,4 @@
 
-<!-- 
-<div class="container-sm">100% wide until small breakpoint</div>
-<div class="container-md">100% wide until medium breakpoint</div>
-<div class="container-lg">100% wide until large breakpoint</div>
-<div class="container-xl">100% wide until extra large breakpoint</div>
-<div class="container-xxl">100% wide until extra extra large breakpoint</div> -->
-
 <div class="container mt-5">
 
      <div class="row">

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

@@ -1,4 +1,4 @@
-import {Component,  effect, computed, OnInit, signal } from '@angular/core';
+import {Component,  effect, OnInit, signal } from '@angular/core';
 import {ReactiveFormsModule,  FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
 import {CurrencyPipe,DecimalPipe,PercentPipe, NgFor} from '@angular/common';
 

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

@@ -65,16 +65,8 @@ export class AssetsContainer{
     assets: Map<string,Asset> = new Map();
 
     constructor(){
-        this.initDefault();
     }
 
-    initDefault(){
-        const yearMonth  = new YearMonth('2024-11');
-        this.assets.set('Inv01', new Asset( 1000, yearMonth, TypeDepreciation.linear, 20 ) );
-        this.assets.set('Inv02', new Asset( 3000, yearMonth, TypeDepreciation.linear, 20 ) );
-        this.assets.set('Inv03', new Asset( 5000, yearMonth, TypeDepreciation.linear, 15 ) );
-
-    }
 
     delete( nrInv: string ){
         this.assets.delete(nrInv);

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

@@ -1,66 +1,103 @@
 import { Component } from '@angular/core';
-import { AssetsContainer, Asset } from  '../asset-calculator/assets/asset';
+import { AssetsContainer, Asset, TypeDepreciation, YearMonth } from  '../asset-calculator/assets/asset';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
+
 
 @Component({
   selector: 'app-fixed-asset',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
   template:`
 
 <div class="container">
 
-<h2 class="text-center m-2">Lista środków trwałych( prace w toku )</h2>
+<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">Zmiany wartości</th>
+                <th class="col-2">Wartość</th>
                 <th class="col-2">Metoda amortyzacji</th>
-                <th class="col-2">Plan</th>
+                <th class="col-2">Stawka</th>
                 <th class="col-2"></th>
             </tr>
         </thead>
-        <tbody>
-        @for( asset of assetsContainer.getNrAssets(); track asset[0] ) {
-            <tr>
-                <td class="col-2"> {{asset[0]}} </td>
-                <td class="col-2">
-                  <a href="/assets/Inv1/life-browsing"><b>1</b> zmian</a></td>
-                <td class="col-2">
-                <a href="/assets/Inv1/methods-browsing"><b>1</b> metod</a></td>
 
-                <td class="col-2"><a href="/assets/Inv1/plan-calculate"><b>Wylicz plan</b></a></td>
+        <tbody>
+
+        @for( assetFormGroup of assetFormArray.controls; track $index  ) {
+            <tr [formGroup] = "assetFormGroup">
+              <td> <input class="form-control" formControlName="nr" 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(asset[0])"  value="Usuń Składnik">
+                <input type="button" class="btn btn-outline-secondary" (click)="delete($index)"  value="Usuń Składnik">
               </td>
 
             </tr>
+     
         }
         </tbody>
     </table>
   </div>
 
-  <input type="button" (click)=initDefault() class="btn btn-outline-secondary" value="Zainicjuj domyślną listę">
+  <input type="button" (click)=addNew()      class="btn btn-outline-secondary" value="Dodaj Składnik">
 </div>
 `,
   styleUrl: './fixed-asset.component.css'
 })
 export class FixedAssetComponent {
+
+  static indexNr = 1;
+
+  TypeDepreciation = TypeDepreciation;
+
   assetsContainer  : AssetsContainer; 
 
 
-  constructor(){
+  assetFormArray   : FormArray<FormGroup>;
+
+ 
+  constructor( private fb: FormBuilder ){
+
     this.assetsContainer = new AssetsContainer ();
+    this.assetFormArray  = 	this.fb.array<FormGroup>([])
 
   }
-  initDefault(){
+
-    this.assetsContainer.initDefault();
+  delete( index : number ){
+     this.assetFormArray.removeAt( index );
   }
 
-  delete( nrInv : string){
+  addNew(){
-     this.assetsContainer.delete( nrInv );
+     this.addNr("NrInv" + FixedAssetComponent.indexNr++ );
   }
 
+  addNr( nrInv:string ):void{
+    
+    const today = new Date();
+    const year  = today.getFullYear();
+    const month = today.getMonth() + 1;
+    const year_month = year +'-'+month;
+    const yearMonth = new YearMonth( year_month ) ;
+    const asset = new Asset( 20, yearMonth, TypeDepreciation.linear, 10 );
+    
+    const newRow= this.fb.group({
+      nr               : [ nrInv ],
+      initialValue     : [ 10000 ],
+      depreciationRate : [ 10 ],
+      typeDepreciation : [ TypeDepreciation.linear ],
+      year_month	     : [ year_month ]
+    })
+    this.assetFormArray.push( newRow );
 
   }
+}