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

Author: André Kilchenmann

src/app/project/ontology/ontology.component.html

@@ -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"

src/app/project/ontology/resource-class-form/resource-class-form.component.html

@@ -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>

src/app/project/ontology/resource-class-form/resource-class-form.component.scss

@@ -36,6 +36,12 @@
   margin-bottom: 2px;
 }
 
+.properties-language {
+  position: absolute;
+  margin-left: 600px;
+  margin-top: -$header-height;
+}
+
 // properties
 .property-line {
   display: flex;

src/app/project/ontology/resource-class-form/resource-class-form.component.ts

@@ -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) {
 

src/app/project/ontology/resource-class-form/resource-class-form.service.ts

@@ -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++;