coer-elements 0.0.1 → 0.0.2

package/Signals/{index.d.ts → index.ts}

@@ -1,3 +1,3 @@
-export * from './src/breakpoint.signal';
-export * from './src/isLoading.signal';
-export * from './src/isModalOpen.signal';
+export * from './src/breakpoint.signal';
+export * from './src/isLoading.signal';
+export * from './src/isModalOpen.signal'; 

package/Signals/src/breakpoint.signal.ts

@@ -0,0 +1,3 @@
+import { Screen } from '../../Tools';
+import { signal } from '@angular/core';
+export const breakpointSIG = signal<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(Screen?.BREAKPOINT || 'xs');

package/Signals/src/isLoading.signal.ts

@@ -0,0 +1,2 @@
+import { signal } from "@angular/core";
+export const isLoadingSIG = signal<boolean>(false);

package/Signals/src/isModalOpen.signal.ts

@@ -0,0 +1,2 @@
+import { signal } from "@angular/core";
+export const isModalOpenSIG = signal<boolean>(false);

package/Tools/{index.d.ts → index.ts}

@@ -1,8 +1,8 @@
-export * from './src/Breadcrumbs.class';
-export * from './src/ControlValue';
-export * from './src/DateTime.class';
-export * from './src/Files.class';
-export * from './src/Page.class';
-export * from './src/Screen.class';
-export * from './src/Source.class';
-export * from './src/Tools';
+export * from './src/Breadcrumbs.class';
+export * from './src/ControlValue';
+export * from './src/DateTime.class';
+export * from './src/Files.class';
+export * from './src/Page.class';
+export * from './src/Screen.class';
+export * from './src/Source.class';
+export * from './src/Tools';

package/Tools/src/Breadcrumbs.class.ts

@@ -0,0 +1,84 @@
+import { IAppSource } from "../../interfaces";
+import { Tools } from '../';
+
+export class Breadcrumbs {
+
+    private static readonly storage = 'COER-System';
+
+    /** */
+    public static Add(page: string, path: string): void {
+        const breadcrumbs = this.Get();
+        const paths = breadcrumbs.map(item => item.path);
+
+        if (!paths.includes(path)) {
+            breadcrumbs.push({ page, path });
+            this.Save(breadcrumbs);
+        }
+    }
+
+
+    /** */
+    public static Get(): IAppSource[] {
+        let storage = sessionStorage.getItem(this.storage) as any;
+
+        if (storage) {
+            storage = JSON.parse(storage);
+
+            if (storage.hasOwnProperty('breadcrumbs')) {
+                return Tools.BreakReference(storage.breadcrumbs);
+            }
+        }
+
+        return [];
+    }
+
+
+    /** Source */
+    public static GetFirst(): IAppSource | null {
+        const breadcrumbs = this.Get();
+        return (breadcrumbs.length > 0) ? breadcrumbs.shift()! : null;
+    }
+
+
+    /** */
+    public static Save(breadcrumbs: IAppSource[]): void {
+        let storage = sessionStorage.getItem(this.storage) as any;
+        if (storage) storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { breadcrumbs });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+
+
+    /** */
+    public static Remove(path: string): void {
+        let breadcrumbs = this.Get();
+        const index = breadcrumbs.findIndex(x => x.path.toLowerCase().trim() === path.toLowerCase().trim());
+
+        if (index >= 0) {
+            breadcrumbs = Tools.BreakReference(breadcrumbs).splice(0, index + 1);
+            this.Save(breadcrumbs);
+        }
+    }
+
+
+    /** */
+    public static SetLast(page: string, path: string): void {
+        const breadcrumbs = this.Get();
+
+        if (breadcrumbs.length > 0) {
+            breadcrumbs[breadcrumbs.length - 1] = { page, path };
+            this.Save(breadcrumbs);
+        }
+    }
+
+
+    /** */
+    public static RemoveLast(): void {
+        const breadcrumbs = this.Get();
+
+        if (breadcrumbs.length > 0) {
+            breadcrumbs.pop();
+            this.Save(breadcrumbs);
+        }
+    }
+}

