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): edit res class info (DSP-1209) #380

Merged
merged 8 commits into from Feb 16, 2021
Merged

feat(ontology): edit res class info (DSP-1209) #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b5aee39
chore(ontology): display term data model instead ontology
kilchenmann Feb 12, 2021
78c1b1c
chore(ontology): prepare edit res class
kilchenmann Feb 12, 2021
08e515c
chore(deps): update version number in package.lock
kilchenmann Feb 12, 2021
92e0476
feat(ontology): update res class info
kilchenmann Feb 12, 2021
55f3198
refactor(ontology): delete console.log
kilchenmann Feb 12, 2021
d7cb2d4
Merge branch 'main' into wip/dsp-1209-edit-res-class-info
Feb 15, 2021
076e0a7
refactor(ontology): replace shadowed var
kilchenmann Feb 15, 2021
a95d93f
refactor(ontology): add missing semicolon
kilchenmann Feb 15, 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
2 changes: 1 addition & 1 deletion 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.

11 changes: 4 additions & 7 deletions src/app/main/dialog/dialog.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>();
Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm not sure I understand this variable name 😅 same with onto4comment

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can change it. I think I copied from the js-lib example 🙈

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's the UpdateOntology object. And we need an UpdateOntology object for the label and one for the comment. So, it's an ontology for label (onto4label) and an ontology for comment (onto4comment)

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