WIP: detail page

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

@@ -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>

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

@@ -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;

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

-<p>{{ idAttribute }}</p>
\ No newline at end of file
+<p>id: {{ idAttribute }}</p>
+<p>dataset: {{ datasetName }}</p>
\ No newline at end of file

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

-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);
+    }
 }

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

@@ -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>

src/app/search/components/url-display.component.html

@@ -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>

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 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

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

@@ -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() { }
 }

src/app/search/search.routing.ts

@@ -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 }
         ]
     }
 ];

src/app/search/store/search.action.ts

@@ -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;