package/Tools/src/ControlValue.ts

@@ -0,0 +1,63 @@
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { forwardRef } from "@angular/core";
+
+export const CONTROL_VALUE = <T>(component: T) => {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => component),
+        multi: true
+    }
+}
+
+
+export class ControlValue implements ControlValueAccessor {
+
+    //Variables
+    protected _value: any;
+    private _isTouched: boolean = false;
+    protected _UpdateValue!: Function;
+    private _IsTouched!: Function;
+
+
+    public get isTouched() {
+        return this._isTouched;
+    }
+
+
+    /** */
+    protected SetValue(value: any): void {
+        if(typeof this._UpdateValue === 'function') {
+            this._UpdateValue(value);
+        }
+
+        this._value = value;
+    }
+
+
+    /** */
+    public SetTouched(isTouched: boolean): void {
+        if(typeof this._IsTouched === 'function') {
+            this._IsTouched(isTouched);
+        }
+
+        this._isTouched = isTouched;
+    }
+
+
+    /** */
+    public writeValue(value: any): void {
+        this._value = value;
+    }
+
+
+    /** */
+    public registerOnChange(callback: Function): void {
+        this._UpdateValue = callback;
+    }
+
+
+    /** */
+    public registerOnTouched(callback: Function): void {
+        this._IsTouched = callback;
+    }
+}

package/Tools/src/DateTime.class.ts

