Fix update issue

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -77,6 +78,7 @@ import { UserResolver } from './user/user.resolver';
     MatSelectModule,
     MatIconModule,
     MatSlideToggleModule,
+    MatSnackBarModule,
     MobxAngularModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production

src/app/pages/invoice-list/invoice-list.component.html

@@ -1,24 +1,33 @@
 <div class="invoice-container">
   <div class="row mb-2">
-
     <div class="col">
       <section class="example-section">
         Extra/Minus
-        <mat-slide-toggle class="example-margin" (change)="findDailyMonthUpdate($event)">
+        <mat-slide-toggle
+          class="example-margin"
+          (change)="findDailyMonthUpdate($event)"
+        >
         </mat-slide-toggle>
       </section>
     </div>
     <div class="col">
-      <button class="btn bg-success text-white float-right" [routerLink]="['/edit-invoice',0]">New
-        Customer</button>
+      <button
+        class="btn bg-success text-white float-right"
+        [routerLink]="['/edit-invoice', 0]"
+      >
+        New Customer
+      </button>
     </div>
   </div>
   <div class="row">
     <div class="col">
       <div class="form-group  mb-0">
         <p class="mb-0">Select supplier</p>
         <mat-form-field class="col-12">
-          <mat-select (selectionChange)="changeSupplier($event)" [(value)]="supplierName">
+          <mat-select
+            (selectionChange)="changeSupplier($event)"
+            [(value)]="supplierName"
+          >
             <mat-option *ngFor="let supplier of suppliers" [value]="supplier">
               {{ supplier }}
             </mat-option>
@@ -28,8 +37,15 @@
       <div class="form-group mb-0">
         <p class="mb-0">Select line number</p>
         <mat-form-field class="col-12">
-          <mat-select (selectionChange)="changeLine($event)" [disabled]="disableLineNumber" [(value)]="lineNumber">
-            <mat-option *ngFor="let lineNumber of lineNumberList" [value]="lineNumber">
+          <mat-select
+            (selectionChange)="changeLine($event)"
+            [disabled]="disableLineNumber"
+            [(value)]="lineNumber"
+          >
+            <mat-option
+              *ngFor="let lineNumber of lineNumberList"
+              [value]="lineNumber"
+            >
               {{ lineNumber }}
             </mat-option>
           </mat-select>
@@ -38,24 +54,42 @@
 
       <div class="form-group mb-0">
         <section class="example-section">
-          <mat-checkbox class="example-margin" (change)="filterNotPaidCustomer($event)">Show Paid Customer Only
+          <mat-checkbox
+            class="example-margin"
+            (change)="filterNotPaidCustomer($event)"
+            >Show Paid Customer Only
           </mat-checkbox>
         </section>
       </div>
 
       <div class="form-group mb-0">
         <mat-form-field class="col-12">
-          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search Customers" #input />
+          <input
+            matInput
+            (keyup)="applyFilter($event.target.value)"
+            placeholder="Search Customers"
+            #input
+          />
         </mat-form-field>
       </div>
 
       <div class="mat-elevation-z8 table-responsive mb-4">
-        <table mat-table [dataSource]="dataSource" matSort class="table-bordered">
+        <table
+          mat-table
+          [dataSource]="dataSource"
+          matSort
+          class="table-bordered"
+        >
           <ng-container matColumnDef="customer_name">
             <th mat-header-cell *matHeaderCellDef mat-sort-header class="col">
               Name
             </th>
-            <td mat-cell class="name col pl-2" *matCellDef="let invoice" [routerLink]="['/edit-invoice', invoice._id]">
+            <td
+              mat-cell
+              class="name col pl-2"
+              *matCellDef="let invoice"
+              [routerLink]="['/edit-invoice', invoice._id]"
+            >
               <u>{{ invoice.customer_name }}</u>
             </td>
           </ng-container>
@@ -64,9 +98,18 @@
             <th mat-header-cell *matHeaderCellDef class="col text-center">
               Total
             </th>
-            <td mat-cell class="total col" *matCellDef="let invoice" style="color: rgba(22, 188, 218, 0.699);">
+            <td
+              mat-cell
+              class="total col"
+              *matCellDef="let invoice"
+              style="color: rgba(22, 188, 218, 0.699);"
+            >
               <p class="text-center" *ngIf="invoice.invoice">
