Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(ontology): form to create and edit property (DSP-1210) (#406)
* feat(ontology): add "create prop" button

* feat(ontology): init dialog box for property creation

* refactor(ontology): consistent interface definition

* fix(ontology): fix progress indicator issue

* style(ontology): default icons for number

* refactor(ontology): used default icon for number

* style(action bubble): global defined style

* feat(ontology): delete property if not in use

* chore: replace autocomplete-item with the one from ui-lib

* refactor(ontology): own property form

* chore(ontology): delete console.log

* feat(ontology): property form

* style(ontology): fix style in ontology editor

* feat(ontology): more on edit prop form

* test(ontology): fix test in property-info view

* test(ontology): enable all tests

* chore(ontology): update default classes and props

* style(ontology): nested menu for default props

* fix(ontology): part of is not allowed prop

* chore(ontology): update default props

* chore(ontology): delete nonsense

* style(ontology): update design list of props

* feat(ontology): edit props

* fix(ontology): display list's comment

* refactor(ontology): consistent usage of projectCode

* feat(ontology): open edit cardinality from property view

* chore(ontology): delete console.log

* test(ontology): fix res class form test

* style(ontology): fix nested menu position

* fix(ontology): display tooltip if property can't be deleted

* style(ontology/lists): consistent stringLiteral error message

* feat(ontology): create new property

* fix(ontology): edit and create property with same form

* test(lists): fix test

* chore(ontology): refactor code

* fix(ontology): bug fix in create onto form

* chore: make command to find ignored tests

* test(ontology): refactor tests

* chore(ontology): disable button when no class is defined

* test(ontology): test for property-form

* test(ontology): clean up code

* test(ontology): more tests

* test(ontology): fix tests

* chore(ontology): better wording

* refactor(ontology): correct mock of DSP-API connection

* fix(ontology): bug fix in test
  • Loading branch information
kilchenmann committed Mar 23, 2021
1 parent a4004ed commit 91ebb68
Show file tree
Hide file tree
Showing 37 changed files with 1,930 additions and 731 deletions.
7 changes: 7 additions & 0 deletions Makefile
Expand Up @@ -6,6 +6,13 @@ CURRENT_DIR := $(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))

include vars.mk

#################################
# Test and lint targets
#################################
.PHONY: find-ignored-tests
find-ignored-tests: ## find all ignored tests (e.g. fdescribe)
./find-ignored-tests.sh

#################################
# Documentation targets
#################################
Expand Down
118 changes: 58 additions & 60 deletions src/app/app.module.ts
Expand Up @@ -61,6 +61,7 @@ import { PropertyFormComponent } from './project/ontology/property-form/property
import { PropertyInfoComponent } from './project/ontology/property-info/property-info.component';
import { ResourceClassFormComponent } from './project/ontology/resource-class-form/resource-class-form.component';
import { ResourceClassInfoComponent } from './project/ontology/resource-class-info/resource-class-info.component';
import { ResourceClassPropertyFormComponent } from './project/ontology/resource-class-property-form/resource-class-property-form.component';
import { AddGroupComponent } from './project/permission/add-group/add-group.component';
import { PermissionComponent } from './project/permission/permission.component';
import { ProjectFormComponent } from './project/project-form/project-form.component';
Expand Down Expand Up @@ -90,108 +91,105 @@ import { SelectResourceClassComponent } from './workspace/resource/resource-inst
import { ResourceComponent } from './workspace/resource/resource.component';
import { ResultsComponent } from './workspace/results/results.component';





// translate: AoT requires an exported function for factories
export function httpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
}

