@indigina/kendo 1.0.21085-beta3 → 1.1.2

package/README.md

@@ -1,25 +1,1409 @@
-# Kendo
+# @indigina/kendo
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.5.
+The library contains shared components for Indigina projects.
 
-## Code scaffolding
+> ### Important notice:
+>
+> The library exports all included packages, which means you can import any dependent package of the '@indigina/kendo'.
 
-Run `ng generate component component-name --project kendo` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project kendo`.
+---
 
-> Note: Don't forget to add `--project kendo` or else it will be added to the default project in your `angular.json` file.
+### Table of Contents
 
-## Build
+1. [Install](#install)
 
-Run `ng build kendo` to build the project. The build artifacts will be stored in the `dist/` directory.
+2. [Configuration](#library-configuration)
 
-## Publishing
+   - [Complete Library Configuration](#complete-library-configuration)
 
-After building your library with `ng build kendo`, go to the dist folder `cd dist/kendo` and run `npm publish`.
+3. [Components](#components)
 
-## Running unit tests
+   - [AccountMenu Component](#accountmenu-component)
 
-Run `ng test kendo` to execute the unit tests via [Karma](https://karma-runner.github.io).
+   - [Form Components](#form-components)
 
-## Further help
+     - [FormGroupWithErrors](#formgroupwitherrors)
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+     - [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