Ng-drivecommons NPM

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
                },
                ....