Skip to content
Permalink
Browse files
feat(ontology): default language for property label (#382)
* feat(ontology): language selector in res class form

* feat(ontology): language selector for property label

* chore(ontology): fix res class tooltip: show comment

* fix(ontology): select default language in edit mode

* chore(ontology): disable language selector in edit mode

* chore(ontology): shortened the placeholder
  • Loading branch information
kilchenmann committed Feb 17, 2021
1 parent 34c74a6 commit 97230d1a3bba0ff27dc33674a47cfba126e19434
@@ -133,7 +133,7 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
cdkDragBoundary=".drag-drop-stop">
<mat-toolbar class="resource-class-header" cdkDragHandle>
<mat-toolbar-row>
<h4 mat-card-title [matTooltip]="resClass.label" matTooltipPosition="above">
<h4 mat-card-title [matTooltip]="resClass.comment" matTooltipPosition="above">
{{resClass.label | dspTruncate: 24}}</h4>
<span class="fill-remaining-space"></span>
<button mat-icon-button [matMenuTriggerFor]="resClassMenu"
@@ -53,6 +53,15 @@

<!-- content: Step 2 = define properties for resource class -->
<div *ngIf="!showResourceClassForm" class="properties-data">
<!-- default language selector -->
<mat-form-field class="properties-language">
<mat-label>Default language for the labels</mat-label>
<mat-select [formControl]="resourceClassForm.controls['language']" [value]="resourceClassForm.value['language']" [disabled]="edit">
<mat-option *ngFor="let option of languages" [value]="option.language">
{{ option.value }}
</mat-option>
</mat-select>
</mat-form-field>

<!-- propertiy: one line, with "add" icon to add additional properties -->
<div cdkDropList class="properties-list" (cdkDropListDropped)="drop($event)">
@@ -75,7 +84,7 @@
aria-label="Delete this property" class="suffix delete-line" (click)="removeProperty(i)">
<mat-icon>delete_outlined</mat-icon>
</button>
<!-- </div> -->
<!-- </div> -->
</div>
<button [disabled]="!properties.valid" mat-button type="button" color="primary"
aria-label="Add new property" class="add-new-line" (click)="addProperty()">
@@ -88,7 +97,7 @@
<button *ngIf="!edit" mat-button type="button" (click)="prevStep($event)">
{{ 'appLabels.form.action.back' | translate }}
</button>
<button *ngIf="edit" mat-button type="button" (click)="closeDialog.emit()">
<button mat-button type="button" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
@@ -36,6 +36,12 @@
margin-bottom: 2px;
}

.properties-language {
position: absolute;
margin-left: 600px;
margin-top: -$header-height;
}

// properties
.property-line {
display: flex;
@@ -23,6 +23,7 @@ import { StringLiteralV2 } from '@dasch-swiss/dsp-js/src/models/v2/string-litera
import { DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
import { from, of, Subscription } from 'rxjs';
import { concatMap } from 'rxjs/operators';
import { AppGlobal } from 'src/app/app-global';
import { CacheService } from 'src/app/main/cache/cache.service';
import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
import { Property, ResourceClassFormService } from './resource-class-form.service';
@@ -140,6 +141,11 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC

lastModificationDate: string;

// for the language selector
selectedLanguage = 'en';
languages: StringLiteral[] = AppGlobal.languagesList;


constructor(
@Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
private _cache: CacheService,
@@ -223,7 +229,6 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
.subscribe(resourceClass => {
this.resourceClassForm = resourceClass;
});
this.resourceClassForm.valueChanges.subscribe(data => this.onValueChanged(data));

} else {
// edit mode: res class cardinality
@@ -242,6 +247,9 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
this.resourceClassForm = resourceClass;
this.properties = this.resourceClassForm.get('properties') as FormArray;
});

// set default property language from resource class / first element
this.resourceClassForm.controls.language.setValue(ontoClasses[key].labels[0].language);
}
});
}
@@ -254,6 +262,7 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
this.properties = this.resourceClassForm.get('properties') as FormArray;
});
}

this.resourceClassForm.valueChanges.subscribe(data => this.onValueChanged(data));
}

@@ -343,6 +352,9 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
// use response to go further with properties
this.updateParent.emit({ title: this.resourceClassLabels[0].value, subtitle: 'Define the metadata fields for the resource class' });

// set default property language from res class label
this.resourceClassForm.controls.language.setValue(this.resourceClassLabels[0].language);

// load one first property line
if (!this.resourceClassForm.value.properties.length) {
this.addProperty();
@@ -523,7 +535,12 @@ export class ResourceClassFormComponent implements OnInit, OnDestroy, AfterViewC
const newResProp = new CreateResourceProperty();
newResProp.name = uniquePropName;
// TODO: update prop.label and use StringLiteralInput in property-form
newResProp.label = [{ "value": prop.label }];
newResProp.label = [
{
'value': prop.label,
'language': this.resourceClassForm.value['language']
}
];
if (prop.guiAttr) {
switch (prop.type.gui_ele) {

@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Cardinality, Constants, IHasProperty, PropertyDefinition, ResourceClassDefinition, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
import { Cardinality, Constants, IHasProperty, PropertyDefinition, ResourceClassDefinition, ResourcePropertyDefinition, StringLiteral } from '@dasch-swiss/dsp-js';
import { BehaviorSubject, Observable } from 'rxjs';
import { DefaultProperties, PropertyType } from '../default-data/default-properties';

@@ -69,22 +69,26 @@ export class PropertyForm {

// resource class data structure
export class ResourceClass {
language: string;
properties: Property[];

constructor(properties?: Property[]) {
constructor(language = 'en', properties?: Property[]) {
this.language = language;
this.properties = properties;
}
}


// resource class form controls
export class ResourceClassForm {
language = new FormControl();
properties = new FormArray([]);

constructor(resourceClass: ResourceClass) {
this.language.setValue('en');
if (resourceClass.properties) {
let i = 0;
this.properties.setControl
this.properties.setControl;
resourceClass.properties.forEach(prop => {
this.properties[i] = new FormControl(prop);
i++;

0 comments on commit 97230d1

Please sign in to comment.