GL view transaction enhanced (#1645)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/accounting/view-transaction/view-transaction.component.html

@@ -55,7 +55,7 @@
 
 </div>
 
-<div class="mat-elevation-z8 container">
+<div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
 
   <table mat-table [dataSource]="dataSource" matSort>
 
@@ -80,13 +80,13 @@
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Debit </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Debit </th>
-      <td mat-cell class="r-amount" *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
+      <td mat-cell class="r-amount" *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | number }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Credit </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Credit </th>
-      <td mat-cell class="r-amount" *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) + ' ' + transaction.amount }} </span></td>
+      <td mat-cell class="r-amount" *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | number }} </span></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -94,9 +94,8 @@
 
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons></mat-paginator>
+  <div fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column" class="action-bar">
-
-  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button type="button" color="primary" mat-raised-button (click)="goBack()">Back</button>
   </div>
+
 </div>

src/app/accounting/view-transaction/view-transaction.component.scss

@@ -13,9 +13,16 @@
 }
 
 table {
-  width: 100%;
+  width: 98%;
 
   .select-row:hover {
     cursor: pointer;
   }
 }
+
+.action-bar {
+  width: 98%;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts

@@ -67,7 +67,7 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    if (this.loansAccountTemplate.charges) {
+    if (this.loansAccountTemplate && this.loansAccountTemplate.charges) {
       this.chargesDataSource = this.loansAccountTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
     }
   }
@@ -81,6 +81,9 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
       if (this.loansAccountProductTemplate.overdueCharges) {
         this.overDueChargesDataSource = this.loansAccountProductTemplate.overdueCharges;
       }
+      if (this.loansAccountProductTemplate.charges) {
+        this.chargesDataSource = this.loansAccountProductTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
+      }
     }
   }
 

src/app/products/manage-tax-components/create-tax-component/create-tax-component.component.ts

@@ -21,7 +21,7 @@ export class CreateTaxComponentComponent implements OnInit {
   /** Minimum start date allowed. */
   minDate = new Date();
   /** Maximum start date allowed. */
-  maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 10));
+  maxDate = new Date();
   /** Tax Component form. */
   taxComponentForm: FormGroup;
   /** Tax Component template data. */
@@ -59,6 +59,8 @@ export class CreateTaxComponentComponent implements OnInit {
    * Creates the tax Component form
    */
   ngOnInit() {
+    this.minDate = this.settingsService.minAllowedDate;
+    this.maxDate = this.settingsService.maxAllowedDate;
     this.createTaxComponentForm();
     this.setConditionalControls();
   }

src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.html

@@ -36,7 +36,7 @@
 
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>Start Date</mat-label>
-            <input matInput [min]="minDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="taxComponentForm.controls.startDate.hasError('required')">

src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.ts

@@ -20,6 +20,8 @@ export class EditTaxComponentComponent implements OnInit {
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
+  /** Maximum start date allowed. */
+  maxDate = new Date();
   /** Tax Component form. */
   taxComponentForm: FormGroup;
   /** Tax Component data. */
@@ -49,6 +51,8 @@ export class EditTaxComponentComponent implements OnInit {
    * Creates the edit tax component form.
    */
   ngOnInit() {
+    this.minDate = this.settingsService.minAllowedDate;
+    this.maxDate = this.settingsService.maxAllowedDate;
     this.editTaxComponent();
   }
 

src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html

@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ taxComponentData.percentage }}
+          {{ taxComponentData.percentage | number }} %
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="taxComponentData.debitAccountType">
@@ -73,6 +73,9 @@
 
     </mat-card-content>
 
+    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../']">Back</button>
+    </div>
   </mat-card>
 
 </div>

src/app/settings/settings.service.ts

@@ -18,6 +18,7 @@ export class SettingsService {
   public static businessDateConfigName = 'enable_business_date';
   public static businessDateType = 'BUSINESS_DATE';
   public static cobDateType = 'COB_DATE';
+  minAllowedDate = new Date(1950, 0, 1);
   maxAllowedDate = new Date(2100, 0, 1);
 
   constructor(private alertService: AlertService,
@@ -150,6 +151,13 @@ export class SettingsService {
     return localStorage.getItem('mifosXServerBusinessDateEnabled');
   }
 
+  /**
+   * Returns min Past date
+   */
+  get minPastDate(): Date {
+    return this.minAllowedDate;
+  }
+
   /**
    * Returns max Future date
    */

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

@@ -1,12 +1,13 @@
 export const appTableData: { displayValue: string, value: string }[] = [
     { displayValue: 'Client', value: 'm_client' },
     { displayValue: 'Group', value: 'm_group' },
-    { displayValue: 'Loan', value: 'm_loan' },
     { displayValue: 'Center', value: 'm_center' },
     { displayValue: 'Office', value: 'm_office' },
+    { displayValue: 'Loan Account', value: 'm_loan' },
     { displayValue: 'Saving Account', value: 'm_savings_account' },
-    { displayValue: 'Product Loan', value: 'm_product_loan' },
+    { displayValue: 'Loan Product', value: 'm_product_loan' },
-    { displayValue: 'Savings Product', value: 'm_savings_product' }
+    { displayValue: 'Savings Product', value: 'm_savings_product' },
+    { displayValue: 'Share Product', value: 'm_share_product' }
   ];
 
 export const entitySubTypeData: { displayValue: string, value: string }[] = [

src/assets/styles/_align.scss

@@ -19,7 +19,7 @@
 
 .r-amount {
   text-align: right !important;
-  padding-right: 5px;
+  padding-right: 5px !important;
 }
 
 .right {
@@ -31,9 +31,9 @@
 }
 
 .amount-plus {
-  color: #000000;
+  color: $black;
 }
 
 .amount-minus {
-  color: #0f36e4;
+  color: $status-approved;
 }

src/assets/styles/_helper.scss

@@ -1,7 +1,7 @@
-@import "align";
 @import "background";
 @import "border";
 @import "colours";
+@import "align";
 @import "display";
 @import "float";
 @import "form";