Skip to content
Permalink
Browse files
feat(ontology): update cardinality in resource class (DSP-1266) (#377)
* style(ontology): update ontology editor style

* feat(ontology): init "update cardinality" funcitonality

* chore(ontology): prepare resclass from for card update

* feat(ontology): update card

* chore(dsp-js): using yalc for dsp-js for the moment

* chore(dsp-api): using latest dsp-js version from main branch

* chore(dependency): update js-lib to latest version

* refactor(ontology): clean up code

* feat(ontology): set and replace cardinality

* style(ontology): change position of add prop button

* feat(ontology): create prop and class name from randomized string

* refactor(ontology): fix typo

* feat(ontology): disable own res class in res pointer

* feat(ontology): replace prop cardinality in res class

* feat(ontology): disable edit menu in case of missing lmd

* fix(ontology): fix cache issue

* refactor(ontology): delete console.log

* chore(ontology): replace ontology with data model

* refactor(ontology): delete commented code

* chore(deps): bump dsp-js from 1.3.0 to 2.0.1 and dsp-ui 1.2.1 to 1.2.2
  • Loading branch information
kilchenmann committed Feb 12, 2021
1 parent 8133d87 commit 5a766c1db06d862b2edfba49347a659f4233d1c2

Some generated files are not rendered by default. Learn more.

@@ -31,8 +31,8 @@
"@angular/platform-browser-dynamic": "~9.1.12",
"@angular/router": "~9.1.12",
"@ckeditor/ckeditor5-angular": "^1.2.3",
"@dasch-swiss/dsp-js": "^1.3.0",
"@dasch-swiss/dsp-ui": "^1.2.1",
"@dasch-swiss/dsp-js": "^2.0.1",
"@dasch-swiss/dsp-ui": "^1.2.2",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"3d-force-graph": "^1.60.12",
@@ -12,13 +12,15 @@

<!-- Modify user data -->
<div *ngSwitchCase="'editUser'">
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.edit' | translate"></app-dialog-header>
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.edit' | translate">
</app-dialog-header>
<app-user-form [username]="data.name" (closeDialog)="dialogRef.close()"></app-user-form>
</div>

<!-- Update password -->
<div *ngSwitchCase="'editPassword'">
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.password' | translate"></app-dialog-header>
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.user.title.password' | translate">
</app-dialog-header>
<app-password-form [username]="data.name" (closeDialog)="dialogRef.close()"></app-password-form>
</div>

@@ -95,13 +97,15 @@

<!-- Modify project information -->
<div *ngSwitchCase="'editProject'">
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.edit' | translate"></app-dialog-header>
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.edit' | translate">
</app-dialog-header>
<app-project-form [projectcode]="data.project" (closeDialog)="dialogRef.close()"></app-project-form>
</div>

<!-- Delete project -->
<div *ngSwitchCase="'deleteProject'">
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.delete' | translate"></app-dialog-header>
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.delete' | translate">
</app-dialog-header>
Do you want to deactivate this project?
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -117,7 +121,8 @@

<!-- Reactivate project -->
<div *ngSwitchCase="'activateProject'">
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.activate' | translate"></app-dialog-header>
<app-dialog-header [title]="data.name" [subtitle]="'appLabels.form.project.title.activate' | translate">
</app-dialog-header>
Do you want to reactivate this project?
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -157,7 +162,8 @@

<!-- Delete list -->
<div *ngSwitchCase="'deleteList'">
<app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.delete' | translate"></app-dialog-header>
<app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.delete' | translate">
</app-dialog-header>
Do you want to delete this list?
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
@@ -202,7 +208,7 @@
<!-- Ontology editor: customize and add resource class -->
<div *ngSwitchCase="'addResourceClass'">
<app-dialog-header [title]="data.title" [subtitle]="data.subtitle"></app-dialog-header>
<app-resource-class-form [subClassOf]="data.name" [name]="data.title" [projectIri]="data.project"
<app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
(closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
</app-resource-class-form>
</div>
@@ -233,6 +239,14 @@
</mat-dialog-actions>
</div>

<div *ngSwitchCase="'updateCardinality'">
<app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
</app-dialog-header>
<app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
[showResourceClassForm]="false" [edit]="true" (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
</app-resource-class-form>
</div>

<div *ngSwitchCase="'error'">
<app-error [status]="data.id"></app-error>
</div>
@@ -242,7 +256,8 @@
<div *ngSwitchCase="'createResource'">
<app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
</app-dialog-header>
<app-resource-instance-form (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)"></app-resource-instance-form>
<app-resource-instance-form (closeDialog)="dialogRef.close()" (updateParent)="replaceTitle($event)">
</app-resource-instance-form>
</div>

<!-- Unknown method (or not yet defined) -->
@@ -147,7 +147,7 @@ export class DefaultProperties {
icon: 'link',
label: 'Other resource e.g. Person',
subPropOf: Constants.HasLinkTo,
objectType: Constants.Resource,
objectType: Constants.LinkValue,
gui_ele: Constants.SalsahGui + Constants.HashDelimiter + 'Searchbox', // 'Autocomplete',
group: 'Link'
},
@@ -1,6 +1,7 @@
<div *ngIf="projectAdmin" class="desktop-only">

<p class="note warning center">This is a first version of the ontology 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 -->
@@ -53,7 +54,7 @@ <h2 class="mat-title">
</div>

<!-- main content: overview shows resource classes of ontology -->
<div *ngIf="ontology" class="ontology-editor drag-drop-stop">
<div *ngIf="ontology" class="ontology-editor">

<mat-toolbar class="ontology-editor-header">
<mat-toolbar-row>
@@ -83,7 +84,7 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>

<!-- edit options -->
<span class="ontology-actions">
<p class="mat-caption space-reducer">Ontology configuration</p>
<p class="mat-caption space-reducer">Data model configuration</p>
<!-- TODO: remove following span as soon edit mode is implemented; it's only for tooltip to use with disabled button -->
<span [matTooltip]="'Edit ontology is not yet implemented'" matTooltipPosition="above">
<button mat-button [disabled]="!ontology.lastModificationDate" [disabled]="true"
@@ -102,62 +103,78 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
</mat-toolbar-row>
</mat-toolbar>

<p *ngIf="!ontology.lastModificationDate" class="note warning center">This ontology can't be edited because of
missing "lastModificationDate"!</p>
<div #ontologyEditor *ngIf="!loadOntology && view === 'grid'" class="ontology-editor-canvas">
<!-- button to select and add new resource class to the ontology -->
<div class="add-resource-class"
*ngIf="project?.status && (sysAdmin || projectAdmin) && ontologyIri && ontology.lastModificationDate">
<button mat-raised-button color="primary" [matMenuTriggerFor]="addResClassMenu">
Add resource class&nbsp;
<mat-icon>add</mat-icon>
</button>
<mat-menu #addResClassMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let type of resourceClass"
(click)="openResourceClassForm('addResourceClass', type)">
{{ type?.label }}
<div #ontologyEditor *ngIf="!loadOntology && view === 'grid'" class="ontology-editor-container">

<div class="ontology-editor-subheader">
<p *ngIf="!ontology.lastModificationDate" class="note warning center">
This ontology can't be edited because of missing "lastModificationDate"!
</p>
<!-- button to select and add new resource class to the ontology -->
<div class="add-resource-class"
*ngIf="project?.status && (sysAdmin || projectAdmin) && ontologyIri && ontology.lastModificationDate">
<button mat-raised-button color="primary" [matMenuTriggerFor]="addResClassMenu">
Add resource class&nbsp;
<mat-icon>add</mat-icon>
</button>
</mat-menu>
<mat-menu #addResClassMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let type of resourceClass"
(click)="openResourceClassForm('addResourceClass', type)">
{{ type?.label }}
</button>
</mat-menu>
</div>
</div>


<!-- list of resource classs -->
<div *ngFor="let resClass of ontoClasses; let i = index" class="resource-class" cdkDrag
cdkDragBoundary=".drag-drop-stop">
<mat-toolbar class="resource-class-header" cdkDragHandle>
<mat-toolbar-row>
<h4 mat-card-title [matTooltip]="resClass.label" matTooltipPosition="above">
{{resClass.label | dspTruncate: 24}}</h4>
<span class="fill-remaining-space"></span>
<button mat-icon-button [matMenuTriggerFor]="resClassMenu">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #resClassMenu="matMenu" xPosition="before">
<button mat-menu-item [disabled]="true"
(click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">Edit
(not yet implemented)</button>
<button mat-menu-item
(click)="delete(resClass.id, 'ResourceClass', resClass.label)">Delete</button>
</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
<div class="ontology-editor-canvas drag-drop-stop">
<div class="ontology-editor-grid">

<!-- list of resource classs -->
<div *ngFor="let resClass of ontoClasses; let i = index" class="resource-class" cdkDrag
cdkDragBoundary=".drag-drop-stop">
<mat-toolbar class="resource-class-header" cdkDragHandle>
<mat-toolbar-row>
<h4 mat-card-title [matTooltip]="resClass.label" matTooltipPosition="above">
{{resClass.label | dspTruncate: 24}}</h4>
<span class="fill-remaining-space"></span>
<button mat-icon-button [matMenuTriggerFor]="resClassMenu"
[matTooltip]="(ontology.lastModificationDate ? null : 'This ontology can\'t be edited because of missing lastModificationDate!')"
matTooltipPosition="above">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #resClassMenu="matMenu" xPosition="before">
<button mat-menu-item [disabled]="!ontology.lastModificationDate" [disabled]="true"
(click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">
Edit info (not yet implemented)
</button>
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="updateCard(resClass)">
Update corresponding properties
</button>
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="delete(resClass.id, 'ResourceClass', resClass.label)">
Delete resource class
</button>
</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>
<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>

</div>
</ul>
</div>

</div>

</div>
</div>
</div>

<div *ngIf="view === 'graph'" class="ontology-viewer">
Loading

0 comments on commit 5a766c1

Please sign in to comment.