Display Fineract version and build (#1848)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/products/loan-products/create-loan-product/create-loan-product.component.html

@@ -58,6 +58,17 @@
 
     </mat-step>
 
+    <mat-step *ngIf="isAdvancePaymentStrategy">
+
+      <ng-template matStepLabel>PAYMENT STRATEGY</ng-template>
+
+      <mifosx-loan-product-payment-strategy-step
+        [loanProductsTemplate]="loanProductsTemplate"
+      >
+      </mifosx-loan-product-payment-strategy-step>
+
+    </mat-step>
+
     <mat-step>
 
       <ng-template matStepLabel>CHARGES</ng-template>

src/app/products/loan-products/create-loan-product/create-loan-product.component.ts

@@ -8,11 +8,11 @@ import { LoanProductCurrencyStepComponent } from '../loan-product-stepper/loan-p
 import { LoanProductTermsStepComponent } from '../loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component';
 import { LoanProductSettingsStepComponent } from '../loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component';
 import { LoanProductChargesStepComponent } from '../loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component';
+import { LoanProductPaymentStrategyStepComponent } from '../loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component';
 import { LoanProductAccountingStepComponent } from '../loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component';
 
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
-import { GlobalConfiguration } from 'app/system/configurations/global-configurations-tab/configuration.model';
 import { LoanProducts } from '../loan-products';
 
 @Component({
@@ -26,6 +26,7 @@ export class CreateLoanProductComponent implements OnInit {
   @ViewChild(LoanProductCurrencyStepComponent, { static: true }) loanProductCurrencyStep: LoanProductCurrencyStepComponent;
   @ViewChild(LoanProductTermsStepComponent, { static: true }) loanProductTermsStep: LoanProductTermsStepComponent;
   @ViewChild(LoanProductSettingsStepComponent, { static: true }) loanProductSettingsStep: LoanProductSettingsStepComponent;
+  @ViewChild(LoanProductPaymentStrategyStepComponent, { static: true }) loanProductPaymentStrategyStep: LoanProductPaymentStrategyStepComponent;
   @ViewChild(LoanProductChargesStepComponent, { static: true }) loanProductChargesStep: LoanProductChargesStepComponent;
   @ViewChild(LoanProductAccountingStepComponent, { static: true }) loanProductAccountingStep: LoanProductAccountingStepComponent;
 
@@ -33,6 +34,8 @@ export class CreateLoanProductComponent implements OnInit {
   accountingRuleData = ['None', 'Cash', 'Accrual (periodic)', 'Accrual (upfront)'];
   itemsByDefault: any[] = [];
 
+  isAdvancePaymentStrategy = false;
+
    /**
     * @param {ActivatedRoute} route Activated Route.
     * @param {ProductsService} productsService Product Service.
@@ -63,7 +66,9 @@ export class CreateLoanProductComponent implements OnInit {
   }
 
   get loanProductCurrencyForm() {
-    return this.loanProductCurrencyStep.loanProductCurrencyForm;
+    if (this.loanProductCurrencyStep != null) {
+      return this.loanProductCurrencyStep.loanProductCurrencyForm;
+    }
   }
 
   get loanProductTermsForm() {
@@ -78,7 +83,12 @@ export class CreateLoanProductComponent implements OnInit {
     return this.loanProductAccountingStep.loanProductAccountingForm;
   }
 
+  get loanProductPaymentStrategyForm() {
+    return this.loanProductPaymentStrategyStep.loanProductPaymentStrategyForm;
+  }
+
   get loanProductFormValid() {
+    this.isAdvancePaymentStrategy = (this.loanProductSettingsStep.loanProductSettings.transactionProcessingStrategyCode === 'advanced-payment-allocation-strategy');
     return (
       this.loanProductDetailsForm.valid &&
       this.loanProductCurrencyForm.valid &&

src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.html

@@ -0,0 +1,48 @@
+<div class="container space-top" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <mat-form-field fxFlex="31%">
+    <mat-label>Transaction Type</mat-label>
+    <mat-select [formControl]="transactionType">
+      <mat-option *ngFor="let job of transactionTypeOptions" [value]="transactionType">
+        {{ transactionType }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div class="action-button" fxLayoutGap="25px">
+    <button mat-raised-button color="primary" (click)="addTransactionType()">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add Transaction Type
+    </button>
+  </div>
+
+  <div class="mat-elevation-z8 container">
+
+    <table mat-table [dataSource]="transactionTypesData" #table cdkDropList [cdkDropListData]="transactionTypesData"
+      (cdkDropListDropped)="dropTable($event)">
+
+      <ng-container matColumnDef="transactionName">
+        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.stepName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="transactionOrder">
+        <th mat-header-cell *matHeaderCellDef> Order </th>
+        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.order }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let row; let rowIndex = index">
+          <button type="button" mat-icon-button color="warn" (click)="removeTransactionType(rowIndex)" matTooltip="Delete"
+            matTooltipPosition="left">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+
+</div>

src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.spec.ts

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

src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.ts

@@ -0,0 +1,73 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTable } from '@angular/material/table';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+@Component({
+  selector: 'mifosx-loan-product-payment-strategy-step',
+  templateUrl: './loan-product-payment-strategy-step.component.html',
+  styleUrls: ['./loan-product-payment-strategy-step.component.scss']
+})
+export class LoanProductPaymentStrategyStepComponent implements OnInit {
+
+  @Input() loanProductsTemplate: any;
+  loanProductPaymentStrategyForm: FormGroup;
+
+  transactionTypesData: any = [];
+  transactionTypeOptions: any = [];
+
+  transactionType = new FormControl('', Validators.required);
+
+  stepOrderHasChanged = false;
+  @ViewChild('table') table: MatTable<any>;
+
+  /** Columns to be displayed in the table. */
+  displayedColumns: string[] = ['transactionName', 'transactionOrder', 'actions'];
+
+  constructor(private formBuilder: FormBuilder,
+    private dialog: MatDialog) {
+      this.createForm();
+  }
+
+  ngOnInit(): void {
+    this.transactionTypesData = [];
+  }
+
+  createForm(): void {
+    this.loanProductPaymentStrategyForm = this.formBuilder.group({
+      'transactionType': ['', Validators.required],
+    });
+  }
+
+  addTransactionType(): void {
+    console.log(this.transactionType.value);
+    this.transactionTypesData.append(this.transactionType.value);
+  }
+
+  removeTransactionType(index: number) {
+    const dialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `this` }
+    });
+    dialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.transactionTypesData.splice(index, 1);
+        this.transactionTypesData = this.transactionTypesData.concat([]);
+        this.transactionTypesData = [...this.transactionTypesData];
+        this.stepOrderHasChanged = true;
+      }
+    });
+  }
+
+
+  dropTable(event: CdkDragDrop<any[]>) {
+    const prevIndex = this.transactionTypesData.findIndex((d: any) => d === event.item.data);
+    moveItemInArray(this.transactionTypesData, prevIndex, event.currentIndex);
+    this.transactionTypesData = [...this.transactionTypesData];
+    this.table.renderRows();
+    this.stepOrderHasChanged = true;
+  }
+
+
+}

