Chargeback Loan Transaction

src/app/organization/offices/offices.component.html

@@ -7,18 +7,19 @@
     </button>
   </div>
 
-<div #buttonCreateOffice class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
-    Create Office
-  </button>
+  <div #buttonCreateOffice class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Office
+    </button>
   </div>
 
-<div #buttonImportOffices class="in-block">
-  <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'" [routerLink]="['/organization', 'bulk-import', 'Offices']">
-    <fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
-    Import Offices
-  </button>
+  <div #buttonImportOffices class="in-block">
+    <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'"
+      [routerLink]="['/organization', 'bulk-import', 'Offices']">
+      <fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
+      Import Offices
+    </button>
   </div>
 
 </div>
@@ -53,11 +54,12 @@
 
       <ng-container matColumnDef="openingDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Opened On </th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate | dateFormat }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id, 'general']"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"
+        [routerLink]="[row.id, 'general']"></tr>
 
     </table>
 
@@ -69,11 +71,14 @@
 
 <ng-template #templateButtonTreeView let-popover="popover">
   <h2>Tree View</h2>
-  <p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your organization.</p>
+  <p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your
+    organization.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
     <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
   </div>
 </ng-template>
 
@@ -81,9 +86,12 @@
   <h2>Create Office</h2>
   <p class="mw300">This option allows you to create new offices in your organization.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
   </div>
 </ng-template>
 
@@ -91,26 +99,34 @@
   <h2>Import Offices</h2>
   <p class="mw300">This will launch the Bulk import/Offices page.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>Search bar to filter offices.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableOffices let-popover="popover">
   <h4>List of offices in the organization.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Back</button>
+    <button mat-raised-button color="warn"
+      (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary"
+      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Back</button>
     <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
   </div>
 </ng-template>

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

@@ -76,7 +76,6 @@ import { AdhocQueryResolver } from './adhoc-query/common-resolvers/adhoc-query.r
 import { TellersResolver } from './tellers/common-resolvers/tellers.resolver';
 import { TellerResolver } from './tellers/common-resolvers/teller.resolver';
 import { PaymentTypesResolver } from './payment-types/payment-types.resolver';
-import { PaymentTypeResolver } from './payment-types/payment-type.resolver';
 import { PasswordPreferencesTemplateResolver } from './password-preferences/password-preferences-template.resolver';
 import { EntityDataTableChecksResolver } from './entity-data-table-checks/entity-data-table-checks.resolver';
 import { WorkingDaysResolver } from './working-days/working-days.resolver';
@@ -518,7 +517,7 @@ const routes: Routes = [
                   component: EditPaymentTypeComponent,
                   data: { title: extract('Edit Payment Type'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
                   resolve: {
-                    paymentType: PaymentTypeResolver
+                    paymentType: PaymentTypesResolver
                   }
                 }
               ]
@@ -669,7 +668,6 @@ const routes: Routes = [
     TellersResolver,
     TellerResolver,
     PaymentTypesResolver,
-    PaymentTypeResolver,
     PasswordPreferencesTemplateResolver,
     EntityDataTableChecksResolver,
     WorkingDaysResolver,

src/app/organization/organization.service.ts

@@ -487,6 +487,13 @@ export class OrganizationService {
     return this.http.get('/paymenttypes');
   }
 
+  /**
+   * @returns {Observable<any>} Payment Types data
+   */
+   getPaymentTypesWithCode(): Observable<any> {
+    return this.http.get('/paymenttypes?onlyWithCode=true');
+  }
+
   /**
    * @param {any} paymentType Payment type to be created.
    * @returns {Observable<any>}

src/app/organization/payment-types/payment-type.resolver.ts

@@ -1,31 +0,0 @@
-/** Angular Imports */
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Custom Services */
-import { OrganizationService } from 'app/organization/organization.service';
-
-/**
- * Payment Type data resolver.
- */
-@Injectable()
-export class PaymentTypeResolver implements Resolve<Object> {
-
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
-
-  /**
-   * Returns the payment type data.
-   * @returns {Observable<any>}
-   */
-  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const paymentTypeId = route.paramMap.get('id');
-    return this.organizationService.getPaymentType(paymentTypeId);
-  }
-
-}

src/app/organization/payment-types/payment-types.component.html

@@ -30,10 +30,25 @@
         <td mat-cell *matCellDef="let paymentType"> {{ paymentType.description }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="codeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
+        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.codeName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="isSystemDefined">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <td mat-cell *matCellDef="let paymentType">
+          <div [className]="paymentType.isSystemDefined === true ? 'true text-center' : 'false text-center'">
+            <fa-icon *ngIf="paymentType.isSystemDefined" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+            <fa-icon *ngIf="!paymentType.isSystemDefined" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+          </div>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="isCashPayment">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Payment </th>
         <td mat-cell *matCellDef="let paymentType">
-          <div [className]="paymentType.isCashPayment === true ? 'true' : 'false'">
+          <div [className]="paymentType.isCashPayment === true ? 'true text-center' : 'false text-center'">
             <fa-icon *ngIf="paymentType.isCashPayment" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
             <fa-icon *ngIf="!paymentType.isCashPayment" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
           </div>
@@ -42,16 +57,16 @@
 
       <ng-container matColumnDef="position">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
-        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.position }} </td>
+        <td mat-cell *matCellDef="let paymentType" class="text-center"> {{ paymentType.position }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let paymentType">
-          <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary">
+          <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" *ngIf="!paymentType.isSystemDefined">
             <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
           </button>
-          <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn">
+          <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" *ngIf="!paymentType.isSystemDefined">
             <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
           </button>
         </td>

src/app/organization/payment-types/payment-types.component.scss

@@ -9,3 +9,7 @@ table {
 .false {
   color: #f44366;
 }
+
+.text-center {
+  text-align: center;
+}

src/app/organization/payment-types/payment-types.component.ts

@@ -6,9 +6,6 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 
-/** rxjs Imports */
-import { of } from 'rxjs';
-
 /** Custom Services */
 import { OrganizationService } from '../organization.service';
 
@@ -28,7 +25,7 @@ export class PaymentTypesComponent implements OnInit {
   /** Payment Types data. */
   paymentTypesData: any;
   /** Columns to be displayed in payment types table. */
-  displayedColumns: string[] = ['name', 'description', 'isCashPayment', 'position', 'actions'];
+  displayedColumns: string[] = ['name', 'description', 'codeName', 'isSystemDefined', 'isCashPayment', 'position', 'actions'];
   /** Data source for payment types table. */
   dataSource: MatTableDataSource<any>;
 

src/app/organization/payment-types/payment-types.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -23,8 +23,13 @@ export class PaymentTypesResolver implements Resolve<Object> {
    * Returns the payment types data.
    * @returns {Observable<any>}
    */
-  resolve(): Observable<any> {
-    return this.organizationService.getPaymentTypes();
+   resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const paymentTypeId = route.paramMap.get('id');
+    if (paymentTypeId) {
+      return this.organizationService.getPaymentType(paymentTypeId);
+    } else {
+      return this.organizationService.getPaymentTypes();
+    }
   }
 
 }