# orgbrain-pjl-frontend

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

Latest version **0.1.11** (published 2019-01-14) · 0 weekly downloads

## Install

```sh
npm install orgbrain-pjl-frontend
pnpm add orgbrain-pjl-frontend
yarn add orgbrain-pjl-frontend
bun add orgbrain-pjl-frontend
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2019-01-14 |
| First published | 2018-10-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 123.3 KB |
| Known vulnerabilities | 0 (+24 in 4 direct dependencies) |
| Install scripts | no |
| Maintainers | pauljohnleonard |

## Links

- npm: https://www.npmjs.com/package/orgbrain-pjl-frontend
- npm.io page: https://npm.io/package/orgbrain-pjl-frontend

## Dependencies (18)

- [rxjs](https://npm.io/package/rxjs.md) ~6.2.0
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.26
- [ngmakelib](https://npm.io/package/ngmakelib.md) ^0.2.5
- [rxjs-compat](https://npm.io/package/rxjs-compat.md) ^6.3.3
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^6.4.7
- [@angular/pwa](https://npm.io/package/@angular/pwa.md) ^0.8.4
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.1.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^6.1.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.1.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.1.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^6.1.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^6.1.0
- [@angular/material](https://npm.io/package/@angular/material.md) ^6.4.7
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^6.1.9
- [@angular/service-worker](https://npm.io/package/@angular/service-worker.md) ^6.1.9
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^6.1.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^6.1.0

## Recent versions

- 0.1.11 (latest) — 2019-01-14
- 0.1.10 — 2018-12-06
- 0.1.9 — 2018-11-30
- 0.1.8 — 2018-11-14
- 0.1.6 — 2018-11-06
- 0.1.5 — 2018-11-06
- 0.1.4 — 2018-11-06
- 0.1.2 — 2018-11-05
- 0.1.1 — 2018-11-05
- 0.1.0 — 2018-11-05
- 0.0.5 — 2018-10-19
- 0.0.4 — 2018-10-19
- 0.0.3 — 2018-10-18
- 0.0.2 — 2018-10-18
- 0.0.1 — 2018-10-17
- … 1 more at https://npm.io/package/orgbrain-pjl-frontend/versions

## README

# 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.

---
_Source: https://npm.io/package/orgbrain-pjl-frontend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._