Thumbnail => DONE

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

@@ -28,9 +28,13 @@
                                     <div *ngSwitchCase="'img'">
                                         <img [src]="getAttributeUriAction(attribute.name, datum[attribute.name])">
                                     </div>
-                                    <!-- <div *ngSwitchCase="'thumbnail'">
-                                        <img [src]="getAttributeUriAction(attribute.name, datum[attribute.name])" class="img-fluid">
-s                                    </div> -->
+                                    <div *ngSwitchCase="'thumbnail'">
+                                        <button class="btn btn-link"
+                                            (click)="openThumbnail(datum[attribute.name], getAttributeUriAction(attribute.name, datum[attribute.name]))">
+                                            <img [src]="getAttributeUriAction(attribute.name, datum[attribute.name])"
+                                                class="img-fluid">
+                                        </button>
+                                    </div>
                                     <div *ngSwitchCase="'href'">
                                         <a [href]="getAttributeUriAction(attribute.name, datum[attribute.name])">
                                             {{ datum[attribute.name] }}</a>
@@ -40,6 +44,9 @@ s                                    </div> -->
                                             class="btn btn-outline-primary btn-sm">
                                             {{ datum[attribute.name] }}</a>
                                     </div>
+                                    <!-- <div *ngSwitchCase="'fancybox'">
+                                            <img [src]="getAttributeUriAction(attribute.name, datum[attribute.name])" class="img-fluid">
+                                        </div> -->
                                     <div *ngSwitchCase="'download'">
                                         <a [href]="getAttributeUriAction(attribute.name, datum[attribute.name])"
                                             class="btn btn-outline-primary btn-sm">
@@ -64,4 +71,11 @@ s                                    </div> -->
             </div>
         </div>
     </accordion-group>
-</accordion>
\ No newline at end of file
+</accordion>
+
+<app-thumbnail *ngIf="thumbnailData.isOpen"
+    [bsModalRef]="bsModalRef"
+    [title]="thumbnailData.title"
+    [srcImage]="thumbnailData.srcImage"
+    (closeEvent)="closeThumbnail($event)">
+</app-thumbnail>
\ No newline at end of file

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

-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 
 import { SearchMeta } from '../store/model';
 import { Attribute } from 'src/app/metamodel/model';
@@ -16,6 +17,13 @@ export class DatatableComponent {
     @Output() initSearchMeta: EventEmitter<{}> = new EventEmitter();
     @Output() getSearchData: EventEmitter<number> = new EventEmitter();
 
+    bsModalRef: BsModalRef;
+    thumbnailData = {
+        isOpen: false,
+        title: null,
+        srcImage: null
+    };
+
     initDatatable() {
         this.initSearchMeta.emit();
         this.getSearchData.emit(1);
@@ -28,7 +36,16 @@ export class DatatableComponent {
 
     getAttributeUriAction(attributeName: string, datum: string): string {
         const attribute = this.datasetAttributeList.find(attribute => attribute.name === attributeName);
-        // return attribute.uri_action + datum;
         return attribute.uri_action;
     }
-}
\ No newline at end of file
+
+    openThumbnail(title: string, srcImage: string) {
+        this.thumbnailData.title = title;
+        this.thumbnailData.srcImage = srcImage;
+        this.thumbnailData.isOpen = true;
+    }
+
+    closeThumbnail(event: null) {
+        this.thumbnailData.isOpen = false;
+    }
+}

src/app/search/components/index.ts

@@ -9,6 +9,7 @@ import { SummaryComponent } from './summary.component';
 import { criteriaComponents } from './criteria';
 import { UrlDisplayComponent } from './url-display.component';
 import { DatatableComponent } from './datatable.component';
+import { ThumbnailComponent } from './thumbnail.component';
 
 export const dummiesComponents = [
     ProgressComponent,
@@ -21,5 +22,6 @@ export const dummiesComponents = [
     criteriaComponents,
     SummaryComponent,
     UrlDisplayComponent,
-    DatatableComponent
+    DatatableComponent,
+    ThumbnailComponent
 ];

src/app/search/components/thumbnail.component.css

+.modal-fit {
+    width: fit-content;
+    max-width: 95%;
+}
\ No newline at end of file

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

+<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-sizes-name1"
+    [config]="{ show: true }">
+    <div class="modal-dialog modal-fit">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 id="dialog-sizes-name1" class="modal-title pull-left">{{ title }}</h4>
+                <button type="button" class="close pull-right" (click)="closeModal(lgModal)" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body text-center">
+                <img [src]="srcImage" class="img-fluid">
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+    selector: 'app-thumbnail',
+    templateUrl: 'thumbnail.component.html',
+    styleUrls: ['thumbnail.component.css'],
+})
+export class ThumbnailComponent {
+    @Input() title: string;
+    @Input() srcImage: string;
+    @Input() bsModalRef: BsModalRef;
+    @Output() closeEvent: EventEmitter<null> = new EventEmitter();
+    
+    closeModal(modal) {
+        modal.hide();
+        this.closeEvent.emit();
+    }
+}
\ No newline at end of file

