Fix issue with saving state (#137)

* upgrade to angular 13

* clean state before saving

* bump version

Author: e-davidson

.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -97,18 +97,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -128,15 +116,6 @@
               "devServerTarget": "material-extensions:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -165,18 +144,6 @@
             "tsConfig": "projects/table-builder/tsconfig.spec.json",
             "karmaConfig": "projects/table-builder/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/table-builder/tsconfig.lib.json",
-              "projects/table-builder/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

package.json

@@ -11,34 +11,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.1.1",
-    "@angular/cdk": "12.1.1",
-    "@angular/common": "12.1.1",
-    "@angular/compiler": "12.1.1",
-    "@angular/core": "12.1.1",
-    "@angular/forms": "12.1.1",
-    "@angular/material": "12.1.1",
-    "@angular/platform-browser": "12.1.1",
-    "@angular/platform-browser-dynamic": "12.1.1",
-    "@angular/router": "12.1.1",
+    "@angular/animations": "13.0.0",
+    "@angular/cdk": "13.0.0",
+    "@angular/common": "13.0.0",
+    "@angular/compiler": "13.0.0",
+    "@angular/core": "13.0.0",
+    "@angular/forms": "13.0.0",
+    "@angular/material": "13.0.0",
+    "@angular/platform-browser": "13.0.0",
+    "@angular/platform-browser-dynamic": "13.0.0",
+    "@angular/router": "13.0.0",
     "@ngrx/effects": "^12.2.0",
     "@ngrx/store": "^12.2.0",
     "@ngrx/store-devtools": "^12.2.0",
     "@ngrx/component-store": "^12.2.0",
     "@ngrx/component": "12.2.0",
     "core-js": "3.6.5",
     "immutability-helper": "^3.1.1",
-    "rxjs": "6.6.6",
+    "rxjs": "7.4.0",
     "tslib": "^2.3.0",
     "uuid4": "^2.0.2",
     "zone.js": "~0.11.4",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.1.1",
-    "@angular/cli": "12.1.1",
-    "@angular/compiler-cli": "12.1.1",
-    "@angular/language-service": "12.1.1",
+    "@angular-devkit/build-angular": "~13.0.1",
+    "@angular/cli": "13.0.1",
+    "@angular/compiler-cli": "13.0.0",
+    "@angular/language-service": "13.0.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "2.0.8",
     "@types/lodash": "^4.14.168",
@@ -51,10 +51,10 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^12.1.0",
+    "ng-packagr": "^13.0.3",
     "protractor": "~7.0.0",
     "ts-node": "9.0.0",
     "tslint": "~6.1.3",
-    "typescript": "~4.3.5"
+    "typescript": "~4.4.4"
   }
 }

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mx-table-builder",
-  "version": "0.4.29",
+  "version": "0.5.0",
   "peerDependencies": {
     "@angular/common": "~12.1.1",
     "@angular/core": "~12.1.1",

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

@@ -1,6 +1,6 @@
 <ng-container multiSort >
   <ng-container >
-    
+
     <div class="header-wrapper" >
       <div class="title">
         <ng-content select=".tb-header-title"  *ngIf="(!(collapseHeader$ | async)) || (state.tableSettings$ | async).showTitleWhenHeaderCollapsed"></ng-content>
@@ -30,7 +30,7 @@
         </mat-icon>
       </div>
     </div>
-    
+
     <div style="clear: both;">
       <tb-generic-table
       [rows]='customRows'
@@ -55,7 +55,7 @@
   </ng-container>
 </ng-template>
 <ng-template #headerMenuExtra>
-  <button mat-menu-item (click)="state.resetState();OnStateReset.next()" >
+  <button mat-menu-item (click)="state.resetState();OnStateReset.next(null)" >
     <mat-icon color="primary">autorenew</mat-icon>
     <span>Reset table</span>
   </button>
@@ -72,7 +72,7 @@
       <span>Choose Profile</span>
     </button>
   </ng-container>
-  
+
   <mat-menu #savedNames='matMenu' panelClass='wide-menu'  >
     <button mat-menu-item clickSubject #add='clickSubject' >
       <mat-icon>add</mat-icon>

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

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { combineLatest, Observable, ReplaySubject } from 'rxjs';
 import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
-import { distinctUntilChanged, filter, first, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
+import { distinctUntilChanged, filter, first, last, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
 import { TableBuilder } from '../../classes/table-builder';
 import { MatRowDef } from '@angular/material/table';
 import { CustomCellDirective } from '../../directives';
@@ -71,7 +71,7 @@ import { cloneDeep } from 'lodash';
     @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
     private store: Store<{globalStorageState: GlobalStorageState}>
   ) {
-    this.state.onLast( finalState => {
+     this.state.on( this.state.getSavableState().pipe(last()), finalState => {
       if(this.tableId) {
         this.store.dispatch(setLocalProfile({key:this.tableId,value: finalState}));
       }
@@ -113,7 +113,7 @@ import { cloneDeep } from 'lodash';
     this.state.getSavableState().pipe(
       first()
     ).subscribe( tableState => {
-      this.OnSaveState.next();
+      this.OnSaveState.next(null);
       this.store.dispatch(setLocalProfile({ key: this.tableId, value:tableState, persist: true} ));
     });
   }
@@ -159,10 +159,9 @@ import { cloneDeep } from 'lodash';
     return meta;
   }
 
-  cleanStateOnInitialLoad = ()=> (obs:Observable<PersistedTableState>) => 
+  cleanStateOnInitialLoad = ()=> (obs:Observable<PersistedTableState>) =>
     combineLatest([obs.pipe(addTimeStamp()), this.tableBuilder.metaData$]).pipe(
     distinctUntilChanged(([state],[state2])=>state.index === state2.index),
-    
     map(([{value:state},metas],index)=>{
       if (index === 0) {
 

projects/table-builder/src/test.ts

@@ -14,7 +14,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

projects/table-builder/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

src/custom-theme.scss

@@ -1,8 +1,8 @@
 
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
+@import '@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only

src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags