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): change gui element for text value properties (DSP-1624) #478

Merged
merged 5 commits into from Jul 5, 2021
Merged

feat(ontology): change gui element for text value properties (DSP-1624) #478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23519a8
refactor(ontology): clean up default properties
kilchenmann Jul 1, 2021
dde9b29
style(ontology): support multi line comments in property's tooltip
kilchenmann Jul 1, 2021
9fa3fd8
feat(ontology): change gui-element for text values
kilchenmann Jul 2, 2021
4162ac3
chore(deps): bump DSP-JS to v2.5.0
kilchenmann Jul 1, 2021
ab55962
test(ontology): fix broken tests
kilchenmann Jul 2, 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
27 changes: 20 additions & 7 deletions 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.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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