6.0.2 • Published 12 months ago

centeva-core v6.0.2

Weekly downloads
-
License
-
Repository
github
Last release
12 months ago

Centeva-Core

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

Installation

Using npm:

npm i centeva-core --save

Compatibility

VersionAngular Compatibility
4.x14.x
5.x15.x, 16.x (MDC-based Material)
6.x17.x, 18.x

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
NameDescription
@Input('isLoading')type: booleanWhether or not data is loading. When this is set to true, a spinner will overlay on top of the table
@Input('tableLoadingText')type: stringText that will appear when the table data is loading. Defaults to 'Loading Results..'
@Input('dataSource')type: AdvancedSearchResultsPageData source
@Input('currentFilter')type: SearchCriteriaRequestContains infomration on the current search request.
@Input('displayedColumns')type: TableColumn[]This contains a list of the columns to display and the column types.
@Input('isRowClickable')type: booleanIf enabled, clicking anywhere on the table row will event the same event. Defaults to true.
@Input('noResultsText')type: stringText that will be displayed on table when there are no results. Defaults to 'No results to display.'
@Output('searchChanged')type: SearchCriteriaRequestOutputs when a filter or sort direction is changed.
@Output('rowSelected')Outputs the row that was just clicked. Note: this is only available if the input isRowClickable is set to true.
@Output('columnSelected')Type: TableEmittedColumnClickOutputs the column name, and the data in that row when a column was clicked. Note: this is only emitted if the column has the property isColumnClickable

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
6.0.2

12 months ago

5.0.8

1 year ago

6.0.1

1 year ago

5.0.7

2 years ago

5.0.6

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

5.0.5

2 years ago

5.0.4

2 years ago

5.0.3

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

2.0.7

3 years ago

2.0.8

3 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.6

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.1.17

3 years ago

1.1.16

3 years ago

1.1.15

4 years ago

1.1.14

4 years ago

1.1.13

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.9

4 years ago

1.1.10

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

0.0.1

4 years ago

1.1.1

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.6

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.12

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.0

4 years ago