resource-class-info.component.html

<mat-card appearance="outlined" 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 ? resourceClass.comment : '')" matTooltipPosition="above">
            {{resourceClass.label | appTruncate: 24}}
        </mat-card-title>
        <mat-card-subtitle>
            <span [matTooltip]="'id: ' + resourceClass.id" matTooltipPosition="above" matTooltipClass="wide-tooltip">
                {{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" (click)="canBeDeleted()">
                    <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">
            <span *ngIf="userCanEdit">
                <button mat-menu-item class="res-class-edit"
                    (click)="editResourceClass.emit({iri: resourceClass.id, label: resourceClass.label})">
                    Edit resource class info
                </button>
            </span>
            <span [matTooltip]="(classCanBeDeleted ? 'This class doesn\'t have any instances yet' : null)"
                matTooltipPosition="before">
                <button mat-menu-item (click)="openResourceInstances(resourceClass.id)" [disabled]="classCanBeDeleted">
                    Open resource instances
                </button>
            </span>
            <span *ngIf="userCanEdit"
                [matTooltip]="classCanBeDeleted ? null : 'This class can\'t be deleted because it is in use'"
                matTooltipPosition="before">
                <button mat-menu-item [disabled]="!classCanBeDeleted || !userCanEdit" 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" class="resource-class-content">
        <mat-list cdkDropList class="resource-class-properties" (cdkDropListDropped)="drop($event)"
            *ngIf="propsToDisplay.length; else noProperties">
            <div cdkDrag
                [cdkDragDisabled]="(!ontology.lastModificationDate || !canChangeGuiOrder) || !userCanEdit"
                *ngFor="let prop of propsToDisplay; let i = index;">
                <div class="drag-n-drop-placeholder" *cdkDragPlaceholder></div>
                <mat-list-item class="property" [disabled]="loadProperty">
                    <span cdkDragHandle matListItemIcon class="list-icon gui-order">
                        <span [class.hide-on-hover]="canChangeGuiOrder && lastModificationDate && userCanEdit">
                            {{i + 1}})
                        </span>
                        <span *ngIf="canChangeGuiOrder && lastModificationDate &&  userCanEdit"
                            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) -->
                    <span matListItemTitle>
                        <app-resource-class-property-info class="property-info"
                            [propDef]="propsToDisplay[i].propDef"
                            [propCard]="propsToDisplay[i]"
                            [projectUuid]="projectUuid"
                            [resourceIri]="resourceClass.id"
                            [lastModificationDate]="lastModificationDate"
                            [userCanEdit]="userCanEdit"
                            (removePropertyFromClass)="removeProperty($event)"
                            (changeCardinalities)="changeCardinalities($event)">
                        </app-resource-class-property-info>
                    </span>
                </mat-list-item>
            </div>
        </mat-list>
        <!-- message if the class doesn't have any properties -->
        <ng-template #noProperties>
            <p>There are no properties assigned to this class yet.</p>
        </ng-template>
        <!-- button to assign new property to class -->
        <mat-list>
            <!-- here we have to know if the class has values or not -->
            <mat-list-item *ngIf="lastModificationDate && projectStatus && userCanEdit" 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">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 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">
            <ng-container *ngFor="let onto of existingProperties">
                <button mat-menu-item [disabled]="!onto.properties.length" [matMenuTriggerFor]="sub_menu">{{
                    onto.ontologyLabel }}</button>
                <mat-menu #sub_menu="matMenu" class="default-nested-sub-menu">
                    <button mat-menu-item *ngFor="let prop of onto.properties" [matTooltip]="prop.propDef.comment"
                        matTooltipPosition="after" (click)="addExistingProperty(prop)">
                        <mat-icon>{{prop.propType?.icon}}</mat-icon> {{prop.propDef.label}}
                    </button>
                </mat-menu>
            </ng-container>
        </mat-menu>
    </mat-card-content>
</mat-card>