minor bug fixes

AstuteClient2/package-lock.json

@@ -1618,11 +1618,6 @@
       "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=",
       "dev": true
     },
-    "ag-grid": {
-      "version": "18.1.2",
-      "resolved": "https://registry.npmjs.org/ag-grid/-/ag-grid-18.1.2.tgz",
-      "integrity": "sha512-HtJt8iFcRKCBj5UHBDmwSLLr72F3XDACeBNarH4nJWFHIqcnu7u0Ifrd2nftPmfEBj6YjFHawDqcZL2yo3YfmQ=="
-    },
     "ag-grid-angular": {
       "version": "21.0.1",
       "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-21.0.1.tgz",

AstuteClient2/package.json

@@ -21,7 +21,6 @@
     "@angular/platform-browser-dynamic": "^8.1.1",
     "@angular/router": "^8.1.1",
     "@ng-bootstrap/ng-bootstrap": "^5.0.0",
-    "ag-grid": "^18.1.2",
     "ag-grid-angular": "^21.0.1",
     "ag-grid-community": "^21.0.1",
     "angular2-text-mask": "^9.0.0",

AstuteClient2/src/app/customer/customer.component.html

@@ -18,6 +18,7 @@
               (rowDataChanged)="resizeColumns($event)"
               rowSelection="single"
               rowDeselection="true"
+              suppressHorizontalScroll="false"
       ></ag-grid-angular>
     </div>
   </div>
@@ -30,15 +31,6 @@
         <button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)" [disabled]="!selected">Delete Customer</button>
       </div>
     </div>
-    <!--<div class="col">-->
-      <!--<button class="btn btn-info" style="width: 100%" (click)="open(edit)" [disabled]="!selected">Edit Customer</button>-->
-    <!--</div>-->
-    <!--<div class="col">-->
-      <!--<button class="btn btn-primary" style="width: 100%" (click)="open(contacts)" [disabled]="!selected">Contact Book</button>-->
-    <!--</div>-->
-    <!--<div class="col-3">-->
-      <!--<button class="btn btn-danger" style="width: 100%" (click)="deleteCustomer(selected.customerId)" [disabled]="!selected">Delete Customer</button>-->
-    <!--</div>-->
   </div>
 </div>
 

