@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/projects/corecomponents/src/lib/modules/pagination/paginate.pipe.ts

@@ -0,0 +1,116 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+import {PaginationService} from "./pagination.service";
+import {IPaginationInstance} from "./pagination-instance";
+
+const LARGE_NUMBER: number = 999999999;
+
+interface IPipeState {
+    collection: any[];
+    size: number;
+    start: number;
+    end: number;
+    slice: any[];
+}
+
+@Pipe({
+    name: 'paginate',
+    pure: false
+})
+export class PaginatePipe implements PipeTransform {
+
+    // store the values from the last time the pipe
+    private state: { [id: string]: IPipeState } = {};
+
+    public transform(collection: any[], args: any): any {
+        // When an observable is passed through the AsyncPipe, it will output
+        // `null` until the subscription resolves. In this case, we want to
+        // use the cached data from the `state` object to prevent the NgFor
+        // from flashing empty until the real values arrive.
+        if (!(collection instanceof Array)) {
+            let _id: any = args.id;
+            if (this.state[_id]) {
+                return this.state[_id].slice;
+            } else {
+                return collection;
+            }
+        }
+
+        let serverSideMode: boolean = args.totalItems !== undefined;
+        let instance: IPaginationInstance = this._createInstance(collection, args);
+        let id: string = instance.id;
+        let start: number;
+        let end: number;
+        let perPage: number = instance.itemsPerPage;
+
+        if (!serverSideMode && collection instanceof Array) {
+            perPage = perPage || LARGE_NUMBER;
+            start = (instance.currentPage - 1) * perPage;
+            end = start + perPage;
+
+            let isIdentical: boolean = this._stateIsIdentical(id, collection, start, end);
+            if (isIdentical) {
+                return this.state[id].slice;
+            } else {
+                let slice: any[] = collection.slice(start, end);
+                this._saveState(id, collection, slice, start, end);
+                return slice;
+            }
+        }
+
+        // save the state for server-side collection to avoid null
+        // flash as new data loads.
+        this._saveState(id, collection, collection, start, end);
+        return collection;
+    }
+
+    // Create an IPaginationInstance object, using defaults for any optional properties not supplied.
+    private _createInstance(collection: any[], args: any): IPaginationInstance {
+        let config: any = args;
+        this._checkConfig(config);
+
+        return {
+            id: config.id,
+            itemsPerPage: config.itemsPerPage || 0,
+            currentPage: config.currentPage || 1,
+            totalItems: config.totalItems || collection.length
+        };
+    }
+
+    // Ensure the argument passed to the filter contains the required properties.
+    private _checkConfig(config: any): void {
+        const required: String[] = ["itemsPerPage", "currentPage"];
+        const missing: String[] = required.filter((prop: any) => !config.hasOwnProperty(prop));
+        if (0 < missing.length) {
+            throw new Error(`PaginatePipe: Argument is missing the following required properties: ${missing.join(", ")}`);
+        }
+    }
+
+    /**
+     * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
+     * array for a given id. This means that the next time the pipe is run on this collection & id, we just
+     * need to check that the collection, start and end points are all identical, and if so, return the
+     * last sliced array.
+     */
+    private _saveState(id: string, collection: any[], slice: any[], start: number, end: number): void {
+        this.state[id] = {
+            collection,
+            size: collection.length,
+            slice,
+            start,
+            end
+        };
+    }
+
+    // For a given id, returns true if the collection, size, start and end values are identical.
+    private _stateIsIdentical(id: string, collection: any[], start: number, end: number): boolean {
+        let state: any = this.state[id];
+        if (!state) {
+            return false;
+        }
+        return state.collection === collection &&
+            state.size === collection.length &&
+            state.start === start &&
+            state.end === end;
+    }
+}

package/projects/corecomponents/src/lib/modules/pagination/pagination-instance.ts

@@ -0,0 +1,18 @@
+// Represents a pagination instance: the configuration object for a single pagination component.
+export interface IPaginationInstance {
+    // An optional ID for the pagination instance. Only useful if you wish to have more than once instance at a time in a given component.
+    id?: string;
+    // The number of items per paginated page.
+    itemsPerPage: number;
+    // The current (active) page.
+    currentPage: number;
+    /**
+     * The total number of items in the collection. Only useful when
+     * doing server-side paging, where the collection size is limited
+     * to a single page returned by the server API.
+     *
+     * For in-memory paging, this property should not be set, as it
+     * will be automatically set to the value of  collection.length.
+     */
+    totalItems?: number;
+}

