Example:

``html
let-column="column"
let-record="data">

{{record.fleet.name}}


`

$3

This implementation of Infinite Scroll is a hybrid approach, using both virtual scrolling with DOM Swapping in the frontend while also fetching additional pages of data for very large datasets. If the pageSize is set to the recommended value of 1000, for instance, a dataset with fewer than 1000 records will be loaded locally and virtual scroll will be used to smooth scrolling and prevent hammering browser memory usage. For larger datasets, the same will happen and then additional records will be fetched 1000 records at a time as the user scrolls deep into the dataset.

Note that when implementing Infinite Scroll, the component function in your microfrontend that loads data and sets the bound properties for records and totalRecordCount must have a stanza that will recognize infiniteScroll on the fetchRecordsEvent and append rather than replace the records. The use of concat() or another function that creates a new array is recommended in your component to trigger change detection, like this:

`
...fetch data...
.subscribe((data: any) => {
this.totalItems = data.totalRecords;
if (fetchRecordsEvent.infiniteScroll) {
/ Append records rather than replace /
this.sessions = this.sessions.concat(data.sessionDetailList);
} else {
this.sessions = data.sessionDetailList;
}
`
And in the template:
`
[records]="sessions"
[totalRecordsCount]="totalItems"
[pageSize]="1000"
pagination="infinite"
`


## Header
This custom component displays the header for the MFE, including the name of MFE and any buttons on the top left.

The @input parameters for this component:

* title _string_ - The title of the entire application.
* subTitle: _string_ - A secondary title string.
* tags: _HeaderTag_[] - An array of tags for the header using HeaderTag type
* primaryButton: _ActionButton_ - The primary button on the upper right.
* secondaryButtons: _ActionButton_[] - An array of ActionButton that will appear to the left of the primary button.
* ellipsisDropdownItems: _MenuDropdownItem_[] - Dropdown options.
* breadcrumbItems: _HeaderBreadcrumb_[] - Navigation breadcrumb links.
* navRoutes: _HeaderNavRoute_[]. If a route with children is included, the parent route will appear selected in the UI when the child route is loaded.

## Footer
* primaryButton: _ActionButton_ - An optional primary button in the footer.
* secondaryButtons: _ActionButton_[] - An array of ActionButton that will appear to the left of the primary button.


## Error Interceptor
The Umbrella Error Interceptor handles automatic logout for expired tokens. It should be added to all MFEs.

To add it to a MFE, simply import it in whatever module imports the HttpClientModule (probably the MFE's Shared or App module).

1. Add HTTP_INTERCEPTORS to your import from Angular's http library
1. Add UmbrellaErrorInterceptor to your Umbrella Library import
1. In the Module configuration, use a providers property and add the Umbrella Error Interceptor

`
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import {
UmbrellaHeaderModule,
UmbrellaFooterModule,
UmbrellaDataTableModule,
UmbrellaErrorInterceptor
} from 'umbrella-library';


@NgModule({
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: UmbrellaErrorInterceptor,
multi: true,
}
],
imports:
...
`
Note: If your MFE has its own Error Interceptor, you can simply add it as another stanza inside the providers array. Ensure both Interceptors stanzas have the multi:true property.

Extending the Application

Contributing

To add new features or new components to this library:
1. Create a new directory in the public-modules directory to host your new feature.
1. Create your components or services there with Code Scaffolding and ng generate commands, as [specified below.
1. Name your exported class the way you would like it be imported into our Umbrella microfrontends.
1. Write your code to customize your component.
1. Add a stanza in the /public-api.ts file to ensure the library will export your new feature.
1. Use the directions below and publish a new version to npm:
* Publish a minor version if the changes are not going to break or require changes in any other components.
* Publish as a new major version if there are breaking changes.


Whether you're adding new features or simply fixing bugs in this shared library, always:
* Write unit tests for your components.
* Use Prettier and utilize formatting and linting to add code that is compliant with the standards listed below.
* Follow the Git branching strategy below to create your branches.
* Write your Pull Request as specified below.
* Update this README if and when necessary!
* That's it! 🎉

Code Scaffolding

Run ng generate component component-name --project umbrella-library to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project umbrella-library.
-> Note: Don't forget to add --project umbrella-library or else it will be added to the default project in your angular.json file.

Code Formatting

This application requires well-formatted code. It is recommended you set up automated code formatting. The easiest way to do this is to simply configure your IDE to format files on every save as follows:

$3

Configure your IDE to run the format:all command upon save. With VSCode, this can be done by installing a plugin such as RunOnSave. If you do install RunOnSave, simply add this configuration to your VSCode's settings.json:

`
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"cmd": "npm run format:all"
}
]
}
`

$3

If you don't choose to set up auto-formatting, you can also manually format your code with :

- Prettier (TS, CSS). We use Prettier to format all files except for HTML (see below). Manually call npm run format:prettier to format all TS, CSS, and config files inside the src directory. This command is an alias for npx prettier --write src, which you can also use if you prefer not to use the alias, and you can replace the src with a single file or directory, and the relevant file(s) will be formatted automatically according to our current prettier standards. You can replace the --write with --check to simply check formatting without making changes. There's also

- JSBeautify (HTML). We use JSBeautify to format HTML files. You can use npm run format:html to format all HTML files in the repository. You can also use npm run format:html-file [FILE] to format a single file.

_Run All Formatting_. Use npm run format:all and all TS, CSS, and HTML files inside the src directory will be formatted automatically for you. This is command you should automate or run prior to creating your Pull Requests.

$3

In addition, the following npm script commands are available when working on this application:

- Code Formatting (HTML). Use npm run format -- '[FILE]' on an HTML template file named FILE, and the file will be formatted automatically according to our current linting standards. You can also run npm run format: all to reformat all html files of the application at once.

- Code Linting (TS). Use npm run lint --files '[FILE]' on a TS script file named FILE to see lint errors for that file (but make no changes to it). Append --fix to this command to fix some of the issues automatically for you.

Git Branching Model

We use git to manage all of our development flow.
Please create branches and pull requests properly. Read our Git Branching Model to accomplish this. (That document is specific to the Driver Portal, but the model is the same for this application).

Generally code should be clear and not complex so that inline documentation and explanation is not necessary. However, whenever the code is complex or uses a solution or algorithm that will not be readily apparent to another engineer who might review or extend the code, always add comments explaining the solution or algorithm used. / / comment notation should be used for these explanatory comments.

Code Comments

$3

eg:
`
PROBLEM
- Description (eg: Can’t view the menu)
- [JIRA ticket link]

