feat: add view dividend details (share-products) (#1166)

Fixes: #1165

src/app/clients/clients-view/general-tab/general-tab.component.ts

@@ -103,8 +103,6 @@ export class GeneralTabComponent {
   }
 
   routeTransferFund(loanId: any) {
-    console.log('loanId: ', loanId);
-
     const queryParams: any = { loanId: loanId, accountType: 'fromloans' };
     this.router.navigate(['../', 'loans', loanId, 'transfer-funds', 'make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
   }

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

@@ -79,6 +79,8 @@ import { DividendsResolver } from './share-products/dividends-share-product/divi
 import { RecurringDepositProductsTemplateResolver } from './recurring-deposit-products/recurring-deposit-products-template.resolver';
 import { EditRecurringDepositProductComponent } from './recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component';
 import { RecurringDepositProductAndTemplateResolver } from './recurring-deposit-products/edit-recurring-deposit-product/recurring-deposit-product-and-template.resolver';
+import { ViewDividendComponent } from './share-products/view-dividend/view-dividend.component';
+import { ViewDividendDataResolver } from './share-products/view-dividend/view-dividend-data.resolver';
 
 /** Products Routes */
 const routes: Routes = [
@@ -231,6 +233,14 @@ const routes: Routes = [
                       resolve: {
                         shareProduct: ShareProductResolver
                       }
+                    },
+                    {
+                      path: ':dividendId',
+                      component: ViewDividendComponent,
+                      data: { title: extract('View Dividend'), routeParamBreadcrumb: 'dividendId' },
+                      resolve: {
+                        dividendData: ViewDividendDataResolver
+                      }
                     }
                   ]
                 }
@@ -440,7 +450,6 @@ const routes: Routes = [
             }
           ]
         },
-
         {
           path: 'charges',
           data: { title: extract('Charges'), breadcrumb: 'Charges' },
@@ -521,7 +530,8 @@ const routes: Routes = [
     TaxGroupResolver,
     DividendsResolver,
     RecurringDepositProductsTemplateResolver,
-    RecurringDepositProductAndTemplateResolver
+    RecurringDepositProductAndTemplateResolver,
+    ViewDividendDataResolver
   ]
 })
 export class ProductsRoutingModule { }

src/app/products/products.module.ts

@@ -88,6 +88,7 @@ import { RecurringDepositProductSettingsStepComponent } from './recurring-deposi
 import { RecurringDepositProductTermsStepComponent } from './recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component';
 import { EditRecurringDepositProductComponent } from './recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component';
 import { CreateDividendComponent } from './share-products/create-dividend/create-dividend.component';
+import { ViewDividendComponent } from './share-products/view-dividend/view-dividend.component';
 
 /**
  * Products Module
@@ -179,7 +180,8 @@ import { CreateDividendComponent } from './share-products/create-dividend/create
     RecurringDepositProductSettingsStepComponent,
     RecurringDepositProductTermsStepComponent,
     EditRecurringDepositProductComponent,
-    CreateDividendComponent
+    CreateDividendComponent,
+    ViewDividendComponent
   ],
   entryComponents: [
     DepositProductIncentiveFormDialogComponent,

src/app/products/products.service.ts

@@ -104,6 +104,20 @@ export class ProductsService {
     return this.http.post(`/shareproduct/${shareProductId}/dividend`, dividendData);
   }
 
+  getDividendData(shareProductId: any, dividendId: any): Observable<any> {
+    const httpParams = new HttpParams().set('dateFormat', 'dd MMMM yyyy')
+                                        .set('limit', '10')
+                                        .set('locale', 'en')
+                                        .set('offset', '0');
+    return this.http.get(`/shareproduct/${shareProductId}/dividend/${dividendId}`, { params: httpParams });
+  }
+
+  approveDividend(shareProductId: any, dividendId: any, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', 'approve');
+    return this.http.put(`/shareproduct/${shareProductId}/dividend/${dividendId}`, data, { params: httpParams });
+
+  }
+
   /**
    * @returns {Observable<any>} Recurring deposit products data
    */

src/app/products/share-products/dividends-share-product/dividends.component.html