src/app/products/products.module.ts

@@ -116,6 +116,7 @@ import { RecurringDepositDatatableTabComponent } from './recurring-deposit-produ
 import { RecurringDepositGeneralTabComponent } from './recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component';
 import { ShareProductGeneralTabComponent } from './share-products/view-share-product/share-product-general-tab/share-product-general-tab.component';
 import { ShareProductDatatableTabComponent } from './share-products/view-share-product/share-product-datatable-tab/share-product-datatable-tab.component';
+import { LoanProductPaymentStrategyStepComponent } from './loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component';
 
 /**
  * Products Module
@@ -136,6 +137,7 @@ import { ShareProductDatatableTabComponent } from './share-products/view-share-p
     LoanProductCurrencyStepComponent,
     LoanProductTermsStepComponent,
     LoanProductSettingsStepComponent,
+    LoanProductPaymentStrategyStepComponent,
     LoanProductChargesStepComponent,
     LoanProductAccountingStepComponent,
     LoanProductPreviewStepComponent,

src/app/shared/footer/footer.component.html

@@ -1,11 +1,25 @@
 <div fxLayout="column" id="footer" class="m-b-20">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">Mifos <b>{{ versions.mifos }}</b> - <b>{{
+  <div fxLayout="column" class="m-b-20 content">
-      hash }}</b></p>
+
-  <p *ngIf="versions.fineract" fxFlexAlign="center" class="footer-content">Fineract <b>{{ versions.fineract.version }}</b></p>
+  <table>
-  <p fxFlexAlign="center" class="footer-content" *ngIf="isBusinessDateDefined">Current Business Date: <b>{{ businessDate
+    <tr>
-      | date: 'EEEE, MMMM dd, y' }}</b></p>
+      <td class="footer-content">Mifos</td>
-  <p fxFlexAlign="center" class="footer-content" *ngIf="displayBackEndInfo"><b>{{ server }}</b></p>
+      <td class="right footer-content"><b>{{ versions.mifos }}</b> - <b>{{ hash }}</b></td>
+    </tr>
+    <tr>
+      <td class="footer-content">Fineract</td>
+      <td class="right footer-content"><b>{{ versions.fineract.version[0] }}</b> - <b>{{ versions.fineract.version[1] }}</b></td>
+    </tr>
+    <tr *ngIf="isBusinessDateDefined">
+      <td class="footer-content">Current Business Date:</td>
+      <td class="center footer-content"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
+    </tr>
+    <tr *ngIf="displayBackEndInfo">
+      <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
+    </tr>
+  </table>
+  </div>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate }} {{ 'labels.texts.by' | translate }} Mifos
   </p>

src/app/shared/footer/footer.component.scss

@@ -1,10 +1,25 @@
 #footer {
+  align-items: center;
+
+  .content {
+    max-width: 30%;
+
+    .footer-content {
+      margin: 0;
+    }
+  }
+
   .divider {
     margin: 2.5rem 1rem 0.5rem;
     width: 4rem;
   }
 
-  .footer-content {
+  table {
-    margin: 0;
+    border: none;
+
+    tr:nth-child(even) {
+      background-color: transparent;
+    }
   }
+
 }

src/app/shared/footer/footer.component.ts

@@ -67,10 +67,10 @@ export class FooterComponent implements OnInit, OnDestroy {
     this.getConfigurations();
     this.server = this.settingsService.server;
     this.versionService.getBackendInfo().subscribe((data: any) => {
-      const regExp = /0.0.0/gi;
+      const buildVersion: string = data.git.build.version;
       this.versions.fineract = {
-        version: data.git.build.replace(regExp, data.git.closest.tag.name)
+        version: buildVersion.split('-')
-      }
+      };
     });
   }
 
@@ -92,6 +92,8 @@ export class FooterComponent implements OnInit, OnDestroy {
           this.timer = setTimeout(() => { this.getConfigurations(); }, 60000);
         }
       });
+    } else {
+      clearTimeout(this.timer);
     }
   }