property-info.component.html

<div class="property-info" (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">

    <div mat-line class="title">
        <span class="icon" *ngIf="propType" [matTooltip]="propType?.group + ': ' + propType?.label"
            matTooltipPosition="above">
            <mat-icon class="type">{{propType?.icon}}</mat-icon>
        </span>
        <span class="label" [matTooltip]="propDef.comment" matTooltipPosition="above" matTooltipClass="multi-line-tooltip">
            <!-- display label if cardinality exists (in case the component is used in resource class view) -->
            <span *ngIf="propCard; else displayAllLabels">{{propDef.label ? propDef.label : propDef.id}}</span>
            <!-- otherwise display label in all languages (if defined) -->
            <ng-template #displayAllLabels>
                {{!propDef.labels.length ? propDef?.label : propDef.labels | appStringifyStringLiteral:'all'}}
            </ng-template>
        </span>
        <!-- property is linked to a class or to a list: display connected class or list -->
        <span class="attribute additional-info" *ngIf="propAttribute" [matTooltip]="propAttributeComment"
            matTooltipPosition="above" [innerHTML]="'&rarr;&nbsp;' + propAttribute">
        </span>
    </div>

    <div mat-line class="info additional-info" [class.flex]="propCard">
        <span [matTooltip]="'id: ' + propDef.id" matTooltipPosition="above">
            {{propDef.id | split: '#':1}}
        </span>
        <span class="fill-remaining-space center">&nbsp;&middot;&nbsp;</span>
        <!-- in case of res class: display cardinality -->
        <span *ngIf="propCard">
            <mat-icon class="multiple">{{propInfo.multiple ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
            multiple
            <mat-icon class="required">{{propInfo.required ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
            required
        </span>
        <!-- in case of ontology property: display corresponding resource classes -->
        <span *ngIf="!propCard">
            <span *ngIf="resClasses.length; else notUsed">
                Property is used in:
                <!-- <span>{{ resClasses.join(", ") }}</span> -->
                <span *ngFor="let c of resClasses; let last = last">
                    <span [matTooltip]="c.comment" matTooltipPosition="above" class="link"
                        (click)="clickedOnClass.emit(c)">{{c.label}}</span>
                    <span *ngIf="!last">,&nbsp;</span>
                </span>
            </span>
            <ng-template #notUsed>
                <span class="not-used">This property is not used in a class</span>
            </ng-template>
        </span>
    </div>

    <div class="action-bubble" *ngIf="lastModificationDate && showActionBubble && projectStatus" [@simpleFadeAnimation]="'in'">
        <!-- property action in case of resource class' view has different buttons and actions -->
        <div class="button-container" *ngIf="propCard">
            <!-- TODO: edit cardinality is disabled for the moment. Will be activated as soon as we use DSP-API 13.9.1 -->
            <button mat-button [disabled]="true" [matTooltip]="'Edit property and cardinality'">
                <mat-icon>tune</mat-icon>
            </button>
            <span
                [matTooltip]="((resClasses.length > 0) ? 'The property can\'t be removed because it\'s in use' : 'Remove property from resource class')">
                <!-- TODO: add "disabled" param as soon as we use DSP-API 13.9.1 and DSP-JS 2.4.0; use same value in matTooltip above  -->
                <button mat-button class="delete"
                    (click)="removePropertyFromClass.emit({iri: propDef.id, label: propDef.label})">
                    <mat-icon>backspace</mat-icon>
                </button>
            </span>
        </div>
        <!-- property action in case of properties' list view -->
        <div class="button-container" *ngIf="!propCard">
            <button mat-button [disabled]="!propDef.isEditable" class="edit" title="edit" [matTooltip]="'Edit property'"
                (click)="editResourceProperty.emit({propDef: propDef, propType: propType})">
                <mat-icon>edit</mat-icon>
            </button>
            <span
                [matTooltip]="((resClasses.length > 0 || !propCanBeDeleted)? 'The property can\'t be deleted because it\'s used in a class' : 'Delete property')">
                <button mat-button [disabled]="resClasses.length > 0" class="delete"
                    (click)="deleteResourceProperty.emit({iri: propDef.id, label: propDef.label})">
                    <mat-icon>delete</mat-icon>
                </button>
            </span>
        </div>
    </div>
</div>