@@ -0,0 +1,27 @@
+import moment from "moment";
+
+export class DateTime {
+    /** Get UTC Offset */
+    public static GetUTCOffset(): number {
+        return moment().utcOffset();
+    }
+
+
+    /** Convert UTC Date to Local Zone */
+    public static ToLocalZone(utcDate: string | Date | moment.Moment): string {
+        return moment(utcDate).add(DateTime.GetUTCOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
+    }
+
+
+    /** Convert Local Zone Date to UTC */
+    public static ToUTC(utcDate: string | Date | moment.Moment): string {
+        return moment(utcDate).subtract(DateTime.GetUTCOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
+    }
+
+
+    /** DD MMM YYYY */
+    public static GetDateFormat(date: string | Date | moment.Moment): string {
+        if ((typeof date === 'string')) date = date.replaceAll('/', '-');
+        return moment(date).parseZone().local(true).format('DD MMM YYYY');
+    }
+}

package/Tools/src/Files.class.ts

@@ -0,0 +1,119 @@
+import { Tools } from "../";
+import * as XLSX from 'xlsx';
+
+export class Files {
+    public static readonly EXCEL_EXTENSIONS: string[] = ['xls', 'xlsx', 'csv'];
+
+    /** Get Extension File */
+    public static GetExtension(file: File): string | null {
+        const fileName = file.name;
+
+        if (fileName.includes('.')) {
+            let worlds = fileName.split('.') as string[];
+
+            if (worlds.length > 0) {
+                let extension = worlds.pop()!;
+                extension = extension.trim().toLowerCase();
+                if (extension.length > 0) return extension;
+            }
+        }
+
+        return null;
+    }
+
+
+    /** Is Excel File */
+    public static IsExcel(file: File): boolean {
+        const EXTENSION = Files.GetExtension(file);
+
+        return Tools.IsNotNull(EXTENSION)
+            ? this.EXCEL_EXTENSIONS.includes(EXTENSION!)
+            : false;
+    }
+
+
+    /** Read excel file */
+    public static ReadExcel<T>(file: File) {
+        return new Promise<{ columns: string[]; rows: T[]; }>(Resolve => {
+            let columns: string[] = [];
+            let rows: T[] = [];
+
+            const reader = new FileReader();
+            reader.readAsArrayBuffer(file);
+
+            reader.onload = () => {
+                const dataBytes = new Uint8Array(reader.result as any);
+
+                if (dataBytes) {
+                    const workbook = XLSX.read(dataBytes, {});
+                    const sheet = workbook.Sheets[workbook.SheetNames[0]];
+                    let dataSheet: any[] = XLSX.utils.sheet_to_json(sheet, {
+                        header: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+                    });
+
+                    //Get Headers
+                    for(const column in dataSheet[0]) {
+                        columns.push(Tools.FirstCharToLower(String(dataSheet[0][column]).replaceAll(' ', '')));
+                    }
+
+                    //Get Rows
+                    rows = XLSX.utils.sheet_to_json(sheet, { header: columns });
+                    rows.shift();
+
+                    rows = rows.map(row => {
+                        const item = Tools.BreakReference<any>(row);
+                        delete item['__rowNum__'];
+                        return item;
+                    });
+                }
+
+                Resolve({ columns, rows });
+            }
+
+            reader.onerror = () => { Resolve({ columns, rows }) }
+        });
+    }
+
+
+    /** Export to excel file */
+    public static ExportExcel<T>(data: T[], fileName: string = 'coer_report', sheetName: string = 'Sheet1') {
+        sheetName = Tools.CleanUpBlanks(sheetName);
+        fileName = Tools.CleanUpBlanks(fileName);
+
+        if(fileName.endsWith('.xls') || fileName.endsWith('.xlsx') || fileName.endsWith('.csv')) {
+            if (fileName.includes('.xls')) {
+                fileName = fileName.replaceAll('.xls', '.xlsx');
+            }
+
+            if (fileName.includes('.csv')) {
+                fileName = fileName.replaceAll('.csv', '.xlsx');
+            }
+        }
+
+        else {
+            fileName += '.xlsx';
+        }
+
+        const WORK_SHEET = XLSX.utils.json_to_sheet(data);
+        const WORK_BOOK = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(WORK_BOOK, WORK_SHEET, 'Sheet1');
+        XLSX.writeFile(WORK_BOOK, fileName);
+    }
+
+
+    /** Convert file to string base64 */
+    public static ConvertToBase64(file: File) {
+        return new Promise<string>(Resolve => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+
+            reader.onload = () => {
+                Resolve(reader.result?.toString() || '');
+            }
+
+            reader.onerror = () => {
+                Resolve('');
+            }
+        });
+    }
+}

package/Tools/src/Page.class.ts

@@ -0,0 +1,195 @@
+import { ActivatedRoute, Router } from '@angular/router';
+import { AfterViewInit, Component, Inject, inject, OnDestroy } from '@angular/core';
+import { IAppSource, IBreadcrumb, IGoBack } from '../../interfaces';
+import { CoerAlert } from '../../components'; 
+import { Breadcrumbs, Source, Tools } from '../';
+
+@Component({ template: '' })
+export class Page implements AfterViewInit, OnDestroy {
+
+    //Injection
+    protected readonly alert = inject(CoerAlert);
+    protected readonly router = inject(Router);
+    private readonly activatedRoute = inject(ActivatedRoute);
+
+    /** */
+    protected isUpdate: boolean = false;
+
+    /** */
+    protected isLoading: boolean = false;
+
+    /** */
+    protected isReady: boolean = false;
+
+    /** */
+    protected enableAnimations: boolean = false;
+
+    /** */
+    protected routeParams: any;
+
+    /** */
+    protected queryParams: any;
+
+    /** */
+    protected breadcrumbs: IBreadcrumb[] = [];
+
+    /** */
+    protected pageResponse: any = null;
+
+    /** */
+    protected goBack: IGoBack = { show: false };
+
+    //Private Variables
+    private _page: string = '';
+    private _source: IAppSource | null = null;
+    private _preventDestroy: boolean = false;
+
+
+    constructor(@Inject(String) page: string) {
+        this.SetPageName(page);
+        this.SetSource();
+        this.GetSource();
+        this.GetNavigation();
+        this.SetGoBack();
+        this.GetPageResponse();
+    }
+
+    ngAfterViewInit() {
+        this.routeParams = this.activatedRoute.snapshot.params;
+        this.queryParams = this.activatedRoute.snapshot.queryParams;
+
+        setTimeout(() => {
+            this.isReady = true;
+            this.RunPage();
+            setTimeout(() => { this.enableAnimations = true }, 1000);
+        });
+
+    }
+
+    ngOnDestroy() {
+        if (!this._preventDestroy) Source.ClearPageResponse();
+    }
+
+    /** Main method. Starts after ngAfterViewInit() */
+    protected RunPage(): void {};
+
+
+    /** Rename the last breadcrumb and update the url id */
+    protected SetPageName(name: string, id: string | number | null = null): void {
+        this._page = name;
+
+        let path = this.router.url;
+        if (path.includes('?')) path = path.split('?')[0];
+
+        if (id) {
+            const PATH_ARRAY = path.split('/');
+            const PATH_ID = Tools.BreakReference(PATH_ARRAY).pop();
+            if (PATH_ID) {
+                PATH_ARRAY[PATH_ARRAY.length - 1] = String(id);
+                path = PATH_ARRAY.join('/');
+            }
+        }
+
+        if (this.breadcrumbs.length > 0) {
+            this.breadcrumbs[this.breadcrumbs.length - 1].page = name;
+            this.breadcrumbs[this.breadcrumbs.length - 1].path = path;
+            Breadcrumbs.SetLast(name, path);
+        }
+
+        this.router.navigateByUrl(path)
+    }
+
+
+    /** */
+    private SetSource(): void {
+        Source.Set(this._page);
+    }
+
+
+    /** */
+    private GetSource(): void {
+        this._source = Source.Get();
+    }
+
+
+    /** */
+    protected GetPageResponse(): void {
+        this.pageResponse = Source.GetPageResponse();
+    }
+
+
+    /** */
+    private GetNavigation(): void {
+        if (this._source) {
+            this.breadcrumbs = Breadcrumbs.Get().map(item => Object.assign({
+                page: item.page,
+                path: item.path,
+                click: this.GoBack(item.path)
+            }));
+        }
+
+        else this.breadcrumbs = [{ page: this._page }];
+    }
+
+
+    /** */
+    private SetGoBack(): void {
+        if (this._source) {
+            this.goBack = {
+                show: true,
+                path: this._source.path,
+                click: this.GoBack()
+            };
+        }
+    }
+
+
+    /** */
+    private GoBack = (path?: string) => (() => {
+        if (path) Breadcrumbs.Remove(path);
+        else Breadcrumbs.RemoveLast();
+    });
+
+
+    /** Navigate to previous page */
+    protected GoToSource<T>(pageResponse: T | null = null): void {
+        if(this._source) {
+            Breadcrumbs.RemoveLast();
+            this.SetPageResponse(pageResponse);
+            Tools.Sleep().then(_ => this.router.navigateByUrl(this._source!.path));
+        }
+    };
+
+
+    /** */
+    protected SetPageResponse<T>(pageResponse: T | null = null): void {
+        if (Tools.IsNotNull(pageResponse)) {
+            this._preventDestroy = true;
+            Source.SetPageResponse(pageResponse);
+        }
+    };
+
+
+    /** */
+    protected ReloadPage(): void {
+        Breadcrumbs.RemoveLast();
+        Tools.Sleep().then(_ => window.location.reload());
+    }
+
+
+    /** */
+    protected Log(value: any, log: string | null = null): void {
+        if (Tools.IsNotNull(log)) console.log({ log, value });
+        else console.log(value);
+    }
+
+
+    /** Returns true if the value is null or undefined, false otherwise */
+    protected IsNotNull = Tools.IsNotNull;
+
+    /** Returns true if the value is null or undefined, false otherwise */
+    protected IsNull = Tools.IsNull;
+
+    /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */
+    protected IsOnlyWhiteSpace  = Tools.IsOnlyWhiteSpace;
+}

package/Tools/src/Screen.class.ts

@@ -0,0 +1,50 @@
+import { IScreenSize } from "../../interfaces";
+import { Observable } from "rxjs";
+
+export class Screen {
+
+    public static get WINDOW_WIDTH(): number {
+        return window.innerWidth;
+    }
+
+
+    public static get WINDOW_HEIGHT(): number {
+        return window.innerHeight;
+    }
+
+
+    public static get DEVICE_WIDTH(): number {
+        return window.screen.width;
+    }
+
+
+    public static get DEVICE_HEIGHT(): number {
+        return window.screen.height;
+    }
+
+
+    public static get BREAKPOINT(): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' {
+        if (window.innerWidth < 576) return 'xs';
+        else if (window.innerWidth >= 576 && window.innerWidth < 768) return 'sm';
+        else if (window.innerWidth >= 768 && window.innerWidth < 992) return 'md';
+        else if (window.innerWidth >= 992 && window.innerWidth < 1200) return 'lg';
+        else if (window.innerWidth >= 1200 && window.innerWidth < 1400) return 'xl';
+        else return 'xxl';
+    }
+
+
+    /** */
+    public static Resize = new Observable<IScreenSize>(subscriber => {
+        window.addEventListener("load", () => {
+            window.dispatchEvent(new Event('resize'));
+        });
+
+        window.onresize = () => {
+            subscriber.next({
+                width: window.innerWidth,
+                height: window.innerHeight,
+                breakpoin: this.BREAKPOINT
+            });
+        }
+    });
+}

