Skip to content

Commit

Permalink
feat(ontology): edit res class info (DSP-1209) (#380)
Browse files Browse the repository at this point in the history 
* chore(ontology): display term data model instead ontology

* chore(ontology): prepare edit res class

* chore(deps): update version number in package.lock

* feat(ontology): update res class info

* refactor(ontology): delete console.log

* refactor(ontology): replace shadowed var

* refactor(ontology): add missing semicolon
  • Loading branch information
André Kilchenmann committed Feb 16, 2021
1 parent c89126c commit 2debd03
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 47 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

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

11 changes: 4 additions & 7 deletions src/app/main/dialog/dialog.component.html
View file
Expand Up @@ -216,12 +216,9 @@
<div *ngSwitchCase="'editResourceClass'">
<app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
</app-dialog-header>
<p class="todo" [innerHtml]="notYetImplemented"></p>
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
Cancel
</button>
</mat-dialog-actions>
<app-resource-class-form [iri]="data.id" [name]="data.title" [projectIri]="data.project"
[showResourceClassForm]="true" [edit]="true" (closeDialog)="dialogRef.close()">
</app-resource-class-form>
</div>

<div *ngSwitchCase="'deleteResourceClass'">
Expand All @@ -243,7 +240,7 @@
<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)">
[showResourceClassForm]="false" [edit]="true" (closeDialog)="dialogRef.close()">
</app-resource-class-form>
</div>

Expand Down
10 changes: 5 additions & 5 deletions src/app/project/ontology/ontology.component.html
View file
Expand Up @@ -86,7 +86,7 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
<span class="ontology-actions">
<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">
<span [matTooltip]="'Edit data model info (not yet implemented)'" matTooltipPosition="above">
<button mat-button [disabled]="!ontology.lastModificationDate" [disabled]="true"
(click)="$event.stopPropagation(); openOntologyForm('editOntology', ontology.id)">
<!-- <mat-icon>edit</mat-icon> -->
Expand All @@ -107,7 +107,7 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>

