AngularHelpers

AngularHelpers

import { Directive, OnDestroy, OnInit } from "@angular/core";
import { Calendar } from "primeng/calendar";
import { Subject, fromEvent, merge, takeUntil, timer } from "rxjs";

@Directive({
    selector: 'p-calendar[ng-calendar-year]'
})
export class NgPrimeCalendarYearDirective implements OnInit, OnDestroy {

    maxDateYear: number | null = null;
    minDateYear: number | null = null;
    calendarView: string = 'date';
    destroySubject = new Subject<void>();

    constructor(
        private _calendar: Calendar
    ) {
    }

    ngOnInit() {
        this.maxDateYear = this._calendar.maxDate ? this._calendar.maxDate.getFullYear() : null;
        this.minDateYear = this._calendar.minDate ? this._calendar.minDate.getFullYear() : null;
        this.calendarView = this._calendar.view;
        
        //Validate View is Year
        if (this.calendarView === 'year') {
            this.validateMaxAndMinYearDate();
        }
        this._calendar.onClose.subscribe(() => {
            this.destroySubject.next();
        });
    }

    ngOnDestroy(): void {
        this.destroySubject.next();
    }

    validateMaxAndMinYearDate() {
        // this.validateYearMaxDate();
        this._calendar.onShow.subscribe(() => {
            if (this.minDateYear) {
                this.validateMinOrMaxYearRange();
            }

            if (this.maxDateYear) {
                timer(100).subscribe(() => {
                    this.validateMinOrMaxYearRange(false);
                });
            }

            timer(300).subscribe(() => {
                const prevNavigatorEl = this._calendar.el.nativeElement.querySelector('.p-datepicker-prev');
                const nextNavigatorEl = this._calendar.el.nativeElement.querySelector('.p-datepicker-next');
                const merged$ = merge(fromEvent(prevNavigatorEl, 'click'),fromEvent(nextNavigatorEl, 'click'));
                // handle the merged value to listen next and prev button clic
                merged$.pipe(takeUntil(this.destroySubject))
                .subscribe(() => {
                    if (this.minDateYear) {
                        this.validateMinOrMaxYearRange();
                    }
                    if (this.maxDateYear) {
                        this.validateMinOrMaxYearRange(false);
                    }
                });
            });
        });
    }

    validateMinOrMaxYearRange(checkMinDate = true) {
        const yearRef = this._calendar.el.nativeElement.querySelector('.p-yearpicker');
        if (yearRef) {
            const yearSelectionList = yearRef.querySelectorAll('.p-yearpicker-year')  [];
            Array.from(yearSelectionList).forEach((element: any) => {
                if (element.tagName == 'SPAN') {
                    let valueContent: string = element.textContent  '';
                    valueContent = valueContent.replace(/^\D+/g, '');
                    const valueYear: number = +(valueContent.trim());

                    if (checkMinDate) {
                        if (this.minDateYear) {
                            if (valueYear < this.minDateYear) {
                                element.classList.add('p-disabled');
                            }
                        }
                    } else {
                        if (this.maxDateYear) {
                            if (valueYear > this.maxDateYear) {
                                element.classList.add('p-disabled');
                            }
                        }
                    }
                }
            });
        }
    }
}

JavascriptHelpers

function cutLongFilename(value: string, limitSize: number): string {
    if (value == null) {
        return '';
    } else {

        if (value.length > limitSize) {
            return value.substr(0, Math.floor(limitSize / 2)) + '...' + value.substr(Math.ceil(limitSize / 2) * -1);
        } else {
            return value;
        }
    }
}