-                {{ invoice.invoice.payment?invoice.invoice.payment[0].amount:0 }}
+                {{
+                  invoice.invoice.payment
+                    ? invoice.invoice.payment[0].amount
+                    : 0
+                }}
               </p>
               <p class="text-center" *ngIf="!invoice.invoice">
                 -
@@ -79,8 +122,13 @@
               Pay
             </th>
             <td mat-cell class="pay col" *matCellDef="let invoice">
-              <input type="text" class="form-control form-control-sm"
-                (keyup.enter)="updateAmount($event.target.value, invoice, 'invoice_amount')" />
+              <input
+                type="text"
+                class="form-control form-control-sm"
+                (keyup.enter)="
+                  updateAmount($event.target.value, invoice, 'invoice_amount')
+                "
+              />
             </td>
           </ng-container>
 
@@ -89,8 +137,15 @@
               Extra
             </th>
             <td mat-cell class="pay col" *matCellDef="let invoice">
-              <input type="text" class="form-control form-control-sm"
-                (keyup.enter)="updateAmount($event.target.value, invoice, 'extra_amount')" />
+              <input
+                type="text"
+                id="extra_milk"
+                class="extra_and_minus form-control form-control-sm"
+                [(value)]="extra_milk_value"
+                (keyup.enter)="
+                  updateAmount($event.target.value, invoice, 'extra_amount')
+                "
+              />
             </td>
           </ng-container>
 
@@ -99,15 +154,25 @@
               Minus
             </th>
             <td mat-cell class="pay col" *matCellDef="let invoice">
-              <input type="text" class="form-control form-control-sm"
-                (keyup.enter)="updateAmount($event.target.value, invoice, 'minus_amount')" />
+              <input
+                type="text"
+                id="minus_milk"
+                [(value)]="minus_milk_value"
+                class="extra_and_minus form-control form-control-sm"
+                (keyup.enter)="
+                  updateAmount($event.target.value, invoice, 'minus_amount')
+                "
+              />
             </td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
-        <div *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+        <div
+          *ngIf="isLoading"
+          style="display: flex; justify-content: center; align-items: center"
+        >
           <h2>Loading...</h2>
         </div>
         <mat-paginator [pageSizeOptions]="[25, 100]"></mat-paginator>

src/app/pages/invoice-list/invoice-list.component.ts

@@ -37,6 +37,8 @@ export class InvoiceListComponent implements OnInit {
   lineNumberList;
   suppliers;
   showMonthlyTextBox: boolean;
+  minus_milk_value = '';
+  extra_milk_value = '';
 
   constructor(
     private _http: HttpService,
@@ -87,6 +89,9 @@ export class InvoiceListComponent implements OnInit {
         .updateExtraAndMinusAmount(customerInvoice)
         .subscribe(res => {
           console.log(res);
+          this._utils.openSnackBar('Update successfully!');
+          this.minus_milk_value = '';
+          this.extra_milk_value = '';
         });
     }
   }
@@ -162,13 +167,15 @@ export class InvoiceListComponent implements OnInit {
   }
 
   findDailyMonthUpdate(event) {
-    this.showMonthlyTextBox = false;
-    localStorage.showMonthlyTextBox = false;
-    this.displayedColumns = ['customer_name', 'total', 'pay'];
     if (event.checked) {
       this.showMonthlyTextBox = true;
       localStorage.showMonthlyTextBox = true;
       this.displayedColumns = ['customer_name', 'total', 'extra', 'minus'];
+    } else {
+      this.showMonthlyTextBox = false;
+      localStorage.showMonthlyTextBox = false;
+      this.displayedColumns = ['customer_name', 'total', 'pay'];
     }
+    return this.showMonthlyTextBox;
   }
 }

src/app/services/utils.service.ts

@@ -1,12 +1,18 @@
 import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material';
 import { UUID } from 'angular2-uuid';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UtilsService {
-  constructor() {}
+  constructor(private snackBar: MatSnackBar) {}
   generateUUID() {
     return UUID.UUID();
   }
+  openSnackBar(message) {
+    this.snackBar.open(message, 'undo', {
+      duration: 3000
+    });
+  }
 }