<div class="ontology-editor-subheader">
<p *ngIf="!ontology.lastModificationDate" class="note warning center">
This ontology can't be edited because of missing "lastModificationDate"!
This data model 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"
Expand Down Expand Up @@ -137,14 +137,14 @@ <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!')"
[matTooltip]="(ontology.lastModificationDate ? null : 'This data model 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"
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">
Edit info (not yet implemented)
Edit resource class info
</button>
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="updateCard(resClass)">
Expand Down
8 changes: 4 additions & 4 deletions src/app/project/ontology/ontology.component.ts
View file
Expand Up @@ -237,7 +237,7 @@ export class OntologyComponent implements OnInit {

this.loadOntology = true;

this._dspApiConnection.v2.onto.getOntology(id).subscribe(
this._dspApiConnection.v2.onto.getOntology(id, true).subscribe(
(response: ReadOntology) => {

this.ontology = response;
Expand Down Expand Up @@ -309,9 +309,9 @@ export class OntologyComponent implements OnInit {
/**
* Opens resource class form
* @param mode
* @param subClassOf
* @param resClassInfo (could be subClassOf (create mode) or resource class itself (edit mode))
*/
openResourceClassForm(mode: 'createResourceClass' | 'editResourceClass', subClassOf: DefaultClass): void {
openResourceClassForm(mode: 'createResourceClass' | 'editResourceClass', resClassInfo: DefaultClass): void {

// set cache for ontology and lists
this.setCache();
Expand All @@ -323,7 +323,7 @@ export class OntologyComponent implements OnInit {
position: {
top: '112px'
},
data: { id: subClassOf.iri, title: subClassOf.label, subtitle: 'Customize resource class', mode: mode, project: this.project.id }
data: { id: resClassInfo.iri, title: resClassInfo.label, subtitle: 'Customize resource class', mode: mode, project: this.project.id }
};

const dialogRef = this._dialog.open(
Expand Down
19 changes: 13 additions & 6 deletions src/app/project/ontology/resource-class-form/resource-class-form.component.html
View file
Expand Up @@ -12,7 +12,7 @@
<!-- label -->
<div class="large-field string-literal-container">
<dsp-string-literal-input [placeholder]="'Label *'" [value]="resourceClassLabels"
(enter)="nextStep($event)" (dataChanged)="handleData($event, 'labels')">
(enter)="(edit ? submitData($event) : nextStep($event))" (dataChanged)="handleData($event, 'labels')">
</dsp-string-literal-input>
<mat-hint class="string-literal-error" *ngIf="formErrors.label">
{{ formErrors.label }}
Expand All @@ -21,7 +21,7 @@

<!-- description -->
<div class="large-field string-literal-container more-space-top">
<dsp-string-literal-input [placeholder]="'Comment'" [value]="resourceClassComments"
<dsp-string-literal-input [placeholder]="'Comment *'" [value]="resourceClassComments"
[textarea]="true" (dataChanged)="handleData($event, 'comments')"></dsp-string-literal-input>
</div>
</div>
Expand All @@ -35,10 +35,17 @@
</span>
<span class="fill-remaining-space"></span>
<span>
<button mat-raised-button type="button" color="primary" [disabled]="!resourceClassLabels.length"
(click)="nextStep($event)">
Next
</button>
<button *ngIf="!edit" mat-raised-button type="button" color="primary" [disabled]="!resourceClassLabels.length || !resourceClassComments.length"
(click)="nextStep($event)">
Next
</button>
<button *ngIf="edit" mat-raised-button type="button" color="primary" [disabled]="!resourceClassLabels.length || !resourceClassComments.length"
(click)="submitData($event)">
<dsp-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</dsp-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{error ? 'Failed' : 'Update'}}
</button>
</span>
</div>
</div>
Expand Down
120 changes: 96 additions & 24 deletions src/app/project/ontology/resource-class-form/resource-class-form.component.ts
View file
Expand Up @@ -15,7 +15,9 @@ import {
ResourcePropertyDefinitionWithAllLanguages,
StringLiteral,
UpdateOntology,
UpdateResourceClassCardinality
UpdateResourceClassCardinality,
UpdateResourceClassComment,
UpdateResourceClassLabel
} from '@dasch-swiss/dsp-js';
import { StringLiteralV2 } from '@dasch-swiss/dsp-js/src/models/v2/string-literal-v2';
import { DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
Expand Down Expand Up @@ -122,14 +124,18 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC

// form errors on the following fields:
formErrors = {
'label': ''
'label': '',
'comment': ''
};

// in case of form error: show message
validationMessages = {
'label': {
'required': 'Label is required.'
},
'comment': {
'required': 'Comment is required.'
}
};

lastModificationDate: string;
Expand Down Expand Up @@ -202,26 +208,43 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
this._resourceClassFormService.resetProperties();

if (this.edit) {
// edit mode
// get resource class and property definition first

// get list of ontology properties
const ontoProperties: PropertyDefinition[] = this.ontology.getAllPropertyDefinitions();

// find prop cardinality in resource class
const ontoClasses: ClassDefinition[] = this.ontology.getAllClassDefinitions();
Object.keys(ontoClasses).forEach(key => {
if (ontoClasses[key].id === this.iri) {

this._resourceClassFormService.setProperties(ontoClasses[key], ontoProperties);
if (this.showResourceClassForm) {
// edit mode: res class info (label and comment)
// get resource class info
const resourceClasses: ResourceClassDefinitionWithAllLanguages[] = this.ontology.getClassDefinitionsByType(ResourceClassDefinitionWithAllLanguages);
Object.keys(resourceClasses).forEach(key => {
if (resourceClasses[key].id === this.iri) {
this.resourceClassLabels = resourceClasses[key].labels;
this.resourceClassComments = resourceClasses[key].comments;
}
});
this.resourceClassFormSub = this._resourceClassFormService.resourceClassForm$
.subscribe(resourceClass => {
this.resourceClassForm = resourceClass;
});
this.resourceClassForm.valueChanges.subscribe(data => this.onValueChanged(data));

this.resourceClassFormSub = this._resourceClassFormService.resourceClassForm$
.subscribe(resourceClass => {
this.resourceClassForm = resourceClass;
this.properties = this.resourceClassForm.get('properties') as FormArray;
});
}
});
} else {
// edit mode: res class cardinality
// get list of ontology properties
const ontoProperties: PropertyDefinition[] = this.ontology.getAllPropertyDefinitions();

// find prop cardinality in resource class
const ontoClasses: ClassDefinition[] = this.ontology.getAllClassDefinitions();
Object.keys(ontoClasses).forEach(key => {
if (ontoClasses[key].id === this.iri) {

this._resourceClassFormService.setProperties(ontoClasses[key], ontoProperties);

this.resourceClassFormSub = this._resourceClassFormService.resourceClassForm$
.subscribe(resourceClass => {
this.resourceClassForm = resourceClass;
this.properties = this.resourceClassForm.get('properties') as FormArray;
});
}
});
}

} else {
// create mode
Expand Down Expand Up @@ -344,9 +367,58 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
submitData() {
this.loading = true;
if (this.edit) {
// edit mode
// submit properties and set cardinality
this.submitProps(this.resourceClassForm.value.properties, this.iri);

if (this.showResourceClassForm) {
// edit mode: res class info (label and comment)
// label
const onto4Label = new UpdateOntology<UpdateResourceClassLabel>();
onto4Label.id = this.ontology.id;
onto4Label.lastModificationDate = this.lastModificationDate;

const updateLabel = new UpdateResourceClassLabel();
updateLabel.id = this.iri;
updateLabel.labels = this.resourceClassLabels;
onto4Label.entity = updateLabel;

// comment
const onto4Comment = new UpdateOntology<UpdateResourceClassComment>();
onto4Comment.id = this.ontology.id;

const updateComment = new UpdateResourceClassComment();
updateComment.id = this.iri;
updateComment.comments = this.resourceClassComments;
onto4Comment.entity = updateComment;

this._dspApiConnection.v2.onto.updateResourceClass(onto4Label).subscribe(
(classLabelResponse: ResourceClassDefinitionWithAllLanguages) => {
this.lastModificationDate = classLabelResponse.lastModificationDate;
onto4Comment.lastModificationDate = this.lastModificationDate;

this._dspApiConnection.v2.onto.updateResourceClass(onto4Comment).subscribe(
(classCommentResponse: ResourceClassDefinitionWithAllLanguages) => {
this.lastModificationDate = classCommentResponse.lastModificationDate;

// close the dialog box
this.loading = false;
this.closeDialog.emit();
},
(error: ApiResponseError) => {
this._errorHandler.showMessage(error);
}
)

},
(error: ApiResponseError) => {
this._errorHandler.showMessage(error);
}
);


} else {
// edit mode: res class cardinality
// submit properties and set cardinality
this.submitProps(this.resourceClassForm.value.properties, this.iri);
}

} else {
// create mode
Expand All @@ -363,7 +435,7 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC

const newResClass = new CreateResourceClass();

newResClass.name = uniqueClassName
newResClass.name = uniqueClassName;
newResClass.label = this.resourceClassLabels;
newResClass.comment = this.resourceClassComments;
newResClass.subClassOf = [this.iri];
Expand Down

0 comments on commit 2debd03

Please sign in to comment.