diff --git a/src/index.ts b/src/index.ts index d495af5..11f2205 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,16 +1,19 @@ export * from './lib/common-ui.module'; -export * from './lib/buttons/icon-button/icon-button.component'; -export * from './lib/buttons/icon-button/icon-button.type'; export * from './lib/base/auto-unsubscribe.component'; -export * from './lib/utils/decorators/required.decorator'; -export * from './lib/buttons/circle-button/circle-button.component'; -export * from './lib/buttons/circle-button/circle-button.type'; +export * from './lib/buttons/icon-button/icon-button.type'; +export * from './lib/buttons/icon-button/icon-button.component'; +export * from './lib/utils/functions'; +export * from './lib/utils/pipes/humanize.pipe'; export * from './lib/utils/types/tooltip-positions.type'; -export * from './lib/filtering/filter.service'; +export * from './lib/utils/decorators/required.decorator'; +export * from './lib/buttons/circle-button/circle-button.type'; +export * from './lib/buttons/circle-button/circle-button.component'; export * from './lib/filtering/filter-utils'; +export * from './lib/filtering/filter.service'; +export * from './lib/filtering/models/filter.model'; export * from './lib/filtering/models/filter-group.model'; export * from './lib/filtering/models/nested-filter.model'; -export * from './lib/filtering/models/filter.model'; +export * from './lib/sorting/sort-by.pipe'; export * from './lib/sorting/sorting.service'; export * from './lib/sorting/models/sorting-option.model'; export * from './lib/sorting/models/sorting-order.type'; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index 37b06d7..f7a0ae0 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -8,6 +8,8 @@ import { DomSanitizer } from '@angular/platform-browser'; import { CircleButtonComponent } from './buttons/circle-button/circle-button.component'; import { MatTooltipModule } from '@angular/material/tooltip'; import { RoundCheckboxComponent } from './inputs/round-checkbox/round-checkbox.component'; +import { SortByPipe } from './sorting/sort-by.pipe'; +import { HumanizePipe } from './utils/pipes/humanize.pipe'; const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent]; @@ -17,10 +19,12 @@ const matModules = [MatIconModule, MatButtonModule, MatTooltipModule]; const components = [...buttons, ...inputs]; +const pipes = [SortByPipe, HumanizePipe]; + @NgModule({ - declarations: [...components], + declarations: [...components, ...pipes], imports: [CommonModule, ...matModules], - exports: [...components, ...matModules] + exports: [...components, ...pipes, ...matModules] }) export class CommonUiModule { constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) { diff --git a/src/lib/sorting/sort-by.pipe.ts b/src/lib/sorting/sort-by.pipe.ts new file mode 100644 index 0000000..872ce2a --- /dev/null +++ b/src/lib/sorting/sort-by.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { SortingService } from './sorting.service'; +import { SortingOrder } from './models/sorting-order.type'; + +@Pipe({ name: 'sortBy' }) +export class SortByPipe implements PipeTransform { + constructor(private readonly _sortingService: SortingService) {} + + transform(value: T[], order: SortingOrder, column: string): T[] { + return this._sortingService.sort(value, order, column); + } +} diff --git a/src/lib/sorting/sorting.service.ts b/src/lib/sorting/sorting.service.ts index bcc952e..3c56e1c 100644 --- a/src/lib/sorting/sorting.service.ts +++ b/src/lib/sorting/sorting.service.ts @@ -4,7 +4,9 @@ import { BehaviorSubject } from 'rxjs'; import { SortingOption } from './models/sorting-option.model'; import { SortingOrder, SortingOrders } from './models/sorting-order.type'; -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class SortingService { private readonly _sortingOption$ = new BehaviorSubject(undefined); readonly sortingOption$ = this._sortingOption$.asObservable(); @@ -21,7 +23,7 @@ export class SortingService { if (!values || values.length <= 1 || !order) return values; if (!column) { - /** sort 1d array */ + /** sort 1D array */ const result = [...values].sort(); return order === SortingOrders.asc ? result : result.reverse(); } diff --git a/src/lib/utils/functions.ts b/src/lib/utils/functions.ts new file mode 100644 index 0000000..d5bcefe --- /dev/null +++ b/src/lib/utils/functions.ts @@ -0,0 +1,9 @@ +export function capitalize(value: string): string { + return value.charAt(0).toUpperCase() + value.slice(1); +} + +export function humanize(value: string, lowercase = true): string { + const frags = (lowercase ? value.toLowerCase() : value).split(/[ \-_]+/); + + return frags.map(capitalize).join(' '); +} diff --git a/src/lib/utils/pipes/humanize.pipe.ts b/src/lib/utils/pipes/humanize.pipe.ts new file mode 100644 index 0000000..c392ed7 --- /dev/null +++ b/src/lib/utils/pipes/humanize.pipe.ts @@ -0,0 +1,11 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { humanize } from '../functions'; + +@Pipe({ + name: 'humanize' +}) +export class HumanizePipe implements PipeTransform { + transform(item: string, lowercase = false): string { + return humanize(item, lowercase); + } +}