Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(ontology): update cardinality in resource class (DSP-1266) #377

Merged
merged 22 commits into from Feb 12, 2021
Merged

feat(ontology): update cardinality in resource class (DSP-1266) #377

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
bf3681c
style(ontology): update ontology editor style
kilchenmann Feb 3, 2021
003d342
feat(ontology): init "update cardinality" funcitonality
kilchenmann Feb 3, 2021
5d807b9
chore(ontology): prepare resclass from for card update
kilchenmann Feb 3, 2021
30ebdd2
feat(ontology): update card
kilchenmann Feb 3, 2021
a104065
chore(dsp-js): using yalc for dsp-js for the moment
kilchenmann Feb 4, 2021
123a6de
chore(dsp-api): using latest dsp-js version from main branch
kilchenmann Feb 4, 2021
5b4ae56
chore(dependency): update js-lib to latest version
kilchenmann Feb 5, 2021
ad69b71
Merge branch 'main' into wip/dsp-1266-edit-cardinality
kilchenmann Feb 5, 2021
f826107
refactor(ontology): clean up code
kilchenmann Feb 6, 2021
0f9d54c
feat(ontology): set and replace cardinality
kilchenmann Feb 6, 2021
4d9e421
style(ontology): change position of add prop button
kilchenmann Feb 6, 2021
9b87c00
feat(ontology): create prop and class name from randomized string
kilchenmann Feb 6, 2021
3e6ebef
refactor(ontology): fix typo
kilchenmann Feb 6, 2021
1fff529
feat(ontology): disable own res class in res pointer
kilchenmann Feb 6, 2021
937849e
feat(ontology): replace prop cardinality in res class
kilchenmann Feb 9, 2021
fd091d8
feat(ontology): disable edit menu in case of missing lmd
kilchenmann Feb 9, 2021
9ed63f2
fix(ontology): fix cache issue
kilchenmann Feb 10, 2021
2dfd30e
Merge branch 'main' into wip/dsp-1266-edit-cardinality
Feb 12, 2021
d74a77d
refactor(ontology): delete console.log
kilchenmann Feb 12, 2021
4df6c48
chore(ontology): replace ontology with data model
kilchenmann Feb 12, 2021
de4ac1f
refactor(ontology): delete commented code
kilchenmann Feb 12, 2021
ff9949a
chore(deps): bump dsp-js from 1.3.0 to 2.0.1 and dsp-ui 1.2.1 to 1.2.2
kilchenmann Feb 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@
"@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-js": "^2.0.0",
"@dasch-swiss/dsp-ui": "^1.2.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
Expand Down
31 changes: 23 additions & 8 deletions src/app/main/dialog/dialog.component.html
View file
Open in desktop
Expand Up @@ -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>

Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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) -->
Expand Down
2 changes: 1 addition & 1 deletion src/app/project/ontology/default-data/default-properties.ts
View file
Open in desktop
Expand Up @@ -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'
},
Expand Down
121 changes: 69 additions & 52 deletions src/app/project/ontology/ontology.component.html
View file
Open in desktop
@@ -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 ontology editor. Some features may not work as
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we stick to "data model" instead of "ontology editor"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in 4df6c48

intended.</p>
<dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

<!-- toolbar: select ontology -->
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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">
Expand Down