properties.component.html

<!-- toolbar -->
<div class="toolbar" *ngIf="project" [class.deleted]="deletedResource">
    <!-- resource info -->
    <h3 class="label mat-title">
        {{resource.res.label}} <span *ngIf="deletedResource">(deleted)</span>
    </h3>

    <span class="fill-remaining-space"></span>

    <!-- tools: share, add to favorites, edit, delete etc. -->
    <span class="action">

        <!-- Toggle list of properties: all or only the ones with value -->
        <button mat-icon-button class="toggle-props" [matTooltip]="(showAllProps ? 'Hide empty' : 'Show all')+' properties'" matTooltipPosition="above"
            (click)="toggleAllProps(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: copy ark url, add to favorites or open in new tab -->
        <button mat-icon-button class="share-res" matTooltip="Share resource: {{resource.res.versionArkUrl}}" matTooltipPosition="above"
            [disabled]="deletedResource"
            [matMenuTriggerFor]="share">
            <mat-icon>share</mat-icon>
            <!-- <span class="desktop-only">Citation Link</span> -->
        </button>
        <mat-menu #share="matMenu" class="res-share-menu">
            <button mat-menu-item matTooltip="Copy ARK url" matTooltipPosition="above"
                [cdkCopyToClipboard]="resource.res.versionArkUrl" (click)="openSnackBar()">
                <mat-icon>content_copy</mat-icon>
                Copy ARK url to clipboard
            </button>
            <button mat-menu-item matTooltip="Open in new tab" matTooltipPosition="above"
                (click)="openResource(resource.res.id)">
                <mat-icon>open_in_new</mat-icon>
                Open resource in new tab
            </button>
                <!-- TODO: activate favorite action to add resource to collection -->
                <!--
                <button mat-button class="add-res-to-collection">
                    <mat-icon>star_border</mat-icon>
                </button>
                -->
        </mat-menu>

        <!-- more menu with: delete, erase resource -->
        <button *ngIf="editPermissions" mat-icon-button class="more-menu" matTooltip="More" matTooltipPosition="above" [matMenuTriggerFor]="more" [disabled]="deletedResource">
            <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #more="matMenu" class="res-more-menu">
            <button mat-menu-item matTooltip="Edit the label of this resource" matTooltipPosition="above" (click)="openDialog('edit')">
                <mat-icon>edit</mat-icon>
                Edit label
            </button>
            <button mat-menu-item matTooltip="Move resource to trash bin." matTooltipPosition="above" (click)="openDialog('delete')">
                <mat-icon>delete</mat-icon>
                Delete resource
            </button>
            <button mat-menu-item matTooltip="Erase resource forever. This cannot be undone." matTooltipPosition="above"
                [disabled]="!adminPermissions" (click)="openDialog('erase')">
                <mat-icon>delete_forever</mat-icon>
                Erase resource
            </button>
        </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.propDef.objectType !== representationConstants.stillImage &&
                        prop.propDef.objectType !== representationConstants.movingImage &&
                        prop.propDef.objectType !== representationConstants.audio &&
                        prop.propDef.objectType !== representationConstants.document &&
                        prop.propDef.objectType !== 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>