Updated Dependencies, and Added Notifications

AstuteClient2/package.json

@@ -11,45 +11,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.2",
+    "@angular/animations": "^8.1.1",
-    "@angular/common": "^6.0.2",
+    "@angular/common": "^8.1.1",
-    "@angular/compiler": "^6.0.2",
+    "@angular/compiler": "^8.1.1",
-    "@angular/core": "^6.0.2",
+    "@angular/core": "^8.1.1",
-    "@angular/forms": "^6.0.2",
+    "@angular/forms": "^8.1.1",
-    "@angular/http": "^6.0.2",
+    "@angular/http": "^7.2.15",
-    "@angular/platform-browser": "^6.0.2",
+    "@angular/platform-browser": "^8.1.1",
-    "@angular/platform-browser-dynamic": "^6.0.2",
+    "@angular/platform-browser-dynamic": "^8.1.1",
-    "@angular/router": "^6.0.2",
+    "@angular/router": "^8.1.1",
-    "@ng-bootstrap/ng-bootstrap": "^2.2.1",
+    "@ng-bootstrap/ng-bootstrap": "^5.0.0",
     "ag-grid": "^18.1.2",
-    "ag-grid-angular": "^18.1.0",
+    "ag-grid-angular": "^21.0.1",
+    "ag-grid-community": "^21.0.1",
     "angular2-text-mask": "^9.0.0",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^4.3.1",
-    "core-js": "^2.5.4",
+    "core-js": "^3.1.4",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.1",
-    "popper.js": "^1.14.3",
+    "popper.js": "^1.15.0",
-    "rxjs": "^6.0.0",
+    "rxjs": "^6.5.2",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.3",
+    "@angular-devkit/build-angular": "~0.801.1",
-    "@angular/cli": "^6.0.8",
+    "@angular/cli": "^8.1.1",
-    "@angular/compiler-cli": "^6.0.2",
+    "@angular/compiler-cli": "^8.1.1",
-    "@angular/language-service": "^6.0.2",
+    "@angular/language-service": "^8.1.1",
-    "@types/jasmine": "~2.8.6",
+    "@types/jasmine": "^3.3.13",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "^2.0.6",
-    "@types/node": "~8.9.4",
+    "@types/node": "~12.6.2",
-    "codelyzer": "~4.2.1",
+    "codelyzer": "~5.1.0",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.1",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-coverage-istanbul-reporter": "~2.0.5",
-    "karma-jasmine": "~1.1.1",
+    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.3.0",
+    "protractor": "~5.4.2",
-    "ts-node": "~5.0.1",
+    "ts-node": "~8.3.0",
-    "tslint": "~5.9.1",
+    "tslint": "~5.18.0",
-    "typescript": "~2.7.2"
+    "typescript": "^3.4.5"
   }
 }

AstuteClient2/src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<app-toasts-container aria-live="polite" aria-atomic="true"></app-toasts-container>

AstuteClient2/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { AgGridModule } from 'ag-grid-angular';
 import { ModalFormComponent } from './modal-form/modal-form.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {HttpClientModule} from '@angular/common/http';
-import { AppRoutingModule } from './/app-routing.module';
+import { AppRoutingModule } from './app-routing.module';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
 import { SalesOrderComponent } from './sales-order/sales-order.component';
 import { InvoiceComponent } from './invoice/invoice.component';
