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 [email protected]

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

Installing

npm install --save git+https://795c1c507fefee9ca5a4812224604ccf8f174e89:[email protected]/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.