List datasets avaibable for doc => DONE

client/src/app/instance/doc/components/dataset-by-family.component.html

@@ -11,12 +11,11 @@
         <ul class="p-0">
             <li *ngFor="let dataset of (datasetList | datasetListByFamily:datasetFamilyList[0].id); last as isLast"
                 class="list-unstyled px-3 pt-3 pb-0">
-<!--                <app-dataset-card-->
-<!--                    [dataset]="dataset"-->
-<!--                    [survey]="surveyList | surveyByName:dataset.survey_name"-->
-<!--                    [instanceSelected]="instanceSelected"-->
-<!--                    [datasetSelected]="datasetSelected">-->
-<!--                </app-dataset-card>-->
+                <app-dataset-card-doc
+                    [dataset]="dataset"
+                    [survey]="surveyList | surveyByName:dataset.survey_name"
+                    [instanceSelected]="instanceSelected">
+                </app-dataset-card-doc>
                 <hr *ngIf="!isLast">
             </li>
         </ul>
@@ -40,13 +39,11 @@
                 </span>
             </button>
             <div *ngFor="let dataset of (datasetList | datasetListByFamily:family.id); last as isLast">
-                {{ dataset.name }}
-<!--                <app-dataset-card-->
-<!--                    [dataset]="dataset" -->
-<!--                    [survey]="surveyList | surveyByName:dataset.survey_name"-->
-<!--                    [instanceSelected]="instanceSelected"-->
-<!--                    [datasetSelected]="datasetSelected">-->
-<!--                </app-dataset-card>-->
+                <app-dataset-card-doc
+                    [dataset]="dataset"
+                    [survey]="surveyList | surveyByName:dataset.survey_name"
+                    [instanceSelected]="instanceSelected">
+                </app-dataset-card-doc>
                 <hr *ngIf="!isLast">
             </div>
         </accordion-group>

client/src/app/instance/doc/components/dataset-by-family.component.ts

@@ -9,7 +9,7 @@
 
 import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 
