Merge pull request #14 from guillotinaweb/fix-update-context

Fix update context

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 1.3.1 (2020-05-28)
+
+### Improvement
+- Improve the demo
+- More documentation
+- `updateContext` returns `onComplete` observable
+
+### Bug fix:
+- Fix `updateContext` method
+
 # 1.3.0 (2020-05-24)
 
 ### Feature

README.md

@@ -40,6 +40,8 @@ The good thing about a Grange app is it is totally neutral about the Guillotina
 
 ## Building a basic Grange app
 
+### Init a Grange project
+
 If you don't have one already, create an angular project:
 ```
 ng new my-project
@@ -107,6 +109,92 @@ npm start
 
 The Angular app is now offering all the Grange standard views (login, content creation, view, etc.).
 
+### Create custom views
+
+We have in our Guillotina `config.yaml` file a custom content type named `player`:
+```yaml
+  player:
+    title: Player
+    inherited_interface: guillotina.interfaces.IItem
+    inherited_class: guillotina.content.Item
+    add_permission: guillotina.AddContent
+    properties:
+      team:
+        type: guillotina.schema.TextLine
+        title: Team
+      rank:
+        type: guillotina.schema.Int
+        title: Rank
+```
+
+We would like to use our own custom form to edit `player` contents.
+
+We create regular Angular component named `PlayerComponent` and we declare it in our `AppComponent` to become the `player` edit view:
+
+```typescript
+this.grange.traverser.addView('edit', 'player', PlayerComponent);
+```
+
+The template is a simple form (based on Pastanaga UI elements, but any form elements would work):
+
+```html
+<pa-input [(value)]="title">Title</pa-input>
+<pa-input [(value)]="team">Team</pa-input>
+<pa-input [(value)]="rank" type="number">Rank</pa-input>
+<pa-button (click)="save()">Save</pa-button>
+```
+
+In the component itself, we inject `grange` service:
+```typescript
+constructor(private grange: Grange) { }
+```
+
+Thank to this service, we can get the values we need from the context:
+```typescript
+ngOnInit() {
+    this.grange.getContext().subscribe(context => {
+        this.title = context.title;
+        this.team = context.team;
+        this.rank = context.rank;
+    });
+}
+```
+
+The good thing about `getContext()` is it returns an Observable that will emit the context object everytime it changes in our state, so our form is always reflecting the current state values.
+
+`grange` service also allows us to save the changes the user enters in the form:
+```typescript
+save() {
+    this.grange.updateContext({
+        title: this.title,
+        team: this.team,
+        rank: this.rank,
+    });
+}
+```
+`updateContext()` updates the state (hence the form is immediately updated because `getContext()` will emit the new values), and it also updates Guillotina backend by doing a PATCH call.
+
+If we want to take an action after saving – like redirecting to the home page – `updateContext()` has a `onComplete` property which is a boolean observable (returning `true` for success, and `false` if saving produced a backend error):
+
+```typescript
+save() {
+    this.grange.updateContext({
+        title: this.title,
+        team: this.team,
+        rank: this.rank,
+    }).onComplete.subscribe(success => {
+        if (success) {
+            this.grange.ui.toaster.open('Saved', 2000);
+            this.grange.traverser.traverse('/');
+        } else {
+            this.grange.ui.toaster.open('Error when saving.', 'common.dismiss');
+        }
+    });
+}
+```
+
+See [the full code example](projects/demo/src/app).
+
 ## Reference
 
 ### Grange views
@@ -160,7 +248,7 @@ import { Grange } from 'grange';
     constructor(private grange: Grange) {}
 
     notify() {
-        this.grange.ui.toaster.open('Hello');
+        this.grange.ui.toaster.open('Hello', 'Close');
     }
 ```
 
@@ -233,7 +321,7 @@ It allows to select state information or to dispatch actions. See below the "Sta
 
 `this.grange.ui`
 
-It gives access to the main Pastanaga services: calendar, popup, sidebar, and translate.
+It gives access to the main Pastanaga services: calendar, dialog, popup, sidebar, toaster and translate.
 
 See "Pastanaga UI library" section below.
 

g-api/config.yaml

@@ -102,6 +102,18 @@ behaviors:
         title: Text
         default: Hello
 contents:
+  player:
+    title: Player
+    inherited_interface: guillotina.interfaces.IItem
+    inherited_class: guillotina.content.Item
+    add_permission: guillotina.AddContent
+    properties:
+      team:
+        type: guillotina.schema.TextLine
+        title: Team
+      rank:
+        type: guillotina.schema.Int
+        title: Rank
   canvas:
     title: Canvas
     inherited_interface: guillotina.interfaces.IItem

package.json

@@ -26,7 +26,7 @@
     "@guillotinaweb/grange-core": "latest",
     "@guillotinaweb/grange-form": "latest",
     "@guillotinaweb/ngx-state-traverser": "latest",
-    "@guillotinaweb/pastanaga-angular": "^1.17.18",
+    "@guillotinaweb/pastanaga-angular": "^1.18.2",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^8.4.0",
     "@ngrx/store": "^8.4.0",

projects/demo/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { GrangeViews, Grange } from '../../../grange/src';
 import { CanvasComponent } from './canvas/canvas.component';
