From dfdae0cc686210d9973a750d61733c184b8423a6 Mon Sep 17 00:00:00 2001
From: Tifenn GUILLAS <tifenn.guillas@lam.fr>
Date: Thu, 4 Jul 2019 16:10:03 +0200
Subject: [PATCH] Change modal logic
---
.../components/datatable.component.html | 23 +++++-----
.../search/components/datatable.component.ts | 40 ++++++++++++-----
src/app/search/components/index.ts | 4 +-
...nail.component.css => modal.component.css} | 0
...il.component.html => modal.component.html} | 13 +++++-
...mbnail.component.ts => modal.component.ts} | 14 +++---
.../search/containers/detail.component.html | 3 +-
src/app/search/containers/detail.component.ts | 44 +------------------
8 files changed, 66 insertions(+), 75 deletions(-)
rename src/app/search/components/{thumbnail.component.css => modal.component.css} (100%)
rename src/app/search/components/{thumbnail.component.html => modal.component.html} (59%)
rename src/app/search/components/{thumbnail.component.ts => modal.component.ts} (60%)
diff --git a/src/app/search/components/datatable.component.html b/src/app/search/components/datatable.component.html
index e53696ce..b4d0f91f 100644
--- a/src/app/search/components/datatable.component.html
+++ b/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
diff --git a/src/app/search/components/datatable.component.ts b/src/app/search/components/datatable.component.ts
index b1802baa..7afc6ebc 100644
--- a/src/app/search/components/datatable.component.ts
+++ b/src/app/search/components/datatable.component.ts
@@ -1,9 +1,15 @@
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;
}
}
diff --git a/src/app/search/components/index.ts b/src/app/search/components/index.ts
index f68a1a32..a9c5c9cb 100644
--- a/src/app/search/components/index.ts
+++ b/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
];
diff --git a/src/app/search/components/thumbnail.component.css b/src/app/search/components/modal.component.css
similarity index 100%
rename from src/app/search/components/thumbnail.component.css
rename to src/app/search/components/modal.component.css
diff --git a/src/app/search/components/thumbnail.component.html b/src/app/search/components/modal.component.html
similarity index 59%
rename from src/app/search/components/thumbnail.component.html
rename to src/app/search/components/modal.component.html
index 483ab78e..f3431d16 100644
--- a/src/app/search/components/thumbnail.component.html
+++ b/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">×</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>
diff --git a/src/app/search/components/thumbnail.component.ts b/src/app/search/components/modal.component.ts
similarity index 60%
rename from src/app/search/components/thumbnail.component.ts
rename to src/app/search/components/modal.component.ts
index 1cf1125e..57e318a0 100644
--- a/src/app/search/components/thumbnail.component.ts
+++ b/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();
diff --git a/src/app/search/containers/detail.component.html b/src/app/search/containers/detail.component.html
index 5ddf613a..a9747ac2 100644
--- a/src/app/search/containers/detail.component.html
+++ b/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
diff --git a/src/app/search/containers/detail.component.ts b/src/app/search/containers/detail.component.ts
index 9c46fb5a..58e4a31f 100644
--- a/src/app/search/containers/detail.component.ts
+++ b/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() {}
}
--
GitLab