feat(viewer): split pane to compare multiple resource (DSP-1785)

package.json

@@ -66,6 +66,7 @@
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
+    "angular-split": "^4.0.0",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",

projects/dsp-ui/src/lib/viewer/index.ts

@@ -26,6 +26,7 @@ export * from './views/property-view/property-view.component';
 export * from './views/list-view/list-view.component';
 export * from './views/list-view/resource-list/resource-list.component';
 export * from './views/list-view/resource-grid/resource-grid.component';
+export * from './views/multiple-resources-view/multiple-resources-view.component';
 // media representations
 export * from './representation/still-image/still-image.component';
 export * from './representation/upload-file/upload-file.component';

projects/dsp-ui/src/lib/viewer/viewer.module.ts

@@ -15,11 +15,13 @@ import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { AngularSplitModule } from 'angular-split';
 import { MatJDNConvertibleCalendarDateAdapterModule } from 'jdnconvertiblecalendardateadapter';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { DspActionModule } from '../action/action.module';
@@ -33,6 +35,8 @@ import { BooleanValueComponent } from './values/boolean-value/boolean-value.comp
 import { ColorPickerComponent } from './values/color-value/color-picker/color-picker.component';
 import { ColorValueComponent } from './values/color-value/color-value.component';
 import { CalendarHeaderComponent } from './values/date-value/calendar-header/calendar-header.component';
+import { DateEditComponent } from './values/date-value/date-input-text/date-edit/date-edit.component';
+import { DateInputTextComponent } from './values/date-value/date-input-text/date-input-text.component';
 import { DateInputComponent } from './values/date-value/date-input/date-input.component';
 import { DateValueComponent } from './values/date-value/date-value.component';
 import { DecimalValueComponent } from './values/decimal-value/decimal-value.component';
@@ -53,12 +57,10 @@ import { UriValueComponent } from './values/uri-value/uri-value.component';
 import { ListViewComponent } from './views/list-view/list-view.component';
 import { ResourceGridComponent } from './views/list-view/resource-grid/resource-grid.component';
 import { ResourceListComponent } from './views/list-view/resource-list/resource-list.component';
+import { MultipleResourcesViewComponent } from './views/multiple-resources-view/multiple-resources-view.component';
 import { PropertyToolbarComponent } from './views/property-view/property-toolbar/property-toolbar.component';
 import { PropertyViewComponent } from './views/property-view/property-view.component';
 import { ResourceViewComponent } from './views/resource-view/resource-view.component';
-import { DateInputTextComponent } from './values/date-value/date-input-text/date-input-text.component';
-import { DateEditComponent } from './values/date-value/date-input-text/date-edit/date-edit.component';
-import { MatRadioModule } from '@angular/material/radio';
 
 @NgModule({
     declarations: [
@@ -96,9 +98,11 @@ import { MatRadioModule } from '@angular/material/radio';
         UploadFileComponent,
         UriValueComponent,
         DateInputTextComponent,
-        DateEditComponent
+        DateEditComponent,
+        MultipleResourcesViewComponent
     ],
     imports: [
+        AngularSplitModule.forRoot(),
         CKEditorModule,
         ClipboardModule,
         ColorPickerModule,
@@ -152,7 +156,8 @@ import { MatRadioModule } from '@angular/material/radio';
         TextValueHtmlLinkDirective,
         TimeValueComponent,
         UploadFileComponent,
-        UriValueComponent
+        UriValueComponent,
+        MultipleResourcesViewComponent
     ]
 })
 export class DspViewerModule {

projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.html

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

projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.scss

@@ -0,0 +1,4 @@
+.content {
+    width: 100%;
+    height: 1400px;
+}

projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.spec.ts

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

projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.ts

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

src/app/viewer-playground/viewer-playground.component.html

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

src/app/viewer-playground/viewer-playground.component.ts

@@ -18,6 +18,15 @@ export class ViewerPlaygroundComponent implements OnInit {
     ];
     resourceIri: string = this.resources[0];
 
+    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;
+
 
     constructor(
         private _sessionService: SessionService