Change modal logic

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

@@ -30,7 +30,7 @@
                                     </div>
                                     <div *ngSwitchCase="'thumbnail'">
                                         <button class="btn btn-link"
-                                            (click)="openThumbnail(datum[attribute.name], getAttributeUriAction(attribute.name, datum[attribute.name]))">
+                                            (click)="openModal('thumbnail', attribute.name, datum[attribute.name])">
                                             <img [src]="getAttributeUriAction(attribute.name, datum[attribute.name])"
                                                 class="img-fluid">
                                         </button>
@@ -44,9 +44,12 @@
                                             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="'fancybox'">
+                                        <button class="btn btn-outline-primary btn-sm"
+                                            (click)="openModal('fancybox', attribute.name, datum[attribute.name])">
+                                            {{ datum[attribute.name] }}
+                                        </button>
+                                    </div>
                                     <div *ngSwitchCase="'download'">
                                         <a [href]="getAttributeUriAction(attribute.name, datum[attribute.name])"
                                             class="btn btn-outline-primary btn-sm">
@@ -73,9 +76,9 @@
     </accordion-group>
 </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
+<app-modal *ngIf="modalData.isOpen"
+    [bsModalRef]="bsModalRef" 
+    [type]="modalData.type" 
+    [data]="modalData.data"
+    (closeEvent)="closeModal($event)">
+</app-modal>
\ No newline at end of file

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

 import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, TemplateRef } from '@angular/core';
-import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal';
 
 import { SearchMeta } from '../store/model';
 import { Attribute } from 'src/app/metamodel/model';
 
+interface ModalData {
+    isOpen: boolean;
+    type: string;
+    data: object;
+}
+
 @Component({
     selector: 'app-datatable',
     templateUrl: 'datatable.component.html',
@@ -18,10 +24,11 @@ export class DatatableComponent {
     @Output() getSearchData: EventEmitter<number> = new EventEmitter();
 
     bsModalRef: BsModalRef;
-    thumbnailData = {
+
+    modalData: ModalData = {
         isOpen: false,
-        title: null,
-        srcImage: null
+        type: null,
+        data: null
     };
 
     initDatatable() {
@@ -36,16 +43,29 @@ 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;
     }
 
-    openThumbnail(title: string, srcImage: string) {
-        this.thumbnailData.title = title;
-        this.thumbnailData.srcImage = srcImage;
-        this.thumbnailData.isOpen = true;
+    openModal(type: string, attributeName: string, value: string) {
+        this.modalData.type = type;
+        if (type === 'thumbnail') {
+            this.modalData.data = {
+                title: value,
+                srcImage: this.getAttributeUriAction(attributeName, value)
+            };
+        } else if (type === 'fancybox') {
+            this.modalData.data = {
+                title: value,
+                idAttribute: value
+            };
+        }
+        this.modalData.isOpen = true;
     }
 
-    closeThumbnail(event: null) {
-        this.thumbnailData.isOpen = false;
+    closeModal(event: null) {
+        this.modalData.isOpen = false;
+        this.modalData.type = null;
+        this.modalData.data = null;
     }
 }

src/app/search/components/index.ts

@@ -9,7 +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';
+import { ModalComponent } from './modal.component';
 
 export const dummiesComponents = [
     ProgressComponent,
@@ -23,5 +23,5 @@ export const dummiesComponents = [
     SummaryComponent,
     UrlDisplayComponent,
     DatatableComponent,
-    ThumbnailComponent
+    ModalComponent
 ];

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

@@ -3,13 +3,22 @@
     <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>
+                <h4 id="dialog-sizes-name1" class="modal-title pull-left">{{ data.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 [ngSwitch]="type">
+                    <div *ngSwitchCase="'thumbnail'">
+                        <img [src]="data.srcImage">
+                    </div>
+                    <div *ngSwitchCase="'fancybox'">
+                    </div>
+                    <div *ngSwitchDefault>
+                        {{ type }} type not supported
+                    </div>
+                </div>
             </div>
         </div>
     </div>

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

@@ -2,16 +2,16 @@ 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'],
+    selector: 'app-modal',
+    templateUrl: 'modal.component.html',
+    styleUrls: ['modal.component.css'],
 })
-export class ThumbnailComponent {
-    @Input() title: string;
-    @Input() srcImage: string;
+export class ModalComponent {
     @Input() bsModalRef: BsModalRef;
+    @Input() type: string;
+    @Input() data: object;
     @Output() closeEvent: EventEmitter<null> = new EventEmitter();
-    
+
     closeModal(modal) {
         modal.hide();
         this.closeEvent.emit();

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

@@ -29,4 +29,5 @@
     <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
+</div> -->
+<div>Detail component</div>
\ No newline at end of file

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

@@ -27,51 +27,9 @@ interface StoreState {
     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));
-    // }
+    ngOnInit() {}
 }