orgbrain-frontend

Pjl-Frontend

Pauls attempt at making a basic resuable Orgbrain layout and login.

Cloned from the orgbrain-frontend repo (TODO just use the orgbrain-frontend library and get rid of this cloned code)

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-frontend 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-frontend

@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-frontend 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.

TODO say what this does.