SOLUTION
- What you did, what files were edited, why
- (eg: Fixed menu visibility)

RESULT
- User experience change
- (eg: Menu now appears on click)
- Any changes engineers will experience
- If changes to UI are substantial or important, include screenshot of the app showing changes to the UI.
`

Publishing the Library

- New major and minor versions should be published from develop branch. Patch versions can be published from feature branches if needed.

- Only publish new major (breaking) versions when the version of Angular is changing or other truly breaking changes are taking place.

Make all of your changes inside the /projects/umbrella-library/src directory.

Then, to build and publish to npm, step back out to the projects directory and build and publish:

`
ng build @srs/umbrella-library
cd ../dist/umbrella-library
npm version [bump to new version]
npm publish
`

As a single command (if you bump the version in the package.json), you can use: cd ../../projects && ng build umbrella-library && cd ../dist/umbrella-library && npm patch && npm publish

*Note: You can find instructions in the README of the asset-hierarchy-manager on how to use a script to use your local instance of this library inside your MFE during local development.

Note: You may need to use the public access flag when publishing: npm publish --access=public

From Angular documentation: You should always build libraries for distribution using the production configuration. This ensures that generated output uses the appropriate optimizations and the correct package format for npm.

Monitoring

Information on site monitoring coming soon:
- Health Check
- NodePing
- New Relic

Further help

To get more help on the Angular CLI use ng help` or review the Angular CLI README.