Share Product and Share Account views updated

src/app/shares/shares-account-view/charges-tab/charges-tab.component.html

@@ -20,32 +20,58 @@
 
       <ng-container matColumnDef="paymentDueAt">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Due At' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateCatalog }} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Calculation Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value | translateCatalog}} </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amount | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Paid' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountPaid | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Waived' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountWaived | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Outstanding' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+        <td mat-cell *matCellDef="let charge">
+          <span *ngIf="sharesAccountData.status.value === 'Submitted and pending approval'">
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
+              *mifosxHasPermission="'UPDATE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+              <i class="fa fa-pencil"></i>
+            </button>
+            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
+              *mifosxHasPermission="'DELETE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+              <i class="fa fa-trash"></i>
+            </button>
+          </span>
+          <span *ngIf="sharesAccountData.status.value === 'Active'">
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
+              *mifosxHasPermission="'PAY_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+              <i class="fa fa-dollar"></i>
+            </button>
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
+              *mifosxHasPermission="'WAIVE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+              <i class="fa fa-flag"></i>
+            </button>
+          </span>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/shares/shares-account-view/charges-tab/charges-tab.component.scss

@@ -4,7 +4,19 @@
   h3 {
     margin:1% auto;
   }
+  .action-button {
+      margin-left: auto;
+  }
   table {
     width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
+    }
+    .select-row:hover {
+      cursor: pointer;
+    }
   }
-}
+}

src/app/shares/shares-account-view/charges-tab/charges-tab.component.ts

@@ -20,16 +20,7 @@ export class ChargesTabComponent implements OnInit {
   /** Data source for charges table. */
   dataSource: MatTableDataSource<any>;
   /** Columns to be displayed in charges table. */
-  displayedColumns: string[] = [
-    'name',
-    'feeOrPenalty',
-    'paymentDueAt',
-    'calculationType',
-    'due',
-    'paid',
-    'waived',
-    'outstanding',
-  ];
+  displayedColumns: string[] = ['name', 'feeOrPenalty', 'paymentDueAt', 'calculationType', 'due', 'paid', 'waived', 'outstanding', 'actions' ];
 
   /**
    * Retrieves shares account aata from `resolve`.
@@ -40,6 +31,7 @@ export class ChargesTabComponent implements OnInit {
       this.sharesAccountData = data.sharesAccountData;
       this.chargesData = this.sharesAccountData.charges;
     });
+    console.log(this.sharesAccountData);
   }
 
   ngOnInit() {