completed datalet

src/app/@theme/pipes/index.ts

@@ -4,3 +4,4 @@ export * from './round.pipe';
 export * from './timing.pipe';
 export * from './number-with-commas.pipe';
 export * from './safe.pipe';
+export * from './safe-html.pipe';

src/app/@theme/pipes/safe-html.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml'
+})
+export class SafeHtmlPipe implements PipeTransform {
+
+  constructor(protected sanitizer: DomSanitizer) {}
+
+ public transform(value: any): any {
+     return this.sanitizer.bypassSecurityTrustHtml(value);
+
+  }
+
+}

src/app/@theme/theme.module.ts

@@ -28,7 +28,8 @@ import {
   RoundPipe,
   TimingPipe,
   NumberWithCommasPipe,
-  SafePipe
+  SafePipe,
+  SafeHtmlPipe
 } from './pipes';
 import {
   OneColumnLayoutComponent,
@@ -71,7 +72,8 @@ const PIPES = [
   RoundPipe,
   TimingPipe,
   NumberWithCommasPipe,
-  SafePipe
+  SafePipe,
+  SafeHtmlPipe
 ];
 
 @NgModule({

src/app/pages/data-catalogue/data-catalogue.module.ts

@@ -6,12 +6,14 @@ import { DataCatalogueRoutingModule } from './data-catalogue-routing.module';
 import { SearchComponent } from './search/search.component';
 import { DatasetComponent } from './dataset/dataset.component';
 import { DataCatalogueComponent } from './data-catalogue.component';
-import { NbAccordionModule, NbActionsModule, NbCardModule, NbDialogModule, NbFormFieldModule, NbIconModule, NbInputModule, NbListModule, NbSpinnerModule, NbTagModule, NbToastrModule, NbTooltipModule } from '@nebular/theme';
+import { NbAccordionModule, NbActionsModule, NbCardModule, NbDialogModule, NbFormFieldModule, NbIconModule, NbInputModule, NbListModule, NbSelectModule, NbSpinnerModule, NbTagModule, NbToastrModule, NbTooltipModule } from '@nebular/theme';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { DistributionComponent } from './distribution/distribution.component';
 import { MarkdownModule } from 'ngx-markdown';
+import { DataletIframeComponent } from './datalet-iframe/datalet-iframe.component';
+import { ShowDataletsComponent } from './show-datalets/show-datalets.component';
 @NgModule({
-  declarations: [DataCatalogueComponent, SearchComponent, DatasetComponent, DistributionComponent],
+  declarations: [DataCatalogueComponent, SearchComponent, DatasetComponent, DistributionComponent, DataletIframeComponent, ShowDataletsComponent],
   imports: [
     ThemeModule,
     NbFormFieldModule,
@@ -28,7 +30,8 @@ import { MarkdownModule } from 'ngx-markdown';
     NbDialogModule.forChild(),
     DataCatalogueRoutingModule,
     MarkdownModule.forChild(),
-    NbActionsModule
+    NbActionsModule,
+    NbSelectModule
   ]
 })
 export class DataCatalogueModule { }

src/app/pages/data-catalogue/datalet-iframe/datalet-iframe.component.html

+<nb-card>
+    <nb-card-body width="100%" height="100%">
+        <iframe width="100%" height="850px" frameBorder="0" [src]="iframeUrl | safe"></iframe>
+    </nb-card-body>
+</nb-card>
\ No newline at end of file

src/app/pages/data-catalogue/datalet-iframe/datalet-iframe.component.scss

+nb-card {
+    /**
+     * This is the max-width value of the Bootstrap giant modal
+     * Using it here ensures the modal will properly adjust it's width to the content
+     */
+    max-width: 100vw;
+    min-width: 95vw;
+    /**
+     * This is the height value of NbComponentSize 'giant'
+     * By setting max-height of the modal card to this value, we ensure the modal will properly adjust it's height
+     * to the content
+     */
+    max-height: 100vh;
+    min-height: 95vh;
+  }
\ No newline at end of file

src/app/pages/data-catalogue/datalet-iframe/datalet-iframe.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataletIframeComponent } from './datalet-iframe.component';
+
+describe('DataletIframeComponent', () => {
+  let component: DataletIframeComponent;
+  let fixture: ComponentFixture<DataletIframeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataletIframeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataletIframeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/data-catalogue/datalet-iframe/datalet-iframe.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+import { ConfigService } from '@ngx-config/core';
+import { DCATDistribution } from '../model/dcatdistribution';
+
+@Component({
+  selector: 'ngx-datalet-iframe',
+  templateUrl: './datalet-iframe.component.html',
+  styleUrls: ['./datalet-iframe.component.scss']
+})
+export class DataletIframeComponent implements OnInit {
+
+  datasetID:string;
+  format:string;
+  nodeID:string;
+  distributionID:string;
+  url:string;
+
+  private dataletBaseUrl:string;
+
+  iframeUrl:string;
+
+  constructor(
+    protected dialogRef: NbDialogRef<DataletIframeComponent>,
+    private configService: ConfigService
+    ) {
+      this.dataletBaseUrl = configService.getSettings("datalet_base_url");
+     }
+
+  ngOnInit(): void {
+    this.iframeUrl=`${this.dataletBaseUrl}?ln=en&format=${this.format}&nodeID=${this.nodeID}&distributionID=${this.distributionID}&datasetID=${this.datasetID}&url=${encodeURIComponent(this.url)}`
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+}

src/app/pages/data-catalogue/dataset/dataset.component.html

@@ -30,7 +30,7 @@
                     <nb-card-header class="d-flex justify-content-between">
                         <span>{{distribution.title}}&nbsp;<span *ngIf="distribution.format!=undefined && distribution.format!='undefined'">({{distribution.format}})</span></span>
                         <nb-actions size="small">
-                            <!-- <nb-action icon="eye" nbTooltip="Preview" (click)="openPreview(distribution)"></nb-action> -->
+                            <nb-action icon="eye" nbTooltip="View Datalet" [disabled]="distribution.hasDatalet"  (click)="openExistingDatalet(distribution)"></nb-action>
                             <nb-action icon="pie-chart" *ngIf="enableDatalet" nbTooltip="Create Datalet" [disabled]="!checkDistributionDatalet(distribution)"  (click)="dataletCreate(distribution)"></nb-action>
                             <nb-action icon="info" nbTooltip="Details" (click)="openDistributionDetails(distribution)"></nb-action>
                           </nb-actions>

src/app/pages/data-catalogue/dataset/dataset.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NbDialogService, NbToastrService } from '@nebular/theme';
 import { ConfigService } from '@ngx-config/core';
+import { DataletIframeComponent } from '../datalet-iframe/datalet-iframe.component';
 import { DistributionComponent } from '../distribution/distribution.component';
 import { DCATDataset } from '../model/dcatdataset';
 import { DCATDistribution } from '../model/dcatdistribution';
 import { SKOSConcept } from '../model/skosconcept';
 import { DataCataglogueAPIService } from '../services/data-cataglogue-api.service';
+import { ShowDataletsComponent } from '../show-datalets/show-datalets.component';
 
 @Component({
   selector: 'ngx-dataset',
@@ -15,6 +17,7 @@ import { DataCataglogueAPIService } from '../services/data-cataglogue-api.servic
 })
 export class DatasetComponent implements OnInit {
 
+  id:string;
   dataset:DCATDataset=new DCATDataset();
   loading=false;
 
@@ -41,11 +44,20 @@ export class DatasetComponent implements OnInit {
 
 
   ngOnInit(): void {
-    this.loading=true;
     this.route.paramMap.subscribe(params => {
-      const id = params.get('id'); 
-      if (id) {
-        this.restApi.getDatasetById(id).subscribe(
+      this.id = params.get('id'); 
+      if (this.id) {
+        this.getDataset();
+      }else{
+        this.loading=false;
+        this.router.navigate(['/pages/datasets']);
+      }
+    })
+  }
+
+  getDataset(){
+    this.loading=true;
+    this.restApi.getDatasetById(this.id).subscribe(
       res=>{ 
         this.dataset=res;
         let tmpLic=[]
@@ -63,11 +75,6 @@ export class DatasetComponent implements OnInit {
          this.router.navigate(['/pages/datasets']);
        }
       )
-      }else{
-        this.loading=false;
-        this.router.navigate(['/pages/datasets']);
-      }
-    })
   }
 
   openDistributionDetails(distribution:DCATDistribution){
@@ -140,31 +147,25 @@ export class DatasetComponent implements OnInit {
 
     this.loading=true;
 
-    // this.restApi.downloadFromUri(distribution).subscribe(
-    //   res => {
-    //     this.loading=false;
-        
-    //     this.dialogService.open(DataletIframeComponent, {
-    //       context: {
-    //         datasetID:this.dataset.id,
-    //         nodeID:this.dataset.nodeID,
-    //         format:parameter,
-    //         url: distribution.downloadURL
-    //       }
-    //     });
-    //   },
-    //   err=>{ 
-    //     console.log(err) 
-    //     this.loading=false;
-    //     this.toastrService.danger("File with url "+distribution.downloadURL+" returned "+err.status+"!","Unable to create Datalet");
-    //   }
-    // )
-
-
     this.restApi.downloadFromUri(distribution).subscribe(
       res => {
         this.loading=false;
-        window.open(`${this.dataletBaseUrl}?ln=en&format=${parameter}&nodeID=${this.dataset.nodeID}&distributionID=${distribution.id}&datasetID=${this.dataset.id}&url=${encodeURIComponent(distribution.downloadURL)}`)
+        
+        this.dialogService.open(DataletIframeComponent, {
+          context: {
+            distributionID: distribution.id,
+            datasetID:this.dataset.id,
+            nodeID:this.dataset.nodeID,
+            format:parameter,
+            url: distribution.downloadURL
+          }
+        })
+        .onClose.subscribe(
+          closeCallback => {
+            this.getDataset()
+          }
+        );
+
       },
       err=>{ 
         console.log(err) 
@@ -172,7 +173,16 @@ export class DatasetComponent implements OnInit {
         this.toastrService.danger("File with url "+distribution.downloadURL+" returned "+err.status+"!","Unable to create Datalet");
       }
     )
+  }
 
+  openExistingDatalet(distribution:DCATDistribution){
+    this.dialogService.open(ShowDataletsComponent, {
+      context: {
+        distributionID: distribution.id,
+        datasetID:this.dataset.id,
+        nodeID:this.dataset.nodeID
+      }
+    });
   }
 
 }

src/app/pages/data-catalogue/services/data-cataglogue-api.service.ts

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ConfigService } from '@ngx-config/core';
 import { Observable } from 'rxjs';
+import { Datalet } from '../model/datalet';
 import { DCATDataset } from '../model/dcatdataset';
 import { DCATDistribution } from '../model/dcatdistribution';
 import { ODMSCatalogue } from '../model/odmscatalogue';
@@ -55,4 +56,7 @@ export class DataCataglogueAPIService {
     return this.http.get<any>(`${this.apiEndpoint}/Idra/api/v1/client/downloadFromUri?downloadFile=false&url=${encodeURIComponent(distribution.downloadURL)}`);
   }
 
+  getDatalets(catalogueId:string, datasetId:string, ditributionId:string):Observable<Array<Datalet>>{
+    return this.http.get<Array<Datalet>>(`${this.apiEndpoint}/Idra/api/v1/client/catalogues/${catalogueId}/dataset/${datasetId}/distribution/${ditributionId}/datalets`);
+  }
 }

src/app/pages/data-catalogue/show-datalets/show-datalets.component.html

+<nb-card>
+    <nb-card-header>
+        Datalets
+    </nb-card-header>
+    <nb-card-body class="d-flex flex-column">
+        <nb-select class="mb-2" size="small" placeholder="Select Showcase" [(selected)]="selected">
+            <nb-option *ngFor="let datalet of datalets" [value]='datalet'>{{datalet.title}}</nb-option>
+        </nb-select>
+       <div [innerHTML]="selected.datalet_html | safeHtml"></div>
+    </nb-card-body>
+</nb-card>
\ No newline at end of file

src/app/pages/data-catalogue/show-datalets/show-datalets.component.scss

+nb-card {
+    /**
+     * This is the max-width value of the Bootstrap giant modal
+     * Using it here ensures the modal will properly adjust it's width to the content
+     */
+    max-width: 80vw;
+    min-width: 50vw;
+    /**
+     * This is the height value of NbComponentSize 'giant'
+     * By setting max-height of the modal card to this value, we ensure the modal will properly adjust it's height
+     * to the content
+     */
+    max-height: 80vh;
+    min-height: 50vh;
+  }
\ No newline at end of file

src/app/pages/data-catalogue/show-datalets/show-datalets.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShowDataletsComponent } from './show-datalets.component';
+
+describe('ShowDataletsComponent', () => {
+  let component: ShowDataletsComponent;
+  let fixture: ComponentFixture<ShowDataletsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ShowDataletsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowDataletsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/data-catalogue/show-datalets/show-datalets.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+import { Datalet } from '../model/datalet';
+import { DataCataglogueAPIService } from '../services/data-cataglogue-api.service';
+
+@Component({
+  selector: 'ngx-show-datalets',
+  templateUrl: './show-datalets.component.html',
+  styleUrls: ['./show-datalets.component.scss']
+})
+export class ShowDataletsComponent implements OnInit {
+
+
+  datasetID:string;
+  nodeID:string;
+  distributionID:string;
+
+  datalets:Array<Datalet>=[];
+
+  selected:Datalet=new Datalet();
+
+  constructor(
+    protected dialogRef: NbDialogRef<ShowDataletsComponent>, protected restApi: DataCataglogueAPIService) {}
+
+  ngOnInit(): void {
+    this.restApi.getDatalets(this.nodeID,this.datasetID,this.distributionID).subscribe(
+      res => {
+        this.datalets=res;
+        this.selected=this.datalets[0];
+      },
+      err => console.log(err)
+    )
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+}