src/app/search/containers/detail.component.html

+<!-- <div class="row mt-4">
+    <div class="col-12 col-md-8">
+        <app-url-display
+            [apiPath]="apiPath"
+            [datasetName]="datasetName | async"
+            [criteriaList]="criteriaList | async"
+            [outputList]="outputList | async">
+        </app-url-display>
+        <app-datatable 
+            [datasetAttributeList]="datasetAttributeList | async"
+            [searchMeta]="searchMeta | async"
+            [searchData]="searchData | async"
+            (initSearchMeta)="getSearchMeta()"
+            (getSearchData)="getSearchData($event)">
+        </app-datatable>
+    </div>
+    <div class="col-12 col-md-4 pt-2">
+        <app-summary
+            [datasetName]="datasetName | async"
+            [currentStep]="currentStep | async"
+            [datasetList]="datasetList | async"
+            [criteriaList]="criteriaList | async"
+            [datasetAttributeList]="datasetAttributeList | async"
+            [outputList]="outputList | async">
+        </app-summary>
+    </div>
+</div>
+<div class="row mt-5 justify-content-between">
+    <div class="col">
+        <a routerLink="/search/output/{{ datasetName | async }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> Previous</a>
+    </div>
+</div> -->
\ No newline at end of file

src/app/search/containers/detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import { environment } from '../../../environments/environment';
+import { Criterion, SearchMeta } from '../store/model';
+import { Dataset, Family, Category, Attribute } from '../../metamodel/model';
+import * as searchActions from '../store/search.action';
+import * as datasetActions from '../../metamodel/action/dataset.action';
+import * as criteriaActions from '../../metamodel/action/criteria.action';
+import * as outputActions from '../../metamodel/action/output.action';
+import * as fromSearch from '../store/search.reducer';
+import * as fromMetamodel from '../../metamodel/reducers';
+import * as searchSelector from '../store/search.selector';
+import * as metamodelSelector from '../../metamodel/selectors';
+
+interface StoreState {
+    search: fromSearch.State;
+    metamodel: fromMetamodel.State;
+}
+
+@Component({
+    selector: 'app-detail',
+    templateUrl: 'detail.component.html',
+    styleUrls: [ 'detail.component.css' ]
+})
+export class DetailComponent implements OnInit {
+    // public apiPath: string = environment.apiUrl + '/search';
+    // public datasetName: Observable<String>;
+    // public currentStep: Observable<string>;
+    // public datasetList: Observable<Dataset[]>;
+    // public datasetAttributeList: Observable<Attribute[]>;
+    // public outputFamilyList: Observable<Family[]>;
+    // public categoryList: Observable<Category[]>;
+    // public criteriaList: Observable<Criterion[]>;
+    // public outputList: Observable<number[]>;
+    // public searchMeta: Observable<SearchMeta>;
+    // public searchData: Observable<any[]>;
+
+    constructor(private route: ActivatedRoute, private store: Store<StoreState>) {
+        // this.datasetName = store.select(searchSelector.getDatasetName);
+        // this.currentStep = store.select(searchSelector.getCurrentStep);
+        // this.datasetList = store.select(metamodelSelector.getDatasetList);
+        // this.datasetAttributeList = this.store.select(metamodelSelector.getDatasetAttributeList);
+        // this.outputFamilyList = this.store.select(metamodelSelector.getOutputFamilyList);
+        // this.categoryList = this.store.select(metamodelSelector.getCategoryList);
+        // this.criteriaList = this.store.select(searchSelector.getCriteriaList);
+        // this.outputList = this.store.select(searchSelector.getOutputList);
+        // this.searchMeta = this.store.select(searchSelector.getSearchMeta);
+        // this.searchData = this.store.select(searchSelector.getSearchData);
+    }
+
+    ngOnInit() {
+        // Create a micro task that is processed after the current synchronous code
+        // This micro task prevent the expression has changed after view init error
+        // Promise.resolve(null).then(() => this.store.dispatch(new searchActions.ChangeStepAction('result')));
+        // Promise.resolve(null).then(() => this.store.dispatch(new searchActions.ResultChecked()));
+        // this.route.paramMap.subscribe((params: ParamMap) => {
+        //     const datasetName = params.get('dname');
+        //     Promise.resolve(null).then(() => this.store.dispatch(new searchActions.SelectDatasetAction(datasetName)));
+        //     this.store.dispatch(new criteriaActions.LoadDatasetAttributeListAction(datasetName));
+        // });
+        // this.store.dispatch(new datasetActions.LoadDatasetSearchMetaAction());
+        // this.store.dispatch(new outputActions.LoadOutputFamilyListAction());
+        // this.store.dispatch(new outputActions.LoadCategoryListAction());
+    }
+
+    // getSearchMeta(): void {
+    //     this.store.dispatch(new searchActions.RetrieveMetaAction());
+    // }
+
+    // getSearchData(page: number): void {
+    //     this.store.dispatch(new searchActions.RetrieveDataAction(page));
+    // }
+}

