feat(resource): create link / collection resource (DSP-1835)

package.json

@@ -34,7 +34,7 @@
     "@angular/router": "^11.2.9",
     "@ckeditor/ckeditor5-angular": "^1.2.3",
     "@dasch-swiss/dsp-js": "^3.0.0",
-    "@dasch-swiss/dsp-ui": "^1.7.4",
+    "@dasch-swiss/dsp-ui": "^1.7.5",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "5.0.0",
     "3d-force-graph": "^1.60.12",

src/app/app.module.ts

@@ -97,6 +97,7 @@ import { ResourceComponent } from './workspace/resource/resource.component';
 import { ResultsComponent } from './workspace/results/results.component';
 import { AudioComponent } from './workspace/resource/representation/audio/audio.component';
 import { IntermediateComponent } from './workspace/intermediate/intermediate.component';
+import { ResourceLinkFormComponent } from './workspace/resource/resource-link-form/resource-link-form.component';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
@@ -180,6 +181,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         VisualizerComponent,
         AudioComponent,
         IntermediateComponent,
+        ResourceLinkFormComponent,
     ],
     imports: [
         AppRoutingModule,

src/app/main/dialog/dialog.component.html

@@ -387,6 +387,13 @@
         </mat-dialog-actions>
     </div>
 
+    <div *ngSwitchCase="'linkResources'">
+        <app-dialog-header [title]="data.title" [subtitle]="'Link resources'"></app-dialog-header>
+        <mat-dialog-content>
+            <app-resource-link-form [resources]="data.selectedResources" (closeDialog)="dialogRef.close($event)"></app-resource-link-form>
+        </mat-dialog-content>
+    </div>
+
     <!-- general error message -->
     <div *ngSwitchCase="'error'">
         <app-error [status]="data.id"></app-error>

src/app/main/dialog/dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FilteredResources } from '@dasch-swiss/dsp-ui';
 import { PropertyInfoObject } from 'src/app/project/ontology/default-data/default-properties';
 
 export interface DialogData {
@@ -16,6 +17,7 @@ export interface DialogData {
     position?: number;
     parentIri?: string;
     projectCode?: string;
+    selectedResources?: FilteredResources;
 }
 
 export interface ConfirmationWithComment {

src/app/workspace/intermediate/intermediate.component.html

@@ -9,26 +9,15 @@
         <div class="action">
             <span class="fill-remaining-space"></span>
             <span>
-                <!-- link button to create a link resource (linkObj); TODO: add function to create link object -->
-                <!-- at the moment the button is disabled because of the missing functionality; it needs a "span-tag-hack" to display the tooltip -->
-                <span matTooltip="Create a link object from this selection | Currently not implemented"
-                [matTooltipPosition]="'above'">
-                    <button mat-mini-fab color="primary"
-                    class="link"
-                    matTooltip="Create a link object from this selection"
-                    [matTooltipPosition]="'above'"
-                    [disabled]="true"
-                    (click)="action.emit('link')">
+                <!-- link button to create a link resource (linkObj) -->
+                <button mat-mini-fab color="primary" class="link" matTooltip="Create a link object from this selection"
+                    [matTooltipPosition]="'above'" [disabled]="resources.count < 2" (click)="openDialog('link', resources)">
                     <mat-icon>link</mat-icon>
                 </button>
-            </span>
+                <!-- TODO: add more functionality for multiple resources: edit (only if same resource type), add to favorites, delete etc. -->
                 <!-- compare button to compare more than two resources -->
-                <button mat-mini-fab color="primary"
-                    class="compare"
-                    matTooltip="Compare the selected resources"
-                    [matTooltipPosition]="'above'"
-                    [disabled]="resources.count < 2"
-                    (click)="action.emit('compare')">
+                <button mat-mini-fab color="primary" class="compare" matTooltip="Compare the selected resources"
+                    [matTooltipPosition]="'above'" [disabled]="resources.count < 2" (click)="action.emit('compare')">
                     <mat-icon>compare_arrows</mat-icon>
                 </button>
             </span>

src/app/workspace/intermediate/intermediate.component.spec.ts

@@ -1,10 +1,13 @@
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { By } from '@angular/platform-browser';
-import { FilteredResouces } from '@dasch-swiss/dsp-ui';
+import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
+import { AppInitService, DspActionModule, DspApiConfigToken, DspApiConnectionToken, FilteredResources } from '@dasch-swiss/dsp-ui';
+import { TestConfig } from 'test.config';
 import { IntermediateComponent } from './intermediate.component';
 
 /**
@@ -17,12 +20,13 @@ class OneSelectedResourcesComponent {
 
     @ViewChild('intermediateView') intermediateComponent: IntermediateComponent;
 
-    resources: FilteredResouces = {
+    resources: FilteredResources = {
         'count': 1,
         'resListIndex': [1],
-        'resIds': [
-            'http://rdfh.ch/0803/83616f8d8501'
-        ],
+        'resInfo': [{
+            'id': 'http://rdfh.ch/0803/83616f8d8501',
+            'label': '65r'
+        }],
         'selectionType': 'multiple'
     };
 
@@ -40,13 +44,22 @@ class ThreeSelectedResourcesComponent {
 
     @ViewChild('intermediateView') intermediateComponent: IntermediateComponent;
 
-    resources: FilteredResouces = {
+    resources: FilteredResources = {
         'count': 3,
         'resListIndex': [3, 2, 1],
-        'resIds': [
-            'http://rdfh.ch/0803/83616f8d8501',
-            'http://rdfh.ch/0803/71e0b9958a01',
-            'http://rdfh.ch/0803/683d5cd26f01'
+        'resInfo': [
+            {
+                'id': 'http://rdfh.ch/0803/83616f8d8501',
+                'label': '65r'
+            },
+            {
+                'id': 'http://rdfh.ch/0803/71e0b9958a01',
+                'label': '76r'
+            },
+            {
+                'id': 'http://rdfh.ch/0803/683d5cd26f01',
+                'label': '17v'
+            },
         ],
         'selectionType': 'multiple'
     };
@@ -71,12 +84,24 @@ describe('IntermediateComponent', () => {
                 ThreeSelectedResourcesComponent
             ],
             imports: [
+                DspActionModule,
                 MatButtonModule,
+                MatDialogModule,
                 MatIconModule,
                 MatTooltipModule
+            ],
+            providers: [
+                AppInitService,
+                {
+                    provide: DspApiConfigToken,
+                    useValue: TestConfig.ApiConfig
+                },
+                {
+                    provide: DspApiConnectionToken,
+                    useValue: new KnoraApiConnection(TestConfig.ApiConfig)
+                }
             ]
-        })
-            .compileComponents();
+        }).compileComponents();
     });
 
     beforeEach(() => {

src/app/workspace/intermediate/intermediate.component.ts

@@ -1,5 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FilteredResouces } from '@dasch-swiss/dsp-ui';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { FilteredResources } from '@dasch-swiss/dsp-ui';
+import { DialogComponent } from 'src/app/main/dialog/dialog.component';
+import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 
 @Component({
     selector: 'app-intermediate',
@@ -8,7 +11,7 @@ import { FilteredResouces } from '@dasch-swiss/dsp-ui';
 })
 export class IntermediateComponent implements OnInit {
 
-    @Input() resources: FilteredResouces;
+    @Input() resources: FilteredResources;
 
     @Output() action: EventEmitter<string> = new EventEmitter<string>();
 
@@ -20,8 +23,40 @@ export class IntermediateComponent implements OnInit {
         }
     };
 
-    constructor() { }
+    constructor(
+        private _dialog: MatDialog,
+        private _errorHandler: ErrorHandlerService,
+    ) { }
 
     ngOnInit(): void { }
 
+    /**
+     * opens the dialog box with a form to create a link resource, to edit resources etc.
+     * @param type 'link' --> TODO: will be expanded with other types like edit, delete etc.
+     * @param data
+     */
+    openDialog(type: 'link', data: FilteredResources) {
+
+        const title = 'Create a collection of ' + data.count + ' resources';
+
+        const dialogConfig: MatDialogConfig = {
+            width: '640px',
+            maxHeight: '80vh',
+            position: {
+                top: '112px'
+            },
+            data: { mode: type + 'Resources', title: title, selectedResources: data }
+        };
+
+        const dialogRef = this._dialog.open(
+            DialogComponent,
+            dialogConfig
+        );
+
+        dialogRef.afterClosed().subscribe((resId: string) => {
+
+            // do something with the intermediate view... but what should we do / display? Maybe the new resource...
+        });
+    }
+
 }