properties.component.html

<!-- 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="(showAllProps || ( prop.values && prop.values.length > 0 )) &&
                        (!prop.propDef['isLinkProperty'] &&
                        prop.guiDef.propertyIndex !== representationConstants.stillImage &&
                        prop.guiDef.propertyIndex !== representationConstants.movingImage &&
                        prop.guiDef.propertyIndex !== representationConstants.audio &&
                        prop.guiDef.propertyIndex !== representationConstants.document &&
                        prop.guiDef.propertyIndex !== representationConstants.text)"
                [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>