fhlbny-ui-commons v0.0.2
@fhlbny-ui-commons
This repository consists of multiple reusable npm libraries required for fhlbny angular applications.
Examples
Table of contents
=================================================================================================== 1. Dependencies 2. Installation using local link 3. Installation using artifactory 4. @fhlbny-ui-commons/core 5. @fhlbny-ui-commons/components 6. @fhlbny-ui-commons/navbar 7. @fhlbny-ui-commons/pipes
1. Dependencies
These dependencies should be installed at a global level:
| npm library/software | Version |
|---|---|
| npm | 8.15.0 |
| node | v16.17.0 |
| angular-cli | 14.2.0 |
2. Local Installation
Step 1: npm install --force (--force currently bypasses the legacy dependency conflict with angular-2-dropdown-multiselect which currently relies on Angular 8)
> This should create node_modules for the the packages
Step 2: npm run build
> This should create dist folders for all of th epackages
Step 3: npm run start
> This runs the demo application at localhost:42003. Installation using artifactory
To be done when artifactory will be provided
4. @fhlbny-ui-commons/core
This package consists of services, components and directive that are common for all the fhlbny angular applications. Code for this package can be found in packages/core directory.
| Service | Use |
|---|---|
AuthenticationService | Manages user authentication |
AuthorizationService | Provides route guards based on permissions |
EnvironmentConfigService | Configures environment in runtime |
HttpRequestService | Contains boiler plate code to invoke CRUD API endpoints |
RequestInterceptorService | Intercepts all the outgoing and incoming requests |
SingleSignOnService | Used to show hide single sign on popup window |
| Directive | Use |
|---|---|
*hasPermission | A directive that can be applied to HTML elements or custom components to hide/show them based on Function permissions. |
Refer this link for a demo of how to use *hasPermission with jhipster applications.
http://bitbucket:7990/projects/PHOEN/repos/fhlbny-ui-commons/browse/src/app/list-panel-demo/list-panel-demo.component.html?at=feat/has_permission#118
| Component | Use |
|---|---|
fhlbny-error-alert | Renders error alert When any server side error occurred |
Refer demo application for their usage.
5. @fhlbny-ui-commons/components
This package consists of components that are common for all the fhlbny angular applications. Code for this package can be found in packages/components directory.
Follow the below steps to create new component in this package
- Create new folder with the name of the component in packages/components/src directory
Create following files in folder.
<component-name>.component.ts<component-name>.module.ts<component-name>.model.ts(optional)<component-name>.service.ts(optional)index.ts<component-name>.scss(optional)
Register component, service in
<component-name>.module.ts- Re-export all the files exposed to the outside world in
index.ts - Re-export this index.ts in
components.module.ts
Lookout for <fhlbny-toaster> component for a sample solution
Following specifies the components registered in this package
| Component | Use |
|---|---|
fhlbny-toaster | Provides a toast service that can be used to show toast messages on the top-right. |
fhlbny-spinner | Provides spinner service to show spinner when data loads from the server. |
fhlbny-panel | Wrap list/Add/Search and Edit screens using this panel to show a panel. |
LoginComponent | Register a route to this component for all the applications that require a custom login. |
fhlbny-form | Renders a dynamic form based on the form description passed in it. See how to use for more details. |
fhlbny-string-input | Renders a textbox for string input. |
fhlbny-number-input | Renders a textbox for number input. |
fhlbny-select-input | Renders a dropdown based on the values passed in its data field. |
fhlbny-date-input | Renders a date input box with a pop up calendar. |
fhlbny-filtering | Renders a search form based on its configuration. See how to use for more details. |
fhlbny-export-controls | Contains the export buttons. |
fhlbny-table | Renders a list table with pagination and sorting support. |
fhlbny-modal | Renders a modal with specified body and footer elements. |
fhlbny-multiselect-dropdown | Renders a multiselect dropdown menu option. |
ErrorComponent | Register routes to this component to redirect on this page in case of 404 and 403 error. |
Following routs are require to register
- { path: '', component: HomeComponent }
- { path: 'login', component: LoginComponent }
- { path: 'accessdenied', component: ErrorComponent }
- { path: 'error', component: ErrorComponent }
- { path: '**', redirectTo: '/error' }
Limitations of fhlbny-form component
- It can only be used with reactive forms.
- The look and feel of the form cannot be altered.
6. @fhlbny-ui-commons/navbar
This package consists of navbar used for all the fhlbny angular applications. It contains
<fhlbny-topbar>,<fhlbny-user-menu>,<fhlbny-notification>and<fhlbny-menu>components.Refer demo application for their usage.
7. @fhlbny-ui-commons/pipes
This package consists of pipes for all the fhlbny angular applications. As of now, it has
searchpipe registered in it.
8. @fhlbny-ui-commons/utils
This package consists of utility methods. It should contain only static methods in their respective classes.
It has the following utilities in it
| Utility | Use |
|---|---|
QueryParamsStateService | Provides utility method to extract object and set query params in the url. |
Building/Deployment
Building and deployment of artifacts to Artifactory is handled by Lerna. Read their documentation to learn more about how Lerna works and what commands it provides.
Initial Setup
After checking out the repository, run npm install --force and then npm run build.
Required Configuration
You will need to run npm login on the command line while inside of the fhlbny-ui-commons repo and provide the credentials of a user that has access to deploy to the "npm" repo on lx-artwebp1.
Commands
npm run build - Builds each package as an Angular-compatible module.
npm run prepatch - Bumps up the patch version of the packages.
npm run preminor - Bumps up the minor version of the packages.
npm run premajor - Bumps up the major version of the packages.
npm run release - Bumps up the release version of the packages.
npm run version:params ${version} - Bumps up the manual version of the packages.
npm run publish - Releases each package to artifactory.
For Reference: - BB link - http://bitbucket:7990/projects/PHOEN/repos/fhlbny-guides/browse/fhlbny11x/Comparison_report/Lerna%20Commands.md?at=refs%2Fheads%2FFhlbny11x