datatable-single-row now supports json object

package.json

@@ -60,6 +60,7 @@
     "moment": "^2.29.4",
     "rxjs": "6.6.2",
     "tslib": "^2.0.0",
+    "vkbeautify": "^0.99.2",
     "zone.js": "0.11.6"
   },
   "devDependencies": {
@@ -78,6 +79,7 @@
     "@types/jasminewd2": "2.0.6",
     "@types/lodash": "4.14.132",
     "@types/node": "12.11.1",
+    "@types/vkbeautify": "^0.99.2",
     "codelyzer": "6.0.0",
     "cypress": "^10.7.0",
     "git-describe": "^4.1.1",

src/app/pipes/pipes.module.ts

@@ -11,13 +11,14 @@ import { DatetimeFormatPipe } from './datetime-format.pipe';
 import { ExternalIdentifierPipe } from './external-identifier.pipe';
 import { FormatNumberPipe } from './format-number.pipe';
 import { YesnoPipe } from './yesno.pipe';
+import { PrettyPrintPipe } from './pretty-print.pipe';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe ],
+  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe, PrettyPrintPipe ],
-  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe ],
+  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe, PrettyPrintPipe ],
-  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe ]
+  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe, PrettyPrintPipe ]
 })
 export class PipesModule { }

src/app/pipes/pretty-print.pipe.ts

@@ -0,0 +1,19 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import * as vkbeautify from 'vkbeautify';
+
+@Pipe({
+    name: 'prettyPrint'
+})
+export class PrettyPrintPipe implements PipeTransform {
+
+    transform(value: any) {
+        if (value.charAt(0) === '{' && value.charAt(value.length - 1) === '}') {
+            try {
+                return vkbeautify.json(value);
+            } catch(error) {
+                return value;
+            }
+        }
+        return value;
+    }
+}

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss

@@ -1,5 +1,5 @@
 .container {
-  max-width: 37rem;
+  max-width: 50rem;
   .content {
     div {
       margin: 1rem 0;

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -22,7 +22,7 @@
         {{ getInputName(columnHeader.columnName) }}
       </div>
 
-      <div fxFlex="68%" [ngSwitch]="columnHeader.columnDisplayType" class="right">
+      <div fxFlex="68%" [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right">
         <span *ngSwitchCase="'DATE'">
           {{dataObject.data[0].row[i] | dateFormat}}
         </span>
@@ -35,6 +35,8 @@
         <span *ngSwitchCase="'TEXT'" class="long-text">
           {{dataObject.data[0].row[i]}}
         </span>
+        <textarea *ngSwitchCase="'JSON'" cdkTextareaAutosize="true" cdkAutosizeMaxRows="20" cdkAutosizeMinRows="1" style="width: 100%; height: 100%" [innerHTML]="dataObject.data[0].row[i].value | prettyPrint">
+        </textarea>
         <span *ngSwitchDefault>
           <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
             <button mat-icon-button matTooltip="{{ 'tooltips.View Link' | translate }}" (click)="openSite(dataObject.data[0].row[i])"

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

@@ -129,6 +129,33 @@ export class DatatableSingleRowComponent implements OnInit {
     return 'table-data';
   }
 
+  getColumnType(columnDisplayType: string, columnType: string) {
+    switch (columnDisplayType) {
+      case 'DATE': {
+        return columnDisplayType;
+      }
+      case 'DATETIME': {
+        return columnDisplayType;
+      }
+      case 'INTEGER': {
+        return columnDisplayType;
+      }
+      case 'DECIMAL': {
+        return columnDisplayType;
+      }
+      case 'TEXT': {
+        if (columnType == 'JSON') {
+          return 'JSON';
+        } else {
+          return columnDisplayType;
+        }
+      }
+      default: {
+        return columnDisplayType;
+      }
+    }
+  }
+
   getInputName(attr: string): string {
     return this.datatables.getName(attr);
   }