diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7d750a11d6..a571ad2317 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -166,6 +166,11 @@ const routes: Routes = [ component: ResourceComponent, runGuardsAndResolvers: 'always' }, + { + path: 'resource/:id/:val', + component: ResourceComponent, + runGuardsAndResolvers: 'always' + }, { path: 'cookie-policy', component: CookiePolicyComponent diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.html b/src/app/workspace/resource/operations/display-edit/display-edit.component.html index cd5e4a6ba3..5f772e18c2 100644 --- a/src/app/workspace/resource/operations/display-edit/display-edit.component.html +++ b/src/app/workspace/resource/operations/display-edit/display-edit.component.html @@ -2,7 +2,7 @@
+ [ngClass]="{'hover' : valueHovered, 'highlight' : shouldHighlightValue(valueUuidToHighlight)}"> diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts b/src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts index 75ff6fb3b0..e474d91d82 100644 --- a/src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts +++ b/src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts @@ -64,6 +64,8 @@ class TestTextValueAsStringComponent { @Input() mode; @Input() displayValue; + + @Input() guiElement: 'simpleText' | 'textArea' | 'richText' = 'simpleText'; } @Component({ diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.ts b/src/app/workspace/resource/operations/display-edit/display-edit.component.ts index 8824823e2e..ce8bac4eff 100644 --- a/src/app/workspace/resource/operations/display-edit/display-edit.component.ts +++ b/src/app/workspace/resource/operations/display-edit/display-edit.component.ts @@ -79,6 +79,8 @@ export class DisplayEditComponent implements OnInit { @Input() projectStatus: boolean; + @Input() valueUuidToHighlight: string; + @Output() referredResourceClicked: EventEmitter = new EventEmitter(); @Output() referredResourceHovered: EventEmitter = new EventEmitter(); @@ -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; } /** diff --git a/src/app/workspace/resource/properties/properties.component.html b/src/app/workspace/resource/properties/properties.component.html index d4ef61e983..dbfb5e9db3 100644 --- a/src/app/workspace/resource/properties/properties.component.html +++ b/src/app/workspace/resource/properties/properties.component.html @@ -122,6 +122,7 @@

[propArray]="resource.resProps" [canDelete]="deleteValueIsAllowed(prop)" [projectStatus]="project?.status" + [valueUuidToHighlight]="valueUuidToHighlight" (referredResourceClicked)="openResource($event)" (referredResourceHovered)="previewResource($event)"> diff --git a/src/app/workspace/resource/properties/properties.component.spec.ts b/src/app/workspace/resource/properties/properties.component.spec.ts index 077e464707..8326261d34 100644 --- a/src/app/workspace/resource/properties/properties.component.spec.ts +++ b/src/app/workspace/resource/properties/properties.component.spec.ts @@ -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 = new EventEmitter(); @Output() referredResourceHovered: EventEmitter = new EventEmitter(); diff --git a/src/app/workspace/resource/properties/properties.component.ts b/src/app/workspace/resource/properties/properties.component.ts index dfd15967dc..170716afa6 100644 --- a/src/app/workspace/resource/properties/properties.component.ts +++ b/src/app/workspace/resource/properties/properties.component.ts @@ -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 diff --git a/src/app/workspace/resource/resource.component.html b/src/app/workspace/resource/resource.component.html index 5357befb8c..a71906d577 100644 --- a/src/app/workspace/resource/resource.component.html +++ b/src/app/workspace/resource/resource.component.html @@ -35,7 +35,7 @@ + [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid"> @@ -43,7 +43,7 @@ + [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid"> @@ -60,7 +60,7 @@
+ [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
diff --git a/src/app/workspace/resource/resource.component.ts b/src/app/workspace/resource/resource.component.ts index 2e3471b377..a94bc2253d 100644 --- a/src/app/workspace/resource/resource.component.ts +++ b/src/app/workspace/resource/resource.component.ts @@ -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; diff --git a/src/assets/style/_viewer.scss b/src/assets/style/_viewer.scss index c86294fbc3..36242d470b 100644 --- a/src/assets/style/_viewer.scss +++ b/src/assets/style/_viewer.scss @@ -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;