add charges component

add pagination and searching


update


fix travis


Revert "fix travis"

This reverts commit 329013b.

src/app/app-routing.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './authentication/login/login.component';
+import { ChargesComponent } from './charges/charges.component';
 const routes: Routes = [
   {path: '', component : LoginComponent},
+  {path: 'charges', component : ChargesComponent},
   {path: '**', redirectTo : ''}
 ];
 @NgModule({

src/app/app.component.ts

@@ -30,6 +30,11 @@ export class AppComponent implements OnInit, OnDestroy {
       icon: 'person',
       link: 'login'
     },
+    {
+      title: 'Charges',
+      icon: 'monetization_on',
+      link: 'charges'
+    },
   ];
   title = 'Online-Banking-App-3.0';
   mobileQuery: MediaQueryList;

src/app/app.module.ts

@@ -12,14 +12,17 @@ import { SignUpComponent } from './authentication/sign-up/sign-up.component';
 import { ForgotPasswordComponent } from './authentication/forgot-password/forgot-password.component';
 import { VerificationComponent } from './authentication/verification/verification.component';
 import { AppService } from './app.service';
+import { ChargesComponent } from './charges/charges.component';
+import { ChargesService } from './services/charges.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     ForgotPasswordComponent,
     SignUpComponent,
-    VerificationComponent
+    VerificationComponent,
+    ChargesComponent
   ],
   imports: [
     BrowserAnimationsModule,
@@ -29,7 +32,7 @@ import { AppService } from './app.service';
     HttpClientModule,
     FormsModule
   ],
-  providers: [AuthorizationService, AppService],
+  providers: [AuthorizationService, AppService, ChargesService],
   bootstrap: [AppComponent],
   entryComponents : [SignUpComponent, VerificationComponent, ForgotPasswordComponent]
 })

src/app/charges/charges.component.html

@@ -0,0 +1,63 @@
+
+
+<mat-card>
+  <div class="row">
+    <div class="col-md-6">
+      <h2>Charges Incurred</h2>
+    </div>
+    <div class="col-md-6">
+      <mat-form-field>
+        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
+      </mat-form-field>
+    </div>
+  </div>
+  </mat-card>
+
+  <div class="example-container mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="name" sticky>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amount">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
+      <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountOutstanding">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount Outstanding </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountOutstanding}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountPaid">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount Paid </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountWaived">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount Waived </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountWaived}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountWrittenOff" mat-sort-header>
+      <th mat-header-cell *matHeaderCellDef> Written Off </th>
+      <td mat-cell *matCellDef="let element"> {{element.amountWrittenOff}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="dueDate" mat-sort-header>
+      <th mat-header-cell *matHeaderCellDef> Due Date </th>
+      <td mat-cell *matCellDef="let element"> {{element.dueDate}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <mat-paginator
+   (page)="handlePage($event)"
+    [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+      [showFirstLastButtons]="true"
+       [length]="totalSize"
+       [pageIndex]="currentPage"></mat-paginator>
+  </div>

src/app/charges/charges.component.scss

@@ -0,0 +1,69 @@
+.example-container {
+    width: 1000px;
+  overflow: auto;
+  display: block;
+  margin: auto;
+  }
+
+  table {
+    width: 1000px;
+  }
+
+  td.mat-column-star {
+    width: 20px;
+    padding-right: 8px;
+  }
+
+  th.mat-column-position, td.mat-column-position {
+    padding-left: 8px;
+  }
+
+  .mat-table-sticky:first-child {
+    border-right: 1px solid #e0e0e0;
+  }
+
+  .mat-table-sticky:last-child {
+    border-left: 1px solid #e0e0e0;
+  }
+
+  mat-card{
+      margin:10px;
+      border-radius: 0px;
+  }
+
+  /* Smartphones (portrait and landscape) ----------- */
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+    /* Styles */
+    .example-container {
+        width: 100%;
+      overflow: auto;
+      }
+
+      table {
+        width: 800px;
+      }
+
+      td.mat-column-star {
+        width: 20px;
+        padding-right: 8px;
+      }
+
+      th.mat-column-position, td.mat-column-position {
+        padding-left: 8px;
+      }
+
+      .mat-table-sticky:first-child {
+        border-right: 1px solid #e0e0e0;
+      }
+
+      .mat-table-sticky:last-child {
+        border-left: 1px solid #e0e0e0;
+      }
+
+      mat-card{
+          margin:10px;
+          border-radius: 0px;
+      }
+
+    }
+

src/app/charges/charges.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { ChargesService } from '../services/charges.service';
+import { Charges } from '../models/Charges';
+
+
+
+@Component({
+  selector: 'app-charges',
+  templateUrl: './charges.component.html',
+  styleUrls: ['./charges.component.scss']
+})
+export class ChargesComponent implements OnInit {
+
+  displayedColumns: string[] = ['name', 'amount', 'amountOutstanding', 'amountPaid', 'amountWaived', 'amountWrittenOff', 'dueDate'];
+  pageSizeOptions = [5, 10, 15, 20];
+  constructor(private chargesService: ChargesService) { }
+  charges: any;
+  dataSource: MatTableDataSource <Charges>;
+
+  tempSource: MatTableDataSource <Charges>;
+
+  sortedData: Charges[];
+
+  pageSize = 10;
+  currentPage = 0;
+  totalSize = 0;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  public handlePage(e: any) {
+    this.currentPage = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.iterator();
+  }
+  private iterator() {
+    const end = (this.currentPage + 1) * this.pageSize;
+    const start = this.currentPage * this.pageSize;
+    const part = this.charges.slice(start, end);
+    this.dataSource = part;
+  }
+  ngOnInit() {
+    this.chargesService.getCharges().subscribe((data: any) => {
+      this.charges = data.pageItems;
+      console.log('Charges :' + this.charges);
+      this.dataSource = new MatTableDataSource(this.charges);
+      this.tempSource = this.dataSource;
+      this.dataSource.paginator = this.paginator;
+      this.totalSize = this.charges.length;
+      this.dataSource.sort = this.sort;
+      this.iterator();
+    });
+
+  }
+  applyFilter(filterValue: string) {
+    this.dataSource = this.tempSource;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+}

src/app/models/Charges.ts

@@ -0,0 +1,9 @@
+export class Charges {
+    amount: number;
+    amountOutstanding: number;
+    amountPaid: number;
+    amountWaived: number;
+    amountWrittenOff: number;
+    dueDate: string;
+    name: string;
+}

src/app/services/charges.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Charges } from '../models/Charges';
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json',
+'Fineract-Platform-TenantId': 'default',
+Authorization: 'Basic bWlmb3M6cGFzc3dvcmQ=' })
+};
+@Injectable({
+  providedIn: 'root'
+})
+export class ChargesService {
+
+  constructor(private http: HttpClient) { }
+
+  getCharges(): Observable<any[]> {
+    return this.http.get<any[]>
+    ('https://demo.openmf.org/fineract-provider/api/v1/clients/1/charges?username=mifos&password=password', httpOptions);
+  }
+}