From b90b0dcc91fa9d88328f867e207b88addd2234b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1niel=20Gyenizse?= <daniel.gyenizse@binx.hu>
Date: Fri, 17 Nov 2023 14:59:26 +0100
Subject: [PATCH] datatable-single-row now supports json object

---
 package.json                                  |  2 ++
 src/app/pipes/pipes.module.ts                 |  7 ++---
 src/app/pipes/pretty-print.pipe.ts            | 19 +++++++++++++
 .../view-transaction.component.scss           |  2 +-
 .../datatable-single-row.component.html       |  4 ++-
 .../datatable-single-row.component.ts         | 27 +++++++++++++++++++
 6 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/app/pipes/pretty-print.pipe.ts

diff --git a/package.json b/package.json
index 2af276d2b9..3ddb080874 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/pipes/pipes.module.ts b/src/app/pipes/pipes.module.ts
index 713a1abeaf..3afde20ad8 100644
--- a/src/app/pipes/pipes.module.ts
+++ b/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 ],
-  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe ],
-  exports: [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, PrettyPrintPipe ],
+  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe, YesnoPipe, PrettyPrintPipe ]
 })
 export class PipesModule { }
diff --git a/src/app/pipes/pretty-print.pipe.ts b/src/app/pipes/pretty-print.pipe.ts
new file mode 100644
index 0000000000..b9a7c36406
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss
index 4ae4e08692..84dbc3b18a 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss
+++ b/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;
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
index 3e842750c5..20d7c3e390 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
@@ -22,7 +22,7 @@ <h3>{{datatableName}}</h3>
         {{ 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 @@ <h3>{{datatableName}}</h3>
         <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])"
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts
index b5aaff0bdb..51808c9f96 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts
+++ b/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);
   }