+import { PlayerComponent } from './player/player.component';
 
 @Component({
     selector: 'app-root',
@@ -16,6 +17,7 @@ export class AppComponent {
         this.views.initialize();
         this.grange.core.auth.isAuthenticated.subscribe(auth => this.isAuthenticated = auth.state);
         this.grange.traverser.addView('view', 'canvas', CanvasComponent);
+        this.grange.traverser.addView('edit', 'player', PlayerComponent);
     }
 
     logout() {

projects/demo/src/app/app.module.ts

@@ -4,17 +4,19 @@ import { environment } from '../environments/environment';
 
 import { AppComponent } from './app.component';
 import { CanvasComponent } from './canvas/canvas.component';
+import { PlayerComponent } from './player/player.component';
 import { GrangeRootModule } from '../../../grange/src';
 import { TraversalModule } from 'angular-traversal';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { ButtonModule } from '@guillotinaweb/pastanaga-angular';
+import { ButtonModule, TextFieldModule } from '@guillotinaweb/pastanaga-angular';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 
 @NgModule({
     declarations: [
         AppComponent,
         CanvasComponent,
+        PlayerComponent,
     ],
     imports: [
         BrowserModule,
@@ -27,6 +29,8 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
         }),
         AngularSvgIconModule.forRoot(),
         ButtonModule,
+        TextFieldModule,
+        ButtonModule,
     ],
     providers: [
         {

projects/demo/src/app/canvas/canvas.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Grange } from '../../../../grange/src';
-import { select } from '@ngrx/store';
-import { TraverserSelectors } from '@guillotinaweb/ngx-state-traverser';
-import { map, tap, concatMap } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
 @Component({

projects/demo/src/app/player/player.component.html

@@ -0,0 +1,4 @@
+<pa-input [(value)]="title">Title</pa-input>
+<pa-input [(value)]="team">Team</pa-input>
+<pa-input [(value)]="rank" type="number">Rank</pa-input>
+<pa-button (click)="save()">Save</pa-button>

projects/demo/src/app/player/player.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { Grange } from '../../../../grange/src';
+
+@Component({
+    selector: 'app-player',
+    templateUrl: 'player.component.html'
+})
+export class PlayerComponent implements OnInit {
+    title = '';
+    team = '';
+    rank = 0;
+
+    constructor(private grange: Grange) { }
+
+    ngOnInit() {
+        this.grange.getContext().subscribe(context => {
+            this.title = context.title;
+            this.team = context.team;
+            this.rank = context.rank;
+        });
+    }
+
+    save() {
+        this.grange.updateContext({
+            title: this.title,
+            team: this.team,
+            rank: this.rank,
+        }).onComplete.subscribe(success => {
+            if (success) {
+                this.grange.ui.toaster.open('Saved', 2000);
+                this.grange.traverser.traverse('/');
+            } else {
+                this.grange.ui.toaster.open('Error when saving.', 'common.dismiss');
+            }
+        });
+    }
+}

projects/grange/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guillotinaweb/grange",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
   "author": {
     "name": "Eric Brehault",

projects/grange/src/lib/components/breadcrumbs.html

@@ -2,14 +2,14 @@
     <h2 class="pa-sr" id="breadcrumbs-youarehere" translate>breadcrumbs.here</h2>
     <ol class="breadcrumb" aria-labeledby="breadcrumbs-youarehere">
         <li>
-            <pa-button-link traverseTo="/" icon="home" [hasButtonDisplay]="true" paTooltip="workingbar.home" paTooltipType="action">
-            </pa-button-link>
+            <pa-button traverseTo="/" icon="home" paTooltip="workingbar.home" paTooltipType="action">
+            </pa-button>
         </li>
         <ng-container *ngFor="let ancestor of (ancestors | async)">
             <li class="breadcrumb-item">
-                <pa-button-link [traverseTo]="ancestor['@id']">
+                <a href="#" [traverseTo]="ancestor['@id']" class="pa-button pa-button-link">
                     {{ ancestor.title }}
-                </pa-button-link>
+                </a>
             </li>
         </ng-container>
     </ol>

projects/grange/src/lib/components/breadcrumbs.scss

@@ -61,8 +61,12 @@
         right: - rythm(2);
         top: 1px;
     }
-    & ::ng-deep .pa-button-link {
+    & .pa-button {
         white-space: nowrap;
+        text-decoration: none;
+        &:hover {
+            text-decoration: underline;
+        }
     }
     & .o-breadcrumb-item-more ::ng-deep svg {
         fill: $separator-color;

projects/grange/src/lib/grange.service.ts

@@ -4,9 +4,9 @@ import { Traverser } from 'angular-traversal';
 import { GrangeCore } from '@guillotinaweb/grange-core';
 import { GrangeState } from './state/state';
 import { PastanagaService } from '@guillotinaweb/pastanaga-angular';
-import { Observable } from 'rxjs';
+import { Observable, AsyncSubject } from 'rxjs';
 import { TraverserSelectors, TraverserActions } from '@guillotinaweb/ngx-state-traverser';
-import { take } from 'rxjs/operators';
+import { take, concatMap, tap, skip } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -26,12 +26,29 @@ export class Grange {
         return this.store.pipe(select(TraverserSelectors.getContext));
     }
 
-    updateContext(changes: any) {
+    updateContext(changes: any): {onComplete: Observable<boolean>} {
+        const onComplete = new AsyncSubject<boolean>();
+        let initialContext: any;
+        let path: string;
         this.getContext().pipe(
-            take(1)
-        ).subscribe(context => this.store.dispatch(new TraverserActions.UpdateTraverserResource({
-            path: this.core.api.getPath(context['@id']),
-            changes
-        })));
+            take(1),
+            tap(context => {
+                initialContext = context;
+                path = this.core.api.getPath(context['@id']);
+                this.store.dispatch(new TraverserActions.UpdateTraverserResource({path, changes}));
+            }),
+            concatMap(newContext => this.core.resource.update(path, changes)),
+        ).subscribe(
+            () => {
+                onComplete.next(true);
+                onComplete.complete();
+            },
+            () => {
+                this.store.dispatch(new TraverserActions.UpdateTraverserResource({path, changes: initialContext}));
+                onComplete.next(false);
+                onComplete.complete();
+            },
+        );
+        return {onComplete};
     }
 }