feat: added data table for transactions of saving account (#1844)

* feat: added data table for transactions of saving account

Now we can add the data table for transactions entity type of saving account and also we can edit,delete and create the datatable.

Fixes: #1726

* made changes in the comments

src/app/savings/common-resolvers/transaction-datatable.resolver.ts

@@ -0,0 +1,28 @@
+// Angular Imports
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+// rxjs Imports 
+import { Observable, of } from 'rxjs';
+
+// Custom Service
+import { SavingsService } from '../savings.service';
+
+@Injectable()
+export class TransactionDatatableResolver implements Resolve<Object> {
+  /**
+   * 
+   * @param {SavingsService} savingsService 
+   */
+  constructor(private savingsService: SavingsService) { }
+  /**
+   * Returns the Transactions Account's Datatable data.
+   * @returns {Observable<any>}
+   */
+
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const accountId = route.parent.parent.paramMap.get('id');
+    const datatableName = route.paramMap.get('datatableName');
+    return this.savingsService.getSavingsTransactionDatatable(accountId, datatableName);
+  }
+}

src/app/savings/common-resolvers/transaction-datatables.resolver.ts

@@ -0,0 +1,27 @@
+// Angular Imports
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+// rxjs Imports 
+import { Observable, of } from 'rxjs';
+
+// Custom Service
+import { SavingsService } from '../savings.service';
+
+@Injectable()
+export class TransactionDatatablesResolver implements Resolve<Object> {
+
+  /**
+   * 
+   * @param savingsService Savings Service
+   */
+  constructor(private savingsService: SavingsService) { }
+  /**
+   * 
+   * @param route 
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.savingsService.getSavingsTransactionDatatables();
+  }
+}

src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html

@@ -0,0 +1,9 @@
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Saving Account Transaction"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>

src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.spec.ts

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

src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-datatable-transaction-tab',
+  templateUrl: './datatable-transaction-tab.component.html',
+  styleUrls: ['./datatable-transaction-tab.component.scss']
+})
+
+export class DatatableTransactionTabComponent {
+  /** Transaction Id */
+  entityId: string;
+  /** Savings Datatable */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('id');
+    this.route.data.subscribe((data: { transactionDatatable: any }) => {
+      this.entityDatatable = data.transactionDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+  }
+
+}

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -1,8 +1,30 @@
-<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%"
+<mat-card class="savings-account-card">
-  *ngIf="!(transactionData.interestedPostedAsOn === false && (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3))">
+  <!-- Header -->
+  <mat-card-header fxLayout="column" class="header">
+    <mat-card-title-group class="header-title-group">
+      <div class="profile-image-container">
+        <div>
+          <img mat-card-md-image class="profile-image" matTooltip="Savings Account"
+            [src]="'assets/images/savings_account_placeholder.png'">
+        </div>
+      </div>
+
+      <div class="mat-typography account-card-title">
+        <mat-card-title fxLayout="row" fxLayout.lt-md="column">
+          <h3 fxFlex="95%">
+            Transaction Id : {{transactionData.id}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{transactionData.id}}"></mifosx-account-number>
+            </span>
+          </h3>
+          <div fxFlex="15%">
+            <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+              (click)="undoTransaction()" [disabled]="transactionData.reversed">
+              <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+            </button>
+          </div>
           <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-    <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true'
+            <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true'
-        || transactionData.transactionType.id==3 || transactionData.transactionType.id==17" [routerLink]="'edit'">
+                || transactionData.transactionType.id===3 || transactionData.transactionType.id===17" [routerLink]="'edit'">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
             </button>
           </span>
@@ -12,129 +34,77 @@
               <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Release Amount
             </button>
           </span>
-  <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+        </mat-card-title>
-    (click)="undoTransaction()" [disabled]="transactionData.reversed">
-    <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
-  </button>
       </div>
 
-<div class="container">
+    </mat-card-title-group>
+  </mat-card-header>
 
-  <mat-card>
+  <!-- Content -->
-
+  <mat-card-content class="content">
-    <mat-card-content>
+    <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%">
-
+      <div fxFlex="96%">
-      <div fxLayout="row wrap" class="content">
+        <h4 class="table-headers">Transaction Summary</h4>
-
+        <table>
-        <div fxFlex="50%" class="mat-body-strong">
+          <tbody>
-          Transaction Id
+            <tr *ngIf="transactionData.transactionType.value">
+              <td>Transaction Type</td>
+              <td>{{transactionData.transactionType.value}}</td>
+            </tr>
+            <tr *ngIf="transactionData.date">
+              <td>Transaction Date</td>
+              <td>{{transactionData.date | dateFormat}}</td>
+            </tr>
+            <tr *ngIf="transactionData.currency.name">
+              <td>Currency</td>
+              <td>{{transactionData.currency.name}}</td>
+            </tr>
+            <tr *ngIf="transactionData.amount">
+              <td>Amount</td>
+              <td>{{transactionData.amount | currency}}</td>
+            </tr>
+            <tr *ngIf="transactionData.note">
+              <td>Note</td>
+              <td>{{transactionData.note}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.paymentType">
+              <td>{{ 'Payment Type' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.paymentType.name}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.accountNumber">
+              <td>{{ 'Account Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.accountNumber}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.checkNumber">
+              <td>{{ 'Cheque Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.checkNumber}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.routingCode">
+              <td>{{ 'Routing Code' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.routingCode}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.receiptNumber">
+              <td>{{ 'Receipt Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.receiptNumber}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.bankNumber">
+              <td>{{ 'Bank Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.bankNumber}}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.id }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Type
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.transactionType.value }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.date | dateFormat }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Currency
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.currency.name }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Amount
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.amount | currency }} {{ transactionData.currency.code }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Note
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.note }}
-        </div>
-
-        <mat-divider *ngIf="transactionData.paymentDetailData" [inset]="true"></mat-divider>
-
-        <ng-container *ngIf="transactionData.paymentDetailData">
-
-          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            {{ 'Payment Type' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
-            {{ transactionData.paymentDetailData.paymentType.name }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Account No.' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.accountNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Cheque Number' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.checkNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            {{ 'Routing Code' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
-            {{ transactionData.paymentDetailData.routingCode }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Receipt No.' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.receiptNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Bank No.' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.bankNumber }}
     </div>
 
+    <nav mat-tab-nav-bar class="navigation-tabs">
+      <ng-container *ngFor="let transactionDatatable of entityDatatable">
+        <a mat-tab-link *mifosxHasPermission="'READ_' + transactionDatatable.registeredTableName"
+        [routerLink]="['./datatables',transactionDatatable.registeredTableName]" routerLinkActive #datatable="routerLinkActive"
+         [active]="datatable.isActive">
+          {{transactionDatatable.registeredTableName}}
+        </a>
       </ng-container>
-
+    </nav>
-      </div>
+    <router-outlet></router-outlet>
-
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
-      </div>
   </mat-card-content>
-
 </mat-card>
-
-</div>

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss

@@ -1,10 +1,54 @@
-.container {
+.savings-account-card {
-  max-width: 37rem;
+  margin: 0 auto;
-  
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  .header {
+    padding: 1%;
+    background-color:rgb(16, 116, 185);
+    .header-title-group {
+      .account-card-title {
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
+    }
+    .account-actions {
+      align-self: flex-end;
+      margin: 0 1%;
+      i {
+        margin-bottom: 2px;
+        margin-right: 4px;
+      }
+    }
+  }
+  .navigation-tabs {
+    background-color: #f2f2f2;
+    overflow: auto;
+  }
   .content {
-    div {
+    .savings-account-tables {
-      margin: 1rem 0;
+      padding: 1%;
-      word-wrap: break-word;
+      margin: 1%;
+      .table-headers {
+        margin: 0;
+        padding: 6px;
+      }
+      td {
+        padding: 3px;
       }
     } 
   }
+  i, img:hover {
+    cursor: pointer;
+  }
+}

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts

@@ -26,7 +26,12 @@ export class ViewTransactionComponent {
   /** Transaction data. */
   transactionData: any;
 
-  accountId: string;
+  accountId: any;
+  /** Transaction Data Tables */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
+  isActive:false;
 
   /**
    * Retrieves the Transaction data from `resolve`.
@@ -43,9 +48,10 @@ export class ViewTransactionComponent {
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
-    this.route.data.subscribe((data: { savingsAccountTransaction: any }) => {
+            this.route.data.subscribe((data: { savingsAccountTransaction: any,transactionDatatables:any}) => {
                   this.accountId = this.route.snapshot.params['savingAccountId'];
                   this.transactionData = data.savingsAccountTransaction;
+                  this.entityDatatable = data.transactionDatatables;
                 });
   }
 

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

@@ -8,6 +8,7 @@ import { extract } from '../core/i18n/i18n.service';
 /** Custom Components */
 import { SavingsAccountViewComponent } from './savings-account-view/savings-account-view.component';
 import { TransactionsTabComponent } from './savings-account-view/transactions-tab/transactions-tab.component';
+import { DatatableTransactionTabComponent } from './savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component';
 import { SavingAccountActionsComponent } from './saving-account-actions/saving-account-actions.component';
 import { ChargesTabComponent } from './savings-account-view/charges-tab/charges-tab.component';
 import { StandingInstructionsTabComponent } from './savings-account-view/standing-instructions-tab/standing-instructions-tab.component';
@@ -26,6 +27,8 @@ import { GsimAccountComponent } from './gsim-account/gsim-account.component';
 import { SavingsAccountViewResolver } from './common-resolvers/savings-account-view.resolver';
 import { SavingsDatatableResolver } from './common-resolvers/savings-datatable.resolver';
 import { SavingsDatatablesResolver } from './common-resolvers/savings-datatables.resolver';
+import { TransactionDatatableResolver } from './common-resolvers/transaction-datatable.resolver';
+import { TransactionDatatablesResolver } from './common-resolvers/transaction-datatables.resolver';
 import { SavingsAccountTemplateResolver } from './common-resolvers/savings-account-template.resolver';
 import { SavingsAccountAndTemplateResolver } from './common-resolvers/savings-account-and-template.resolver';
 import { SavingsAccountTransactionResolver } from './common-resolvers/savings-account-transaction.resolver';
@@ -141,8 +144,24 @@ const routes: Routes = [
             path: '',
             component: ViewTransactionComponent,
             resolve: {
-              savingsAccountTransaction: SavingsAccountTransactionResolver
+              savingsAccountTransaction: SavingsAccountTransactionResolver,
+              transactionDatatables: TransactionDatatablesResolver
+            },
+            children: [
+              {
+                path: 'datatables',
+                children: [{
+                  path: ':datatableName',
+                  component: DatatableTransactionTabComponent,
+                  data: { title: extract('View Data table'), routeParamBreadcrumb: 'datatableName' },
+                  resolve: {
+                    transactionDatatable: TransactionDatatableResolver
                   }
+                }
+                ]
+
+              }
+            ]
           },
           {
             path: 'edit',
@@ -232,6 +251,8 @@ const routes: Routes = [
   providers: [SavingsAccountViewResolver,
     SavingsDatatablesResolver,
     SavingsDatatableResolver,
+    TransactionDatatableResolver,
+    TransactionDatatablesResolver,
     SavingsAccountTemplateResolver,
     SavingsAccountAndTemplateResolver,
     SavingsAccountTransactionResolver,

src/app/savings/savings.module.ts

@@ -49,6 +49,7 @@ import { ManageSavingsAccountComponent } from './saving-account-actions/manage-s
 import { ReleaseAmountDialogComponent } from './savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component';
 import { SavingsDocumentsTabComponent } from './savings-account-view/savings-documents-tab/savings-documents-tab.component';
 import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.component';
+import { DatatableTransactionTabComponent } from './savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component';
 
 
 /**
@@ -104,7 +105,8 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
     ManageSavingsAccountComponent,
     ReleaseAmountDialogComponent,
     SavingsDocumentsTabComponent,
-    NotesTabComponent
+    NotesTabComponent,
+    DatatableTransactionTabComponent
   ],
   providers: [ ]
 })

src/app/savings/savings.service.ts

@@ -107,6 +107,24 @@ export class SavingsService {
     return this.http.get(`/datatables/${datatableName}/${accountId}`, { params: httpParams });
   }
 
+  /**
+   * @returns {Observable<any>}
+   */
+  getSavingsTransactionDatatables(): Observable<any> {
+    const httpParams = new HttpParams().set('apptable', 'm_savings_account_transaction');
+    return this.http.get(`/datatables`, { params: httpParams });
+  }
+
+  /**
+   * @param accountId account Id of savings account to get datatable for.
+   * @param datatableName Data table name.
+   * @returns {Observable<any>}
+   */
+  getSavingsTransactionDatatable(transactionId: string, datatableName: string): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.get(`/datatables/${datatableName}/${transactionId}`, { params: httpParams });
+  }
+  
   /**
    * @param accountId account Id of savings account to get add datatable entry for.
    * @param datatableName Data Table name.

src/app/system/manage-data-tables/app-table-data.ts

@@ -6,6 +6,7 @@ export const appTableData: { displayValue: string, value: string }[] = [
   { displayValue: 'Loan Account', value: 'm_loan' },
   { displayValue: 'Saving Account', value: 'm_savings_account' },
   { displayValue: 'Loan Product', value: 'm_product_loan' },
+  { displayValue: 'Saving Account Transaction', value: 'm_savings_account_transaction' },
   { displayValue: 'Savings Product', value: 'm_savings_product' },
   { displayValue: 'Share Product', value: 'm_share_product' }
 ];