Commit 80a8cb67 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

WIP: detail page

parent 9b0f2283
......@@ -36,11 +36,11 @@
</button>
</div>
<div *ngSwitchCase="'href'">
<a [href]="getAttributeUriAction(attribute.name, datum[attribute.name])">
<a [routerLink]="getAttributeUriAction(attribute.name, datum[attribute.name])">
{{ datum[attribute.name] }}</a>
</div>
<div *ngSwitchCase="'btn'">
<a [href]="getAttributeUriAction(attribute.name, datum[attribute.name])"
<a [routerLink]="getAttributeUriAction(attribute.name, datum[attribute.name])"
class="btn btn-outline-primary btn-sm">
{{ datum[attribute.name] }}</a>
</div>
......
......@@ -44,7 +44,7 @@ export class DatatableComponent {
getAttributeUriAction(attributeName: string, datum: string): string {
const attribute = this.datasetAttributeList.find(a => a.name === attributeName);
return attribute.uri_action;
return attribute.uri_action + datum;
}
openModal(type: string, attributeName: string, value: string) {
......@@ -57,7 +57,9 @@ export class DatatableComponent {
} else if (type === 'fancybox') {
this.modalData.data = {
title: value,
datasetName: this.datasetName,
idAttribute: value,
datasetAttributeList: this.datasetAttributeList
};
}
this.modalData.isOpen = true;
......
<p>{{ idAttribute }}</p>
\ No newline at end of file
<p>id: {{ idAttribute }}</p>
<p>dataset: {{ datasetName }}</p>
\ No newline at end of file
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { Attribute } from 'src/app/metamodel/model';
@Component({
selector: 'app-detail',
......@@ -6,7 +8,16 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
styleUrls: ['detail.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetailComponent {
@Input() title: string;
export class DetailComponent implements OnInit {
@Input() datasetName: string;
@Input() idAttribute: number;
@Input() datasetAttributeList: Attribute[];
ngOnInit() {
console.log(this.datasetAttributeList);
}
getAttribute(idAttribute: number) {
return this.datasetAttributeList.find(attribute => attribute.id === idAttribute);
}
}
......@@ -14,9 +14,10 @@
<img [src]="data.srcImage" class="img-fluid">
</div>
<div *ngSwitchCase="'fancybox'">
<app-detail
[title]="data.title"
[idAttribute]="data.idAttribute">
<app-detail
[datasetName]="data.datasetName"
[idAttribute]="data.idAttribute"
[datasetAttributeList]="data.datasetAttributeList">
</app-detail>
</div>
<div *ngSwitchDefault>
......
......@@ -13,9 +13,6 @@
<i class="fas fa-circle-notch fa-spin fa-3x"></i>
<span class="sr-only">Loading...</span>
</div>
<!-- <p *ngIf="!isLoading()">
<a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
</p> -->
<div *ngIf="!isLoading()" class="row">
<div class="col">
<a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
......
<!-- <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 class="row mt-4">
<div>
<app-detail
[datasetName]="datasetName | async"
[idAttribute]="idAttribute"
[datasetAttributeList]="datasetAttributeList | async">
</app-detail>
</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>
<a routerLink="/search/result/{{ datasetName | async }}" class="btn btn-outline-secondary"><i
class="fas fa-arrow-left"></i> Back to search results</a>
</div>
</div> -->
<div>Detail component</div>
\ No newline at end of file
</div>
\ No newline at end of file
......@@ -6,7 +6,7 @@ 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 { 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';
......@@ -24,12 +24,22 @@ interface StoreState {
@Component({
selector: 'app-detail-page',
templateUrl: 'detail.component.html',
styleUrls: [ 'detail.component.css' ]
styleUrls: ['detail.component.css']
})
export class DetailComponent implements OnInit {
public datasetName: Observable<string>;
public datasetAttributeList: Observable<Attribute[]>;
public idAttribute: number;
constructor(private route: ActivatedRoute, private store: Store<StoreState>) {
this.datasetName = store.select(searchSelector.getDatasetName);
this.datasetAttributeList = this.store.select(metamodelSelector.getDatasetAttributeList);
this.route.paramMap.subscribe((params: ParamMap) => {
const datasetName = params.get('dname');
this.store.dispatch(new searchActions.SelectDatasetAction(datasetName));
this.idAttribute = +params.get('id');
});
}
ngOnInit() {}
ngOnInit() { }
}
......@@ -16,7 +16,7 @@ const routes: Routes = [
{ path: 'criteria/:dname', component: CriteriaComponent },
{ path: 'output/:dname', component: OutputComponent },
{ path: 'result/:dname', component: ResultComponent },
{ path: 'detail/:dname/:id', component: DetailComponent }
{ path: 'result/:dname/:id', component: DetailComponent }
]
}
];
......
......@@ -20,6 +20,9 @@ export const RETRIEVE_META_FAILED = 'Retrieve Meta Failed';
export const RETRIEVE_DATA = 'Retrieve Data';
export const RETRIEVE_DATA_SUCCESS = 'Retrieve Data Success';
export const RETRIEVE_DATA_FAILED = 'Retrieve Data Failed';
export const RETRIEVE_ATTRIBUTE_DATA = 'Retrieve Attribute Data';
export const RETRIEVE_ATTRIBUTE_DATA_SUCCESS = 'Retrieve attribute Data Success';
export const RETRIEVE_ATTRIBUTE_DATA_FAILED = 'Retrieve Data Failed';
export class ChangeStepAction implements Action {
type = CHANGE_STEP;
......
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