feat(ontology): refactor list of properties in resource class (DSP-1360)

src/app/app.module.ts

@@ -90,6 +90,7 @@ import { PersonTemplateComponent } from './project/board/person-template/person-
 import { AddressTemplateComponent } from './project/board/address-template/address-template.component';
 import { OrganisationTemplateComponent } from './project/board/organisation-template/organisation-template.component';
 import { EditListItemComponent } from './project/list/list-item-form/edit-list-item/edit-list-item.component';
+import { PropertyInfoComponent } from './project/ontology/property-info/property-info.component';
 
 // translate: AoT requires an exported function for factories
 export function HttpLoaderFactory(httpClient: HttpClient) {
@@ -162,7 +163,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
         PersonTemplateComponent,
         AddressTemplateComponent,
         OrganisationTemplateComponent,
-        EditListItemComponent
+        EditListItemComponent,
+        PropertyInfoComponent
     ],
     imports: [
         AppRoutingModule,

src/app/main/cache/cache.service.ts

@@ -71,7 +71,7 @@ export class CacheService {
                 });
 
         } else {
-            return throwError('Requested key is not available in Cache');
+            return throwError('Requested key "' + key + '" is not available in Cache');
         }
 
     }

src/app/project/ontology/default-data/default-properties.ts

@@ -1,6 +1,6 @@
 import { Constants } from '@dasch-swiss/dsp-js';
 
-export interface Property {
+export interface Category {
     group: string;
     elements: PropertyType[];
 }
@@ -15,7 +15,7 @@ export interface PropertyType {
 }
 
 export class DefaultProperties {
-    public static data: Property[] = [
+    public static data: Category[] = [
         {
             group: 'Text',
             elements: [

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

@@ -1,7 +1,7 @@
 <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
 
 <form [formGroup]="ontologyForm" (ngSubmit)="createOntology()" class="form" *ngIf="!loading">
-    <!-- auto complete list to select resource classs -->
+    <!-- auto complete list to select resource classes -->
     <div class="form-content">
         <mat-form-field class="large-field ontology-name">
             <input matInput [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"

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

@@ -1,7 +1,8 @@
 <div *ngIf="projectAdmin" class="desktop-only">
 
-    <p class="note warning center">This is a first version of the data model editor. Some features may not work as
-        intended.</p>
+    <p class="note warning center">
+        This is a first version of the data model editor. Some features may not work as intended.
+    </p>
     <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
 
     <!-- toolbar: select ontology -->
@@ -54,7 +55,7 @@ <h2 class="mat-title">
     </div>
 
     <!-- main content: overview shows resource classes of ontology -->
-    <div *ngIf="ontology" class="ontology-editor">
+    <div *ngIf="!loading && ontology" class="ontology-editor">
 
         <mat-toolbar class="ontology-editor-header">
             <mat-toolbar-row>
@@ -128,7 +129,7 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
             <div class="ontology-editor-canvas drag-drop-stop">
                 <div class="ontology-editor-grid">
 
-                    <!-- list of resource classs -->
+                    <!-- list of resource classes -->
                     <div *ngFor="let resClass of ontoClasses; let i = index" class="resource-class" cdkDrag
                         cdkDragBoundary=".drag-drop-stop">
                         <mat-toolbar class="resource-class-header" cdkDragHandle>
@@ -157,19 +158,18 @@ <h4 mat-card-title [matTooltip]="resClass.comment" matTooltipPosition="above">
                                 </mat-menu>
                             </mat-toolbar-row>
                         </mat-toolbar>
-                        <div class="resource-class-properties">
-                            <ul>
-                                <span *ngFor="let prop of resClass.propertiesList">
-                                    <!-- display only properties with guiOrder and they exist in list of properties
-                                and objectType is not a linkValue (otherwise we have the property twice) -->
-                                    <li
-                                        *ngIf="prop.guiOrder >= 0 && ontology?.properties[prop.propertyIndex] && ontology?.properties[prop.propertyIndex].objectType !== 'http://api.knora.org/ontology/knora-api/v2#LinkValue'">
-                                        {{ontology?.properties[prop.propertyIndex].label}}
-                                    </li>
-                                </span>
-
-                            </ul>
-                        </div>
+                        <mat-list class="resource-class-properties">
+                            <span *ngFor="let prop of resClass.propertiesList">
+                                <!-- 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
+                                    *ngIf="ontology?.properties[prop.propertyIndex]
+                                        && ontology?.properties[prop.propertyIndex].objectType !== 'http://api.knora.org/ontology/knora-api/v2#LinkValue'"
+                                    [propDef]="ontology?.properties[prop.propertyIndex]" [propCard]="prop"
+                                    [projectcode]="projectcode">
+                                </app-property-info>
+                            </span>
+                        </mat-list>
 
                     </div>
 

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

@@ -1,7 +1,7 @@
 @import "~@angular/material/theming";
 @import "../../../assets/style/config";
 
-$width: 304px;
+$width: 340px;
 
 .app-toolbar-action {
   &.select-form {
@@ -50,10 +50,9 @@ $width: 304px;
 
     .ontology-editor-grid {
       display: grid;
+      grid-template-rows: auto; // value would be "masonry" as soon it's implemented in all browsers
       grid-template-columns: repeat(auto-fill, minmax($width, 1fr));
-      grid-column-gap: 12px;
-      grid-row-gap: 12px;
-      // padding-top: 60px;
+      grid-gap: 6px;
     }
   }
 }
@@ -65,7 +64,7 @@ $width: 304px;
   @include mat-elevation-transition;
   @include mat-elevation(2);
   padding: 12px;
-  margin: 12px;
+  margin: 6px;
   background-color: #fff;
 
   .resource-class-header {
@@ -77,7 +76,8 @@ $width: 304px;
   }
 
   .resource-class-properties {
-    li {
+    li.property-info {
+      list-style-type: none;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

src/app/project/ontology/ontology.component.spec.ts

@@ -28,6 +28,7 @@ import { ErrorComponent } from 'src/app/main/error/error.component';
 import { TestConfig } from 'test.config';
 import { OntologyVisualizerComponent } from './ontology-visualizer/ontology-visualizer.component';
 import { OntologyComponent } from './ontology.component';
+import { PropertyInfoComponent } from './property-info/property-info.component';
 
 describe('OntologyComponent', () => {
     let component: OntologyComponent;
@@ -39,7 +40,8 @@ describe('OntologyComponent', () => {
                 OntologyComponent,
                 OntologyVisualizerComponent,
                 DialogComponent,
-                ErrorComponent
+                ErrorComponent,
+                PropertyInfoComponent
             ],
             imports: [
                 BrowserAnimationsModule,