@@ -22,6 +22,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SettingsComponent } from './settings/settings.component';
+import { ToastsContainerComponent } from './services/toast-manager/toasts-container/toasts-container.component';
 // import { ServiceTypeComponent } from './service-type/service-type.component';
 
 @NgModule({
@@ -37,13 +38,14 @@ import { SettingsComponent } from './settings/settings.component';
     InvoiceGenComponent,
     LoginComponent,
     InvoicePaymentComponent,
-    SettingsComponent// ,
+    SettingsComponent,
+    ToastsContainerComponent// ,
     // ServiceTypeComponent
   ],
   imports: [
     BrowserModule,
     AgGridModule.withComponents([]),
-    NgbModule.forRoot(),
+    NgbModule,
     HttpClientModule,
     AppRoutingModule,
     TextMaskModule,

AstuteClient2/src/app/invoice-gen/invoice-gen.component.ts

@@ -13,7 +13,7 @@ declare var $: any;
     styleUrls: ['./invoice-gen.component.css']
 })
 export class InvoiceGenComponent implements OnInit {
-    @ViewChild('doc') invoiceHTML: ElementRef;
+    @ViewChild('doc', {'static': false}) invoiceHTML: ElementRef;
 
     gridX = []; // these are the layout grid STARTING
     gridY = []; // from the 1 inch border (x: 25; y:23)

AstuteClient2/src/app/invoice-payment/invoice-payment.component.ts

@@ -8,7 +8,7 @@ import {formatCurrency} from "@angular/common";
     styleUrls: ['./invoice-payment.component.css']
 })
 export class InvoicePaymentComponent implements OnInit {
-    @ViewChild('agGrid') agGrid;
+    @ViewChild('agGrid', {'static': false}) agGrid;
     selected = null;
     chosenInv: any = 0;
     chosenPaymentType: any = 0;

AstuteClient2/src/app/modal-form/modal-form.component.ts

@@ -9,7 +9,7 @@ import {NgbModal, ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bo
 export class ModalFormComponent implements OnInit {
   closeResult: string;
   @Input() title: string;
-  @ViewChild('content') content;
+  @ViewChild('content', {'static': false}) content;
   activeModal;
   constructor(private modalService: NgbModal) {}
 

AstuteClient2/src/app/services/astute-client-service.ts

@@ -1,5 +1,6 @@
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Injectable} from '@angular/core';
+import {ToastManagerService} from './toast-manager/toast-service.service';
 
 @Injectable()
 export class AstuteClientService {
@@ -20,7 +21,7 @@ export class AstuteClientService {
     private sessionString = `?sessionId=${localStorage.getItem('SESSION_ID')}`;
 
 
-    constructor(private http: HttpClient) { }
+    constructor(private http: HttpClient, private toastService: ToastManagerService) { }
 
     // **************************************** AUTH Service methods
     public login(username: string, password: string): Promise<string> {
@@ -82,15 +83,15 @@ export class AstuteClientService {
                     console.log(response['entity']);
                     return response['entity'];
                 } else if (message.includes('login')) {
-                    alert('Please login again!');
+                    this.notif('Please login again!');
                 } else {
-                    alert('Get Customers Failed: ' + message);
+                    this.notif('Get Customers Failed: ' + message);
                 }
             }, (reason) => {
-                alert('Get Customers Failed: ' + reason);
+                this.notif('Get Customers Failed: ' + reason);
             })
             .catch( error => {
-                alert(error);
+                this.notif(error);
             });
     }
     public updateCustomer(customerId: number, data: any): Promise<any> {
@@ -105,7 +106,7 @@ export class AstuteClientService {
                     console.log(response['entity']);
                     return response['entity'];
                 } else if (message.includes('login')) {
-                    alert('Please login again!');
+                    this.notif('Please login again!');
                 } else {
                     alert('Update Customer Failed: ' + message);
                 }
@@ -270,15 +271,15 @@ export class AstuteClientService {
                     console.log(response['entity']);
                     return response['entity'];
                 } else if (message.includes('login')) {
-                    alert('Please login again!');
+                    this.notif('Please login again!');
                 } else {
-                    alert('Get Customers Failed: ' + message);
+                    this.notif('Get Customers Failed: ' + message);
                 }
             }, (reason) => {
-                alert('Get Sales Orders Failed: ' + reason);
+                this.notif('Get Sales Orders Failed: ' + reason);
             })
             .catch( error => {
-                alert(error);
+                this.notif(error);
             });
     }
     public getPODetail(ponum): Promise<any> {
@@ -293,15 +294,15 @@ export class AstuteClientService {
                     console.log(response['entity']);
                     return response['entity'];
                 } else if (message.includes('login')) {
-                    alert('Please login again!');
+                    this.notif('Please login again!');
                 } else {
-                    alert('Get Customers Failed: ' + message);
+                    this.notif('Get Customers Failed: ' + message);
                 }
             }, (reason) => {
-                alert('Get Sales Order Details Failed: ' + reason);
+                this.notif('Get Sales Order Details Failed: ' + reason);
             })
             .catch( error => {
-                alert(error);
+                this.notif(error);
             });
     }
     public updatePO(ponum: string, data: any): Promise<any> {
@@ -572,15 +573,15 @@ export class AstuteClientService {
                     console.log(response['entity']);
                     return response['entity'];
                 } else if (message.includes('login')) {
-                    alert('Please login again!');
+                    this.notif('Please login again!');
                 } else {
-                    alert('Get Customers Failed: ' + message);
+                    this.notif('Get Customers Failed: ' + message);
                 }
             }, (reason) => {
-                alert('Get Invoices Failed: ' + reason);
+                this.notif('Get Invoices Failed: ' + reason);
             })
             .catch( error => {
-                alert(error);
+                this.notif(error);
             });
     }
     public getInvoiceDetail(invoiceId: string): Promise<any> {
@@ -912,4 +913,10 @@ export class AstuteClientService {
                 alert(error);
             });
     }