AstuteClient2/src/app/customer/customer.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
-import {ToastManagerService} from "../services/toast-manager/toast-service.service";
+import {ToastManagerService} from '../services/toast-manager/toast-service.service';
 
 @Component({
     selector: 'app-customer',
@@ -184,11 +184,9 @@ export class CustomerComponent implements OnInit {
 
             this.astuteClientService.updateCustomer(id, customerData).then((data) => {
                 if (data) {
-                    this.refreshData();
                     ref.close();
-                } else {
-                    this.notif('Customer Updating Failed, Check Input Fields');
                 }
+                this.refreshData();
             }, (reason) => {
                 this.notif('Update customer failed: ' + reason);
             });

AstuteClient2/src/app/login/login.component.html

@@ -2,7 +2,7 @@
   <form class="form-signin" (ngSubmit)="login(f)" #f="ngForm" style="margin-bottom: 10px">
     <div class="row">
       <div class="col-12">
-      <img src="assets/img/AstuteLogo.gif" height="100" width="230">
+      <img src="assets/img/AstuteLogo.png" height="100" width="230">
       <h1 class="form-signin-heading text-right">Login</h1>
       </div>
     </div>

AstuteClient2/src/app/nav-bar/nav-bar.component.html

@@ -3,16 +3,42 @@
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+  <div class="collapse navbar-collapse">
-    <div class="navbar-nav">
+    <ul class="navbar-nav mr-auto">
-      <a class="nav-link" [ngClass]="customerActive ? 'active' : ''" routerLink="/customer" routerLinkActive="active">Customer</a>
+      <li class="nav-item">
-      <a class="nav-link" [ngClass]="salesOrderActive ? 'active' : ''"routerLink="/sales-order" routerLinkActive="active">Sales Order</a>
+        <a class="nav-link" [ngClass]="customerActive ? 'active' : ''" routerLink="/customer" routerLinkActive="active">Customer</a>
-      <a class="nav-link" [ngClass]="invoiceActive ? 'active' : ''"routerLink="/invoice" routerLinkActive="active">Invoice</a>
+      </li>
-      <a class="nav-link" [ngClass]="invoicePaymentActive ? 'active' : ''"routerLink="/invoice-payment" routerLinkActive="active">Invoice Payment</a>
+      <li class="nav-item">
-      <!--<a class="nav-link" [ngClass]="serviceTypeActive ? 'active' : ''"routerLink="/service-type" routerLinkActive="active">Service Type</a>-->
+        <a class="nav-link" [ngClass]="salesOrderActive ? 'active' : ''"routerLink="/sales-order" routerLinkActive="active">Sales Order</a>
-      <!--<a class="nav-link" [ngClass]="logoffActive ? 'active' : ''"routerLink="/login" (click)="logout()" routerLinkActive="active">Log off</a>-->
+      </li>
-      <a class="nav-link" [ngClass]="settingsActive ? 'active' : ''"routerLink="/settings" routerLinkActive="active">Settings</a>
+      <li class="nav-item">
-    </div>
+        <a class="nav-link" [ngClass]="invoiceActive ? 'active' : ''"routerLink="/invoice" routerLinkActive="active">Invoice</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" [ngClass]="invoicePaymentActive ? 'active' : ''"routerLink="/invoice-payment" routerLinkActive="active">Invoice Payment</a>
+      </li>
+    </ul>
+    <span class="nav-item">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" [ngClass]="settingsActive ? 'active' : ''"routerLink="/settings" routerLinkActive="active">Settings</a>
+        </li>
+        <li class="nav-item">
+          <button class="btn" style="color: red" (click)="logout()">Logout</button>
+        </li>
+      </ul>
+    </span>
+
+    <!--<li class="nav-item dropdown">-->
+      <!--<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
+        <!--Settings-->
+      <!--</a>-->
+      <!--<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">-->
+        <!--<a class="dropdown-item" href="/settings">Settings</a>-->
+        <!--<a class="dropdown-item" href="#">Another action</a>-->
+        <!--<a class="dropdown-item" href="#">Something else here</a>-->
+      <!--</div>-->
+    <!--</li>-->
   </div>
 </nav>
 

AstuteClient2/src/app/nav-bar/nav-bar.component.ts

@@ -1,5 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
+import {Router} from "@angular/router";
+import {ToastManagerService} from "../services/toast-manager/toast-service.service";
 
 @Component({
   selector: 'app-nav-bar',
@@ -16,20 +18,26 @@ export class NavBarComponent implements OnInit {
     @Input() settingsActive: boolean;
 
 
-    constructor(private astuteClientService: AstuteClientService) {
+    constructor(private astuteClientService: AstuteClientService,  private router: Router, private toastService: ToastManagerService) {
     }
 
     ngOnInit() {
     }
 
-    // logout() {
+    logout() {
-    //     this.astuteClientService.logout().then((data) => {
+        this.astuteClientService.logout().then((data) => {
-    //         if (data) {
+            if (data) {
-    //             alert('Logout successful');
+                this.router.navigate(['/login']);
-    //         } else {
+                this.notif('Logout successful');
-    //             alert('Logout unsuccessful');
+            } else {
-    //         }
+                this.notif('Logout unsuccessful');
-    //     });
+            }
-    // }
+        });
+    }
+
+    // ** toast notification method
+    notif(text: string) {
+        this.toastService.show(text, {classname: 'bg-danger text-light'});
+    }
 }
 

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

@@ -5,8 +5,9 @@ import {Injectable, TemplateRef} from '@angular/core';
 })
 export class ToastManagerService {
   toasts: any[] = [];
-  show(textOrTpl: string | TemplateRef<any>, options: any = {}) {
+  show(textOrTpl: string, options: any = {}) {
-      this.toasts.push({ textOrTpl, ...options });
+      const words = textOrTpl.split(' ').length;
+      this.toasts.push({ textOrTpl, delay: (words + 1) * 1000, ...options });
   }
 
   remove(toast) {

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

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

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

@@ -2,7 +2,7 @@
         *ngFor="let toast of toastService.toasts"
         [class]="toast.classname"
         [autohide]="true"
-        [delay]="toast.delay || 5000"
+        [delay]="toast.delay || 15000"
         (hide)="toastService.remove(toast)"
 >
 

AstuteClient2/src/app/settings/settings.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
 import {Router} from '@angular/router';
+import {ToastManagerService} from "../services/toast-manager/toast-service.service";
 
 @Component({
     selector: 'app-settings',
@@ -17,7 +18,8 @@ export class SettingsComponent implements OnInit {
     gridColumnApi;
 
     constructor(private astuteClientService: AstuteClientService,
-                private router: Router) {
+                private router: Router,
+                private toastService: ToastManagerService) {
     }
 
     ngOnInit() {
@@ -29,11 +31,11 @@ export class SettingsComponent implements OnInit {
         console.log(data);
         this.astuteClientService.updateServiceType(data.serviceTypeId, data).then((d) => {
             if (!d) {
-                alert('Service Type updating failed, check input fields');
+                this.notif('Service Type updating failed, check input fields');
             }
             this.refreshServiceTypeData();
         }, (reason) => {
-            alert('Update Service Type failed: ' + reason);
+            this.notif('Update Service Type failed: ' + reason);
         });
     }
 
@@ -41,11 +43,11 @@ export class SettingsComponent implements OnInit {
         const data = {'serviceTypeName': ''};
         this.astuteClientService.createServiceType(data).then((d) => {
             if (!d) {
-                alert('Create Service Type Failed!');
+                this.notif('Create Service Type Failed!');
             }
             this.refreshServiceTypeData();
         }, (reason) => {
-            alert('Create Service Type Failed: ' + reason);
+            this.notif('Create Service Type Failed: ' + reason);
         });
     }
 
@@ -73,12 +75,15 @@ export class SettingsComponent implements OnInit {
         this.astuteClientService.logout().then((data) => {
             if (data) {
                 this.router.navigate(['/login']);
-                alert('Logout successful');
+                this.notif('Logout successful');
             } else {
-                alert('Logout unsuccessful');
+                this.notif('Logout unsuccessful');
             }
         });
     }
 
-
+    // ** toast notification method
+    notif(text: string) {
+        this.toastService.show(text, {classname: 'bg-danger text-light'});
+    }
 }

AstuteClient2/src/styles.css

@@ -1,4 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~bootstrap/dist/css/bootstrap.min.css';
-@import "~ag-grid/dist/styles/ag-grid.css";
+@import "~ag-grid-community/dist/styles/ag-grid.css";
-@import "~ag-grid/dist/styles/ag-theme-balham.css";
+@import "~ag-grid-community/dist/styles/ag-theme-balham.css";