feat: add share account page

- Add Shares module
- Add View share account component
- Add Shares service

Fixes : openMF#224

src/app/app.module.ts

@@ -33,6 +33,7 @@ import { AccountingModule } from './accounting/accounting.module';
 import { SelfServiceModule } from './self-service/self-service.module';
 import { SystemModule } from './system/system.module';
 import { ProductsModule } from './products/products.module';
+import { SharesModule } from './shares/shares.module';
 
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
@@ -62,6 +63,7 @@ import { AppRoutingModule } from './app-routing.module';
     SelfServiceModule,
     SystemModule,
     ProductsModule,
+    SharesModule,
     AppRoutingModule
   ],
   declarations: [WebAppComponent, NotFoundComponent],

src/app/shares/shares-routing.module.ts

@@ -0,0 +1,48 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+/** Routing Imports */
+import { Route } from '../core/route/route.service';
+
+/** Translation Imports */
+import { extract } from '../core/i18n/i18n.service';
+
+/** Custom Components */
+import { SharesComponent } from './shares.component';
+import { ViewshareaccountComponent } from './viewshareaccount/viewshareaccount.component';
+
+import { ViewshareaccountResolver } from './viewshareaccount/viewshareaccount.resolver';
+
+/** Home and Dashboard Routes */
+const routes: Routes = [
+  Route.withShell([
+    {
+      path: 'shares',
+      component: SharesComponent,
+      data: { title: extract('Shares') }
+    },
+    {
+      path: 'viewshareaccount/:shareAccountId',
+      component: ViewshareaccountComponent,
+      data: { title: extract('View Share Account'), breadcrumb: 'View Share Account' },
+      resolve: {
+        shareAccount: ViewshareaccountResolver
+      }
+    }
+  ])
+];
+
+/**
+ * Home Routing Module
+ *
+ * Configures the home and dashboard routes.
+ */
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: [
+    ViewshareaccountResolver
+  ]
+})
+export class SharesRoutingModule {}

src/app/shares/shares.component.html

@@ -0,0 +1,3 @@
+<p>
+  shares works!
+</p>

src/app/shares/shares.component.spec.ts

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

src/app/shares/shares.component.ts

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

src/app/shares/shares.module.ts

@@ -0,0 +1,23 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+
+/** Custom Modules */
+import { SharedModule } from '../shared/shared.module';
+import { SharesRoutingModule } from './shares-routing.module';
+
+/** Custom Components */
+import { SharesComponent } from './shares.component';
+import { ViewshareaccountComponent } from './viewshareaccount/viewshareaccount.component';
+
+/**
+ * Shares Module
+ *
+ */
+@NgModule({
+  imports: [SharedModule, SharesRoutingModule],
+  declarations: [
+    SharesComponent,
+    ViewshareaccountComponent
+  ]
+})
+export class SharesModule {}

src/app/shares/shares.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SharesService } from './shares.service';
+
+describe('SharesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SharesService = TestBed.get(SharesService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/shares/shares.service.ts

@@ -0,0 +1,35 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+/**
+ * Loan Service
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SharesService {
+
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
+
+  /**
+   * @param shareAccountId Share Account Id
+   * @returns {Observable<any>} Share Account Details
+   */
+  getShareAccount(shareAccountId: any): Observable<any> {
+    return this.http.get(`/accounts/share/${shareAccountId}`);
+  }
+
+  /**
+   * @param shareAccountId Share Account Id
+   * @returns {Observable<any>} Share Account Details
+   */
+  deleteShareAccount(shareAccountId: any): Observable<any> {
+    return this.http.delete(`/accounts/share/${shareAccountId}`);
+  }
+}

src/app/shares/viewshareaccount/charges.model.ts

@@ -0,0 +1,10 @@
+export interface Charge {
+  name: string;
+  feeOrPenalty: string;
+  paymentDueAt: string;
+  calculationType: string;
+  due: string;
+  paid: string;
+  waived: string;
+  outstanding: string;
+}

src/app/shares/viewshareaccount/dividends.model.ts

@@ -0,0 +1,6 @@
+export interface Dividend {
+  transactionDate: string;
+  amount: string;
+  transactionRef: string;
+  status: string;
+}

src/app/shares/viewshareaccount/purchased-shares.model.ts

@@ -0,0 +1,8 @@
+export interface PurchasedShare {
+  transactionDate: string;
+  transactionType: string;
+  totalShares: number;
+  purchasedOrRedeemedPrice: string;
+  chargeAmount: string;
+  amountRecievedOrReturned: string;
+}

src/app/shares/viewshareaccount/viewshareaccount.component.html