+
+
+    // ** toast notification method
+    notif(text: string) {
+        this.toastService.show(text, {classname: 'bg-danger text-light'});
+    }
 }

AstuteClient2/src/app/services/toast-manager/toast-service.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ToastManagerService } from './toast-service.service';
+
+describe('ToastManagerService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ToastManagerService]
+    });
+  });
+
+  it('should be created', inject([ToastManagerService], (service: ToastManagerService) => {
+    expect(service).toBeTruthy();
+  }));
+});

AstuteClient2/src/app/services/toast-manager/toast-service.service.ts

@@ -0,0 +1,15 @@
+import {Injectable, TemplateRef} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastManagerService {
+  toasts: any[] = [];
+  show(textOrTpl: string | TemplateRef<any>, options: any = {}) {
+      this.toasts.push({ textOrTpl, ...options });
+  }
+
+  remove(toast) {
+      this.toasts = this.toasts.filter(t => t !== toast);
+  }
+}

AstuteClient2/src/app/services/toast-manager/toasts-container/toasts-container.component.css

@@ -0,0 +1,7 @@
+:host {
+    position: fixed;
+    top: 0;
+    right: 0;
+    margin: 0.5em;
+    z-index: 1200;
+}

AstuteClient2/src/app/services/toast-manager/toasts-container/toasts-container.component.html

@@ -0,0 +1,14 @@
+<ngb-toast
+        *ngFor="let toast of toastService.toasts"
+        [class]="toast.classname"
+        [autohide]="true"
+        [delay]="toast.delay || 5000"
+        (hide)="toastService.remove(toast)"
+>
+
+  <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text">
+    <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
+  </ng-template>
+
+  <ng-template #text>{{ toast.textOrTpl }}</ng-template>
+</ngb-toast>

AstuteClient2/src/app/services/toast-manager/toasts-container/toasts-container.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastsContainerComponent } from './toasts-container.component';
+
+describe('ToastsContainerComponent', () => {
+  let component: ToastsContainerComponent;
+  let fixture: ComponentFixture<ToastsContainerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ToastsContainerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToastsContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

AstuteClient2/src/app/services/toast-manager/toasts-container/toasts-container.component.ts

@@ -0,0 +1,12 @@
+import {Component, TemplateRef} from '@angular/core';
+import {ToastManagerService} from '../toast-service.service';
+
+@Component({
+  selector: 'app-toasts-container',
+  templateUrl: './toasts-container.component.html',
+  styleUrls: ['./toasts-container.component.css']
+})
+export class ToastsContainerComponent {
+    constructor(public toastService: ToastManagerService) {}
+    isTemplate(toast) { return toast.textOrTpl instanceof TemplateRef; }
+}

AstuteClient2/src/polyfills.ts

@@ -43,7 +43,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es7/reflect';
 
 
 /**