Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(resource): improve list of properties in resource viewer (#453)
* feat(resource): combination of two components * test(resource): complete tests in properties comp * refactor(resource): delete unused components * test(resource): enable all tests * refactor(resource): clean up code * refactor(resource): clean up code * style(resource): fix style issue in still image viewer * refactor: sort imports
- Loading branch information
1 parent
721c851
commit 49d9b7f
Showing
13 changed files
with
512 additions
and
704 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
src/app/workspace/resource/properties/properties.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
|
|
||
| <!-- toolbar --> | ||
| <div class="toolbar" *ngIf="project"> | ||
| <!-- resource info --> | ||
| <h3 class="label mat-title"> | ||
| {{resource.res.label}} | ||
| </h3> | ||
| <span class="fill-remaining-space"></span> | ||
|
|
||
| <!-- tools: share, add to favorites, edit, delete etc. --> | ||
| <span> | ||
| <!-- TODO: activate favorite action to add resource to collection --> | ||
| <!-- | ||
| <button mat-button class="add-res-to-collection"> | ||
| <mat-icon>star_border</mat-icon> | ||
| </button> | ||
| --> | ||
|
|
||
| <!-- Toggle list of properties: all or only the ones with value --> | ||
| <button mat-button class="toggle-props" matTooltip="Toggle list of properties" matTooltipPosition="above" | ||
| (click)="showAllProps = !showAllProps"> | ||
| <mat-icon>{{showAllProps ? 'unfold_less' : 'unfold_more'}}</mat-icon> | ||
| <span class="desktop-only">{{showAllProps ? 'Hide empty' : 'Show all'}} properties</span> | ||
| </button> | ||
|
|
||
| <!-- TODO: activate delete action to delete the whole resource --> | ||
| <!-- | ||
| <button mat-button class="delete-res"> | ||
| <mat-icon>delete</mat-icon> | ||
| </button> | ||
| --> | ||
|
|
||
| <!-- Share resource by copying the ark url --> | ||
| <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above" | ||
| [matMenuTriggerFor]="share"> | ||
| <mat-icon>share</mat-icon> | ||
| <span class="desktop-only">Citation Link</span> | ||
| </button> | ||
| <mat-menu #share="matMenu" class="res-share-menu"> | ||
| <!-- citation link - ARK URL --> | ||
| <div class="ark-url-label mat-body"> | ||
| <label for="clipboard-arkurl">Citation Link (ARK URL)</label> | ||
| </div> | ||
| <div class="ark-url-input"> | ||
| <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly | ||
| [(ngModel)]="resource.res.versionArkUrl" /> | ||
| <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.res.versionArkUrl" | ||
| matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openSnackBar()"> | ||
| <mat-icon class="icon-arkurl">content_copy</mat-icon> | ||
| </button> | ||
| </div> | ||
| </mat-menu> | ||
| </span> | ||
| </div> | ||
|
|
||
| <!-- additional line with project and user information --> | ||
| <div class="infobar mat-caption" *ngIf="project && user"> | ||
| <p *ngIf="displayProjectInfo">This resource belongs to the project | ||
| <span class="project link" (click)="openProject(project)" (mouseover)="previewProject(project)"> | ||
| <b>{{project?.shortname}}</b> | ||
| <mat-icon inline>open_in_new</mat-icon> | ||
| </span> | ||
| </p> | ||
| <span class="fill-remaining-space"></span> | ||
| <p *ngIf="user || resource.res.creationDate"> | ||
| Created | ||
| <span *ngIf="user">by {{(user.username ? user.username : user.givenName + ' ' + user.familyName)}}</span> | ||
| <span *ngIf="resource.res.creationDate"> on {{resource.res.creationDate | date}}</span> | ||
| </p> | ||
| </div> | ||
|
|
||
| <!-- list of properties --> | ||
| <div class="properties-container"> | ||
| <div class="properties" *ngIf="resource.resProps.length !== 0; else noProperties"> | ||
|
|
||
| <!-- list of properties --> | ||
| <div *ngFor="let prop of resource.resProps; let last = last"> | ||
| <!-- show property; all in case of showAll === true or only the ones with prop.values --> | ||
| <div *ngIf="!prop.propDef['isLinkProperty'] && showAllProps || ( prop.values && prop.values.length > 0 )" | ||
| [class.border-bottom]="prop.values && !last" | ||
| class="property"> | ||
| <div class="property-label"> | ||
| <!-- label of the property --> | ||
| <h3 class="label mat-subheading-1" | ||
| [class.label-info]="prop.propDef.comment" | ||
| [matTooltip]="prop.propDef.comment" | ||
| matTooltipPosition="above"> | ||
| {{prop.propDef.label}} | ||
| </h3> | ||
| </div> | ||
| <div class="property-value"> | ||
| <!-- the value(s) of the property --> | ||
| <div *ngFor="let val of prop.values"> | ||
| <dsp-display-edit *ngIf="val" | ||
| #displayEdit | ||
| [parentResource]="resource.res" | ||
| [displayValue]="val" | ||
| [propArray]="resource.resProps" | ||
| (referredResourceClicked)="openResource($event)" | ||
| (referredResourceHovered)="previewResource($event)"> | ||
| </dsp-display-edit> | ||
| </div> | ||
| <!-- Add value form --> | ||
| <div *ngIf="addValueFormIsVisible && propID === prop.propDef.id"> | ||
| <dsp-add-value #addValue | ||
| class="add-value" | ||
| [parentResource]="resource.res" | ||
| [resourcePropertyDefinition]="$any(resource.res.entityInfo.properties[prop.propDef.id])" | ||
| (operationCancelled)="hideAddValueForm()"> | ||
| </dsp-add-value> | ||
| </div> | ||
| <!-- Add button --> | ||
| <div *ngIf="addValueIsAllowed(prop)"> | ||
| <button class="create" | ||
| (click)="showAddValueForm(prop)" | ||
| title="Add a new value"> | ||
| <mat-icon>add_box</mat-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <ng-template #noProperties>The resource {{resource?.res.resourceClassLabel}} has no defined | ||
| properties.</ng-template> | ||
| </div> |
66 changes: 56 additions & 10 deletions
66
...erties/resource-properties.component.scss → ...urce/properties/properties.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.