centeva-core v6.0.2

Centeva-Core

This is an open source project. If you would like to contribute, check out the repo.

• Installation
• Components
  • Loading
  • Table
• Pipes
  • Capitalize
  • CelsiusToFahrenheit
  • Date
  • Dynamic
  • HighLight
  • MiddleDot
  • OrderBy
  • Percentage
  • PhoneNumber
  • Reverse
  • SafeHtml
• Directives
  • ClickOutside
  • NumberInput
• Utils
  • EmailValidation
  • PhoneValidation
  • SortByKey
  • Build CSV String
  • Build CSV Link

Installation

Using npm:

npm i centeva-core --save

Compatibility

Components

Loading Component

Module Import

import {LoadingModule} from 'centeva-core';

Usage:

let isLoading = true;

<app-loading [loadingText]="'Loading Results..'" *ngIf="isLoading"></app-loading>

Loading Preview

Searchable Table

This table works with the PREQL nuget package. You will want to implement that on the backend to use this table.

Module Import

import {TableModule} from 'centeva-core';

API

Properties

Usage

import {AdvancedSearchResultsPaged, SearchCriteriaRequest, TableColumn} from 'centeva-core';
let isLoading: boolean;
let dataSource: AdvancedSearchResultsPaged;
let currentFilter: SearchCriteriaRequest;
let displayedColumns: TableColumn[];

<app-table [tableLoading]="isLoading" [dataSource]="dataSource" [currentFilter]="currentFilter" [displayedColumns]="displayedColumns" 
(searchChanged)="searchChanged($event)" (rowSelected)="rowSelected($event)"></app-table>

Table Preview

Pipes

Import:

import {CorePipesModule} from 'centeva-core';

Capitalize Pipe

Usage:

<span>{{'bob' | capitalize}}</span> ==> Bob

CelsiusToFahrenheit Pipe

Usage:

<span>{{0 | celsiusToFahrenheit}}</span> ==> 32

Date Pipe

Usage:

let date = new Date('01-01-2001');

<span>{{ date | date: 'YYYY-MM-DD'}}</span> ==> 2001-01-01

Dynamic Pipe

Usage:

let date = new Date('01-01-2001');
let datePipe = new DatePipe();

<span>{{ date | dynamic: datePipe:'YYYY-MM-DD'}}</span> ==> 2001-01-01

Highlight Pipe

Must set a css class named .highlight-text. This will put the styling you prefer on the highlighted value.

Usage:

let searchText = 'test';

<a target="_blank" class="title" href="{{URL}}" [innerHtml]="Name | highlight: searchText | safeHtml"></a>

MiddleDot Pipe

Usage:

<div>{{'dotMe' | middleDot}}</div> === 'd∙o∙t∙M∙e'

OrderBy Pipe

The first argument after orderBy is a list of fields to sort by. The second argument is a list of sort orders for each field; if this list is omitted it sorts by ascending order. If both arguments are omitted, the original collection is returned unsorted.

Usage:

const myCollection = [
    { lastName: 'Smith', firstName: 'John', age: 54 },
    { lastName: 'Marsh', firstName: 'Isabella', age: 41 }
    { lastName: 'Marsh', firstName: 'Franklin', age: 44 }];

<div *ngFor="col of myCollection | orderBy: ['lastName', 'age'], [SortOrder.Ascending, SortOrder.Descending]">
    {{col.lastName}}, {{col.firstName}} - {{col.age}}
</div>

Percentage Pipe

Return any value as a percentage

Usage:

<div>{{.872345 | percentage}}</div> === 87

Phone Number Pipe

Format any Phone Number on the fly.

Usage:

<div>{{435123456 | phoneNumber}}</div> === (435)123-3456

Reverse Pipe

Reverse any array.

Usage:

let arr = [1, 2, 3];

<div>{{arr | reverse}}</div> === [3, 2, 1]

SafeHtml Pipe

Bind to innerHtml safely with this pipe.

Usage:

<a target="_blank" class="title" href="{{URL}}" [innerHtml]="Name | safeHtml"></a>

Directives

ClickOutside Directive

Fire an event if a click happens anywhere outside of the element.

Usage:

let showValue = true;

<div *ngIf="showValue" (clickOutside)="showValue = false;">
    <span>VALUE</span>
</div>

NumberInput Directive

Disallow Any key except a number.

Usage:

<input numberInput [(ngModel)]="model"/>

Utils

Email Validation

Usage:

const emailValid = Utils.IsValidEmail('a'); ==> false;
const emailValid = Utils.IsValidEmail('test@gmail.com'); ==> true;

Phone Validation

Usage:

const emailValid = Utils.IsValidPhoneNumber('12345'); ==> false;
const emailValid = Utils.IsValidPhoneNumber('12345xa'); ==> false;
const emailValid = Utils.IsValidPhoneNumber('4351234567'); ==> true;
const emailValid = Utils.IsValidPhoneNumber('14351234567'); ==> true;

Sort By Key

Usage:

const list = [
{name: '103'},
{name: '102'},
{name: '104'},
{name: '105'},
{name: '101'},
];
const sortedList = Utils.SortByKey(list, 'name');

Build CSV String

Usage:

const ArrayVal = [['Header 1', 'Header 2'], ['Value 1', 'Value 2']];
const csv = Utils.buildCSVString(ArrayVal); ===> `"Header 1","Header 2"\n"Value 1","Value 2"`;

Build CSV Link

Build a CSV link from array that can be used to download CSV.

Usage:

const ArrayVal = [['Header 1', 'Header 2'], ['Value 1', 'Value 2']];
const csv = Utils.buildCSVLink(ArrayVal); ===> HTMLAnchorElement