src/app/search/search.routing.ts

@@ -6,20 +6,24 @@ import { DatasetComponent } from './containers/dataset.component';
 import { CriteriaComponent } from './containers/criteria.component';
 import { OutputComponent } from './containers/output.component';
 import { ResultComponent } from './containers/result.component';
+import { DetailComponent } from './containers/detail.component';
 
 const routes: Routes = [
-    { path: 'search', component: SearchComponent, children: [
-        { path: '', redirectTo: 'dataset', pathMatch: 'full' },
-        { path: 'dataset', component: DatasetComponent },
-        { path: 'criteria/:dname', component: CriteriaComponent },
-        { path: 'output/:dname', component: OutputComponent },
-        { path: 'result/:dname', component: ResultComponent }
-    ]}
+    {
+        path: 'search', component: SearchComponent, children: [
+            { path: '', redirectTo: 'dataset', pathMatch: 'full' },
+            { path: 'dataset', component: DatasetComponent },
+            { path: 'criteria/:dname', component: CriteriaComponent },
+            { path: 'output/:dname', component: OutputComponent },
+            { path: 'result/:dname', component: ResultComponent },
+            { path: 'detail/:dname/:id', component: DetailComponent }
+        ]
+    }
 ];
 
 @NgModule({
-    imports: [ RouterModule.forChild(routes) ],
-    exports: [ RouterModule ]
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
 })
 export class SearchRoutingModule { }
 
@@ -28,5 +32,6 @@ export const routedComponents = [
     DatasetComponent,
     CriteriaComponent,
     OutputComponent,
-    ResultComponent
+    ResultComponent,
+    DetailComponent
 ];