work on edit html part

src/app/app.component.html

@@ -1,3 +1,4 @@
 <main>
-	<router-outlet></router-outlet>
+  <app-header></app-header>
+  <router-outlet></router-outlet>
 </main>

src/app/app.module.ts

@@ -36,9 +36,13 @@ import {
   MatSortModule,
   MatTableModule
 } from '@angular/material';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatIconModule } from '@angular/material/icon';
 import { EditVoiceComponent } from './shared/edit-voice/edit-voice.component';
+import { HeaderComponent } from './shared/header/header.component';
 
 @NgModule({
   declarations: [
@@ -47,7 +51,8 @@ import { EditVoiceComponent } from './shared/edit-voice/edit-voice.component';
     UserComponent,
     RegisterComponent,
     InvoiceListComponent,
-    EditVoiceComponent
+    EditVoiceComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,
@@ -64,6 +69,8 @@ import { EditVoiceComponent } from './shared/edit-voice/edit-voice.component';
     MatPaginatorModule,
     MatSortModule,
     MatProgressSpinnerModule,
+    MatToolbarModule,
+    MatButtonModule,
     MatIconModule,
     MobxAngularModule
   ],

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

@@ -51,18 +51,20 @@ export class InvoiceListComponent implements OnInit {
     );
   }
   ngOnInit() {
-    this._http.apiGet(this.sheetParams).subscribe(data => {
+    this.isLoading = true;
+    this._invoiceService.getInvoiceList().subscribe(data => {
       // Object.keys(data['records'])
       const invoiceArray = [];
       for (const key in data['records']) {
         if (key) {
           invoiceArray.push(data['records'][key]);
         }
       }
-      this._invoiceService._invoiceList = data['records'];
+      this._invoiceService.saveLocalStroage(data['records']);
       this.dataSource.data = invoiceArray;
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
+      this.isLoading = false;
     });
 
     console.log(this.dataSource);

src/app/services/invoice.service.ts

@@ -15,23 +15,18 @@ export class InvoiceService {
     this.getInvoiceList();
   }
 
-  _invoiceList;
-  get invoiceList(): boolean {
-    return this._invoiceList;
+  _invoiceList = [];
+  get invoiceList() {
+    console.log(JSON.parse(localStorage.invoiceList));
+    return JSON.parse(localStorage.invoiceList) || this._invoiceList;
   }
 
   getInvoiceList() {
-    return this._http.apiGet(this.sheetParams).subscribe(data => {
-      // Object.keys(data['records'])
-      const invoiceArray = [];
-      for (const key in data['records']) {
-        if (key) {
-          invoiceArray.push(data['records'][key]);
-        }
-      }
-      console.log('Data : ', invoiceArray);
-      this._invoiceList = invoiceArray;
-    });
+    return this._http.apiGet(this.sheetParams);
+  }
+  saveLocalStroage(data) {
+    this._invoiceList = data;
+    localStorage.invoiceList = JSON.stringify(this._invoiceList);
   }
   editInvoice(updateData) {
     this.sheetParams['action'] = 'update';

src/app/shared/edit-voice/edit-voice.component.html

@@ -1,55 +1,73 @@
-<form [formGroup]="editInvoiceForm" novalidate>
-  <mat-form-field>
-    <input
-      matInput
-      placeholder="Grand Total"
-      type="text"
-      formControlName="grand_total"
-      [ngModel]="invoiceData.grand_total"
-    />
-  </mat-form-field>
-  <mat-form-field>
-    <input
-      matInput
-      placeholder="Paid Amount"
-      type="text"
-      formControlName="paid_amount"
-      [ngModel]="invoiceData.paid_amount"
-    />
-  </mat-form-field>
-  <mat-form-field>
-    <input
-      matInput
-      placeholder="Due"
-      type="text"
-      formControlName="due"
-      [ngModel]="invoiceData.due"
-    />
-  </mat-form-field>
-  <mat-form-field>
-    <input
-      matInput
-      placeholder="Extra"
-      type="text"
-      formControlName="extra"
-      [ngModel]="invoiceData.extra"
-    />
-  </mat-form-field>
-  <mat-form-field>
-    <input
-      matInput
-      placeholder="Comments"
-      type="text"
-      formControlName="comments"
-      [ngModel]="invoiceData.comments"
-    />
-  </mat-form-field>
+<div class="container edit-container">
+  <div class="row">
+    <form [formGroup]="editInvoiceForm" class="example-form" novalidate>
+      <div class="col">
+        <mat-form-field class="example-full-width">
+          <input
+            matInput
+            placeholder="Grand Total"
+            type="text"
+            formControlName="grand_total"
+            [ngModel]="invoiceData.grand_total"
+          />
+        </mat-form-field>
+      </div>
 
-  <button
-    mat-raised-button
-    [disabled]="editInvoiceForm.invalid"
-    (click)="updateInvoice()"
-  >
-    Update
-  </button>
-</form>
+      <div class="col">
+        <mat-form-field class="example-full-width">
+          <input
+            matInput
+            placeholder="Paid Amount"
+            type="text"
+            formControlName="paid_amount"
+            [ngModel]="invoiceData.paid_amount"
+          />
+        </mat-form-field>
+      </div>
+
+      <div class="col">
+        <mat-form-field class="example-full-width">
+          <input
+            matInput
+            placeholder="Due"
+            type="text"
+            formControlName="due"
+            [ngModel]="invoiceData.due"
+          />
+        </mat-form-field>
+      </div>
+
+      <div class="col">
+        <mat-form-field class="example-full-width">
+          <input
+            matInput
+            placeholder="Extra"
+            type="text"
+            formControlName="extra"
+            [ngModel]="invoiceData.extra"
+          />
+        </mat-form-field>
+      </div>
+      <div class="col">
+        <mat-form-field class="example-full-width">
+          <input
+            matInput
+            placeholder="Comments"
+            type="text"
+            formControlName="comments"
+            [ngModel]="invoiceData.comments"
+          />
+        </mat-form-field>
+      </div>
+      <div class="col">
+        <button
+          mat-raised-button
+          [disabled]="editInvoiceForm.invalid"
+          (click)="updateInvoice()"
+        >
+          Update
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/shared/edit-voice/edit-voice.component.scss

@@ -0,0 +1,7 @@
+.example-full-width {
+  width: 100%;
+}
+.edit-container {
+  padding-left: 15px;
+  padding-right: 15px;
+}

src/app/shared/header/header.component.html

@@ -0,0 +1,5 @@
+<mat-toolbar class="bg-primary">
+  <mat-toolbar-row>
+    <span>MMS</span> <span class="example-spacer"></span>
+  </mat-toolbar-row>
+</mat-toolbar>

src/app/shared/header/header.component.scss

@@ -0,0 +1,7 @@
+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}

src/app/shared/header/header.component.spec.ts

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

src/app/shared/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}