Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
* feat(resource comparison viewer): create component * feat(resource comparison viewer): add component in playground * feat(resource comparison viewer): split window to display resource ids * feat(resource comparison viewer): display resource details * feat(resource comparison viewer): add description in viewer module * feat(resource comparison viewer): add test cases
- Loading branch information
Snehal Kumbhar
committed
Jul 16, 2021
1 parent
f08b50d
commit b24274e
Showing
9 changed files
with
212 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <div class="content"> | ||
| <as-split direction="vertical"> | ||
| <as-split-area> | ||
| <!-- note: This part is repeating twice (not added as component) because angular-split | ||
| library does not support addition div inside as-split --> | ||
| <as-split direction="horizontal"> | ||
| <as-split-area *ngFor="let res of topRow"> | ||
| <dsp-resource-view | ||
| [iri]="res" | ||
| [showToolbar]="true"> | ||
| </dsp-resource-view> | ||
| </as-split-area> | ||
| </as-split> | ||
| </as-split-area> | ||
| <as-split-area *ngIf="noOfResources > 3"> | ||
| <as-split direction="horizontal"> | ||
| <as-split-area *ngFor="let res of bottomRow"> | ||
| <dsp-resource-view | ||
| [iri]="res" | ||
| [showToolbar]="true"> | ||
| </dsp-resource-view> | ||
| </as-split-area> | ||
| </as-split> | ||
| </as-split-area> | ||
| </as-split> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .content { | ||
| width: 100%; | ||
| height: 1400px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
|
|
||
| import { Component, Input, ViewChild } from '@angular/core'; | ||
| import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; | ||
| import { AngularSplitModule } from 'angular-split'; | ||
| import { MultipleResourcesViewComponent } from './multiple-resources-view.component'; | ||
|
|
||
| /** | ||
| * Test host component to simulate child component, here resource-view. | ||
| */ | ||
| @Component({ | ||
| selector: `dsp-resource-view`, | ||
| template: `` | ||
| }) | ||
| class TestResourceViewComponent { | ||
| @Input() iri: string; | ||
| @Input() showToolbar: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * Test host component to simulate parent component. | ||
| */ | ||
| @Component({ | ||
| selector: `dsp-multiple-resources-host-component`, | ||
| template: ` | ||
| <dsp-multiple-resources-view #multipleResourcesView [noOfResources]="noOfResources" [resourceIds]="resourceIds"> | ||
| </dsp-multiple-resources-view> | ||
| ` | ||
| }) | ||
| class TestHostMultipleResourcesComponent { | ||
|
|
||
| @ViewChild('multipleResourcesView') multipleResourcesView: MultipleResourcesViewComponent; | ||
|
|
||
| resourceIds = [ | ||
| 'http://rdfh.ch/0803/18a671b8a601', | ||
| 'http://rdfh.ch/0803/7e4cfc5417', | ||
| 'http://rdfh.ch/0803/6ad3e2c47501', | ||
| 'http://rdfh.ch/0803/009e225a5f01', | ||
| 'http://rdfh.ch/0803/00ed33070f02' | ||
| ]; | ||
| noOfResources = this.resourceIds.length; | ||
| } | ||
|
|
||
| describe('MultipleResourcesViewComponent', () => { | ||
|
|
||
| let testHostComponent: TestHostMultipleResourcesComponent | ||
| let testHostFixture: ComponentFixture<TestHostMultipleResourcesComponent>; | ||
|
|
||
| beforeEach(waitForAsync(() => { | ||
|
|
||
| TestBed.configureTestingModule({ | ||
| declarations: [ | ||
| MultipleResourcesViewComponent, | ||
| TestHostMultipleResourcesComponent, | ||
| TestResourceViewComponent | ||
| ], | ||
| imports: [AngularSplitModule] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| testHostFixture = TestBed.createComponent(TestHostMultipleResourcesComponent); | ||
| testHostComponent = testHostFixture.componentInstance; | ||
| testHostFixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(testHostComponent.multipleResourcesView).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('expect top row with 2 resources', () => { | ||
| expect(testHostComponent.multipleResourcesView.topRow.length).toEqual(2); | ||
| }); | ||
|
|
||
| it('expect bottom row with 3 resources', () => { | ||
| expect(testHostComponent.multipleResourcesView.bottomRow.length).toEqual(3); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'dsp-multiple-resources-view', | ||
| templateUrl: './multiple-resources-view.component.html', | ||
| styleUrls: ['./multiple-resources-view.component.scss'] | ||
| }) | ||
| export class MultipleResourcesViewComponent implements OnInit { | ||
|
|
||
| // no of resources selected | ||
| @Input() noOfResources: number; | ||
|
|
||
| // list of resources | ||
| @Input() resourceIds: string[]; | ||
|
|
||
| // if number of selected resources > 3, divide them in 2 rows | ||
| topRow = []; | ||
| bottomRow = []; | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit(): void { | ||
| // if number of resources are more than 3, divide it into 2 rows | ||
| // otherwise display then in 1 row only | ||
| if (this.noOfResources < 4) { | ||
| this.topRow = this.resourceIds; | ||
| } | ||
| else { | ||
| this.topRow = this.resourceIds.slice(0, this.noOfResources / 2); | ||
| this.bottomRow = this.resourceIds.slice(this.noOfResources / 2) | ||
| } | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,47 @@ | ||
| <p>The <strong>DspViewerModule</strong> contains different component to display a resource. | ||
| The example here shows the usage of <span>dsp-resource-view</span> which combines smaller | ||
| components like one of the representation viewer or the value components. All of them can | ||
| also be used individually.</p> | ||
| <ul> | ||
| <li *ngFor="let res of resources; let i = index" | ||
| class="link" | ||
| [class.active]="resourceIri === res" | ||
| (click)="resourceIri = res"> | ||
| Example {{i}}: {{res}} | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dsp-resource-view | ||
| [iri]="resourceIri" | ||
| [showToolbar]="true" | ||
| (referredProjectClicked)="refProjectClicked($event)" | ||
| (referredProjectHovered)="refProjectHovered($event)" | ||
| (referredResourceClicked)="refResourceClicked($event)" | ||
| (referredResourceHovered)="refResourceHovered($event)"> | ||
| </dsp-resource-view> | ||
| <div class="single-resource-view"> | ||
| <h3>Single resource viewer</h3> | ||
|
|
||
| <p>The <strong>DspViewerModule</strong> contains different component to display a resource. | ||
| The example here shows the usage of <span>dsp-resource-view</span> which combines smaller | ||
| components like one of the representation viewer or the value components. All of them can | ||
| also be used individually.</p> | ||
| <ul> | ||
| <li *ngFor="let res of resources; let i = index" | ||
| class="link" | ||
| [class.active]="resourceIri === res" | ||
| (click)="resourceIri = res"> | ||
| Example {{i}}: {{res}} | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dsp-resource-view | ||
| [iri]="resourceIri" | ||
| [showToolbar]="true" | ||
| (referredProjectClicked)="refProjectClicked($event)" | ||
| (referredProjectHovered)="refProjectHovered($event)" | ||
| (referredResourceClicked)="refResourceClicked($event)" | ||
| (referredResourceHovered)="refResourceHovered($event)"> | ||
| </dsp-resource-view> | ||
| </div> | ||
|
|
||
| <br><br> | ||
|
|
||
| <hr> | ||
|
|
||
| <div class="multiple-resources-viewer"> | ||
| <h3>Multiple resources viewer</h3> | ||
|
|
||
| <p>The example here shows the usage of <strong>dsp-multiple-resources-view</strong> which | ||
| splits the view vertically and horizontally depending on the number of resources | ||
| selected and displays its details. | ||
| </p> | ||
|
|
||
| <p>Resources displayed:</p> | ||
| <ul> | ||
| <li *ngFor="let res of resourceIds; let i = index" style="background-color: aliceblue;"> | ||
| {{res}} | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dsp-multiple-resources-view [noOfResources]="noOfResources" [resourceIds]="resourceIds"></dsp-multiple-resources-view> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters