ng-drivecommons v1.19.1
NG-DRIVE Commons
Motivation
Reuse components along Zara Drive applications
Install
npm i ng-drivecommons
Use
Styles
This package has a styles.scss file in root, you can import it in your project's angular.json if you want to reproduce the styles used in Drive.
....
"styles": [
"./node_modules/ng-drivecommons/styles.scss",
....
]
You can use our pre-defined variables too. They are in _variables.scss file at root level. You have to import the folder on each scss file where you want to use them like:
@import '~ng-drivecommons/variables';
By default this library implements two themes, light and mixed. With required style modifications for inner components.
Components
To use these components in your Zara Drive application you should import the module ComponentsModule from 'ng-drivecommons' in your application module.
You probably want to import them in your shared module, so you can use these component in all your application instead of import them one time per module.
These component are inmutable, you can't modify methods unless you extend your own component from one of these, and implement your own templates and css.
The component DriveTopbarComponent can use other components inside using the configuration paramenters menus and filters, if you want to know more refer to the docs.
Exported components
Exported components are:
- DriveNotFoundComponent: Page that shows when url is not found.
- DriveUnauthorizedComponent: Page that shows when user does not have permissions.
- DriveCalendarComponent: Table-like calendar component showing two months side by side.
- DriveRootComponent: Extendable component that encapsulates common methods to get data and compose Fibers lists.
- DriveFilterComponent: Manage filters visualization.
- DriveDateFilterComponent: Manage date filters visualization.
- DriveSearchFilterComponent: Manage search visualization.
- DriveTopbarComponent: Topbar component, can contain filters and menus.
- DriveScreenSelectorComponent: Widget with screens grid.
- DriveUserCtrComponent: Widget with user management options like theme and language selectors.
- DriveTooltipComponent: Tooltip component. Requires katex.css import in global styles
- DriveLoginComponent: Login component. Uses DriveAuthService to do login request.
- DriveNumberPipe: Pipe to format numbers like 1000 -> 1.000.
- DriveProductDescriptionPipe: Pipe to format product descriptions.
Services
To use these services you need to provide them with your environment variables. In order to do this you should import ServicesModule from 'ng-drivecommons' in your app.module as follows
import { environment } from 'environments/environment';
@NgModule({
...
imports: [
...
ServicesModule.forRoot(environment)
]
})
Environment object should be like it is specified in DOCS.
Optionally you can send a implementations object too, with your custom implementations for these services,
Exported services
Exported services are:
- DriveBroadcasterService: Allow us to create subscriptions with some key, so we can send messages through these subscriptions, and receive them as a subscriptor to do some action
- DriveAuthService: Does a request to /credentials endpoint and returns received user data.
- DriveUserService: Saves user theme and get user avatar from /user/user-avatar endpoint
- DriveLogService: Make posts to /log endpoint
- DriveFilterService: Encapsulates drive filters common methods like get, set, reset and getQueryString
These services can be used as they are, or you can extend your custom service from one of these and modify or add your custom methods, then you have to send the implementations as an attribute of implementation in forRoot method.
These service are injected as singletons using DI strategy, like:
@NgModule({
})
export class ServicesModule {
public static forRoot(environment: Environment, impl: Implementations = {} as any): ModuleWithProviders {
return {
ngModule: ServicesModule,
providers: [
....
{
provide: DriveFilterService,
useClass: impl.filterService || DriveFilterService
},
....
More info
More info in DOCS.
Development
npm install
To build for production, run:
npm run build
To run the unit tests for the components, run:
npm test
You'll find the compiled module under /drive_commons/dist
dir.
Naming Components
All of the web components must use the prefix drive
.
Deployment
Every release is built and deployed to npm via Github Actions.
Maintainers
- Adrián Insua Yañez @AdrianInsua
Contributing
See Contributing
Changelog
See Changelog
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago