Passmobilite-nav-layout NPM

Pass'Mobilités Navigation Layout

This library helps you to integrate Pass'Moblité's design by providing the following features:

A SideBar Navigation which implements two functionalities to handle user's workflow,
A BottomBar Navigation,
A Quick Access Menu,
A Pop-up for no internet connexion which blocks navigation on internet lost detection,
An error page for 404, 500 and 403 errors,
A style file (.scss) and their assets (fonts, icons...).

Getting Started

Prerequisites

npx

npm install -g npx

@angular/material

npx ng add @angular/material

Select deeppurple-amber for prebuilt theme. And delete what was added by install script in global file styles.

keycloak-angular

npm install --save keycloak-angular

keycloak-angular

npm install --save keycloak-js@4.8.3

Refer back to https://www.npmjs.com/package/keycloak-angular for keycloak-angular installation.

Installing

npm install --save git+https://795c1c507fefee9ca5a4812224604ccf8f174e89:x-oauth-basic@github.com/SylvainMienneeWL/passsmobilite-nav-layout-dist.git#0.0.2

Setup

AppModule

import { PmNavLayoutModule, DeployedAppEnum } from '@pm/nav-layout';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    KeycloakAngularModule,
    PmNavLayoutModule.forRoot({
      appDeployedOn: DeployedAppEnum.passMobilite,,
      passMobilite: {
        apiBaseUrl: environment.api.baseUrl,
        apikey: environment.api.apikey,
        signUpExcludeUrl: ['/help/terms']
      },
      metroMobilite: {
        redirectUrl: environment.metromobilite.url
      }
    }),
    MatIconModule,
    MatButtonModule
  ],
  providers: [
    {
      provide: KeycloakService,
      useValue: keycloakService
    }
  ],
  entryComponents: [AppComponent]
})
export class AppModule implements DoBootstrap {

Options

Interface ConfigPmNavLayout

Parameter	Required	Default	Description
appDeployedOn	Yes	/	Name of application deploying the lib: `passMobilite` or `metroMobilite`
passMobilite.apiBaseUrl	Yes	/	Base URL of Pass'Mobilités back-office
passMobilite.apikey	Yes	/	API Key of Pass'Mobilités back-office
passMobilite.redirectUrl	Only if appDeployedOn=`metroMobilite`	-	Base URL of Pass'Mobilités front-office
passMobilite.signUpExcludeUrl	No	-	List of paths to exclude from finish sign up popup
metroMobilite.redirectUrl	Only if appDeployedOn=`passMobilite`	-	Base URL of Métro'Mobilités front-office
metroMobilite.urlAddressAutocompleteApi	Yes	-	Base URL of Métro'Mobilités's Address Autocompletion API
metroMobilite.apiBaseUrl	Yes	-	Base URL of Métro'Mobilités's APIs
wallet.redirectUrl	Yes	-	Base URL of Wallet's front-office

Style and Assets

styles.scss(.css)

@import '~@pm/nav-layout/theme/style.scss';

angular.json

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@pm/nav-layout/theme/assets/",
    "output": "./assets/"
  }
]

Options

Parameter	Required	Default	Description
\$pm-assets-path	No	/assets	Path to assets in styles file

Side navbar component

appComponent

<pm-side-navbar #sideNavbar>
  <button mat-icon-button (click)="sideNavbar.toggleNavbar()">
    <mat-icon>menu</mat-icon>
  </button>

  <router-outlet></router-outlet>

</pm-side-navbar>

Options

Interface MenuSideNavBarModel

Parameter	Required	Default	Description
TODO	TODO	TODO	TODO

Bottom navbar component

appComponent

<pm-side-navbar #sideNavbar>
  <button mat-icon-button (click)="sideNavbar.toggleNavbar()">
    <mat-icon>menu</mat-icon>
  </button>

  <router-outlet></router-outlet>

  <pm-bottom-navbar></pm-bottom-navbar>
</pm-side-navbar>

Options

Interface MenuBottomNavBarModel

Parameter	Required	Default	Description
TODO	TODO	TODO	TODO

PassMobiliteService

By calling init function, the service:

Call initMonitor of NetworkConnectionService,
Get the account data after success authentication,
Checks if the account was not suspended. If not, it forces him to logout,
Checks if the account was configured after first authentification. If not, it redirects him to configuration steps.

appComponent

import { PassMobiliteService } from '@pm/nav-layout';

export class AppComponent implements OnInit {
  title = "Portail Web Pass'Mobilités";

  constructor(
    private passMobService: PassMobiliteService
  ) {
     this.passMobService.init();
  }

Network connection service

Do not call initMonitor function of this service if you already called init function of PassMobiliteService.

appComponent

import { NetworkConnectionService } from '@pm/nav-layout';

export class AppComponent implements OnInit {
  title = "Portail Web Pass'Mobilités";

  constructor(
    private networkCnxService: NetworkConnectionService
  ) {
    this.networkCnxService.initMonitor();
  }

Deployment

To run this project, an example of use of library, on local machine run the following command:

npm run start

To build the library for prod delivery, run the following command:

npm run pm-nav-layout:build

After a success build, you need to push the build files to passsmobilite-nav-layout-dist repo and create a new branch version.

Built With

Angular 8 - The web framework used
Angular-Material - Design framework
NodeJs - Dependency Management

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.