@NgModule({
declarations: [
AccountComponent,
AddGroupComponent,
AddressTemplateComponent,
AddUserComponent,
AppComponent,
ProjectComponent,
AttributionTabViewComponent,
BoardComponent,
ProjectFormComponent,
CollaborationComponent,
AddUserComponent,
OntologyComponent,
UserComponent,
PasswordFormComponent,
ProfileComponent,
ProjectsListComponent,
UserFormComponent,
CollectionListComponent,
UserMenuComponent,
MainComponent,
HeaderComponent,
ErrorComponent,
LoginComponent,
AccountComponent,
SelectLanguageComponent,
ProjectsComponent,
SelectGroupComponent,
ResultsComponent,
ResourceComponent,
ContactsTabViewComponent,
CookiePolicyComponent,
DashboardComponent,
DatasetTabViewComponent,
DialogComponent,
SystemComponent,
UsersComponent,
UsersListComponent,
DialogHeaderComponent,
EditListItemComponent,
ErrorComponent,
ExternalLinksDirective,
FooterComponent,
GridComponent,
CookiePolicyComponent,
GroupsComponent,
GroupsListComponent,
PermissionComponent,
AddGroupComponent,
ResourceClassFormComponent,
PropertyFormComponent,
OntologyFormComponent,
OntologyVisualizerComponent,
VisualizerComponent,
HeaderComponent,
HelpComponent,
InvalidControlScrollDirective,
ListComponent,
ListInfoFormComponent,
ListItemComponent,
ListItemFormComponent,
LoginComponent,
MainComponent,
MembershipComponent,
HelpComponent,
FooterComponent,
ExternalLinksDirective,
InvalidControlScrollDirective,
OntologyComponent,
OntologyFormComponent,
OntologyVisualizerComponent,
OrganisationTemplateComponent,
PasswordFormComponent,
PermissionComponent,
PersonTemplateComponent,
ProfileComponent,
ProjectComponent,
ProjectFormComponent,
ProjectsComponent,
ProjectsListComponent,
ProjectTabViewComponent,
PropertyFormComponent,
PropertyInfoComponent,
ResourceClassFormComponent,
ResourceClassInfoComponent,
ResourceClassPropertyFormComponent,
ResourceComponent,
ResourceInstanceFormComponent,
SelectProjectComponent,
ResultsComponent,
SelectGroupComponent,
SelectLanguageComponent,
SelectOntologyComponent,
SelectResourceClassComponent,
SelectProjectComponent,
SelectPropertiesComponent,
SelectResourceClassComponent,
SwitchPropertiesComponent,
ProjectTabViewComponent,
DatasetTabViewComponent,
AttributionTabViewComponent,
SystemComponent,
TermsTabViewComponent,
ContactsTabViewComponent,
PersonTemplateComponent,
AddressTemplateComponent,
OrganisationTemplateComponent,
EditListItemComponent,
PropertyInfoComponent,
ResourceClassInfoComponent,
UrlTemplateComponent
UrlTemplateComponent,
UserComponent,
UserFormComponent,
UserMenuComponent,
UsersComponent,
UsersListComponent,
VisualizerComponent,
],
imports: [
AppRoutingModule,
BrowserModule,
AngularSplitModule.forRoot(),
BrowserAnimationsModule,
BrowserModule,
ClipboardModule,
CommonModule,
HttpClientModule,
DspCoreModule,
DspViewerModule,
DspActionModule,
DspCoreModule,
DspSearchModule,
DspViewerModule,
FormsModule,
HttpClientModule,
MaterialModule,
ReactiveFormsModule,
FormsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient]
}
}),
ClipboardModule,
AngularSplitModule.forRoot()
})
],
providers: [
{
Expand Down
9 changes: 0 additions & 9 deletions src/app/main/declarations/autocomplete-item.ts

This file was deleted.

65 changes: 55 additions & 10 deletions src/app/main/dialog/dialog.component.html
Expand Up @@ -141,35 +141,41 @@
<!-- Create new list -->
<div *ngSwitchCase="'createList'">
<app-dialog-header [title]="'Create new list'" [subtitle]=""></app-dialog-header>
<app-list-info-form [projectcode]="data.project" [mode]="'create'" [projectIri]="data.id" (closeDialog)="dialogRef.close($event)">
<app-list-info-form [projectcode]="data.project" [mode]="'create'" [projectIri]="data.id"
(closeDialog)="dialogRef.close($event)">
</app-list-info-form>
</div>

<!-- Insert list child node -->
<div *ngSwitchCase="'insertListNode'">
<app-dialog-header [title]="'Insert new child node'" [subtitle]="">
</app-dialog-header>
<app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="insert" [projectCode]="data.projectCode" [parentIri]="data.parentIri" [position]="data.position" (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
<app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="insert" [projectCode]="data.projectCode"
[parentIri]="data.parentIri" [position]="data.position" (closeDialog)="dialogRef.close($event)">
</app-edit-list-item>
</div>

<!-- Update list info -->
<div *ngSwitchCase="'editListInfo'">
<app-dialog-header [title]="data.title" [subtitle]="'Edit list info'">
</app-dialog-header>
<app-list-info-form [iri]="data.id" [mode]="'update'" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
<app-list-info-form [iri]="data.id" [mode]="'update'" [projectIri]="data.project"
(closeDialog)="dialogRef.close()">
</app-list-info-form>
</div>

<!-- Update list child node -->
<div *ngSwitchCase="'editListNode'">
<app-dialog-header [title]="data.title" [subtitle]="'Edit child node'">
</app-dialog-header>
<app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="update" (closeDialog)="dialogRef.close($event)"></app-edit-list-item>
<app-edit-list-item [iri]="data.id" [projectIri]="data.project" mode="update"
(closeDialog)="dialogRef.close($event)"></app-edit-list-item>
</div>

<!-- Delete list node-->
<div *ngSwitchCase="'deleteListNode'">
<app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteListNode' | translate"></app-dialog-header>
<app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteListNode' | translate">
</app-dialog-header>
Do you want to delete this node?
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
Expand Down Expand Up @@ -197,7 +203,8 @@

<!-- Delete list -->
<div *ngSwitchCase="'deleteList'">
<app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteList' | translate"></app-dialog-header>
<app-dialog-header [title]="data.title" [subtitle]="'appLabels.form.lists.title.deleteList' | translate">
</app-dialog-header>
Do you want to delete this list?
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
Expand Down Expand Up @@ -251,7 +258,7 @@
<div *ngSwitchCase="'editResourceClass'">
<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"
<app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project"
[showResourceClassForm]="true" [edit]="true" (closeDialog)="dialogRef.close()">
</app-resource-class-form>
</div>
Expand All @@ -274,13 +281,39 @@
<div *ngSwitchCase="'updateCardinality'">
<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"
<app-resource-class-form [iri]="data.id" [name]="data.title" [projectCode]="data.project"
[showResourceClassForm]="false" [edit]="true" (closeDialog)="dialogRef.close()">
</app-resource-class-form>
</div>

<div *ngSwitchCase="'error'">
<app-error [status]="data.id"></app-error>
<div *ngSwitchCase="'createProperty'">
<app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
</app-dialog-header>
<app-property-form [propertyInfo]="data.propInfo" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
</app-property-form>
</div>

<div *ngSwitchCase="'editProperty'">
<app-dialog-header [title]="data.title" [subtitle]="data.subtitle">
</app-dialog-header>
<app-property-form [propertyInfo]="data.propInfo" [projectIri]="data.project" (closeDialog)="dialogRef.close()">
</app-property-form>
</div>


<div *ngSwitchCase="'deleteProperty'">
<app-dialog-header [title]="data.title" [subtitle]="'Delete property'"></app-dialog-header>
Do you want to delete this property?
<mat-dialog-actions>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
Cancel
</button>
<span class="fill-remaining-space"></span>
<button mat-button mat-raised-button [color]="'warn'" class="confirm-button center"
[mat-dialog-close]="true">
Delete
</button>
</mat-dialog-actions>
</div>

<!-- all about RESOURCE -->
Expand All @@ -292,11 +325,23 @@
</app-resource-instance-form>
</div>

<!-- general error message -->
<div *ngSwitchCase="'error'">
<app-error [status]="data.id"></app-error>
</div>

<!-- Unknown method (or not yet defined) -->
<!-- Default dialog content component -->
<div *ngSwitchDefault>
<app-dialog-header [title]="'Not yet implemented'" [subtitle]="'ERROR 400'" (close)="dialogRef.close()">
</app-dialog-header>
<p class="todo" [innerHtml]="notYetImplemented"></p>
<mat-dialog-actions>
<span class="fill-remaining-space"></span>
<button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
OK
</button>
<span class="fill-remaining-space"></span>
</mat-dialog-actions>
</div>
</div>
3 changes: 1 addition & 2 deletions src/app/project/collaboration/add-user/add-user.component.ts
Expand Up @@ -11,11 +11,10 @@ import {
UserResponse,
UsersResponse
} from '@dasch-swiss/dsp-js';
import { DspApiConnectionToken, existingNamesValidator } from '@dasch-swiss/dsp-ui';
import { AutocompleteItem, DspApiConnectionToken, existingNamesValidator } from '@dasch-swiss/dsp-ui';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { CacheService } from 'src/app/main/cache/cache.service';
import { AutocompleteItem } from 'src/app/main/declarations/autocomplete-item';
import { DialogComponent } from 'src/app/main/dialog/dialog.component';
import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';

Expand Down
@@ -1,9 +1,8 @@
import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ApiResponseData, ApiResponseError, GroupsResponse, KnoraApiConnection } from '@dasch-swiss/dsp-js';
import { DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
import { AutocompleteItem, DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
import { CacheService } from 'src/app/main/cache/cache.service';
import { AutocompleteItem } from 'src/app/main/declarations/autocomplete-item';
import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';

@Component({
Expand Down
Expand Up @@ -4,10 +4,10 @@
<div *ngIf="!loading" class="form-content list-info">

<!-- list label -->
<dsp-string-literal-input [placeholder]="'List label'" [value]="labels"
<dsp-string-literal-input [placeholder]="'List label *'" [value]="labels"
(dataChanged)="handleData($event, 'labels')">
</dsp-string-literal-input>
<mat-hint class="invalid-form" *ngIf="labelInvalidMessage">{{ labelInvalidMessage }}</mat-hint>
<mat-hint class="invalid-form string-literal-error" *ngIf="labelInvalidMessage">{{ labelInvalidMessage }}</mat-hint>

<br><br>

Expand Down
Expand Up @@ -4,11 +4,11 @@

<!-- list label -->
<dsp-string-literal-input
[placeholder]="'Child node label'"
[placeholder]="'Child node label *'"
[value]="labels"
(dataChanged)="handleData($event, 'labels')">
</dsp-string-literal-input>
<span class="invalid-form" *ngIf="formInvalidMessage">{{ formInvalidMessage }}</span>
<mat-hint class="invalid-form string-literal-error" *ngIf="formInvalidMessage">{{ formInvalidMessage }}</mat-hint>

<br><br>

Expand Down
Expand Up @@ -130,7 +130,7 @@ describe('EditListItemComponent', () => {
testHostComponent.editListItem.handleData([], 'labels');
expect(testHostComponent.editListItem.saveButtonDisabled).toBeTruthy();
testHostFixture.detectChanges();
formInvalidMessageDe = editListItemComponentDe.query(By.css('span.invalid-form'));
formInvalidMessageDe = editListItemComponentDe.query(By.css('mat-hint.invalid-form'));
expect(formInvalidMessageDe.nativeElement.innerText).toEqual('A label is required.');
});

Expand Down

0 comments on commit 91ebb68

Please sign in to comment.