Merge pull request #13 from guillotinaweb/tiles

Tiles

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.1.0 (2020-01-28)
+
+- Tile support
+
 # 1.0.6 (2019-11-02)
 
 - Add Travis and fix demo and test setup

README.md

@@ -22,12 +22,17 @@ It also allows to map several views for a given type (like the `@@edit` view for
 
 We declare some views for our data type (`view` is the default view name):
 
-```
+```typescript
 traverser.addView('view', 'post', PostComponent);
 traverser.addView('edit', 'post', EditPostComponent);
 traverser.addView('view', 'user', UserProfileComponent);
 ```
 
+And we connect traversing to our state:
+```typescript
+this.store.dispatch({ type: TraverserActions.Types.Watch});
+```
+
 Then the app is able to expose the following pathes:
 
 - http://localhost:4200/introduction
@@ -43,7 +48,7 @@ The `<traverser-outlet></traverser-outlet>` will load the current context accord
 
 Any template might contain some links like:
 
-```
+```html
 <a traverseTo="/2019/07/new-post">
 <a [traverseTo]="relatedPost">
 <a traverseTo="..">
@@ -53,7 +58,7 @@ Note: here and later on, the provided link can be either a full path (`/2019/07/
 
 In code, we can navigate by dispatching an action:
 
-```
+```typescript
 this.store.dispatch(new TraverserActions.Traverse('../eric'))
 ```
 
@@ -63,13 +68,13 @@ The component gets the `context` from the state.
 
 We can be the raw context (`any`) using the `getContext` selector:
 
-```
+```typescript
 context = this.store.pipe(select(TraverserSelectors.getContext));
 ```
 
 But the `TraverserContext` function allows to get a typed context:
 
-```
+```typescript
 context = TraverserSelectors.TraverserContext<UserProfile>(this.store);
 ```
 
@@ -81,7 +86,7 @@ Let's say we need the list of all the posts from the current month when displayi
 
 We can get the folder content from the state:
 
-```
+```typescript
 folder = TraverserSelectors.TraverseTo<Folder>(this.store, '..');
 ```
 
@@ -91,17 +96,31 @@ All the traversed resources are stored in the state, but if the requested resour
 
 As the state acts as a cache system, it can be cleaned on demand:
 
-```
+```typescript
 this.store.dispatch(new TraverserActions.CleanTraverserResources(['../eric', '/2019/*']))
 ```
 
 And it can be updated:
 
-```
+```typescript
 this.store.dispatch(new TraverserActions.UpdateTraverserResource({
     path: '/2019/07/03',
     changes: {
         title: "New title"
     }
 }));
 ```
+
+## Tiles
+
+`angular-traversal` allows to manage the main page view.
+
+Since version 1.3.0, it also allows to define small blocks within the current page (named "tiles").
+
+See the [angular-traversal documentation](https://github.com/guillotinaweb/angular-traversal#tiles) for more details.
+
+We can load a context in a tile by doing:
+
+```typescript
+this.store.dispatch(new TraverserActions.LoadTile({tile: 'details', path}));
+```

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --prod nsc-test",
+    "build": "ng build --prod nst-test",
     "build:lib": "ng build --prod ngx-state-traverser && cp ./README.md ./dist/ngx-state-traverser/",
     "test": "jest",
     "lint": "ng lint",

projects/ngx-state-traverser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guillotinaweb/ngx-state-traverser",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "license": "MIT",
   "author": {
     "name": "Eric Brehault",
@@ -32,7 +32,7 @@
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^7.4.0",
     "@ngrx/store": "^7.4.0",
-    "angular-traversal": "latest"
+    "angular-traversal": "^1.3.0"
   },
   "private": false
 }

projects/ngx-state-traverser/src/lib/actions.ts

@@ -3,11 +3,14 @@ import { Target } from 'angular-traversal';
 
 export namespace TraverserActions {
     export enum Types {
+        Watch = '[Traversing] Watch',
         Traverse = '[Traversal] Traverse',
         ResolveContext = '[Traversal] Resolve context',
         Resolve = '[Traversal] Resolve',
         CleanTraverserResources = '[Traversal] Clean resources',
         UpdateTraverserResource = '[Traversal] Update resources',
+        LoadTile = '[Traversal] Load tile',
+        UpdateTile = '[Traversal] Set tile context',
     }
 
     export class Traverse implements Action {
@@ -35,10 +38,22 @@ export namespace TraverserActions {
         constructor(readonly payload: {path: string, changes: {[key: string]: any}}) {}
     }
 
+    export class LoadTile implements Action {
+        readonly type = Types.LoadTile;
+        constructor(readonly payload: {tile: string, path: string}) {}
+    }
+
+    export class UpdateTile implements Action {
+        readonly type = Types.UpdateTile;
+        constructor(readonly payload: {tile: string, target: Target}) {}
+    }
+
     export type Actions =
         | Traverse
         | ResolveContext
         | Resolve
         | CleanTraverserResources
-        | UpdateTraverserResource;
+        | UpdateTraverserResource
+        | LoadTile
+        | UpdateTile;
 }

projects/ngx-state-traverser/src/lib/effect.ts

@@ -3,14 +3,14 @@ import { Traverser } from 'angular-traversal';
 import { TraverserActions } from './actions';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { EMPTY } from 'rxjs';
-import { map, mergeMap, catchError } from 'rxjs/operators';
+import { map, mergeMap, catchError, tap } from 'rxjs/operators';
 
 @Injectable()
 export class StateTraverserEffect {
     @Effect()
     watchTraversing = this.actions
         .pipe(
-            ofType('[Traversing] Watch'),
+            ofType(TraverserActions.Types.Watch),
             mergeMap(() => this.traverser.target
                 .pipe(
                     map(target => new TraverserActions.ResolveContext(target)),
@@ -19,6 +19,18 @@ export class StateTraverserEffect {
             )
         );
 
+    @Effect()
+    watchTiles = this.actions
+        .pipe(
+            ofType(TraverserActions.Types.Watch),
+            mergeMap(() => this.traverser.tileUpdates
+                .pipe(
+                    map(({tile, target}) => new TraverserActions.UpdateTile({tile, target})),
+                    catchError(() => EMPTY)
+                )
+            )
+        );
+
     @Effect()
     request = this.actions
         .pipe(
@@ -30,6 +42,14 @@ export class StateTraverserEffect {
                 )
             )
         );
+
+    @Effect({dispatch: false})
+    loadTile = this.actions
+        .pipe(
+            ofType<TraverserActions.LoadTile>(TraverserActions.Types.LoadTile),
+            tap(action => this.traverser.loadTile(action.payload.tile, action.payload.path))
+        );
+
     constructor(
         private readonly actions: Actions,
         private traverser: Traverser,

projects/ngx-state-traverser/src/lib/reducer.ts

@@ -39,6 +39,7 @@ export function reducer(state = initialState, action: TraverserActions.Actions):
                 contextPath = contextPath.slice(0, -1);
             }
             return {
+                ...state,
                 target: action.payload,
                 collection: {
                     ...state.collection,
@@ -91,6 +92,15 @@ export function reducer(state = initialState, action: TraverserActions.Actions):
                 }
             };
         }
+        case TraverserActions.Types.UpdateTile: {
+            return {
+                ...state,
+                tiles: {
+                    ...state.tiles,
+                    [action.payload.tile]: action.payload.target,
+                }
+            };
+        }
         default: {
             return state;
         }

projects/ngx-state-traverser/src/lib/selector.ts

@@ -173,4 +173,15 @@ export namespace TraverserSelectors {
             map(context => (context as T))
         );
     }
+
+    export function getTileContext(name: string) {
+        return createSelector(
+            traversalSelector,
+            (state: TraversingState): any => {
+                if (!!state.tiles[name]) {
+                    return state.tiles[name].context;
+                }
+            }
+        );
+    }
 }

projects/ngx-state-traverser/src/lib/state.ts

@@ -7,6 +7,7 @@ export enum TraversingStateFeatures {
 export interface TraversingState {
     target: Target;
     collection: {[path: string]: any};
+    tiles: {[name: string]: Target};
 }
 
 export const initialState: TraversingState = {
@@ -20,4 +21,5 @@ export const initialState: TraversingState = {
         view: 'view',
     },
     collection: {},
+    tiles: {},
 };

projects/nst-test/src/app/app.component.html

@@ -3,5 +3,10 @@
   <button [traverseTo]="'/' + repository +'/contents/'">Go</button>
 </header>
 <section>
-  <traverser-outlet></traverser-outlet>
+    <article>
+        <traverser-outlet></traverser-outlet>
+    </article>
+    <aside>
+        <traverser-tile name="details"></traverser-tile>
+    </aside>
 </section>

projects/nst-test/src/app/app.component.scss

@@ -0,0 +1,9 @@
+section {
+    display: flex;
+    article {
+        width: 80%;
+    }
+    aside {
+        width: 20%;
+    }
+}

projects/nst-test/src/app/app.component.ts

@@ -4,7 +4,9 @@ import { FileComponent } from './file/file.component';
 import { FileInfoComponent } from './file-info/file-info.component';
 import { FolderComponent } from './folder/folder.component';
 import { Store } from '@ngrx/store';
-import { TraversingState } from 'ngx-state-traverser';
+import { TraversingState, TraverserActions } from 'ngx-state-traverser';
+import { FolderDetailsComponent } from './folder/folder-details.component';
+import { NoDetailsComponent } from './no-details.component';
 
 @Component({
   selector: 'app-root',
@@ -19,9 +21,11 @@ export class AppComponent {
     private readonly store: Store<TraversingState>,
     traverser: Traverser,
   ) {
-    this.store.dispatch({ type: '[Traversing] Watch'});
+    this.store.dispatch({ type: TraverserActions.Types.Watch});
     traverser.addView('view', 'file', FileComponent);
     traverser.addView('info', 'file', FileInfoComponent);
     traverser.addView('view', 'dir', FolderComponent);
+    traverser.addTile('details', '*', NoDetailsComponent);
+    traverser.addTile('details', 'dir', FolderDetailsComponent);
   }
 }

projects/nst-test/src/app/app.module.ts

@@ -21,14 +21,18 @@ import { StateTraverserModule } from 'ngx-state-traverser';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { EffectsModule } from '@ngrx/effects';
+import { FolderDetailsComponent } from './folder/folder-details.component';
+import { NoDetailsComponent } from './no-details.component';
 
 @NgModule({
     declarations: [
         AppComponent,
         FileComponent,
         FolderComponent,
         FileInfoComponent,
-        NavigationComponent
+        NavigationComponent,
+        FolderDetailsComponent,
+        NoDetailsComponent,
     ],
     imports: [
         StoreModule.forRoot({}),
@@ -45,7 +49,9 @@ import { EffectsModule } from '@ngrx/effects';
     entryComponents: [
         FileComponent,
         FolderComponent,
-        FileInfoComponent
+        FileInfoComponent,
+        FolderDetailsComponent,
+        NoDetailsComponent,
     ],
     providers: [
         { provide: Resolver, useClass: BasicHttpResolver },

projects/nst-test/src/app/file-info/file-info.component.html

@@ -1,2 +1,2 @@
-<p>Size: {{ (context | async).size }}</p>
-<p>SHA: {{ (context | async).sha }}</p>
+<p>Size: {{ (context | async)?.size }}</p>
+<p>SHA: {{ (context | async)?.sha }}</p>

projects/nst-test/src/app/folder/folder-details.component.html

@@ -0,0 +1 @@
+<div>This folder contains {{ (tileContext | async).length }} elements</div>

projects/nst-test/src/app/folder/folder-details.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { TraverserSelectors, TraversingState } from 'ngx-state-traverser';
+
+@Component({
+  selector: 'app-folder-details',
+  templateUrl: './folder-details.component.html',
+})
+export class FolderDetailsComponent {
+
+    tileContext = this.store.pipe(select(TraverserSelectors.getTileContext('details')));
+
+    constructor(private readonly store: Store<TraversingState>) { }
+
+
+}

projects/nst-test/src/app/folder/folder.component.html

@@ -2,6 +2,6 @@
     <li *ngFor="let entry of (context | async)">
         <a [traverseTo]="entry.url">
             {{ entry.name }}
-        </a>
+        </a> <button (click)="showDetails(entry.url)">Details</button>
     </li>
 </ul>