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...).
npm install -g npx
npx ng add @angular/material
Select deeppurple-amber
for prebuilt theme. And delete what was added by install script in global file styles.
npm install --save keycloak-angular
npm install --save keycloak-js@4.8.3
Refer back to https://www.npmjs.com/package/keycloak-angular for keycloak-angular installation.
npm install --save git+https://795c1c507fefee9ca5a4812224604ccf8f174e89:x-oauth-basic@github.com/SylvainMienneeWL/passsmobilite-nav-layout-dist.git#0.0.2
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 {
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 |
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/"
}
]
Parameter | Required | Default | Description |
---|---|---|---|
$pm-assets-path | No | /assets | Path to assets in styles file |
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>
Interface MenuSideNavBarModel
Parameter | Required | Default | Description |
---|---|---|---|
TODO | TODO | TODO | TODO |
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>
Interface MenuBottomNavBarModel
Parameter | Required | Default | Description |
---|---|---|---|
TODO | TODO | TODO | TODO |
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();
}
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();
}
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.
- Angular 8 - The web framework used
- Angular-Material - Design framework
- NodeJs - Dependency Management
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.