Pjl-Frontend

Pauls attempt at making a basic resuable Orgbrain layout and login. Forked from orgbrain-frontend. Adds ogin authorisation and app switching

To test

$ npm start

To deploy library

Edit the version in package.json

$ npm run lib $ npm run publish

To use

$ npm install orgbrain-pjl-frontend

The OrgbrainFrontEnd

This is a template layout which can be used to standardise the orgbrain apps.

How to use the Orgbrain frontend module

The OrgBrainPjlFrontEndModule is defined by the lib.module.ts

There are other useful modules e.g. OrgBrainLogoModule

The entry point for your app inside the orgbrain-app-selection modify your app.module.ts like this

  bootstrap: [RootComponent]

Providing components for the OrgBrainFrontend

orgbrain-root

This label defines the main component used by the orgbrain-app-selection

@Component({
  selector: 'orgbrain-root',
  template: ` <router-outlet #fullwindowoutlet name=\"fullwindow\"> 
   </router-outlet> <orgbrain-defaultlayout *ngIf=\"!useFullWindowOutlet\"> </orgbrain-defaultlayout> `,
  styles: ['']
})

class MyMainComponent  . . . 

Router outlets

We can also inject other components into the orgbrain-app-selection by defining outlets in our route.

e.g.

[TODO understand this better what is available how does it work?]

 RouterModule.forRoot([
      {
        path: '',
        component: ContentDemoComponent    // this appears in the main router outlet (see above)
      },
      {
        path: '',
        pathMatch: 'full',
        outlet: 'leftsidemenu',
        component: MenuDemoComponent
      },
      {
        path: '',
        outlet: 'toolbar',
        component: ToolbarDemoComponent
      },
      {
        path: 'tabs',
        children: [    // ??? need to look into what this is doing
          {
            path: '',
            outlet: 'extratoolbars',
            component: ExtraToolbarComponent
          },
          {
            path: 'dashboard',
            component: DashboardComponent,
          },
          {
            path: 'reports',

            children: [
              {
                path: '',
                component: ReportsComponent
              },
              {
                path: '',
                outlet: 'leftsidemenu',
                component: ReportsMenuComponent
              }
            ]
          }
        ]
      },
      {
        path: 'fullwindowtest',
        outlet: 'fullwindow',
        component: ContentDemoComponent
      }
    ]),

Authentication / Logon

Logon can be triggered by using the canActivate feature of the router. (Probably other ways but this allows you to select which routes require authentication).

e.g.

 RouterModule.forRoot([
      {
        path: '',
        canActivate: [AuthGuardService],
        component: ContentDemoComponent
      },

Trying to navigate to a path calls the canActivate method of the AuthGuardService.