-import { Dataset, DatasetFamily } from 'src/app/metamodel/models';
+import { Dataset, DatasetFamily, Survey } from 'src/app/metamodel/models';
 
 @Component({
     selector: 'app-dataset-by-family',
@@ -24,5 +24,6 @@ import { Dataset, DatasetFamily } from 'src/app/metamodel/models';
 export class DatasetByFamilyComponent {
     @Input() datasetList: Dataset[];
     @Input() datasetFamilyList: DatasetFamily[];
+    @Input() surveyList: Survey[];
     @Input() instanceSelected: string;
 }

client/src/app/instance/doc/components/dataset-card.component.html → client/src/app/instance/doc/components/dataset-card-doc.component.html

@@ -11,11 +11,10 @@
                     <p class="my-3">{{ dataset.description }}</p>
                 </div>
                 <div class="row">
-                    <button class="btn btn-link p-0" 
-                        popover="{{ survey.description }}" 
+                    <button class="btn btn-link p-0"
+                        popover="{{ survey.description }}"
                         popoverTitle="{{ survey.label }}"
-                        placement="bottom" 
-                        [outsideClick]="true" 
+                        placement="bottom"
                         triggers="mouseenter:mouseleave">
                         <small>
                             More about {{ survey.label }} survey <span class="fas fa-question-circle"></span>
@@ -24,14 +23,10 @@
                 </div>
             </div>
             <div class="col-auto">
-                <button *ngIf="dataset.name !== datasetSelected"
-                    (click)="selectDataset(dataset.name)"
+                <button (click)="selectDataset(dataset.name)"
                     class="btn btn-outline-secondary">
                     Select
                 </button>
-                <span *ngIf="dataset.name === datasetSelected">
-                    <span class="far fa-check-circle fa-2x text-success"></span>
-                </span>
             </div>
         </div>
     </div>

client/src/app/instance/doc/components/dataset-card.component.ts → client/src/app/instance/doc/components/dataset-card-doc.component.ts

@@ -7,30 +7,29 @@
  * file that was distributed with this source code.
  */
 
-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { Survey, Dataset } from 'src/app/metamodel/models';
 
 @Component({
-    selector: 'app-dataset-card',
-    templateUrl: 'dataset-card.component.html',
+    selector: 'app-dataset-card-doc',
+    templateUrl: 'dataset-card-doc.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 /**
  * @class
- * @classdesc Search dataset card component.
+ * @classdesc Documentation dataset card component.
  */
-export class DatasetCardComponent {
+export class DatasetCardDocComponent {
     @Input() survey: Survey;
     @Input() dataset: Dataset;
     @Input() instanceSelected: string;
-    @Input() datasetSelected: string;
 
     constructor(private router: Router) { }
 
     selectDataset(datasetName: string) {
         this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-        this.router.navigate([`/instance/${this.instanceSelected}/search/dataset/${datasetName}`]);
+        this.router.navigate([`/instance/${this.instanceSelected}/doc/${datasetName}`]);
     }
 }

client/src/app/instance/doc/components/index.ts

 import { DatasetByFamilyComponent } from './dataset-by-family.component';
-import { DatasetCardComponent } from './dataset-card.component';
+import { DatasetCardDocComponent } from './dataset-card-doc.component';
 
 export const dummiesComponents = [
     DatasetByFamilyComponent,
-    DatasetCardComponent
+    DatasetCardDocComponent
 ];

client/src/app/instance/doc/containers/dataset-list.component.html

 <app-spinner *ngIf="(datasetFamilyListIsLoading | async)
-    || (datasetListIsLoading | async)">
+    || (datasetListIsLoading | async)
+    || (surveyListIsLoading | async)">
 </app-spinner>
 
 <div *ngIf="(datasetFamilyListIsLoaded | async)
-        && (datasetListIsLoaded | async)" class="container">
+        && (datasetListIsLoaded | async)
+        && (surveyListIsLoaded | async)" class="container">
     <div class="row mt-4">
         <ng-container *ngIf="(datasetList | async).length === 0">
             <div class="col-12 lead text-center">
@@ -18,6 +20,7 @@
                 <app-dataset-by-family
                     [datasetList]="datasetList | async"
                     [datasetFamilyList]="datasetFamilyList | async"
+                    [surveyList]="surveyList | async"
                     [instanceSelected]="instanceSelected | async">
                 </app-dataset-by-family>
             </div>

client/src/app/instance/doc/containers/dataset-list.component.ts

@@ -15,10 +15,11 @@ import { Observable } from 'rxjs';
 import * as datasetActions from 'src/app/metamodel/actions/dataset.actions';
 import * as datasetFamilySelector from 'src/app/metamodel/selectors/dataset-family.selector';
 import * as datasetSelector from 'src/app/metamodel/selectors/dataset.selector';
-import { Dataset, DatasetFamily } from 'src/app/metamodel/models';
+import {Dataset, DatasetFamily, Survey} from 'src/app/metamodel/models';
 import { environment } from 'src/environments/environment';
 import * as authSelector from "../../../auth/auth.selector";
 import * as instanceSelector from "../../../metamodel/selectors/instance.selector";
+import * as surveySelector from "../../../metamodel/selectors/survey.selector";
 
 @Component({
     selector: 'app-dataset-list',
@@ -37,6 +38,9 @@ export class DatasetListComponent implements OnInit {
     public datasetFamilyListIsLoading: Observable<boolean>;
     public datasetFamilyListIsLoaded: Observable<boolean>;
     public datasetFamilyList: Observable<DatasetFamily[]>;
+    public surveyListIsLoading: Observable<boolean>;
+    public surveyListIsLoaded: Observable<boolean>;
+    public surveyList: Observable<Survey[]>;
     public datasetListIsLoading: Observable<boolean>;
     public datasetListIsLoaded: Observable<boolean>;
     public datasetList: Observable<Dataset[]>;
@@ -47,6 +51,9 @@ export class DatasetListComponent implements OnInit {
         this.datasetFamilyListIsLoading = store.select(datasetFamilySelector.selectDatasetFamilyListIsLoading);
         this.datasetFamilyListIsLoaded = store.select(datasetFamilySelector.selectDatasetFamilyListIsLoaded);
         this.datasetFamilyList = store.select(datasetFamilySelector.selectAllDatasetFamilies);
+        this.surveyListIsLoading = store.select(surveySelector.selectSurveyListIsLoading);
+        this.surveyListIsLoaded = store.select(surveySelector.selectSurveyListIsLoaded);
+        this.surveyList = store.select(surveySelector.selectAllSurveys);
         this.datasetListIsLoading = store.select(datasetSelector.selectDatasetListIsLoading);
         this.datasetListIsLoaded = store.select(datasetSelector.selectDatasetListIsLoaded);
         this.datasetList = store.select(datasetSelector.selectAllDatasets);

client/src/app/instance/doc/doc-routing.module.ts

@@ -11,9 +11,11 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { DatasetListComponent } from "./containers/dataset-list.component";
+import { DocComponent } from "./containers/doc.component";
 
 const routes: Routes = [
-    { path: '', component: DatasetListComponent }
+    { path: '', component: DatasetListComponent },
+    { path: ':dname', component: DocComponent },
 ];
 
 @NgModule({
@@ -23,5 +25,6 @@ const routes: Routes = [
 export class DocRoutingModule { }
 
 export const routedComponents = [
-    DatasetListComponent
+    DatasetListComponent,
+    DocComponent
 ];