package/projects/corecomponents/src/lib/modules/pagination/pagination.component.ts

@@ -0,0 +1,229 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter, HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import {Subscription} from 'rxjs';
+
+import {IPaginationInstance} from './pagination-instance';
+import {PaginationService} from './pagination.service';
+
+export interface IPage {
+    label: string;
+    value: any;
+}
+
+@Component({
+    selector: 'co-pagination',
+    template: `
+        <div class="pagination-component-main-wrapper" *ngIf="!shouldBeHidden()">
+            <div>
+                <ng-content></ng-content>
+            </div>
+            <ul class="pagination">
+                <li *ngIf="directionLinks" class="pagination-previous">
+                    <a (click)="goToPreviousPage()" [class.disabled]="isOnFirstPage()">{{ previousLabel }}</a>
+                </li>
+                <li *ngFor="let page of pages" [class.current]="getCurrentPage() === page.value" (click)="setCurrentPage(page.value)">
+                    <span>{{page.label}}</span>
+                </li>
+                <li *ngIf="directionLinks" class="pagination-next">
+                    <a (click)="goToNextPage()" [class.disabled]="isOnLastPage()">{{ nextLabel }}</a>
+                </li>
+            </ul>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class PaginationComponent implements OnInit, OnChanges, OnDestroy {
+    @Input()
+    public id: string;
+
+    @Input()
+    public maxSize: number = 7;
+
+    @Input()
+    public directionLinks: boolean = true;
+
+    @Input()
+    public previousLabel: string = 'Vorige pagina';
+
+    @Input()
+    public nextLabel: string = 'Volgende pagina';
+
+    @Input()
+    public autoHide: boolean = false;
+
+    // Emits the new page number.
+    @Output()
+    public readonly pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+    @ViewChild('template')
+    public readonly template: ElementRef;
+
+    @HostBinding('class.co-pagination')
+    public showClass: boolean = true;
+
+    public pages: IPage[] = [];
+
+    private changeSub: Subscription;
+
+    constructor(private _paginationService: PaginationService) {
+        this.changeSub = this._paginationService.change.subscribe((id: string) => {
+            if (this.id === id) {
+                this._updatePageLinks();
+            }
+        });
+    }
+
+    ngOnInit(): void {
+        if (!this.id) {
+            this.id = this._paginationService.DEFAULT_ID;
+        }
+        this._updatePageLinks();
+    }
+
+    ngOnChanges(): void {
+        this._updatePageLinks();
+    }
+
+    ngOnDestroy(): void {
+        this.changeSub.unsubscribe();
+    }
+
+    public goToFirstPage(): void {
+        if (!this.isOnFirstPage()) {
+            this.setCurrentPage(1);
+        }
+    }
+
+    public goToPreviousPage(): void {
+        if (!this.isOnFirstPage()) {
+            this.setCurrentPage(this.getCurrentPage() - 1);
+        }
+    }
+
+    public goToNextPage(): void {
+        if (!this.isOnLastPage()) {
+            this.setCurrentPage(this.getCurrentPage() + 1);
+        }
+    }
+
+    public setCurrentPage(page: number): void {
+        this.pageChange.emit(page);
+    }
+
+    public isOnFirstPage(): boolean {
+        return this.getCurrentPage() === 1;
+    }
+
+    public isOnLastPage(): boolean {
+        return this.getLastPage() === this.getCurrentPage();
+    }
+
+    public shouldBeHidden(): boolean {
+        if (!this.autoHide) {
+            return false;
+        } else {
+            let instance: IPaginationInstance = this._paginationService.getInstance();
+            return (instance.totalItems <= instance.itemsPerPage);
+        }
+    }
+
+    public getCurrentPage(): number {
+        return this._paginationService.getCurrentPage(this.id);
+    }
+
+
+    /**
+     * Updates the page links and checks that the current page is valid. Should run whenever the
+     * PaginationService.change stream emits a value matching the current ID, or when any of the
+     * input values changes.
+     */
+    private _updatePageLinks(): void {
+        let paginationInstance: IPaginationInstance = this._paginationService.getInstance(this.id);
+        this.pages = this.createPageArray(paginationInstance.currentPage, paginationInstance.itemsPerPage, paginationInstance.totalItems, this.maxSize);
+
+        const correctedCurrentPage: number = this.outOfBoundCorrection(paginationInstance);
+        if (correctedCurrentPage !== paginationInstance.currentPage) {
+            this.setCurrentPage(correctedCurrentPage);
+        }
+    }
+    private getLastPage(): number {
+        let instance: IPaginationInstance = this._paginationService.getInstance(this.id);
+        return Math.ceil(instance.totalItems / instance.itemsPerPage);
+    }
+
+    /**
+     * Checks that the instance.currentPage property is within bounds for the current page range.
+     * If not, return a correct value for currentPage, or the current value if OK.
+     */
+    private outOfBoundCorrection(instance: IPaginationInstance): number {
+        const totalPages: number = Math.ceil(instance.totalItems / instance.itemsPerPage);
+        if (totalPages < instance.currentPage && 0 < totalPages) {
+            return totalPages;
+        } else if (instance.currentPage < 1) {
+            return 1;
+        }
+
+        return instance.currentPage;
+    }
+
+    // Returns an array of IPage objects to use in the pagination controls.
+    private createPageArray(currentPage: number, itemsPerPage: number, totalItems: number, paginationRange: number): IPage[] {
+        // paginationRange could be a string if passed from attribute, so cast to number.
+        paginationRange = +paginationRange;
+        let pages: IPage[] = [];
+        const totalPages: number = Math.ceil(totalItems / itemsPerPage);
+        const halfWay: number = Math.ceil(paginationRange / 2);
+        const isStart: boolean = currentPage <= halfWay;
+        const isEnd: boolean = totalPages - halfWay < currentPage;
+        const isMiddle: boolean = !isStart && !isEnd;
+        let ellipsesNeeded: boolean = paginationRange < totalPages;
+        let i: number = 1;
+        while (i <= totalPages && i <= paginationRange) {
+            let label: string;
+            let pageNumber: number = this.calculatePageNumber(i, currentPage, paginationRange, totalPages);
+            let openingEllipsesNeeded: boolean = (i === 2 && (isMiddle || isEnd));
+            let closingEllipsesNeeded: boolean = (i === paginationRange - 1 && (isMiddle || isStart));
+            if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
+                label = "...";
+            } else {
+                label = "" + pageNumber;
+            }
+            pages.push({
+                label: label,
+                value: pageNumber
+            });
+            i++;
+        }
+        return pages;
+    }
+
+    // Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
+    private calculatePageNumber(i: number, currentPage: number, paginationRange: number, totalPages: number): number {
+        let halfWay: number = Math.ceil(paginationRange / 2);
+        if (i === paginationRange) {
+            return totalPages;
+        } else if (i === 1) {
+            return i;
+        } else if (paginationRange < totalPages) {
+            if (totalPages - halfWay < currentPage) {
+                return totalPages - paginationRange + i;
+            } else if (halfWay < currentPage) {
+                return currentPage - halfWay + i;
+            } else {
+                return i;
+            }
+        } else {
+            return i;
+        }
+    }
+}

package/projects/corecomponents/src/lib/modules/pagination/pagination.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+
+import {PaginationComponent} from "./pagination.component";
+import {PaginatePipe} from "./paginate.pipe";
+import {PaginationService} from "./pagination.service";
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    providers: [
+        PaginationService
+    ],
+    declarations: [
+        PaginationComponent,
+        PaginatePipe
+    ],
+    exports: [
+        PaginationComponent,
+        PaginatePipe
+    ]
+})
+export class PaginationModule {
+}

package/projects/corecomponents/src/lib/modules/pagination/pagination.service.ts

@@ -0,0 +1,98 @@
+import {Injectable} from "@angular/core";
+import {Subject} from "rxjs";
+
+import {IPaginationInstance} from "./pagination-instance";
+import {ObjectUtils} from "../../core/utils/object-utils";
+
+@Injectable()
+export class PaginationService {
+    private static readonly DEFAULT_ID: string = "DEFAULT_PAGINATION_ID";
+
+    public change: Subject<string> = new Subject<string>();
+
+    public get DEFAULT_ID(): string {
+        return PaginationService.DEFAULT_ID;
+    }
+
+    private readonly instances: { [id: string]: IPaginationInstance } = {};
+
+    constructor() {
+    }
+
+    public register(instance: IPaginationInstance): void {
+        if (!instance.id) {
+            instance.id = PaginationService.DEFAULT_ID;
+        }
+
+        if (!this.instances[instance.id]) {
+            this.instances[instance.id] = instance;
+            this.change.next(instance.id);
+        } else {
+            let changed: boolean = this.updateInstance(instance);
+            if (changed) {
+                this.change.next(instance.id);
+            }
+        }
+    }
+
+    // Returns the current page number.
+    public getCurrentPage(id: string): number {
+        if (this.instances[id]) {
+            return this.instances[id].currentPage;
+        }
+    }
+
+    // Sets the current page number.
+    public setCurrentPage(id: string, page: number): void {
+        if (this.instances[id]) {
+            let instance: IPaginationInstance = this.instances[id];
+            let maxPage: number = Math.ceil(instance.totalItems / instance.itemsPerPage);
+            if (page <= maxPage && 1 <= page) {
+                this.instances[id].currentPage = page;
+                this.change.next(id);
+            }
+        }
+    }
+
+    // Sets the value of instance.totalItems
+    public setTotalItems(id: string, totalItems: number): void {
+        if (this.instances[id] && 0 <= totalItems) {
+            this.instances[id].totalItems = totalItems;
+            this.change.next(id);
+        }
+    }
+
+    // Sets the value of instance.itemsPerPage.
+    public setItemsPerPage(id: string, itemsPerPage: number): void {
+        if (this.instances[id]) {
+            this.instances[id].itemsPerPage = itemsPerPage;
+            this.change.next(id);
+        }
+    }
+
+    /**
+     * Returns a clone of the pagination instance object matching the id. If no
+     * id specified, returns the instance corresponding to the default id.
+     */
+    public getInstance(id: string = PaginationService.DEFAULT_ID): IPaginationInstance {
+        if (this.instances[id]) {
+            return ObjectUtils.GetShallowClone(this.instances[id]);
+        }
+        return <IPaginationInstance>{};
+    }
+
+    /**
+     * Check each property of the instance and update any that have changed. Return
+     * true if any changes were made, else return false.
+     */
+    private updateInstance(instance: IPaginationInstance): boolean {
+        let changed: boolean = false;
+        for (let prop in this.instances[instance.id]) {
+            if (instance[prop] !== this.instances[instance.id][prop]) {
+                this.instances[instance.id][prop] = instance[prop];
+                changed = true;
+            }
+        }
+        return changed;
+    }
+}

package/projects/corecomponents/src/lib/pipes/append.pipe.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { AppendPipe } from './append.pipe';
+
+@NgModule({
+    declarations: [
+        AppendPipe
+    ],
+    exports: [
+        AppendPipe
+    ]
+})
+export class AppendPipeModule {
+}

package/projects/corecomponents/src/lib/pipes/append.pipe.ts

@@ -0,0 +1,17 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+// A pipe for appending strings to other strings in view templates.
+@Pipe({name: "append"})
+export class AppendPipe implements PipeTransform {
+    transform(value: string, append?: string): string {
+        if (!value) {
+            return "";
+        }
+
+        if (!append) {
+            return value;
+        }
+
+        return value + append;
+    }
+}

package/projects/corecomponents/src/lib/pipes/co-currency-pipe.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {CoCurrencyPipe} from "./co-currency.pipe";
+
+@NgModule({
+    declarations: [
+        CoCurrencyPipe
+    ],
+    exports: [
+        CoCurrencyPipe
+    ]
+})
+export class CoCurrencyPipeModule {
+}

package/projects/corecomponents/src/lib/pipes/co-currency.pipe.ts

@@ -0,0 +1,45 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {NumberUtils} from "../core/utils/number-utils";
+
+/**
+ * A pipe for transforming strings or numbers to currency formatted strings for display as a price text, e.g. the number 1300.82 to "€ 1,300.82"
+ * or the string "9000" to "€ 9000,-"
+ */
+@Pipe({name: "coCurrency"})
+export class CoCurrencyPipe implements PipeTransform {
+    private static readonly _CurrencySymbol: string = "€";
+    private static readonly _WholeNumberedPriceSuffix: string = ",-";
+
+    transform(value: any, allowZero: boolean = false): string {
+        if (value === null || value === undefined) {
+            if (allowZero) {
+                value = 0;
+            } else {
+                return "";
+            }
+        }
+        if (value === 0 && !allowZero) {
+            return "";
+        }
+        let suffix: string = "";
+        const valueAsFloat: number = NumberUtils.ParseFloat(value, 2);
+        if (NumberUtils.IsNaN(valueAsFloat)) {
+            return "";
+        }
+        // append ,- if integer
+        if (NumberUtils.IsInteger(valueAsFloat)) {
+            suffix = CoCurrencyPipe._WholeNumberedPriceSuffix;
+        }
+        let valueAsString: string = valueAsFloat.toString();
+        // add extra zero if price has only one decimal, something like '100.2'
+        if (valueAsString.indexOf(".") > -1 && valueAsString.split(".")[1].length === 1) {
+            valueAsString += "0";
+        }
+        valueAsString = NumberUtils.AddThousandsCommasTo(valueAsString);
+        // switch '.' and ',' characters (Dutch number view .. hard coded format for now)
+        valueAsString = valueAsString.replace(",", "#");
+        valueAsString = valueAsString.replace(".", ",");
+        valueAsString = valueAsString.replace("#", ".");
+        return CoCurrencyPipe._CurrencySymbol + " " + valueAsString + suffix;
+    }
+}

package/projects/corecomponents/src/lib/pipes/emun-keys.pipe.ts

@@ -0,0 +1,20 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+export interface KeyValuePair {
+    key: any;
+    value: any;
+}
+
+@Pipe({
+    name: "enumkeys"
+})
+// A pipe for iterating over enum entries
+export class EnumKeysPipe implements PipeTransform {
+    transform(value: any): KeyValuePair[] {
+        const keys: KeyValuePair[] = [];
+        for (const enumMember of Object.keys(value)) {
+            keys.push({key: enumMember, value: value[enumMember]});
+        }
+        return keys;
+    }
+}

package/projects/corecomponents/src/lib/pipes/enum-keys-pipe.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {EnumKeysPipe} from "./emun-keys.pipe";
+
+@NgModule({
+    declarations: [
+        EnumKeysPipe
+    ],
+    exports: [
+        EnumKeysPipe
+    ]
+})
+export class EnumKeysPipeModule {
+}

package/projects/corecomponents/src/lib/pipes/file-type-image-pipe.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { FileTypeImagePipe } from './file-type-image.pipe';
+
+@NgModule({
+    declarations: [
+        FileTypeImagePipe
+    ],
+    exports: [
+        FileTypeImagePipe
+    ]
+})
+export class FileTypeImagePipeModule {
+}

package/projects/corecomponents/src/lib/pipes/file-type-image.pipe.ts

@@ -0,0 +1,45 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import { FileTypeInternal } from '../core/enum/file-type-internal.enum';
+
+@Pipe({
+    name: "fileTypeImage"
+})
+// Transforms a MimeType to the corresponding image data URI of that mime type, for direct use as X in img src=X
+export class FileTypeImagePipe implements PipeTransform {
+    private static readonly _PATH_TO_IMAGE_FOLDER: string = "./assets/images/filetype/";
+
+    constructor() {
+    }
+
+    transform(value: FileTypeInternal, smallImage: boolean = false): string {
+        if (!value) {
+            return "";
+        }
+        const smallSuffix: string = smallImage ? "_small" : "";
+        let imageFileName: string;
+        switch (value) {
+            case FileTypeInternal.Image:
+                imageFileName = "image" + smallSuffix + ".png";
+                break;
+            case FileTypeInternal.Pdf:
+                imageFileName = "pdf" + smallSuffix + ".png";
+                break;
+            case FileTypeInternal.ExcelSheet:
+                imageFileName = "excel" + smallSuffix + ".png";
+                break;
+            case FileTypeInternal.WordDocument:
+                imageFileName = "word" + smallSuffix + ".png";
+                break;
+            case FileTypeInternal.Executable:
+                imageFileName = "exe" + smallSuffix + ".png";
+                break;
+            case FileTypeInternal.TextFile:
+                imageFileName = "text" + smallSuffix + ".png";
+                break;
+            default:
+                imageFileName = "undefined" + smallSuffix + ".png";
+                break;
+        }
+        return FileTypeImagePipe._PATH_TO_IMAGE_FOLDER + imageFileName;
+    }
+}

package/projects/corecomponents/src/lib/pipes/filter.pipe.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {FilterPipe} from './filter.pipe';
+
+@NgModule({
+  declarations: [
+    FilterPipe
+  ],
+  exports: [
+    FilterPipe
+  ]
+})
+export class FilterPipeModule {
+}