From 73c4c79bae5ebc75c6de1eb99fa2ac6044653b81 Mon Sep 17 00:00:00 2001 From: Eric BREHAULT Date: Sat, 20 Jun 2020 15:27:32 +0200 Subject: [PATCH] fix demo and tutorial --- CHANGELOG.md | 7 ++++++ docs/TUTORAL.md | 22 ++++++++++++------- package.json | 8 +++---- projects/demo/src/app/app.module.ts | 1 + .../demo/src/app/player/player.component.ts | 4 ++-- .../src/app/team/team-contests.component.ts | 4 ++-- projects/grange/package.json | 2 +- 7 files changed, 31 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6720bbf..a2f8fb4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# 1.3.2 (2020-06-20) + +### Improvement +- Better demo and turorial +- More utilities (getContextAs, addInContext, and deleteContext) +- add refreshChildren method in folder view + # 1.3.1 (2020-05-28) ### Improvement diff --git a/docs/TUTORAL.md b/docs/TUTORAL.md index 33ad78a..9e1ad5f 100644 --- a/docs/TUTORAL.md +++ b/docs/TUTORAL.md @@ -350,7 +350,7 @@ export class TeamComponent extends FolderView { Note we do not need the equivalent of `loadTeams` method here, as we just use the `refreshChildren` provided by `FolderView`. -To make it look better, let's use Pastanaga expand panels (note: we must import `ExpandModule` in `app.module.ts`): +To make it look better, let's use Pastanaga expand panels (note: we must import `ExpandModule` plus Angular's `BrowserAnimationsModule` in `app.module.ts`): ```html

{{ (context | async).title }}

@@ -373,7 +373,7 @@ Note badges are now links to traverse to players "edit" view: [traverseTo]="player['@id'] + '/@@edit'" ``` -Let's implement a component for that. +But if we click, we get the default Pastanaga Edit view, and we want our own form here. Let's implement a component for that. ### Player @@ -392,7 +392,7 @@ This component is a form allowing to enter player's name and rank or to delete t Delete ``` -Let's make it extend `BaseView` so we can access the view context easily. The context is always typed as `any`. +Let's make it extend `ViewView` so we can access the view context easily. The context is always typed as `any`. As we know the context is a player object, it would be nice to map it to a custom `Player` interface: ```ts @@ -404,7 +404,7 @@ interface Player extends Resource { selector: 'app-player', templateUrl: 'player.component.html' }) -export class PlayerComponent extends BaseView implements OnInit { +export class PlayerComponent extends ViewView implements OnInit { title = ''; rank = 0; player = this.context.pipe(map(res => res as Player)); @@ -441,7 +441,6 @@ If we want to take an action after saving – like redirecting to the home page save() { this.grange.updateContext({ title: this.title, - team: this.team, rank: this.rank, }).onComplete.subscribe(success => { if (success) { @@ -508,7 +507,14 @@ It is not a view, so we will have to inject the Grange service ourselves: constructor(private grange: Grange) { } ``` -To create th elist of radio buttons, we get all the items from our Guillotina root container that are Teams and we map them to `ControlModel`: +We get the current player fromn the context (and add a `newTeam` attribute to store the user's selection): + +```ts +player = this.grange.getContext(); +newTeam = ''; +``` + +To create the list of radio buttons, we get all the items from our Guillotina root container that are Teams and we map them to `ControlModel`: ```ts teams: Observable = this.grange.core.resource.items('/').pipe( @@ -605,10 +611,10 @@ This view displays all team contests in a table, and the last table row allows t Note: to use `pa-icon`, we have to import `SvgModule` in `app.module.ts`. -`TeamContestsComponent` extends `BaseView` so we can use the context, and we get the `contests` value (which is a dictionnary) and turn it into a list. +`TeamContestsComponent` extends `ViewView` so we can use the context, and we get the `contests` value (which is a dictionnary) and turn it into a list. ```ts -export class TeamContestsComponent extends BaseView { +export class TeamContestsComponent extends ViewView { year = ''; victory = false; diff --git a/package.json b/package.json index 031fb80..b870761 100644 --- a/package.json +++ b/package.json @@ -23,13 +23,13 @@ "@angular/platform-browser-dynamic": "~9.0.4", "@angular/router": "~9.0.4", "@briebug/jest-schematic": "^2.1.0", - "@guillotinaweb/grange-core": "latest", + "@guillotinaweb/grange-core": "^1.2.3", "@guillotinaweb/grange-form": "latest", - "@guillotinaweb/ngx-state-traverser": "latest", + "@guillotinaweb/ngx-state-traverser": "^1.2.5", "@guillotinaweb/pastanaga-angular": "^1.18.2", "@ngrx/core": "^1.2.0", - "@ngrx/effects": "^8.4.0", - "@ngrx/store": "^8.4.0", + "@ngrx/effects": "^8.6.0", + "@ngrx/store": "^8.6.0", "angular-svg-icon": "^8.0.0", "angular-traversal": "latest", "date-fns": "^2.9.0", diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts index b01f856..29ec42c 100644 --- a/projects/demo/src/app/app.module.ts +++ b/projects/demo/src/app/app.module.ts @@ -59,6 +59,7 @@ import { AngularSvgIconModule } from 'angular-svg-icon'; BACKEND_URL: environment.backend, CLIENT_TIMEOUT: 5000, LOGO: 'assets/logo.svg', + SOCIAL_LOGIN: false, }, }, ], diff --git a/projects/demo/src/app/player/player.component.ts b/projects/demo/src/app/player/player.component.ts index 22a24bc..29530c7 100644 --- a/projects/demo/src/app/player/player.component.ts +++ b/projects/demo/src/app/player/player.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { BaseView } from '../../../../grange/src'; +import { ViewView } from '../../../../grange/src'; import { Resource } from '@guillotinaweb/grange-core'; import { map } from 'rxjs/operators'; import { MovePlayerComponent } from './move-player.dialog'; @@ -12,7 +12,7 @@ interface Player extends Resource { selector: 'app-player', templateUrl: 'player.component.html' }) -export class PlayerComponent extends BaseView implements OnInit { +export class PlayerComponent extends ViewView implements OnInit { title = ''; rank = 0; player = this.context.pipe(map(res => res as Player)); diff --git a/projects/demo/src/app/team/team-contests.component.ts b/projects/demo/src/app/team/team-contests.component.ts index f7766c6..d3ad89c 100644 --- a/projects/demo/src/app/team/team-contests.component.ts +++ b/projects/demo/src/app/team/team-contests.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { BaseView } from '../../../../grange/src'; +import { ViewView } from '../../../../grange/src'; import { map } from 'rxjs/operators'; @Component({ selector: 'app-team-contests', templateUrl: 'team-contests.component.html', }) -export class TeamContestsComponent extends BaseView { +export class TeamContestsComponent extends ViewView { year = ''; victory = false; diff --git a/projects/grange/package.json b/projects/grange/package.json index 753a1fb..ce89afa 100644 --- a/projects/grange/package.json +++ b/projects/grange/package.json @@ -1,6 +1,6 @@ { "name": "@guillotinaweb/grange", - "version": "1.3.1", + "version": "1.3.2", "license": "MIT", "author": { "name": "Eric Brehault",