package/Tools/src/Source.class.ts

@@ -0,0 +1,106 @@
+import { Router } from '@angular/router';
+import { inject } from "@angular/core";
+import { IAppSource } from '../../interfaces';
+import { Breadcrumbs, Tools } from '../../Tools';
+
+export class Source {
+
+    private static readonly storage = 'COER-System';
+
+    /** */
+    public static Set(page: string): void {
+        const ROUTER = inject(Router);
+
+        let path = ROUTER.url;
+        if (path.includes('?')) path = path.split('?')[0];
+
+        Breadcrumbs.Add(page, path);
+
+        const breadcrumbs = Breadcrumbs.Get();
+
+        if(breadcrumbs.length >= 2) {
+            breadcrumbs.pop();
+            const breadcrumb = breadcrumbs.pop()!;
+            this.Save({ page: breadcrumb.page, path: breadcrumb.path });
+        }
+
+        else this.Save(null);
+    }
+
+
+    /** */
+    private static Save(source: IAppSource | null): void {
+        let storage = sessionStorage.getItem(this.storage) as any;
+        if (storage) storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { source });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+
+
+    /** */
+    public static Get(): IAppSource | null {
+        let storage = sessionStorage.getItem(this.storage) as any;
+
+        if (storage) {
+            storage = JSON.parse(storage);
+
+            if (storage.hasOwnProperty('source')) {
+                return storage.source;
+            }
+        }
+
+        return null;
+    }
+
+
+    /** */
+    public static GetRoot(): IAppSource | null {
+        const breadcrumbs = Breadcrumbs.Get();
+        return (breadcrumbs.length > 0) ? breadcrumbs.shift()! : null;
+    }
+
+
+    /** */
+    public static SetPageResponse<T>(pageResponse: T): void {
+        let storage = sessionStorage.getItem(this.storage) as any;
+        storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { pageResponse });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+
+
+    /** */
+    public static GetPageResponse<T>(): T | null {
+        let storage = sessionStorage.getItem(this.storage) as any;
+
+        if (storage) {
+            storage = JSON.parse(storage);
+
+            if (storage.hasOwnProperty('pageResponse')) {
+                return Tools.BreakReference(storage.pageResponse);
+            }
+        }
+
+        return null;
+    }
+
+
+    /** */
+    public static ClearPageResponse(): void {
+        let storage = sessionStorage.getItem(this.storage) as any;
+        storage = JSON.parse(storage);
+
+        if (storage.hasOwnProperty('pageResponse')) {
+            delete storage.pageResponse;
+        }
+
+        storage = Object.assign({}, storage);
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+
+
+    /** Clear Source */
+    public static Reset(): void {
+        sessionStorage.removeItem(this.storage);
+    }
+}