Commit dfdae0cc authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Change modal logic

parent ce4e7d60
......@@ -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
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;
}
}
......@@ -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
];
......@@ -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>
......
......@@ -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();
......
......@@ -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
......@@ -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() {}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment