Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(resource): create link / collection resource (DSP-1835) (#501)
  • Loading branch information
kilchenmann committed Aug 12, 2021
1 parent fb6c368 commit 8060756
Show file tree
Hide file tree
Showing 19 changed files with 772 additions and 174 deletions.
64 changes: 26 additions & 38 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Expand Up @@ -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) {
Expand Down Expand Up @@ -180,6 +181,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
VisualizerComponent,
AudioComponent,
IntermediateComponent,
ResourceLinkFormComponent,
],
imports: [
AppRoutingModule,
Expand Down
7 changes: 7 additions & 0 deletions src/app/main/dialog/dialog.component.html
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions 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 {
Expand All @@ -16,6 +17,7 @@ export interface DialogData {
position?: number;
parentIri?: string;
projectCode?: string;
selectedResources?: FilteredResources;
}

export interface ConfirmationWithComment {
Expand Down
23 changes: 6 additions & 17 deletions src/app/workspace/intermediate/intermediate.component.html
Expand Up @@ -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>
Expand Down
49 changes: 37 additions & 12 deletions 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';

/**
Expand All @@ -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'
};

Expand All @@ -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'
};
Expand All @@ -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(() => {
Expand Down
41 changes: 38 additions & 3 deletions 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',
Expand All @@ -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>();

Expand All @@ -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...
});
}

}

0 comments on commit 8060756

Please sign in to comment.