on destroy save state (#102)

* on destroy save state

* bump version

Author: e-davidson

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mx-table-builder",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "peerDependencies": {
     "@angular/common": "~11.0.0",
     "@angular/core": "~11.0.0",

projects/table-builder/src/lib/classes/table-store.ts

@@ -9,7 +9,7 @@ import { Sort, SortDirection }  from '@angular/material/sort' ;
 import { ComponentStore } from '@ngrx/component-store'  ;
 import update from 'immutability-helper';
 import { Dictionary } from '../interfaces/dictionary';
-import { map, tap } from 'rxjs/operators'
+import { last, map, tap } from 'rxjs/operators'
 import { moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Injectable({
@@ -31,10 +31,15 @@ export class TableStore extends ComponentStore<TableState> {
     );
   }
 
+
   on = <V>(srcObservable: Observable<V>, func: (obj: V) => void) => {
-    this.effect((src: Observable<V>) => {
-      return src.pipe(tap(func));
-    })(srcObservable);
+    this.effect(() => srcObservable.pipe(
+      tap(func)
+    ))
+  }
+
+  onLast(callback: (state: TableState) => void ) {
+    this.on(this.state$.pipe(last()),callback);
   }
 
   readonly filters$ = this.select(state => state.filters );

projects/table-builder/src/lib/components/table-container/table-container.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';
 import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
-import { filter, first, map, shareReplay, switchMap, tap, withLatestFrom } from 'rxjs/operators';
+import { filter, first, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
 import { TableBuilder } from '../../classes/table-builder';
 import { MatRowDef } from '@angular/material/table';
 import { CustomCellDirective } from '../../directives';
@@ -69,22 +69,18 @@ import { sortData } from '../../functions/sort-data-function';
     @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
     private store: Store<{globalStorageState: GlobalStorageState}>
   ) {
+    this.state.onLast( finalState => {
+      if(this.tableId) {
+        this.store.dispatch(setLocalProfile({key:this.tableId,value: finalState}));
+      }
+    });
   }
 
   ngOnInit() {
     if(this.tableId) {
       this.state.updateState(
         this.store.pipe(
           select(selectors.selectLocalProfileState<PersistedTableState>(this.tableId)),
-          tap( state => {
-            // for backwards compatability we want to load the state from the old schema.
-            if(!state) {
-              const oldLocalState = localStorage.getItem(this.tableId);
-              if(oldLocalState){
-                this.store.dispatch(setLocalProfile({ key: this.tableId, value: JSON.parse( oldLocalState), persist: true} ));
-              }
-            }
-          }),
           filter( state => !!state ),
           skipOneWhen(this.OnSaveState),
         )

src/app/app.module.ts

@@ -25,7 +25,16 @@ import { LowerCasePipe } from '@angular/common';
     MatCheckboxModule,
     MatSelectModule,
     BrowserAnimationsModule,
-    StoreModule.forRoot({}),
+    StoreModule.forRoot({},{
+      runtimeChecks: {
+        strictStateImmutability: false,
+        strictActionImmutability: false,
+        strictStateSerializability: false,
+        strictActionSerializability: false,
+        strictActionWithinNgZone: false,
+        strictActionTypeUniqueness: false,
+      },
+    }),
     EffectsModule.forRoot([]),
     TableBuilderModule.forRoot({
       defaultSettings: { dateFormat: 'short' },