Skip to content

Commit

Permalink
Add an edit view with angular2-schema-form on test app.
Browse files Browse the repository at this point in the history
  • Loading branch information
tdesvenain committed Jan 3, 2018
1 parent 73dad27 commit 1590953
Show file tree
Hide file tree
Showing 12 changed files with 181 additions and 233 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
Expand Up @@ -10,6 +10,10 @@
- By default, patch request returns a 200 with full modified content representation.
No effect with plone.restapi <= 1.0a25

- Since angular2-schema-form dependency has been removed,
edit forms are not anymore auto-generated by angular2-schema-form by default.


## New features

- Add plone-workflow component. [Thomas Desvenain]
Expand All @@ -36,6 +40,12 @@

- url was missing from navlink interface. [Thomas Desvenain]

## Refactor

- Remove dependency on angular2-schema-form. [Eric Brehault]

- Add an edit view with angular2-schema-form on test app. [Thomas Desvenain]


# 1.3.1 (2017-11-08)

Expand Down
1 change: 1 addition & 0 deletions src/module.ts
@@ -1,4 +1,5 @@
import 'rxjs/add/operator/delayWhen';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
Expand Down
3 changes: 2 additions & 1 deletion src/views/edit.spec.ts
Expand Up @@ -5,6 +5,7 @@ import {
} from '@angular/common/http/testing';

