Skip to content
Permalink
Browse files
feat(ontology): refactor list of properties in resource class (DSP-1360
…) (#389)

* feat(ontology): own component for list of properties in res class

* test(ontology): update test for property info component

* feat(ontology): better list of props in class

* chore(cache): better error message in cache

* chore(ontology): better cache handling to use in child component

* feat(ontology): new list of properties in res class

* style(ontology): refactor res class viewer

* chore(ontology): update property info component

* refactor(ontology): clean up code

* refactor(ontology): clean up code

* refactor(ontology): clean up code

* test(ontology): bug fix in tests

* chore(deps): update package-lock.json

* fix(ontology): avoid `null:null` in prop type tooltip

* chore(ontology): add missing space

* fix(ontology): display prop even without gui order

* style(ontology): fix design issue in res class form

* refactor(ontology): clean up code

* refactor(ontology): clean up code

* feat(ontology): support all project ontologies in list of properties

* chore(ontology): delete console.logs

* refactor(ontology): fix typo in comments

* fix(ontology): fix cache issues in main ontology view

* refactor(ontology): delete console.logs

* test(ontology): add more property info tests
  • Loading branch information
kilchenmann committed Feb 22, 2021
1 parent 0a9be0e commit aa565b3f5265cc0416e05282db400bfe9194836e
@@ -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,
@@ -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');
}

}
@@ -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: [
@@ -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']"
@@ -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>

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

0 comments on commit aa565b3

Please sign in to comment.