feat(ontology): display id / name in property and class (DEV-37)

.github/pull_request_template.md

@@ -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-

src/app/project/ontology/ontology.component.html

@@ -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

src/app/project/ontology/ontology.component.scss

@@ -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;
           }
         }
       }

src/app/project/ontology/property-info/property-info.component.html

@@ -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>
 

src/app/project/ontology/property-info/property-info.component.scss

@@ -9,6 +9,10 @@
   color: $primary_700;
 }
 
+.flex {
+  display: flex !important;
+}
+
 .mat-line.title {
   line-height: 1.8;
   .mat-icon {

src/app/project/ontology/property-info/property-info.component.spec.ts

@@ -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,

src/app/project/ontology/resource-class-info/resource-class-info.component.html

@@ -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"

src/app/project/ontology/resource-class-info/resource-class-info.component.scss

@@ -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;

src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts

@@ -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', () => {