@@ -44,7 +44,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="showDividend(row.id, row.status.value)" class="select-row"></tr>
 
     </table>
 

src/app/products/share-products/dividends-share-product/dividends.components.ts

@@ -1,7 +1,7 @@
  /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Dividends component.
@@ -29,7 +29,8 @@ export class ShareProductsDividendsComponent implements OnInit {
    * Retrieves the dividends data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
     this.route.data.subscribe((data: {dividends: any}) => {
       this.dividendData = data.dividends.pageItems;
     });
@@ -51,6 +52,11 @@ export class ShareProductsDividendsComponent implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
+  showDividend(dividendId: any, status: string) {
+    const queryParams: any = { status: status };
+    this.router.navigate([dividendId], { relativeTo: this.route, queryParams: queryParams });
+  }
+
   /**
    * Filters data in dividends table based on passed value.
    * @param {string} filterValue Value to filter data.

src/app/products/share-products/view-dividend/view-dividend-data.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ProductsService } from '../../products.service';
+
+/**
+ * Share products data resolver.
+ */
+@Injectable()
+export class ViewDividendDataResolver implements Resolve<Object> {
+
+  /**
+   * @param {ProductsService} productsService Products service.
+   */
+  constructor(private productsService: ProductsService) {}
+
+  /**
+   * Returns the share products data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const dividendId = route.paramMap.get('dividendId');
+    const shareProductId = route.parent.parent.paramMap.get('id');
+    return this.productsService.getDividendData(shareProductId, dividendId);
+  }
+
+}

src/app/products/share-products/view-dividend/view-dividend.component.html

@@ -0,0 +1,50 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" *ngIf="!isdividendPosted">
+  <button mat-raised-button color="primary" *mifosxHasPermission='"POST_DIVIDENDS"' (click)="postDividends()">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    Post Dividend
+  </button>
+</div>
+
+<div class="container">
+
+  <div fxLayout="row">
+    <mat-form-field fxFlex>
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
+    </mat-form-field>
+  </div>
+
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="clientName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Client Name </th>
+        <td mat-cell *matCellDef="let dividend"> {{ dividend.accountData.clientName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="shareAccount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Share Account </th>
+        <td mat-cell *matCellDef="let dividend"> {{ dividend.accountData.accountNo }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="dividendAmount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Dividend Amount </th>
+        <td mat-cell *matCellDef="let dividend"> {{ dividend.amount }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <td mat-cell *matCellDef="let dividend"> {{ dividend.status.value }} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+  </div>
+
+</div>

src/app/products/share-products/view-dividend/view-dividend.component.scss

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/app/products/share-products/view-dividend/view-dividend.component.spec.ts

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

src/app/products/share-products/view-dividend/view-dividend.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ProductsService } from 'app/products/products.service';
+
+@Component({
+  selector: 'mifosx-view-dividend',
+  templateUrl: './view-dividend.component.html',
+  styleUrls: ['./view-dividend.component.scss']
+})
+export class ViewDividendComponent implements OnInit {
+
+  dividendData: any;
+  status: any;
+  isdividendPosted = false;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  displayedColumns: string[] = ['clientName', 'shareAccount', 'dividendAmount', 'status'];
+  dataSource: MatTableDataSource<any>;
+
+  constructor(private route: ActivatedRoute,
+              private productsService: ProductsService,
+              private router: Router) {
+    this.route.data.subscribe((data: { dividendData: any }) => {
+      this.dividendData = data.dividendData;
+    });
+    this.status = this.route.snapshot.queryParams['status'];
+    if (this.status && (this.status === 'Dividend Approved' || this.status === 'Dividend Posted')) {
+      this.isdividendPosted = true;
+    }
+  }
+
+  ngOnInit() {
+    this.dataSource = new MatTableDataSource(this.dividendData.pageItems);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  postDividends() {
+    const shareProductId = this.route.parent.parent.snapshot.paramMap.get('id');
+    const dividendId = this.route.snapshot.paramMap.get('dividendId');
+    this.productsService.approveDividend(shareProductId, dividendId, { productId: shareProductId, dividendId: dividendId}).subscribe(() => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+}