import { APP_BASE_HREF } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ConfigurationService } from '../services/configuration.service';
import { APIService } from '../services/api.service';
Expand All @@ -26,7 +27,7 @@ describe('EditView', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EditView],
imports: [HttpClientTestingModule, TraversalModule],
imports: [HttpClientTestingModule, TraversalModule, FormsModule],
providers: [
APIService,
AuthenticationService,
Expand Down
6 changes: 3 additions & 3 deletions src/views/edit.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { Target } from 'angular-traversal';

import { TraversingComponent } from '../traversing';
import { Services } from '../services';
Expand All @@ -14,20 +15,19 @@ import { Services } from '../services';
export class EditView extends TraversingComponent {

model: any = {};
actions: any = {};
path: string;

constructor(services: Services) {
super(services);
}

onTraverse(target: any) {
onTraverse(target: Target) {
this.path = target.contextPath;
this.model = target.context;
}

onSave(data: any) {
this.services.resource.update(this.path, data).subscribe(res => {
this.services.resource.update(this.path, data).subscribe(() => {
this.services.traverser.traverse(this.path);
});
}
Expand Down
1 change: 1 addition & 0 deletions tests/package.json
Expand Up @@ -23,6 +23,7 @@
"@angular/platform-server": "^5.0.0",
"@angular/router": "^5.0.0",
"angular-traversal": "^1.0.4",
"angular2-schema-form": "^1.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.12"
Expand Down
10 changes: 7 additions & 3 deletions tests/src/app/app.component.spec.ts
Expand Up @@ -7,31 +7,35 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
import { APP_BASE_HREF } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RESTAPIModule } from '@plone/restapi-angular';
import { SchemaFormModule } from 'angular2-schema-form';

import { AppComponent } from './app.component';
import { Search } from './components/search';
import { CustomViewView } from './custom';
import { CustomSfEditView, CustomViewView } from './custom';
import { CustomGlobalNavigation } from './custom';

@Component({
selector: 'custom-breadcrumbs',
template: ''
})
export class FakeCustomBreadcrumbs {}
export class FakeCustomBreadcrumbs {
}

describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
CustomViewView,
CustomSfEditView,
FakeCustomBreadcrumbs,
CustomGlobalNavigation,
Search,
],
imports: [
HttpClientTestingModule,
RESTAPIModule,
SchemaFormModule.forRoot(),
FormsModule,
],
providers: [
Expand All @@ -46,7 +50,7 @@ describe('AppComponent', () => {

TestBed.overrideModule(BrowserDynamicTestingModule, {
set: {
entryComponents: [ CustomViewView ],
entryComponents: [CustomViewView],
},
});
});
Expand Down
2 changes: 1 addition & 1 deletion tests/src/app/app.component.ts
@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { PloneViews, Services } from '@plone/restapi-angular';

import { CustomViewView } from './custom';
import { CustomSfEditView, CustomViewView } from './custom';
import { AuthenticatedStatus, LoadingStatus, Vocabulary, SearchView } from '@plone/restapi-angular';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Expand Down
8 changes: 5 additions & 3 deletions tests/src/app/app.module.ts
@@ -1,19 +1,20 @@
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { RESTAPIModule } from '@plone/restapi-angular';
import { DefaultWidgetRegistry, SchemaFormModule, WidgetRegistry } from 'angular2-schema-form';

import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { Search } from './components/search';
import { CustomBreadcrumbs, CustomGlobalNavigation, CustomViewView } from './custom';
import { CustomBreadcrumbs, CustomGlobalNavigation, CustomSfEditView, CustomViewView } from './custom';

@NgModule({
declarations: [
AppComponent,
CustomViewView,
CustomSfEditView,
CustomBreadcrumbs,
CustomGlobalNavigation,
Search,
Expand All @@ -24,15 +25,16 @@ import { CustomBreadcrumbs, CustomGlobalNavigation, CustomViewView } from './cus
imports: [
BrowserModule,
FormsModule,
SchemaFormModule.forRoot(),
RESTAPIModule,
HttpModule
],
providers: [
{
provide: 'CONFIGURATION', useValue: {
BACKEND_URL: environment.backendUrl,
}
},
{ provide: WidgetRegistry, useClass: DefaultWidgetRegistry }
],
bootstrap: [AppComponent]
})
Expand Down
81 changes: 74 additions & 7 deletions tests/src/app/custom/index.ts
@@ -1,29 +1,96 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';

import { GlobalNavigation, Breadcrumbs } from '@plone/restapi-angular';
import { ViewView } from '@plone/restapi-angular';
import { Breadcrumbs, EditView, GlobalNavigation, Services, ViewView } from '@plone/restapi-angular';
import { Target } from 'angular-traversal';

@Component({
selector: 'custom-breadcrumbs',
templateUrl: './breadcrumbs.html'
})
export class CustomBreadcrumbs extends Breadcrumbs {}
export class CustomBreadcrumbs extends Breadcrumbs {
}

@Component({
selector: 'custom-navigation',
templateUrl: './navigation.html'
})
export class CustomGlobalNavigation extends GlobalNavigation {}
export class CustomGlobalNavigation extends GlobalNavigation {
}

@Component({
selector: 'custom-view',
templateUrl: './view.html'
})
export class CustomViewView extends ViewView {
mode: 'view' | 'edit' = 'view';
mode: 'view' | 'edit' | 'advanced-edit' = 'view';
downloaded = false;
changeMode(mode: 'view' | 'edit') {

changeMode(mode: 'view' | 'edit' | 'advanced-edit') {
this.mode = mode;
}

}

@Component({
selector: 'custom-sf-edit',
template: `<sf-form [schema]="schema" [model]="model" [actions]="actions"></sf-form>`
})
export class CustomSfEditView extends EditView implements OnInit {

schema: any;
actions: any = {};

constructor(services: Services) {
super(services);
this.schema = {
'properties': {},
'buttons': [
{ id: 'save', label: 'Save' },
{ id: 'cancel', label: 'Cancel' }
]
};
}

onTraverse(target: Target) {
super.onTraverse(target);
const model = target.context;
this.actions = {
save: this.onSave.bind(this),
cancel: this.onCancel.bind(this)
};
this.services.resource.type(target.context['@type']).subscribe(schema => {
schema.buttons = [
{ id: 'save', label: 'Save' },
{ id: 'cancel', label: 'Cancel' }
];
// FIX THE SCHEMA AND THE MODEL
for (const property in schema.properties) {
if (!schema.properties.hasOwnProperty(property)) {
continue;
}
if (property === 'allow_discussion') {
schema.properties[property].type = 'boolean';
}
if (property === 'effective' || property === 'expires') {
schema.properties[property].widget = 'date';
}
}

this.schema = schema;
this.model = model;
});
}

onSave(schemaForm: any) {
const model = schemaForm.value;
Object.keys(model).forEach((key: string) => {
if (model[key] === '' && this.schema.properties[key].widget.id === 'date') {
model[key] = null;
}
});
this.services.resource.update(this.path, model).subscribe(() => {
this.services.traverser.traverse(this.path);
});
}

}
8 changes: 7 additions & 1 deletion tests/src/app/custom/view.html
@@ -1,4 +1,7 @@
<button *ngIf="mode !== 'edit'" (click)="mode = 'edit'">Edit</button>
<button *ngIf="mode !== 'edit'"
(click)="changeMode('edit')">Edit</button>
<button *ngIf="mode !== 'edit'"
(click)="changeMode('advanced-edit')">Advanced edit</button>
<ng-container *ngIf="mode === 'view'">
<h1>{{ context.title }}</h1>

Expand Down Expand Up @@ -27,3 +30,6 @@ <h3>Workflow</h3>
<ng-container *ngIf="mode === 'edit'">
<plone-edit></plone-edit>
</ng-container>
<ng-container *ngIf="mode === 'advanced-edit'">
<custom-sf-edit></custom-sf-edit>
</ng-container>
41 changes: 38 additions & 3 deletions tests/yarn.lock
Expand Up @@ -295,6 +295,15 @@ angular-traversal@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/angular-traversal/-/angular-traversal-1.0.4.tgz#cfc739e0e328027fd3ec8635fb6ee387555392d0"

angular2-schema-form@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/angular2-schema-form/-/angular2-schema-form-1.2.0.tgz#af4a409cb612039bd210c689e03e2392b69035c8"
dependencies:
body-parser "^1.15.1"
methods "^1.1.2"
raw-loader "0.5.1"
z-schema "^3.17.0"

ansi-html@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
Expand Down Expand Up @@ -636,7 +645,7 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
version "4.11.8"
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"

body-parser@^1.16.1:
body-parser@^1.15.1, body-parser@^1.16.1:
version "1.18.2"
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
dependencies:
Expand Down Expand Up @@ -1066,6 +1075,10 @@ commander@2.11.x, commander@~2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"

commander@^2.7.1:
version "2.12.2"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"

common-tags@^1.3.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.4.0.tgz#1187be4f3d4cf0c0427d43f74eef1f73501614c0"
Expand Down Expand Up @@ -3286,6 +3299,14 @@ lodash.clonedeep@^4.3.2, lodash.clonedeep@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"

lodash.get@^4.0.0:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"

lodash.isequal@^4.0.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"

lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
Expand Down Expand Up @@ -3432,7 +3453,7 @@ merge-descriptors@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"

methods@~1.1.2:
methods@^1.1.2, methods@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"

Expand Down Expand Up @@ -4532,7 +4553,7 @@ raw-body@2.3.2:
iconv-lite "0.4.19"
unpipe "1.0.0"

raw-loader@^0.5.1:
raw-loader@0.5.1, raw-loader@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"

Expand Down Expand Up @@ -5743,6 +5764,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "~1.0.0"
spdx-expression-parse "~1.0.0"

validator@^9.0.0:
version "9.2.0"
resolved "https://registry.yarnpkg.com/validator/-/validator-9.2.0.tgz#ad216eed5f37cac31a6fe00ceab1f6b88bded03e"

vary@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
Expand Down Expand Up @@ -6134,6 +6159,16 @@ yn@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"

z-schema@^3.17.0:
version "3.19.0"
resolved "https://registry.yarnpkg.com/z-schema/-/z-schema-3.19.0.tgz#d86e90e5d02113c7b8824ae477dd57208d17a5a8"
dependencies:
lodash.get "^4.0.0"
lodash.isequal "^4.0.0"
validator "^9.0.0"
optionalDependencies:
commander "^2.7.1"

zone.js@^0.8.12:
version "0.8.17"
resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.17.tgz#4c5e5185a857da8da793daf3919371c5a36b2a0b"
Expand Down

0 comments on commit 1590953

Please sign in to comment.