Skip to content
Permalink
Browse files
feat(resource): add additional routing for an ark url of a value (DEV…
…-196) (#575)

* feat: adds additional routing for an ark url of a value. the value is now highlighted.

* chore(test): updates an Input property name to remove an soft error in the tests

* fix(test): enable all tests

Co-authored-by: André Kilchenmann <github@milchkannen.ch>
  • Loading branch information
mdelez and kilchenmann committed Nov 8, 2021
1 parent 0da9ce2 commit c1b0b94972760c3552c1ebcef8f2a8bffd7431b5
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 12 deletions.
@@ -166,6 +166,11 @@ const routes: Routes = [
component: ResourceComponent,
runGuardsAndResolvers: 'always'
},
{
path: 'resource/:id/:val',
component: ResourceComponent,
runGuardsAndResolvers: 'always'
},
{
path: 'cookie-policy',
component: CookiePolicyComponent
@@ -2,7 +2,7 @@
<div class="value-component"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
[ngClass]='backgroundColor'>
[ngClass]="{'hover' : valueHovered, 'highlight' : shouldHighlightValue(valueUuidToHighlight)}">
<span [ngSwitch]="valueTypeOrClass">
<!-- display value is cast as 'any' because the compiler cannot infer the value type expected by the child component -->
<app-text-value-as-string class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [displayValue]="$any(displayValue)" [guiElement]="textValueGuiEle"></app-text-value-as-string>
@@ -64,6 +64,8 @@ class TestTextValueAsStringComponent {
@Input() mode;

@Input() displayValue;

@Input() guiElement: 'simpleText' | 'textArea' | 'richText' = 'simpleText';
}

@Component({
@@ -79,6 +79,8 @@ export class DisplayEditComponent implements OnInit {

@Input() projectStatus: boolean;

@Input() valueUuidToHighlight: string;

@Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();

@Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
@@ -104,7 +106,7 @@ export class DisplayEditComponent implements OnInit {
showActionBubble = false;

// string used as class name to add add to value-component element on hover
backgroundColor = '';
valueHovered: boolean;

dateDisplayOptions: 'era' | 'calendar' | 'all';

@@ -218,7 +220,7 @@ export class DisplayEditComponent implements OnInit {
*/
activateEditMode() {
this.editModeActive = true;
this.backgroundColor = '';
this.valueHovered = false;
this.mode = 'update';

// hide comment toggle button while in edit mode
@@ -358,12 +360,12 @@ export class DisplayEditComponent implements OnInit {
}

/**
* show CRUD buttons and add 'highlighted' class to the element only if editModeActive is false
* show CRUD buttons and add 'hover' class to the element only if editModeActive is false
*/
mouseEnter() {
this.showActionBubble = true;
if (!this.editModeActive) {
this.backgroundColor = 'highlighted';
this.valueHovered = true;
}
}

@@ -372,7 +374,19 @@ export class DisplayEditComponent implements OnInit {
*/
mouseLeave() {
this.showActionBubble = false;
this.backgroundColor = '';
this.valueHovered = false;
}

/**
* given a uuid of a value, highlights the corresponding value
* @param uuid uuid of the value
* @returns true if the provided uuid matches the uuid of the displayValue and edit mode is not active, false otherwise
*/
shouldHighlightValue(uuid: string): boolean {
if (uuid !== undefined && uuid === this.displayValue.uuid && !this.editModeActive) {
return true;
}
return false;
}

/**
@@ -122,6 +122,7 @@ <h3 class="label mat-title">
[propArray]="resource.resProps"
[canDelete]="deleteValueIsAllowed(prop)"
[projectStatus]="project?.status"
[valueUuidToHighlight]="valueUuidToHighlight"
(referredResourceClicked)="openResource($event)"
(referredResourceHovered)="previewResource($event)">
</app-display-edit>
@@ -103,9 +103,13 @@ class TestPropertyParentComponent implements OnInit, OnDestroy {
})
class TestDisplayValueComponent {

@Input() parentResource: DspResource;
@Input() displayValue: ReadValue;
@Input() propArray: PropertyInfoValues[];
@Input() parentResource: DspResource;
@Input() configuration?: object;
@Input() canDelete: boolean;
@Input() projectStatus: boolean;
@Input() valueUuidToHighlight: string;

@Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
@Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
@@ -86,6 +86,8 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
*/
@Input() isAnnotation = false;

@Input() valueUuidToHighlight: string;

/**
* output `referredProjectClicked` of resource view component:
* can be used to go to project page
@@ -35,15 +35,15 @@
<!-- first tab for the main resource e.g. book -->
<mat-tab [label]="resource.res.entityInfo?.classes[resource.res.type].label">
<app-properties *ngIf="resource.res" [resource]="resource" [displayProjectInfo]="true"
[adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
[adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
</app-properties>
</mat-tab>

<!-- incoming resource -->
<mat-tab *ngIf="incomingResource"
[label]="incomingResource.res.entityInfo.classes[incomingResource.res.type].label">
<app-properties *ngIf="incomingResource.res" [resource]="incomingResource" [displayProjectInfo]="false"
[adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
[adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
</app-properties>
</mat-tab>

@@ -60,7 +60,7 @@
<div class="region-property" *ngFor="let annotation of annotationResources" [id]="annotation.res.id"
[class.active]="annotation.res.id === selectedRegion">
<app-properties [resource]="annotation" [displayProjectInfo]="false" [isAnnotation]="true"
[adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
[adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
</app-properties>
</div>

@@ -43,6 +43,9 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {

@Input() resourceIri: string;

// used to store the uuid of the value that is parsed from the url params
valueUuid: string;

// this will be the main resource
resource: DspResource;

@@ -95,6 +98,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {

this._route.params.subscribe(params => {
this.resourceIri = params['id'];
this.valueUuid = params['val'];
this.getResource(this.resourceIri);
});

@@ -200,7 +204,6 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
this._dspApiConnection.v2.res.getResource(iri).subscribe(
(response: ReadResource) => {
const res = new DspResource(response);

this.resource = res;
this.selectedTabLabel = this.resource.res.entityInfo?.classes[this.resource.res.type].label;

@@ -70,10 +70,14 @@
position: relative;
}

.value-component.highlighted {
.value-component.hover {
background-color: #f5f5f5;
}

.value-component.highlight {
background-color: #f4f400;
}

.crud-buttons {
grid-row-start: 1;
grid-row-end: auto;

0 comments on commit c1b0b94

Please sign in to comment.