WIP: Move datatable component

src/app/shared/datatable/renderer/image.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+import { RendererConfig } from '../../../metamodel/model';
+import { getHost } from "../../utils";
+
+interface ImageConfig extends RendererConfig {
+    display: string;
+    dataset_file: boolean;
+    blank: boolean;
+}
+
+@Component({
+    selector: 'app-image',
+    templateUrl: 'image.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImageComponent {
+    @Input() value: string | number;
+    @Input() datasetName: string;
+    @Input() config: ImageConfig;
+
+    getValue(): string {
+        return getHost() + '/download-file/' + this.datasetName + '/' + this.value;
+    }
+}

src/app/shared/datatable/renderer/index.ts

+import { DetailComponent } from './detail.component';
+import { ImageComponent } from './image.component';
+import { JsonComponent } from './json.component';
+import { LinkComponent } from './link.component';
+import { DownloadComponent } from './download.component';
+
+export const RendererComponents = [
+    DetailComponent,
+    ImageComponent,
+    JsonComponent,
+    LinkComponent,
+    DownloadComponent
+];

src/app/shared/datatable/renderer/json.component.html

+<button class="btn btn-outline-primary btn-sm" (click)="openModal(modal)">
+    JSON
+</button>
+
+<ng-template #modal>
+    <div class="modal-header">
+        <h4 class="modal-title pull-left">{{ attributeLabel }}</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <ngx-json-viewer [json]="value"></ngx-json-viewer>
+    </div>
+</ng-template>
\ No newline at end of file

src/app/shared/datatable/renderer/json.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgxJsonViewerModule } from 'ngx-json-viewer';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { BsModalService } from 'ngx-bootstrap/modal';
+
+import { JsonComponent } from './json.component';
+
+describe('[Search][Result][Renderer] Component: JsonComponent', () => {
+    let component: JsonComponent;
+    let fixture: ComponentFixture<JsonComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [JsonComponent],
+            imports: [NgxJsonViewerModule, ModalModule.forRoot()],
+            providers: [BsModalService]
+        });
+        fixture = TestBed.createComponent(JsonComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/shared/datatable/renderer/json.component.ts

+import { Component, ChangeDetectionStrategy, Input, TemplateRef } from '@angular/core';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+
+import { RendererConfig } from '../../../metamodel/model';
+
+interface JsonConfig extends RendererConfig {
+}
+
+@Component({
+    selector: 'app-json',
+    templateUrl: 'json.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class JsonComponent {
+    @Input() value: string | number;
+    @Input() attributeLabel: string;
+    @Input() config: JsonConfig;
+
+    modalRef: BsModalRef;
+
+    constructor(private modalService: BsModalService) { }
+
+    openModal(template: TemplateRef<any>) {
+        this.modalRef = this.modalService.show(
+            template,
+            Object.assign({}, { class: 'modal-fit-content' })
+        );
+    }
+}

src/app/shared/datatable/renderer/link.component.html

+<a [href]="getValue()" target="{{(config.blank) ? '_blank' : '_self'}}"
+    [ngClass]="{'btn btn-outline-primary btn-sm': (config.display=='text-button' || config.display=='icon-button')}">
+    <span *ngIf="config.display !== 'icon-button'">{{ getText() }}</span>
+    <span *ngIf="config.display === 'icon-button'" class="{{config.icon}}"></span>
+</a>
\ No newline at end of file

src/app/shared/datatable/renderer/link.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LinkComponent } from './link.component';
+
+describe('[Search][Result][Renderer] Component: LinkComponent', () => {
+    let component: LinkComponent;
+    let fixture: ComponentFixture<LinkComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [LinkComponent]
+        });
+        fixture = TestBed.createComponent(LinkComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('#getValue() should return link url', () => {
+        component.config = {
+            href: 'url',
+            display: 'display',
+            text: 'text',
+            icon: 'icon',
+            blank: true
+        };
+        component.value = 'val';
+        expect(component.getValue()).toEqual('url');
+    });
+    
+    it('#getText() should return link text', () => {
+        component.config = {
+            href: 'url',
+            display: 'display',
+            text: 'text',
+            icon: 'icon',
+            blank: true
+        };
+        component.value = 'val';
+        expect(component.getText()).toEqual('text');
+    });
+});

src/app/shared/datatable/renderer/link.component.ts

+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+import { RendererConfig } from '../../../metamodel/model';
+
+interface LinkConfig extends RendererConfig {
+    href: string;
+    display: string;
+    text: string;
+    icon: string;
+    blank: boolean;
+}
+
+@Component({
+    selector: 'app-link',
+    templateUrl: 'link.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LinkComponent {
+    @Input() value: string | number;
+    @Input() datasetName: string;
+    @Input() config: LinkConfig;
+
+    getValue() {
+        return this.config.href.replace('$value', this.value.toString());
+    }
+
+    getText() {
+        return this.config.text.replace('$value', this.value.toString());
+    }
+}