Affichage de JSON => DONE

package.json

@@ -27,6 +27,7 @@
     "@ngrx/store-devtools": "^8.0.1",
     "bootstrap": "^4.3.1",
     "ngx-bootstrap": "^4.3.0",
+    "ngx-json-viewer": "^2.4.0",
     "ngx-toastr": "^10.0.4",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",

src/app/search/components/datatable.component.html

@@ -56,6 +56,12 @@
                                             <i class="fa fa-download" aria-hidden="true"></i>
                                         </a>
                                     </div>
+                                    <div *ngSwitchCase="'json'" class="text-center">
+                                        <button class="btn btn-outline-primary btn-sm"
+                                            (click)="openModal('json', attribute.name, datum[attribute.label])">
+                                            <i class="fas fa-code"></i>
+                                        </button>
+                                    </div>
                                     <div *ngSwitchDefault>
                                         {{ datum[attribute.label] }}
                                     </div>

src/app/search/components/datatable.component.ts

@@ -66,6 +66,11 @@ export class DatatableComponent {
                 searchMeta: this.searchMeta,
                 searchData: this.searchData
             };
+        } else if (type === 'json') {
+            this.modalData.data = {
+                title: attributeName,
+                json: value
+            };
         }
         this.modalData.isOpen = true;
     }

src/app/search/components/modal.component.html

@@ -8,12 +8,14 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="modal-body text-center">
-                <div [ngSwitch]="type">
-                    <div *ngSwitchCase="'thumbnail'">
+            <div [ngSwitch]="type">
+                <div *ngSwitchCase="'thumbnail'">
+                    <div class="modal-body text-center">
                         <img [src]="data.srcImage" class="img-fluid">
                     </div>
-                    <div *ngSwitchCase="'fancybox'">
+                </div>
+                <div *ngSwitchCase="'fancybox'">
+                    <div class="modal-body">
                         <app-detail 
                             [datasetName]="data.datasetName" 
                             [objectSelected]="data.objectSelected" 
@@ -21,10 +23,15 @@
                             [searchData]="data.searchData">
                         </app-detail>
                     </div>
-                    <div *ngSwitchDefault>
-                        {{ type }} type not supported
+                </div>
+                <div *ngSwitchCase="'json'">
+                    <div class="modal-body">
+                        <ngx-json-viewer [json]="data.json"></ngx-json-viewer>
                     </div>
                 </div>
+                <div *ngSwitchDefault>
+                    {{ type }} type not supported
+                </div>
             </div>
         </div>
     </div>

src/app/shared/shared.module.ts

@@ -15,6 +15,7 @@ import {
     PaginationModule,
     BsDatepickerModule
 } from 'ngx-bootstrap';
+import { NgxJsonViewerModule } from 'ngx-json-viewer';
 
 @NgModule({
     imports: [
@@ -30,6 +31,7 @@ import {
         PaginationModule.forRoot(),
         BsDatepickerModule.forRoot(),
         NgSelectModule,
+        NgxJsonViewerModule,
         RouterModule
     ],
     exports: [
@@ -44,7 +46,8 @@ import {
         PopoverModule,
         PaginationModule,
         BsDatepickerModule,
-        NgSelectModule
+        NgSelectModule,
+        NgxJsonViewerModule
     ],
     providers: [BsModalService]
 })

yarn.lock

@@ -4269,6 +4269,11 @@ ngx-bootstrap@^4.3.0:
   resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-4.3.0.tgz#4c2213c082787701711c991ae728adaed035e637"
   integrity sha512-ZPS6V2yLEeqB/7KIlVohS8qUdtFa1bgUB/sSPWRcXqOWU3EKhORetZoXG6m2F5ILYDe5hwQvBEjdHPlEz2piOg==
 
+ngx-json-viewer@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/ngx-json-viewer/-/ngx-json-viewer-2.4.0.tgz#55eab11dda36c3752285efec1579dba3fcb18163"
+  integrity sha512-26QmLp+0ds90aFug3KbSIwqtmQgCcJYFNNNcmcZHgPRj75nhKzbo4ceKxkhWmY5auKZClVO0HTZSs5bBhgb1Bw==
+
 ngx-toastr@^10.0.4:
   version "10.0.4"
   resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-10.0.4.tgz#cbc61b8d67d748194ea7a28542b01e39bf1fc6c2"