Fixed Deposit account view update (#1881)

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

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

@@ -5,6 +5,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           Transaction Id
@@ -13,7 +15,7 @@
         <div fxFlex="50%">
           {{ transactionData.id }}
         </div>
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Type
         </div>
@@ -27,7 +29,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.date  | dateFormat }}
+          {{ transactionData.date | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -43,7 +45,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
@@ -59,47 +61,47 @@
           <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
             Payment Type
           </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.
           </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
           </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
           </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.
           </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.
           </div>
-  
+
           <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
             {{ transactionData.paymentDetailData.bankNumber }}
           </div>
@@ -108,6 +110,9 @@
 
       </div>
 
+      <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>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.scss

@@ -1,6 +1,8 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
-  
+
   .content {
     div {
       margin: 1rem 0;
@@ -8,3 +10,26 @@
     }
   }
 }
+
+.transaction-buttons {
+  margin-top: 3%;
+}
+
+.transaction-relation {
+  background-color: $mid-grey;
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts

@@ -28,4 +28,11 @@ export class ViewTransactionComponent {
     });
   }
 
+  transactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
+
 }