Skip to content
Permalink
Browse files
feat(ontology): display id / name in property and class (DEV-37) (#544)
* feat(ontology): display id / name in property and class (DEV-37)

* style(ontology): better overview in list of properties

* chore(gh): update PR template

* test(ontology): fix unit tests
  • Loading branch information
kilchenmann committed Oct 1, 2021
1 parent a88dd79 commit 0a2bcfbd5121bb9d49c18d3b45b0567ab7350e05
@@ -1,4 +1 @@
===REMOVE===
Important! Please follow the new guidelines for naming Pull Requests: https://docs.dasch.swiss/developers/dsp/contribution/#pull-request-guidelines
===REMOVE===
resolves DSP-
resolves DEV-
@@ -193,7 +193,7 @@ <h2 class="mat-title">
<div class="ontology-editor-list properties" *ngIf="view === 'properties'">
<!-- list of resource properties -->
<mat-list>
<mat-list-item class="property" *ngFor="let prop of ontoProperties">
<mat-list-item class="property" *ngFor="let prop of ontoProperties; let odd = odd" [class.odd]="odd">
<!-- display only properties with guiOrder and if they exist in list of properties;
objectType is not a linkValue (otherwise we have the property twice) -->
<app-property-info
@@ -86,9 +86,11 @@ $width: 340px;
.property {
height: 56px !important;
margin: 4px 0;

&.odd {
background-color: $primary_50;
}
&:hover {
background-color: $black-12-opacity;
background-color: $black-14-opacity;
}
}
}
@@ -9,16 +9,21 @@
<!-- 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>
<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">
<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>
@@ -40,7 +45,6 @@
<ng-template #notUsed>
<span class="not-used">This property is not used in a class</span>
</ng-template>

</span>
</div>

@@ -9,6 +9,10 @@
color: $primary_700;
}

.flex {
display: flex !important;
}

.mat-line.title {
line-height: 1.8;
.mat-icon {
@@ -27,6 +27,7 @@ import { CacheService } from 'src/app/main/cache/cache.service';
import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
import { DialogHeaderComponent } from 'src/app/main/dialog/dialog-header/dialog-header.component';
import { DialogComponent } from 'src/app/main/dialog/dialog.component';
import { SplitPipe } from 'src/app/main/pipes/split.pipe';
import { PropertyFormComponent } from '../property-form/property-form.component';
import { PropertyInfoComponent } from './property-info.component';

@@ -194,6 +195,7 @@ describe('PropertyInfoComponent', () => {
SimpleTextHostComponent,
PropertyFormComponent,
PropertyInfoComponent,
SplitPipe
],
imports: [
BrowserAnimationsModule,
@@ -7,6 +7,10 @@
{{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>
@@ -43,9 +47,9 @@
<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">
*ngFor="let prop of propsToDisplay; let i = index; let odd = odd">
<div class="drag-n-drop-placeholder" *cdkDragPlaceholder></div>
<mat-list-item class="property">
<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"
@@ -30,6 +30,7 @@
}

.resource-class-properties {

li.property-info {
list-style-type: none;
white-space: nowrap;
@@ -53,10 +54,14 @@
}

.property {
&.odd {
background-color: $primary_50;
}

&:hover,
&:active,
&:focus {
background-color: $black-12-opacity;
background-color: $black-14-opacity;

.gui-order {
.display-on-hover {
@@ -69,6 +74,8 @@
}
}



.gui-order {
.display-on-hover {
display: none;
@@ -18,6 +18,7 @@ import { CanDoResponse, ClassDefinition, Constants, MockOntology, OntologiesEndp
import { of } from 'rxjs';
import { CacheService } from 'src/app/main/cache/cache.service';
import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
import { SplitPipe } from 'src/app/main/pipes/split.pipe';
import { TruncatePipe } from 'src/app/main/pipes/string-transformation/truncate.pipe';
import { SortingService } from 'src/app/main/services/sorting.service';
import { ResourceClassInfoComponent } from './resource-class-info.component';
@@ -90,6 +91,7 @@ describe('ResourceClassInfoComponent', () => {
declarations: [
HostComponent,
ResourceClassInfoComponent,
SplitPipe,
TruncatePipe
],
imports: [
@@ -162,7 +164,7 @@ describe('ResourceClassInfoComponent', () => {

});

it('expect title to be "Blue thing" and subclass of "Thing"', () => {
it('expect title to be "Blue thing", id name "BlueThing" and subclass of "Thing"', () => {
expect(hostComponent.resourceClassInfoComponent).toBeTruthy();
expect(hostComponent.resourceClassInfoComponent.resourceClass).toBeDefined();

@@ -174,7 +176,8 @@ describe('ResourceClassInfoComponent', () => {

const subtitle: DebugElement = hostCompDe.query(By.css('mat-card-subtitle'));

expect(subtitle.nativeElement.innerText).toEqual('Thing');
expect(subtitle.nativeElement.innerText).toContain('BlueThing');
expect(subtitle.nativeElement.innerText).toContain('Thing');
});

it('expect delete res class button should be disabled', () => {

0 comments on commit 0a2bcfb

Please sign in to comment.