@@ -0,0 +1,162 @@
+<div class="container">
+  <span class="heading">
+    <strong>{{ shareAccountDetails.productName }}(#{{ shareAccountDetails.accountNo }})</strong>
+  </span>
+  <hr/>
+  <div class="pull-right btn-group">
+    <button *ngFor="let button of buttons.singlebuttons"
+      (click)="clickEvent(button.name, shareAccountDetails.id)" mat-raised-button color="primary" class="btn-group" ><i
+        class="{{ button.icon }}"></i> {{ button.name }}</button>
+    <button mat-raised-button color="primary" [matMenuTriggerFor]="more">More <i class="fa fa-angle-down"></i></button>
+    <mat-menu #more="matMenu">
+      <button *ngFor="let button of buttons.options" (click)="clickEvent(button.name, shareAccountDetails.id)" mat-menu-item>{{ button.name }}</button>
+    </mat-menu>
+  </div>
+  <div class="col-sm-12 col-md-12">
+    <div class="row">
+      <div class="col-sm-6 col-md-6">
+        <table mat-table [dataSource]="accountTableDataSource" class="table table-bordered table-striped">
+          <ng-container matColumnDef="details">
+            <td mat-cell *matCellDef="let element"> {{ element.details }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="values">
+            <td mat-cell *matCellDef="let element"> {{ element.value }} </td>
+          </ng-container>
+
+          <tr mat-row *matRowDef="let row; columns: displayedColumns.accountTable;"></tr>
+        </table>
+      </div>
+      <div class="col-sm-6 col-md-6">
+        <table mat-table [dataSource]="approveSharesTableDataSource" class="table table-bordered table-striped">
+          <ng-container matColumnDef="details">
+            <td mat-cell *matCellDef="let element"> {{ element.details }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="values">
+            <td mat-cell *matCellDef="let element"> {{ element.value }} </td>
+          </ng-container>
+
+          <tr mat-row *matRowDef="let row; columns: displayedColumns.approvedSharesTable;"></tr>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div>
+      <mat-tab-group>
+      <mat-tab *ngIf="purchasedSharesTableShow" label="Transactions Overview">
+        <br>
+        <table mat-table [dataSource]="purchasedSharesTableDataSource" class="mat-elevation-z8">
+          <ng-container matColumnDef="transactionDate">
+            <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+            <td mat-cell *matCellDef="let purchasedShare"> {{ purchasedShare.transactionDate }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="transactionType">
+            <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+            <td mat-cell *matCellDef="let purchasedShare"> {{ purchasedShare.transactionType }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="totalShares">
+            <th mat-header-cell *matHeaderCellDef> Total Shares </th>
+            <td mat-cell *matCellDef="let purchasedShare"> {{ purchasedShare.totalShares }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="purchasedOrRedeemedPrice">
+            <th mat-header-cell *matHeaderCellDef> Purchased/Redeemed Price </th>
+            <td mat-cell *matCellDef="let purchasedShare"> {{ purchasedShare.purchasedOrRedeemedPrice }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="chargeAmount">
+            <th mat-header-cell *matHeaderCellDef> Charge Amount </th>
+            <td mat-cell *matCellDef="let purchasedShare"> {{ purchasedShare.chargeAmount }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="amountRecievedOrReturned">
+            <th mat-header-cell *matHeaderCellDef> Amount Recieved/Returned </th>
+            <td mat-cell *matCellDef="let purchasedShare"> {{ purchasedShare.amountRecievedOrReturned }} </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns.purchasedSharesTable"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns.purchasedSharesTable;"></tr>
+        </table>
+      </mat-tab>
+
+      <mat-tab *ngIf="chargeTableShow" label="Charges">
+        <br>
+        <table mat-table [dataSource]="chargeTableDataSource" class="mat-elevation-z8">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> Name </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="feeOrPenalty">
+            <th mat-header-cell *matHeaderCellDef> Fee/Penalty </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.feeOrPenalty }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="paymentDueAt">
+            <th mat-header-cell *matHeaderCellDef> Payment due at </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.paymentDueAt }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="calculationType">
+            <th mat-header-cell *matHeaderCellDef> Calculation Type </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.calculationType }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="due">
+            <th mat-header-cell *matHeaderCellDef> Due </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.due }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="paid">
+            <th mat-header-cell *matHeaderCellDef> Paid </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.paid }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="waived">
+            <th mat-header-cell *matHeaderCellDef> Waived </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.waived }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="outstanding">
+            <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+            <td mat-cell *matCellDef="let charge"> {{ charge.outstanding }} </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns.chargeTable"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns.chargeTable;"></tr>
+        </table>
+      </mat-tab>
+
+      <mat-tab *ngIf="showDividends" label="Dividends">
+        <br>
+        <table mat-table [dataSource]="dividendsTableDataSource" class="mat-elevation-z8">
+          <ng-container matColumnDef="transactionDate">
+            <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+            <td mat-cell *matCellDef="let dividend"> {{ dividend.transactionDate }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="amount">
+            <th mat-header-cell *matHeaderCellDef> Amount </th>
+            <td mat-cell *matCellDef="let dividend"> {{ dividend.amount }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="transactionRef">
+            <th mat-header-cell *matHeaderCellDef> Transaction Reference </th>
+            <td mat-cell *matCellDef="let dividend"> {{ dividend.transactionRef }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef> Status </th>
+            <td mat-cell *matCellDef="let dividend"> {{ dividend.status }} </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns.dividendsTable"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns.dividendsTable;"></tr>
+        </table>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>

src/app/shares/viewshareaccount/viewshareaccount.component.scss

@@ -0,0 +1,25 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.btn-group {
+  margin-left: 2px;
+  margin-right: 2px;
+  margin-bottom: 5px;
+}
+
+.table-bordered {
+  border: 1px solid #ddd;
+}
+
+.heading {
+  margin-left: 10px;
+  font-size:24px;
+}