Skip to content

Commit

Permalink
feat(ontology): change gui element for text value properties (#478)
Browse files Browse the repository at this point in the history 
* refactor(ontology): clean up default properties

* style(ontology): support multi line comments in property's tooltip

* feat(ontology): change gui-element for text values

* chore(deps): bump DSP-JS to v2.5.0

* test(ontology): fix broken tests
  • Loading branch information
@kilchenmann
kilchenmann committed Jul 5, 2021
1 parent b18e6ec commit 6af1f7e
Show file tree
Hide file tree
Showing 10 changed files with 245 additions and 161 deletions.
27 changes: 20 additions & 7 deletions package-lock.json
View file

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

4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -22,6 +22,7 @@
},
"private": true,
"dependencies": {
"3d-force-graph": "^1.60.12",
"@angular/animations": "^11.2.9",
"@angular/cdk": "^11.2.5",
"@angular/common": "11.2.9",
Expand All @@ -33,11 +34,10 @@
"@angular/platform-browser-dynamic": "^11.2.9",
"@angular/router": "^11.2.9",
"@ckeditor/ckeditor5-angular": "^1.2.3",
"@dasch-swiss/dsp-js": "^2.4.0",
"@dasch-swiss/dsp-js": "^2.5.0",
"@dasch-swiss/dsp-ui": "^1.6.0",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "5.0.0",
"3d-force-graph": "^1.60.12",
"angular-split": "^4.0.0",
"ckeditor5-custom-build": "github:dasch-swiss/ckeditor_custom_build",
"core-js": "^3.6.5",
Expand Down
60 changes: 13 additions & 47 deletions src/app/project/ontology/default-data/default-properties.ts
View file
Expand Up @@ -43,7 +43,7 @@ export class DefaultProperties {
description: 'Short text such as title or name',
subPropOf: Constants.HasValue,
objectType: Constants.TextValue,
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText', // 'Input',
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText', // better element would be: 'Input',
group: 'Text' // redundant information, but otherwise we don't get the main group name after selecting type
},
{
Expand Down Expand Up @@ -75,27 +75,9 @@ export class DefaultProperties {
description: 'Dropdown menu with values from predefined list',
subPropOf: Constants.HasValue,
objectType: Constants.ListValue,
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'List', // 'Pulldown'
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'List', // better element would be: 'Pulldown' or 'Select'
group: 'List'
}
// {
// icon: 'check_box',
// label: 'Checkboxes',
// description: 'Select multiple values from predefined short list',
// subPropOf: Constants.HasValue,
// objectType: Constants.ListValue,
// guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Checkbox',
// group: 'List'
// },
// {
// icon: 'radio_button_checked',
// label: 'Multiple choice',
// description: 'Select only one value from predefined short list',
// subPropOf: Constants.HasValue,
// objectType: Constants.ListValue,
// guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Radio',
// group: 'List'
// }
]
},
{
Expand All @@ -118,21 +100,21 @@ export class DefaultProperties {
{
icon: 'calendar_today',
label: 'Date',
description: 'A date picker with day, month and year',
subPropOf: Constants.HasValue,
objectType: Constants.DateValue,
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Date',
group: 'Date / Time'
},
{
icon: 'date_range',
label: 'Period',
description: 'A period of time between two dates',
description: 'A date field with day, month and year',
subPropOf: Constants.HasValue,
objectType: Constants.DateValue,
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Date',
group: 'Date / Time'
},
// {
// icon: 'date_range',
// label: 'Period',
// description: 'A period of time between two dates',
// subPropOf: Constants.HasValue,
// objectType: Constants.DateValue,
// guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Date',
// group: 'Date / Time'
// },
{
icon: 'access_time',
label: 'Timestamp',
Expand All @@ -147,7 +129,7 @@ export class DefaultProperties {
label: 'Time sequence',
description: 'A time sequence with start and end point on a timeline',
subPropOf: Constants.HasValue,
objectType: Constants.TimeValue,
objectType: Constants.IntervalValue,
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Interval',
group: 'Date / Time'
}
Expand Down Expand Up @@ -188,22 +170,6 @@ export class DefaultProperties {
guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Searchbox', // 'Autocomplete',
group: 'Link / Relation'
},
// {
// icon: 'picture_in_picture',
// label: 'Part of resource class',
// subPropOf: Constants.KnoraApiV2 + Constants.HashDelimiter + 'isPartOf',
// objectType: Constants.LinkValue,
// guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Searchbox', // 'Autocomplete',
// group: 'Link'
// },
// {
// icon: 'compare_arrows',
// label: 'External resource',
// subPropOf: Constants.HasValue,
// objectType: Constants.UriValue,
// guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText',
// group: 'Link'
// },
{
icon: 'language',
label: 'External URL',
Expand Down
27 changes: 19 additions & 8 deletions src/app/project/ontology/property-form/property-form.component.html
View file
Expand Up @@ -3,26 +3,37 @@
-->
<form [formGroup]="propertyForm" class="form-content">

<p *ngIf="resClassIri && propertyInfo.propDef" class="note warning mat-caption">
This property already exists.
Be careful when editing it, it could have an effect in other resource classes if it is used there.
<p *ngIf="resClassIri && propertyInfo.propDef" class="note warning mat-caption center">
This property already exists. If you want to modify it, go to the "properties" view.
<!-- Be careful when editing it, it could have an effect in other resource classes if it is used there. -->
</p>

<div class="center">

<!-- property type -->
<mat-form-field *ngIf="propertyInfo.propType" class="large-field property-type">
<span matPrefix class="property-type-icon">
<mat-icon>{{propertyInfo.propType?.icon}}</mat-icon>&nbsp;
<mat-icon>{{propertyForm.controls['propType'].value.icon}}</mat-icon>&nbsp;
</span>
<mat-label>Property type</mat-label>
<input matInput [value]="propertyInfo.propType.group + ': ' + propertyInfo.propType.label"
[disabled]="true">
<!-- in case of edit property, the user can change the property type within the same group -->
<mat-select formControlName="propType">
<mat-select-trigger>
{{propertyForm.controls['propType'].value.group}}:&nbsp;
{{propertyForm.controls['propType'].value.label}}
</mat-select-trigger>

<mat-optgroup *ngFor="let type of restrictedPropertyTypes" [label]="type.group" [disabled]="propertyForm.controls['propType'].value.group !== type.group">
<mat-option *ngFor="let ele of type.elements" [value]="ele">
<mat-icon>{{ele.icon}}</mat-icon> {{ele.label}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>

<!-- label -->
<div class="large-field string-literal-container">
<dsp-string-literal-input [placeholder]="'Property label *'" [value]="labels"
<dsp-string-literal-input [placeholder]="'Property label *'" [value]="labels" [disabled]="(resClassIri && propertyInfo.propDef)"
(dataChanged)="handleData($event, 'labels')">
</dsp-string-literal-input>
<mat-hint class="string-literal-error" *ngIf="!labels.length">
Expand All @@ -32,7 +43,7 @@

<!-- comment/description -->
<div class="large-field string-literal-container">
<dsp-string-literal-input [textarea]="true" [placeholder]="'Comment'" [value]="comments"
<dsp-string-literal-input [textarea]="true" [placeholder]="'Comment'" [value]="comments" [disabled]="(resClassIri && propertyInfo.propDef)"
(dataChanged)="handleData($event, 'comments')">
</dsp-string-literal-input>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/app/project/ontology/property-form/property-form.component.spec.ts
View file
Expand Up @@ -136,7 +136,7 @@ describe('PropertyFormComponent', () => {

const ontologyEndpointSpyObj = {
v2: {
onto: jasmine.createSpyObj('onto', ['updateResourceProperty', 'createResourceProperty'])
onto: jasmine.createSpyObj('onto', ['updateResourceProperty', 'createResourceProperty', 'replaceGuiElementOfProperty'])
}
};

Expand Down Expand Up @@ -206,8 +206,6 @@ describe('PropertyFormComponent', () => {

});



it('should create an instance', () => {
expect(simpleTextHostComponent.propertyFormComponent).toBeTruthy();
});
Expand Down

0 comments on commit 6af1f7e

Please sign in to comment.