npm package: @indigina/kendo
Description: The library contains shared components for Indigina projects.
Latest version: 2.0.32

# @indigina/kendo

The library contains shared components for Indigina projects.

> ### Important notice:
>
> The library exports all included packages, which means you can import any dependent package of the '@indigina/kendo'.

---

### Table of Contents

1. [Install](#install)

2. [Configuration](#library-configuration)

   - [Complete Library Configuration](#complete-library-configuration)

3. [Components](#components)

   - [AccountMenu Component](#accountmenu-component)

   - [Form Components](#form-components)

     - [FormGroupWithErrors](#formgroupwitherrors)

     - [General-Errors Component](#general-errors-component)

     - [FieldInput Component](#fieldinput-component)

     - [NumberInput Component](#numberinput-component)

   - [LanguageSelector Component](#languageselector-component)

   - [Widget Components](#widget-components)

     - [ActivityFilter Component](#activityfilter-component)

     - [ConfirmDialog Component](#confirmdialog-component)

     - [CurrentTimezone Component](#currenttimezone-component)

     - [EntityList Component](#entitylist-component)

     - [EntityEdit Component](#entityedit-component)

     - [ExcelExportButton Component](#excelexportbutton-component)

     - [FooterBar Component](#footerbar-component)

     - [ModalWindow Component](#modalwindow-component)

     - [MulticheckFilter Component](#multicheckfilter-component)

     - [TopBar Component](#topbar-component)

   - [Side-Menu Component](#side-menu-component)

   - [Tree-View Component](#tree-view-component)

4. [Directives](#directives)

   - [Debounce Directive](#debounce-directive)

   - [RequirePermission Directive](#requirepermission-directive)

5. [Services](#services)

   - [AccountService](#accountservice)

   - [ActivityFilterService](#activityfilterservice)

   - [AppToastrService](#apptoastrservice)

   - [BaseAccountService](#baseaccountservice)

   - [EntityService](#entityservice)

   - [HttpService](#httpservice)

   - [PermissionsService](#permissionsservice)

   - [TranslateSettingsService](#translatesettingsservice)

6. [Models](#models)

   - [ActivityFilter](#activityfilter)

   - [AppSettings](#appsettings)

   - [CustomFilter](#customfilter)

   - [CustomFilterElement](#customfilterelement)

   - [CustomHttpErrorResponse](#customhttperrorresponse)

   - [FieldTypes](#fieldtypes)

   - [FilterTargets](#filtertargets)

   - [HttpCodes](#httpcodes)

   - [HttpMethods](#httpmethods)

   - [IdentifiedModel](#identifiedmodel)

   - [IndiginaConfiguration](#indiginaconfiguration)

   - [Language](#language)

   - [Member](#member)

   - [MemberBase](#memberbase)

   - [MemberTypes](#membertypes)

   - [NamedModel](#namedmodel)

   - [OidcSettings](#oidcsettings)

   - [Operators](#operators)

   - [Page](#page)

   - [Permissions](#permissions)

   - [PermissionTypes](#permissiontypes)

7. [Provided Packages](#provided-packages)

8. [Exports Table](#exports-table)

---

# Install

## Before installing.

> The library depends on the next packages: **@ngx-translate**, **ngx-clipboard**, **angular-oauth2-oidc**, **angular-oauth2-oidc-jwks**, **@microsoft/signalr** and includes most of the [kendo](https://www.telerik.com/kendo-angular-ui).
>
> If your application depends on the following packages, you should remove them from **"package.json"** file.
>
> **_Make sure your_ package.json _file does not contain the packages '@indigina/kendo' depends on._**

To install the package you'll need to enter the command at the terminal:

    npm i @indigina/kendo@latest --save

Open your module file e.g. app.module.ts and update **imports** array:

    import { IndiginaModule, KendoModule } from '@indigina/kendo';
    import { ReactiveFormsModule } from '@angular/forms';

    ...

    imports: [
        ...
        IndiginaModule,
        KendoModule,
        ReactiveFormsModule,
        ...
    ]

Also, you need to setup the routes and import **RouterModule**. [How to Setup](https://angular.io/api/router/RouterModule)

Open your global style file for application e.g. **styles.css** and add the following:

    @import @indigina/kendo/assets/indigina-theme.css
    @import @indigina/kendo/assets/kendo-theme.css

---

> The **@indigina/kendo** provides the TranslationModule from **@ngx-translate** package (List of [provided packages](#provided-packages)). You can use **translate** pipe without any additional includes in your app.
>
> The **@indigina/kendo** also provides **_TranslateSettingsService_** for set or get current locale [See more](#translatesettingsservice).
>
> For setup **TranslationModule** see [Library Configuration](#library-configuration)

---

# Library Configuration

To configure the library you must use an [**IndiginaConfiguration**](https://www.npmjs.com/package/@indigina/angular#indiginaconfiguration) interface

**IndiginaConfiguration** abstract class is provided from @indigina/angular library configuration.

When you configure the **'@indigina/kendo'** then the config is passed to **'@indigina/angular'**.

For configure library you must use a [**IndiginaConfiguration**](#indiginaconfiguration) interface

**IndiginaConfiguration** abstract class is provided for @indigina/angular library configuration.

### IndiginaConfiguration class overview

| Param Name  | Required | Type            | Description                                                                                                                                                                                                                                                                         |
| ----------- | -------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| langs       | no       | TranslateLoader | The Translate module config. If you provide **langs** then @indigina/angular use the factory config, fo more information see [original documentation](https://www.npmjs.com/package/@ngx-translate/core). And see an example of [Setup TranslationModule](#setup-translationmodule) |
| appSettings | no       | AppSettings     | The basic Application settings for working with server endpoint.                                                                                                                                                                                                                    |

## Setup TranslationModule

For setup **TranslationModule** you need to pass the TranslateLoader to the library, for example, open your module file e.g. **app.module.ts**, and update next:

    ...

    const langs = {
        'en' = {
            UserName: 'User Name',
        },
        'ru' = {
            UserName: 'Имя пользователя',
        },
        getTranslations(lang: string): Observable<any> {
            if (Object.keys(this).includes(lang)) {
                return of(this[lang]);
            }

            return of(this['en']);
        }
    }

    ...

    imports: [
    ...
    KendoModule.forRoot({ langs })
    ...
    ]

## Setup AppSettings

To use the most of the services you need to setup a library with appSettings.
For that you need to pass [AppSettings](https://www.npmjs.com/package/@indigina/angular#appsettings) to library, for example open your module file e.g. **app.module.ts** and update next:

    ...

    const appSettings = {
        apiUrl: 'http://localhost:8080/',
        accountUrl: 'http://localhost:3000/signin/',
        toastrTimeOut: 3000
    }

    ...

    imports: [
    ...
    KendoModule.forRoot({ appSettings })
    ...
    ]

---

## Complete library configuration

To take full advantage of the library and use **environments** for separate builds e.g. development/production, you need to setup the library as follows:

1.  Open your environment file e.g. **environments/environmet.ts** and update following:

        export const environment = {
          production: false,
          appSettings: {
            apiUrl: 'http://localhost:8080/',
            accountUrl: 'https://sso.localhost:8000/',
            toastrTimeOut: 3000,
            },
        };

2.  Open your module file e.g. **app.module.ts** and update following:

            import { environment } from '../environments/environment';

            ...

            const langs = {
              'en' = {
                UserName: 'User Name',
                },
                'ru' = {
                  UserName: 'Имя пользователя',
                  },
                  getTranslations(lang: string): Observable<any> {
                    if (Object.keys(this).includes(lang)) {
                      return of(this[lang]);
                      }

                      return of(this['en']);
                  }
            }

            ...

            imports: [
            ...
            KendoModule.forRoot({ appSettings: environment.appSettings, langs })
            ...
            ]

---

# Components

## AccountMenu Component

### Overview

Selector: **account-menu**

Thats already included in [TopBar Component](#topbar-component).

This component shows menu items for current user:

- **User info** - shows avatar and username.
- **Change Language** - Shows [LanguageSelector Component](#languageselector-component) for change current culture.
- **Account** - Link to **_accountUrl_** from [_*IndiginaConfiguration*_](https://www.npmjs.com/package/@indigina/angular#indiginaconfiguration) provided by @indigina/angular module.
- **Logout** - Link on the server-endpoint to logout.

### The component accepts input parameters:

- **user: Member** - the current user. Member [description](#member).

### Usage:

    <account-menu [user]="currentUser"></account-menu>

---

## Form Components

### FormGroupWithErrors

This is an extension of FormGroup class which provides the additional public methods:

- Get control by name.

  getControl(name: string): AbstractControl;

- Sets errors by control names

  applyServerErrors(
  error: {title?: string, errors: {[key: string]: string[]}},
  form?: FromGroupWithErrors
  ): void;

* where form - target form class (default is **_this_** )

---

### General-Errors Component

This component shows the general errors for **FormGroup**. Provides a public method:

    setErrors(errors: string): void;

Used input parameters:

- **[form: FormGroup]** - FormGroup to set the general errors.

---

### FieldInput Component

#### Overview

Selector: **field-input**
Basically, this is extended angular FormControl Class, that shows **_input_** HTML Element with label and supports validators (like **_required_** etc.).

Used input parameters:

- **[labelKey: string]** - the text for label and input placeholder. This value will be translated by **_translate_** pipe inside (@ngx-translate package)
- **[fieldName: string]** - the name of input
- **[disabled: boolean]** - allows to dynamically control the disablement of an input field

This component may use only inside **_form-group_** directive.

#### Usage

    <field-input fieldName="userName" labelKey="Dto.UserName" required>

---

### NumberInput Component

#### Overview

Selector: **number-input**
Class extended of FieldInput Component for number inputs. It has all inputs and validators inherent to FieldInput. FormControl value for this input has number type.

Additional input parameters:

- **[isPositive: boolean]** - allows to set only positive numbers (by default has _false_ value).

This component may use only inside **_form-group_** directive.

#### Usage

    <number-input fieldName="userName" labelKey="Dto.UserName" required>

---

## LanguageSelector Component

### Overview

Selector: **language-selector**

This component displays a window with a list of available languages. And lets you choose one.

Used input parameters:

- **visible: boolean** - sets the show/hide window

Output parameters:

- **visibleChange: boolean** - emits event when visible property switched.

### Usage:

    <language-selector [(visible)]="languageSelectorVisible"></language-selector>

---

## Widget Components

### ActivityFilter Component

#### Overview

Selector: **activity-filter**

Component to show set of UI filters. This component works with [ActivityFilterService](#activityfilterservice).
Can render content inside tag declaration.

Used input parameters:

- **showArchiveSwitcher: boolean** - set true to show switcher.
- **showSearhText: boolean** - - set true to show search text field input.
- **customFilterElements: CustomFilterElement[]** - set of [CustomFilterElement](#customfilterelement)
- **filterService: ActivityFilterService** - the filter service to work

#### Usage

    <activity-filter
        [customFilterElements]="customFilterElements"
        [showSearhText]="false"
        [showArchiveSwitcher]="false"
        [filterService]="filterService"
    >
        <span>Additional content</span>
    </activity-filter>

---

### ConfirmDialog Component

#### Overview

Selector: **confirm-dialog**

This component shows a modal dialog with **Cancel** and **Confirm** buttons.

You can control the component by the public method **open**

    public open(content: string, callback () => void)

Arguments:

- **content** - content to show
- **callback** - called only when user press confirm button

#### Usage

You can create the component with **confirm-dialog** import

    import { ConfirmDialogComponent } from '@indigina/kendo';

    ...

    public dialog: ConfirmDialogComponent;

Then you can call the open method anywhere you need:

    public confirmHandler() {
      // do something
    }

    public showDialog() {
      const content = this.translate.instant("Are you shure?")
      this.dialog(content, () => this.confirmHandler())
    }

And in the template you need to include as follows:

    <confirm-dialog #confirmDialog></confirm-dialog>

---

### CurrentTimezone Component

#### Overview

Selector: current-timezone

This component shows current time zone.

#### Usage:

    <current-timezone></current-timezone>

---

### EntityList Component

#### Overview

Selector: **entity-list**

This component shows entities from the standard REST backend application that uses ODataQuery. The view is using the [kendo-grid](https://www.telerik.com/kendo-angular-ui/components/grid/) component.

The server backend base path is setup in the [IndiginaConfiguration](https://www.npmjs.com/package/@indigina/angular#indiginaconfiguration) at the appSettings.apiUrl.

Used input parameters:

- **service: IEntityService&lt;NamedModel&gt;** - Service with data retrieval implementation. You can extend the exported **abstract class [_*EntityService*_](#entityservice)** with default implementation.
- **filters: Array&lt;FilterDescriptor | CompositeFilterDescriptor&gt;** - spicifies data filtration. You can getting more information about generic types on [kendo-data-query](https://www.npmjs.com/package/@progress/kendo-data-query) npm.
- **fields?: Field[]** - field list to show from dataset. **Field** - Interface which describes:

  | name      | type    | description                                              |
  | --------- | ------- | -------------------------------------------------------- |
  | name      | string  | the field name in the dataset.                           |
  | title     | string  | the title which shows in the header in data-grid column. |
  | sortable? | boolean | indicates if a column is sortable. Default is "true".    |
  | position? | number  | indicates columns order. "Name" coulumn position is 0.   |

- **commands?: Command[]** - array of custom, developer defined commands. **Command** - Interface which describes:

| name      | type                       | required | description                                                                                                                                                |
| --------- | -------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name      | string                     | no       | The name of command.                                                                                                                                       |
| title     | srtring                    | no       | The title which shows in template.                                                                                                                         |
| iconClass | string                     | no       | You can use font-awesome or some other classes. You can sets this property for show icon by the class, for example usage font-awesome classes: fa fa-trash |
| handler   | (data: NamedModel) => void | yes      | The click event handler for future command button                                                                                                          |

- **rowClass?: (dataItem: NamedModel, index: number) => {}** - calculates css classes based on a current dataItem.

Output parameters:

- **filterChange: CompositeFilterDescriptor** - emits event when filter is changed.

#### Usage:

    <entity-list [service]="service"></entity-list>

---

### EntityEditForm Component

#### Overview

Selector: **entity-edit-form**

The component shows specific edit form for single entity, for example: Selected entity in [EntityList Component](#entitylist-component).
It includes default save actions. Used like wrapper of form for entity.

Used input parameters:

- **title: string** - The title to show at top.
- **adapter: IFormAdapter&lt;IdentifiedModel&gt;** - accepts form adapter, see usage of [EntityEdit Component](#entityedit-component)

#### Usage:

    <entity-edit-form title="User Details" [adapter]="adapter">
      <div *ngIf="form" [formGroup]="form">
        <field-input
        fieldName="userName"
        labelKey="Username"
        maxlength="200"
        required
      >

      ....

      </div>
    </entity-edit-form>

---

### EntityEdit Component

#### Overview

Selector: -

Thats abstract class which implements IFormAdapter. Used by [EntityEditForm Component](#entityeditform-component) as adapter input attribute.

Declaration:

    abstract class EntityEditComponent<T extends IdentifiedModel>

IdentifiedModel - Interface exported by [@indigina/angular](https://www.npmjs.com/package/@indigina/angular#identifiedmodel)

#### Usage:

    export class UserEditComponent extends EntityEditComponent<User> {
      constructor (service: UserDataService) {
        base(service);
      }
    }

---

### ExcelExportButton Component

#### Overview

Selector: **excel-export-button**

Basically, this is styled button component for default kendo-grid Excel Export Action.

This component used in [EntityList Component](#entitylist-component) by default.

#### Usage

    <ng-template kendoGridToolbarTemplate>
      <excel-export-button></excel-export-button>
    </ng-template>

---

### FooterBar Component

#### Overview

Selector: **footer-bar**

Component to show standard Indigina styled footer.

#### Usage

    <footer-bar>Footer Content</footer-bar>

---

### ModalWindow Component

#### Overview

Selector: **modal-window**

This component shows a modal window with content provided from the inner content of the selector tag.

Used input parameters:

- **callbackPath: string** - the callback path to navigate when the window has closed.

#### Usage

For example, you have an **UserProfileComponent** with table of basic profile fields and you want to show detaled user profile by clicking the button.
At first you need to add the following template at the end of **UserProfileComponent**:

        ...
        <router-outlet></router-outlet>

It is necessery to show the child component, suppose the **DetailedUserProfileComponent**.

The next step is to add route into children property of the parent component route configuration. Usualy the **app-routing.module.ts** file in your application. It can be done like this:

        ...
        {
            path: '/profiles',
            component: UserProfileComponent,
            children: [
                {
                    path: ':id',
                    component: DetailedUserProfileComponent,
                },
            ],
        },

And the last step is to add the following into **DetailedUserProfileComponent** template:

        <modal-window [callbackPath]="callbackPath">The content of modal window</modal-window>

For example, you can use '/' constant as callbackPath. That means that after the modal window has been closed, the router will navigate to '/',which is a root path of the application.

---

### MulticheckFilter Component

#### Overview

Selector: **multicheck-filter**

Component provides nested filters as the list of the values of selected field to the kendo-grid.

Used input parameters:

- **currentFilter: CompositeFilterDescriptor** - the current kendo-grid filter
- **data: NamedModel[]** - list of values for field to can add to filter
- **filterService: FilterService** - service exported from [**kendo-angular-grid**](https://www.telerik.com/kendo-angular-ui/components/grid/)
- **field: string** - name of field to filter

#### Usage

    <multicheck-filter
            field="Id"
            [filterService]="filterService"
            [currentFilter]="gridState.filter"
            [data]="users"
          >
    </multicheck-filter>

---

### TopBar Component

#### Overview

Selector: **top-bar**

Component display [AccountMenu Component](#accountmenu-component) and [SideMenu Component](https://www.npmjs.com/package/@indigina/angular#side-menu-component) toggler.

Used input parameters:

- **currentUser: Member** - the current user for [AccountMenu Component](#accountmenu-component)

#### Usage

    <top-bar [currentUser]="user"></top-bar>

---

## Side-Menu Component

Selector: **side-menu**

This component displays a menu.
Used input parameter **[items]** with type **MenuItem[]**:

### MenuItem type overview

| Param name    | Required | Type       | Description                                                                                 |
| ------------- | -------- | ---------- | ------------------------------------------------------------------------------------------- |
| **text**      | yes      | string     | Text to show. It will be translated by **_translate_** pipe inside (@ngx-translate package) |
| **url**       | no       | string     | Use for external url link                                                                   |
| **link**      | no       | string     | Use for internal url route                                                                  |
| **iconClass** | no       | string     | The class of icon. For exapmle: 'fa fa-dashboard'                                           |
| **expanded**  | no       | boolean    | You can set expand flag manually. Child elements are displayed if flag is set to **_true_** |
| **items**     | no       | MenuItem[] | Collection of child menu items                                                              |

### Side-Menu Component Usage

Inside the template class

    <side-menu [items]="items">

Inside your component class

    public items: MenuItem[];

    ...

    this.items = [
        {
            text: 'Home',
            iconClass: 'fa fa-home',
            link: '/'
        },
        {
            text: 'Management',
            iconClass: 'fa fa-dashboard',
            items: [
                {
                    text: 'Users',
                    iconClass: 'fa fa-user',
                    link: '/users',
                },
                {
                    text: 'Roles',
                    iconClass: 'fa fa-user-plus',
                    link: '/users/roles',
                },
            ]
        }
    ];

---

## Tree-View Component

Selector: **tree-view**

This component shows any type of content (XML, JSON) as a tree. The text data will be rendered inside the `<pre>` tag.
The component accepts input parameters:

- **[data: string]** - the data to view
- **[maxTextLength: number] (optional)** - the maximum text length that will be displayed, otherwise hidden and expand button is shown (default is **1200**)
- **[maxRootItems: number] (optional)** - the maximum root nodes that will be displayed, otherwise hidden and expand button is shown (default is **10**)

### Tree-View Component Usage:

    <tree-view [data]="data"></tree-view>


    <tree-view [data]="data" [maxRootItems]="15"></tree-view>

---

# Directives

## Debounce Directive

Selector: **[appDebouce]**

This directive is applicable to input elements.

This directive adds a delay and emits output Event **debounceKeyup** with input data.

Used input parameters:

- **debounceTime** - time to delay in **_ms_** (default is 500)

#### Usage

    <input appDebouce (debounceKeyup)="search($event.target.value)" />

---

## RequirePermission Directive

### Overview

Selector: **[requirePermission]**

This directive is shows element only when current user has specific permission.

Used input parameters:

- **permissionType: PermissionTypes | PermissionTypes[]** - specifies the permission type to check. See [PermissionTypes](#permissiontypes).

- **permissionCategory?: string** - permission category to check.

#### Usage

    <a [routerLink]="/link" requirePermission permissionType="Create">link</a>

---

# Services

## AccountService

This service extends of [BaseAccountService](#baseaccountservice) and implements the **isAdmin** abstract method.

---

## ActivityFilterService

This service provides current [ActivityFilter](#activityfilter) and [gridState](https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/) by the subscription.

### Public Methods Provided:

- **reset()** - Clearing **currentFilter** to default values with populating **currentFilter** and **currentGridState**.
- **clearFilter()** - Clearing **currentFilter** to default values without populating **currentFilter** and **currentGridState**.
- **setFilter(filter: ActivityFilter)** - Sets **currentFilter** from the **filter** values, without populating **currentFilter** and **currentGridState**.
- **applyFilter(filter: ActivityFilter)** - Sets **currentFilter** from the **filter** values, then populating **currentFilter** and **currentGridState**.
- **setToday()** - Sets dates for current day time range, then populating **currentFilter** and **currentGridState**.
- **setTodayDates()** - Sets dates for current day time range without populating **currentFilter** and **currentGridState**.
- **setGridState(state: State)** - Sets currentFilter from **state**, then populating **currentFilter** and **currentGridState**.

### Public Properties Provided:

- **currentFilter: ActivityFilter** - store current filter
- **currentGridState: State** - store current gridState
- **filter$** - Observable stream for subscription. Returns **[ActivityFilter](#activityfilter)**
- **gridState$** - Observable stream for subscription. Returns **[State](https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/)**

---

## AppToastrService

This service provides a public methods to show toast messages.

> ## Important Notice:
>
> This service require to configure Library for default **toastrTimeOut** see the [Configure Library](#configure-library) section

### Public Methods Provided:

- **showError(message: string, title: string = 'Error'): void** - shows the stylized error message
- **showSuccess(message: string, title: string = ''): void** - shows the stylized success message

---

## BaseAccountService

This is an abstract generic class of service that provides current user and initiates authentication flow. That service uses OAuthService from [angular-oauth2-oidc](https://www.npmjs.com/package/angular-oauth2-oidc) for authentication.

### Public Methods Provided:

- **login()** - initiates authentication flow
- **logout()** - allows current user to logout
- **getCurrentUser(): Observable&lt;Member&gt;** - returns current authenticated user, initiates authenticate if not authenticated
- **abstract isAdmin(member: T): boolean** - declares a method that indicates the user is admin.

---

## EntityService

This is an abstract generic class which declares public methods for work with entities on server endpoint using **REST**.

Declaration:

    export abstract class EntityService<T extends IdentifiedModel>
    implements IEntityService<T> {
    constructor(
      protected httpService: HttpService,
      protected endpoints: IEntityEndpoints
    ) {}

    ...

    }

Where **IEntityEndpoints** - Interface which describe:

| name                   | type   | required | description                                     |
| ---------------------- | ------ | -------- | ----------------------------------------------- |
| path                   | string | yes      | Name of entity, example 'user'                  |
| entityPath(id: string) | string | yes      | returns path to target entity, exapmle 'user/1' |
| query(state: State)    | string | yes      | returns entity path with odata-filter           |

### Public Methods Provided:

- **getPage(state: State): Observable&lt;Page&lt;T&gt;&gt;** - accept state of kendo-grid and returns paged result. See [Page](#page)
- **get(id: string): Observable&lt;T&gt;** - get single entity from endpoint.
- **delete(id: string): Observable&lt;object&gt;** - delete entity by id.
- **save(model: T): Observable&lt;T&gt;** - create or modify entity.

---

## HttpService

This service provides public methods for get any content from server endpoint.

> ## Important Notice:
>
> This service require [AppToastrService](#apptoastrservice) to configure Library for **apiUrl** see the [Configure Library](#configure-library) section

### Standard Error Handling

All public methods provided by **HttpService** have standard error handling based on Http Status codes.

> ## Exceptional case:
>
> When the service receives a connection error then shows a toast message from the **HttpErrorResponse** class.

---

#### Error Handle Actions

| Http Status Code | Status Name           | Action                                                    |
| ---------------- | --------------------- | --------------------------------------------------------- |
| 401              | Unauthorised          | Shows toast message and navigate to **'home'** route      |
| 403              | Frobidden             | Shows toast message and navigate to **'forbidden'** route |
| 404              | NotFound              | Shows toast message and navigate to **'/'** route         |
| 500              | Internal Server Error | Show toast message and returns null                       |
| any              |                       | throws error                                              |

### Public Methods Provided:

- **get&lt;T&gt;(path: string): Observable&lt;T&gt;** - make a _*GET*_ request and return a response.
- **post&lt;T&gt;(path: string, data: T): Observable&lt;T&gt;** - make a _*POST*_ request with data and return a response.
- **put&lt;T&gt;(path: string, data: T): Observable&lt;T&gt;** - make a _*PUT*_ request with data and return a response.
- **delete(path: string): Observable&lt;object&gt;** - make a _*DELETE*_ request to endpoint and return a response.

> \*path - is target endpoint without a basic apiUrl part

---

## PermissionsService

This service gets permissions from server endpoint.

### Public Methods Provided:

- **getAll(memberType: MemberTypes): Observable&lt;Permissions&gt;** - get all permissions for selected member type. See [MemberTypes](#membertypes)
- **getMine(): Observable&lt;Permissions&gt;** - get permissions of the current user.

---

## TranslateSettingsService

This service provides public methods for managing the current locale for an application.

### Public Methods Provided:

- **getLocales(): {name: string, code: string}** - returns a list of supported languages
- **getLocale(): string** - returns the current locale code
- **setLocale(locale: string): void** - sets input **locale** code as current and switch TranslateModule to current

---

# Models

## ActivityFilter

> Type: _interface_

> Extends: -

> Description: The model that stores UI filter.

### Overview

| Prop name       | Required | Type                         | Description                                                                                                        |
| --------------- | -------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| dateTo          | no       | Date                         | The ending date in selection for filtering                                                                         |
| dateFrom        | no       | Date                         | The starting date in selection for filtering                                                                       |
| switchToArchive | yes      | Boolean                      | Sign of going to the archive                                                                                       |
| searchText      | no       | String                       | The text to search                                                                                                 |
| skip            | no       | number                       | The number of skip records. See [State](https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/) |
| take            | no       | number                       | The number of take records. See [State](https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/) |
| group           | no       | Array&lt;GroupDescriptor&gt; | The 'group by' filter. See [State](https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/)      |
| sort            | no       | Array&lt;SortDescriptor&gt;  | The sort filter. See [State](https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/)            |
| customFilters   | no       | Array&lt;CustomFilter&gt;    | The array of custom filters. See [CustomFilter](#customfilter) model                                               |

---

## AppSettings

> Type: _abstract class_

> Extends: -

> Description: The model for configuration [HttpService](#httpservice) and [AppToastrService](#apptoastrservice).

### Overview

| Prop name       | Required | Type            | Description                                                                                                                                                                                                                                           |
| --------------- | -------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| apiUrl          | yes      | string          | The base endpoint server url                                                                                                                                                                                                                          |
| accountUrl      | yes      | string          | The url to account server                                                                                                                                                                                                                             |
| toastrTimeOut   | yes      | number          | Timeout to auto close toast message                                                                                                                                                                                                                   |
| signalRLogLevel | no       | LogLevel (enum) | This optoin is idicate what SignalR log information do you can see in the console. By default is _*None*_. See more about [LogLevel](https://docs.microsoft.com/en-us/aspnet/core/signalr/diagnostics?view=aspnetcore-5.0#javascript-client-logging). |

---

## CustomFilter

> Type: _interface_

> Extends: -

> Description: The model that stores additional filter for UI.

### Overview

| Prop name    | Required | Type                  | Description                                                                                                          |
| ------------ | -------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
| field        | yes      | string                | The name of the field to filtering                                                                                   |
| operator     | yes      | Operators             | The selection filter operator. See [Operators](#operators)                                                           |
| value        | no       | string number boolean | The current value of the filter. If the value is null then filter item is clear                                      |
| values       | no       | Array&lt;string&gt;   | The current value list of the filter. Used by multiselect type view. If the values is null then filter item is clear |
| filterTarget | yes      | FilterTargets         | The target of filtering. See [FilterTargets](#filtertargets)                                                         |

---

## CustomFilterElement

> Type: _interface_

> Extends: -

> Description: The model that stores additional visible filter component.

### Overview

| Prop name   | Required | Type                                                     | Description                                                                                             |
| ----------- | -------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| title       | yes      | string                                                   | The renderable title of the field with trying to translate.                                             |
| fieldType   | yes      | FieldTypes                                               | The renderable type of field. See [FieldTypes](#fieldtypes)                                             |
| data        | no       | Array&lt;NamedModel&gt; Promise&lt;NamedModel[]&gt;      | The dataset to select a variation from the list. Necessary only at list element types, like a dropdown. |
| filter      | yes      | CustomFilter                                             | The filter that the field uses. See [CustomFilter](#customfilter)                                       |
| valueField  | no       | string                                                   | The indicates column of data to use as filter value dropdown/multiselect                                |
| placeholder | no       | string                                                   | The placeholder of text and multiselect view fields                                                     |
| change      | no       | (value: string \| number \| boolean \| string[]) => void | The Callback function is called when the value of the selected field changes.                           |

---

## CustomHttpErrorResponse

> Type: _declare class_

> Extends: HttpErrorResponse (from @angular/common/http)

> Description: Add title property to HttpErrorResponse Type.

### Overview

| Prop name | Required | Type   | Description |
| --------- | -------- | ------ | ----------- |
| title     | yes      | string | The title   |

---

## FieldTypes

> Type: _enum_

> Extends: -

> Description: Enum for type of renderable element.

### Overview

| Key         | Description                                                                    |
| ----------- | ------------------------------------------------------------------------------ |
| Text        | For input with text type                                                       |
| Checkbox    | For checkbox input                                                             |
| Dropdown    | For input with dropdown type. Uses kendo-dropdown as renderable component      |
| Multiselect | For input with dropdown multiselect type. Uses kendo-multiselect as renderable |

---

## FilterTargets

> Type: _enum_

> Extends: -

> Description: Enum for setting how filter to affect.

### Overview

| Key  | Description                                           |
| ---- | ----------------------------------------------------- |
| Url  | The filter value will be set into URL                 |
| Grid | The value will be set as OData query-selection filter |

---

## HttpCodes

> Type: _enum_

> Extends: -

> Description: Enum for http codes.

### Overview

| Key                 | Value |
| ------------------- | ----- |
| BadRequest          | 400   |
| Forbidden           | 403   |
| InternalServerError | 500   |
| NotFound            | 404   |
| OK                  | 200   |
| Unauthorized        | 401   |

---

## HttpMethods

> Type: _const_ : [NamedModel[]](#namedmodel)

> Extends: -

> Description: - .

### Overview

| id     | name   |
| ------ | ------ |
| POST   | POST   |
| PUT    | PUT    |
| GET    | GET    |
| DELETE | DELETE |

---

## IdentifiedModel

> Type: _interface_

> Extends: -

> Description: Declare _id_ field.

### Overview

| Prop Name | Required | Type   |
| --------- | -------- | ------ |
| id        | yes      | string |

---

## IndiginaConfiguration

> Type: _abstract class_

> Extends: -

> Description: Interface for configuration @indigina/angular library.

### Overview

| Prop Name | Required | Type                        | Description                        |
| --------- | -------- | --------------------------- | ---------------------------------- |
| langs     | no       | TranslateLoader             | Configuration for Translate Module |
| name      | no       | [AppSettings](#appsettings) | Basic application environment      |

---

## Language

> Type: _interface_

> Extends: -

> Description: The model that store language info.

### Overview

| Prop name | Required | Type   | Description                                 |
| --------- | -------- | ------ | ------------------------------------------- |
| name      | yes      | string | The name of language. For example 'English' |
| code      | yes      | string | The code of language. For example 'en'      |

---

## Member

> Type: _interface_

> Extends: [MemberBase](#membrbase)

> Description: The model that store member info.

### Overview

| Prop name | Required | Type        | Description                                                |
| --------- | -------- | ----------- | ---------------------------------------------------------- |
| type      | yes      | MemberTypes | Type of member user/admin. See [MemberTypes](#membertypes) |

---

## MemberBase

> Type: _interface_

> Extends: [NamedModel](#https://www.npmjs.com/package/@indigina/angular#namedmodel) from '@indigina/angular'

> Description: The model that store basic member info.

### Overview

| Prop name | Required | Type     | Description        |
| --------- | -------- | -------- | ------------------ |
| userName  | yes      | string   | The username       |
| email     | yes      | string   | The email          |
| firstName | yes      | string   | The firstname      |
| lastName  | yes      | string   | The lastname       |
| password  | yes      | string   | The password       |
| roles     | yes      | string[] | The array of roles |

---

## MemberTypes

> Type: _enum_

> Extends: -

> Description: Enum for member type.

### Overview

| Key   | Value   |
| ----- | ------- |
| Admin | 'Admin' |
| User  | 'User'  |

---

## NamedModel

> Type: _interface_

> Extends: - [IdentifiedModel](#identifiedmodel)

> Description: Declare _name_ field with _id_ field which inherits from [IdentifiedModel](#identifiedmodel).

### Overview

| Prop Name | Required | Type   |
| --------- | -------- | ------ |
| name      | yes      | string |

---

## OidcSettings

> Type: _interface_

> Extends: -

> Description: The model that store basic config for OAuthService.

### Overview

| Prop name | Required | Type   | Description                      |
| --------- | -------- | ------ | -------------------------------- |
| clientId  | yes      | string | The clientId for SSO server      |
| authority | yes      | string | The SSO server auth url          |
| issuer    | yes      | string | The SSO server url to check auth |

---

## Operators

> Type: _enum_

> Extends: -

> Description: Enum to set OData query-selection filter operator.

### Overview

| Key            | Value            | Description                                                             |
| -------------- | ---------------- | ----------------------------------------------------------------------- |
| eq             | 'eq'             | equal to                                                                |
| neq            | 'neq'            | not equal to                                                            |
| isnull         | 'isnull'         | is equal to null                                                        |
| isnotnull      | 'isnotnull'      | is not equal to null                                                    |
| lt             | 'lt'             | less than                                                               |
| lte            | 'lte'            | less than or equal to                                                   |
| gt             | 'gt'             | greater than                                                            |
| gte            | 'gte'            | greater than or equal to                                                |
| startswith     | 'startswith'     | Indicates to value is start with. Supported for string fields only.     |
| endswith       | 'endswith'       | Indicates to value is ends with. Supported for string fields only.      |
| contains       | 'contains'       | Indicates to value is countains. Supported for string fields only.      |
| doesnotcontain | 'doesnotcontain' | Indicates to value does not countain. Supported for string fields only. |
| isempty        | 'isempty'        | Indicates to value is empty. Supported for string fields only.          |
| isnotempty     | 'isnotempty'     | Indicates to value is not empty. Supported for string fields only.      |

---

## Page<T>

> Type: _interface_

> Extends: -

> Description: The model that store paged response for kendo-grid.

### Overview

| Prop name | Required | Type   | Description                  |
| --------- | -------- | ------ | ---------------------------- |
| data      | yes      | T[]    | Entity list                  |
| total     | yes      | number | All available entities count |

---

## Permissions

> Type: _interface_

> Extends: -

> Description: Model that store PermissionCategory as key and [PermissionTypes](#permissiontypes) as value

### Overview

| Prop name     | Required | Type              | Description                     |
| ------------- | -------- | ----------------- | ------------------------------- |
| [key: string] | yes      | PermissionTypes[] | Permissions from Category (key) |

---

## PermissionTypes

> Type: _enum_

> Extends: -

> Description: Enum for permission type.

### Overview

| Key    | Value    |
| ------ | -------- |
| Create | 'Create' |
| Delete | 'Delete' |
| Edit   | 'Edit'   |
| View   | 'View'   |
| Set    | 'Set'    |

---

# Provided packages

- [@angular/platform-browser/animations](https://angular.io/api/platform-browser/animations)
- [@ngx-translate/core](https://www.npmjs.com/package/@ngx-translate/core)
- [ngx-clipboard](https://www.npmjs.com/package/ngx-clipboard)
- [ngx-toastr](https://www.npmjs.com/package/ngx-toastr)
- [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)
- [moment-timezone](https://www.npmjs.com/package/moment-timezone) as **momentTimezone** const