resource-class-info.component.html

<mat-card class="resource-class" cdkDrag cdkDragBoundary=".drag-drop-stop">
    <!-- class card header -->
    <mat-card-header class="resource-class-header" cdkDragHandle>
        <!-- TODO: the res class icon is missing in ClassDefinition from DSP-JS-Lib; DSP-JS has to be updated first (s. DSP-1366) -->
        <!-- <mat-icon mat-card-avatar>{{resourceClass.icon}}</mat-icon> -->
        <mat-card-title [matTooltip]="resourceClass.comment" matTooltipPosition="above">
            {{resourceClass.label | appTruncate: 24}}
        </mat-card-title>
        <mat-card-subtitle>
            <span [matTooltip]="'id: ' + resourceClass.id" matTooltipPosition="above">
                {{resourceClass.id | split: '#':1}}
            </span>
            <span>&nbsp;&middot;&nbsp;</span>
            <span matTooltip="subclass of" matTooltipPosition="above">
                {{subClassOfLabel}}
            </span>
        </mat-card-subtitle>
        <span class="resource-class-header-action">
            <span class="resource-class-more" *ngIf="projectStatus"
                [matTooltip]="(ontology.lastModificationDate ? 'more' : 'This data model can\'t be edited because of missing lastModificationDate!')">
                <button mat-icon-button [matMenuTriggerFor]="resClassMenu" class="res-class-menu" [disabled]="!ontology.lastModificationDate">
                    <mat-icon>more_horiz</mat-icon>
                </button>
            </span>
            <span class="resource-class-size" [matTooltip]="(expanded ? 'Collapse class' : 'Expand class')">
                <button mat-icon-button (click)="expanded = !expanded">
                    <mat-icon>{{expanded ? "expand_less" : "expand_more"}}</mat-icon>
                </button>
            </span>
        </span>
        <mat-menu #resClassMenu="matMenu" xPosition="before">
            <button mat-menu-item class="res-class-edit"
                (click)="editResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
                Edit resource class info
            </button>
            <span
                [matTooltip]="(classCanBeDeleted ? null : 'This class can\'t be deleted because it is in use')">
                <button mat-menu-item [disabled]="!classCanBeDeleted" class="res-class-delete"
                    (click)="deleteResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
                    Delete resource class
                </button>
            </span>
        </mat-menu>
    </mat-card-header>
    <!-- resource class card content with list of properties -->
    <mat-card-content *ngIf="expanded">
        <mat-list cdkDropList class="resource-class-properties" (cdkDropListDropped)="drop($event)"
            *ngIf="propsToDisplay.length; else noProperties">
            <div cdkDrag [cdkDragDisabled]="!ontology.lastModificationDate"
                *ngFor="let prop of propsToDisplay; let i = index; let odd = odd">
                <div class="drag-n-drop-placeholder" *cdkDragPlaceholder></div>
                <mat-list-item class="property" [class.odd]="odd">
                    <span cdkDragHandle mat-list-icon class="list-icon gui-order">
                        <span [class.hide-on-hover]="cardinalityUpdateEnabled && lastModificationDate">{{i + 1}})</span>
                        <span *ngIf="lastModificationDate && cardinalityUpdateEnabled"
                            class="display-on-hover drag-n-drop-handle">
                            <mat-icon>drag_indicator</mat-icon>
                        </span>
                    </span>
                    <!-- display only properties if they exist in list of properties;
                     objectType is not a linkValue (otherwise we have the property twice) -->
                    <app-property-info class="property-info" [propDef]="ontology?.properties[prop.propertyIndex]"
                        [propCard]="propsToDisplay[i]" [projectCode]="projectCode"
                        [(lastModificationDate)]="lastModificationDate"
                        (removePropertyFromClass)="removeProperty($event)">
                    </app-property-info>
                </mat-list-item>
            </div>
        </mat-list>
        <!-- message if the class doesn't have any property -->
        <ng-template #noProperties>
            <p>There is no property assigned to this class yet.</p>
        </ng-template>
        <!-- button to assign new property to class -->
        <mat-list>
            <mat-list-item *ngIf="lastModificationDate && projectStatus" class="property link" [matMenuTriggerFor]="addPropertyMenu">
                <span mat-list-icon class="list-icon">
                    <mat-icon>add</mat-icon>
                </span>
                Add property
            </mat-list-item>
        </mat-list>

        <mat-menu #addPropertyMenu="matMenu" xPosition="after">
            <button mat-menu-item [matMenuTriggerFor]="newFromPropType">Create new from type</button>
            <button mat-menu-item [matMenuTriggerFor]="addExistingProp" [disabled]="!ontoProperties.length">Add existing
                property</button>
        </mat-menu>
        <mat-menu #newFromPropType="matMenu">
            <ng-container *ngFor="let type of defaultProperties">
                <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{type.group}}</button>
                <mat-menu #sub_menu="matMenu" class="default-nested-sub-menu">
                    <!-- <button *ngFor="let subItem of my_menu[mainItem]" mat-menu-item>{{ subItem }}</button> -->
                    <button mat-menu-item *ngFor="let ele of type.elements" [value]="ele"
                        [matTooltip]="ele.description" matTooltipPosition="after"
                        (click)="addNewProperty(ele)">
                        <mat-icon>{{ele.icon}}</mat-icon> {{ele.label}}
                    </button>
                </mat-menu>
            </ng-container>
        </mat-menu>
        <mat-menu #addExistingProp="matMenu" class="default-nested-sub-menu">
            <button mat-menu-item *ngFor="let prop of existingProperties"
                [matTooltip]="prop.propDef.comment" matTooltipPosition="after"
                (click)="addExistingProperty(prop.propDef)">
                <mat-icon>{{prop.propType?.icon}}</mat-icon> {{prop.propDef.label}}
            </button>
        </mat-menu>
    </mat-card-content>
</mat-card>