[chandu] implemented list-view state update trigger event

Author: chandru415

src/app/grid-list/container/list-base/list-base.component.html

@@ -1 +1,4 @@
-<app-list-view [gridDataSource]="gridDataSource$ | async"></app-list-view>
+<app-list-view
+  [gridDataSource]="gridDataSource$ | async"
+  (updatePeridoicElement)="onUpdatePeridoicElement($event)"
+></app-list-view>

src/app/grid-list/container/list-base/list-base.component.ts

@@ -7,6 +7,8 @@ import { getGridList } from '../../store/selectors/grid-list.selectors';
 import { loadGridLists } from '../../store/actions/grid-list.actions';
 import { FormArray } from '@angular/forms';
 import { buildFormGroup } from 'src/app/models/periodic-element-work';
+import { Update } from '@ngrx/entity';
+import { PeriodicElement } from 'src/app/models/periodic-element';
 
 @Component({
   selector: 'app-list-base',
@@ -23,9 +25,11 @@ export class ListBaseComponent implements OnInit {
     this.gridDataSource$ = this.store.pipe(
       takeUntil(this.alive),
       select(getGridList),
-      map(elements => new FormArray(elements.map(buildFormGroup)))
+      map((elements) => new FormArray(elements.map(buildFormGroup)))
     );
 
-    this.store.dispatch(loadGridLists())
+    this.store.dispatch(loadGridLists());
   }
+
+  onUpdatePeridoicElement(event: Update<PeriodicElement>) {}
 }

src/app/grid-list/presentationals/list-view/list-view.component.ts

@@ -4,10 +4,14 @@ import {
   Input,
   OnChanges,
   SimpleChanges,
+  EventEmitter,
+  Output,
 } from '@angular/core';
 import { FormGroup, FormArray, Form } from '@angular/forms';
 import { noop } from 'rxjs';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { PeriodicElement } from 'src/app/models/periodic-element';
+import { Update } from '@ngrx/entity';
 
 @Component({
   selector: 'app-list-view',
@@ -16,6 +20,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 })
 export class ListViewComponent implements OnChanges {
   @Input() gridDataSource: FormArray;
+  @Output() updatePeridoicElement = new EventEmitter<Update<PeriodicElement>>();
 
   gridForm: FormGroup;
 
@@ -42,4 +47,11 @@ export class ListViewComponent implements OnChanges {
       event.currentIndex
     );
   }
+
+  updateFormInState(form: FormGroup) {
+    this.updatePeridoicElement.emit({
+      id: form.get('id').value,
+      changes: form.value,
+    } as Update<PeriodicElement>);
+  }
 }