centeva-core v5.0.7
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
Version | Angular Compatibility |
---|---|
4.x | 14.x |
5.x | 15.x, 16.x (MDC-based Material) |
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
Name | Description |
---|---|
@Input('isLoading')type: boolean | Whether or not data is loading. When this is set to true, a spinner will overlay on top of the table |
@Input('tableLoadingText')type: string | Text that will appear when the table data is loading. Defaults to 'Loading Results..' |
@Input('dataSource')type: AdvancedSearchResultsPage | Data source |
@Input('currentFilter')type: SearchCriteriaRequest | Contains 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: boolean | If enabled, clicking anywhere on the table row will event the same event. Defaults to true. |
@Input('noResultsText')type: string | Text that will be displayed on table when there are no results. Defaults to 'No results to display.' |
@Output('searchChanged')type: SearchCriteriaRequest | Outputs 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: TableEmittedColumnClick | Outputs 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
10 months ago
10 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago