coer-elements 1.0.7 → 1.0.9

package/Tools/Breadcrumbs.class.ts

@@ -0,0 +1,84 @@
+import { IAppSource } from "../interfaces";
+import { Tools } from './Tools';
+
+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/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/Page.class.ts

@@ -0,0 +1,197 @@
+import { AfterViewInit, Component, Inject, inject, OnDestroy } from '@angular/core';
+import { Breadcrumbs } from "./Breadcrumbs.class";
+import { Source } from './Source.class';
+//import { CoerAlert } from 'src/app/shared/components/coer-alert/coer-alert.component';
+import { IAppSource, IBreadcrumb, IGoBack } from '../interfaces';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Tools } from './Tools';
+
+@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/Source.class.ts

@@ -0,0 +1,107 @@
+import { Breadcrumbs } from "./Breadcrumbs.class";
+import { IAppSource } from '../interfaces';
+import { Router } from '@angular/router';
+import { inject } from "@angular/core";
+import { 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);
+    }
+}

package/Tools/Tools.ts

@@ -10,7 +10,7 @@ export const Tools = {
 
 
     /** Returns true if the value is null or undefined, false otherwise */
-    IsNull: (value: any): boolean => {
+    IsNull: <T>(value: T | null | undefined): boolean => {
         if (value === undefined) return true;
         if (value === null) return true;
         return false;
@@ -18,7 +18,7 @@ export const Tools = {
 
 
     /** Returns true if the value is not null or undefined, false otherwise */
-    IsNotNull: (value: any): boolean => {
+    IsNotNull: <T>(value: T | null | undefined): boolean => {
         if (value === undefined) return false;
         if (value === null) return false;
         return true;
@@ -26,7 +26,7 @@ export const Tools = {
 
 
     /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */
-    IsOnlyWhiteSpace: (value: any): boolean => {
+    IsOnlyWhiteSpace: <T>(value: T | null | undefined): boolean => {
         if (value === undefined) return true;
         if (value === null) return true; 
         if((value as string).toString().trim() === '') return true;

package/index.ts

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

package/interfaces/index.ts

@@ -1,11 +1,47 @@
+import { TemplateRef, WritableSignal } from '@angular/core';
+
 export interface IPatch {
     op: 'remove' | 'add' | 'replace';
     path: string;
     value: any;
 }
 
+
 export interface IScreenSize {
     width: number;
     height: number;
     breakpoin: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
+
+export interface IAppSource {
+    page: string;
+    path: string;
+}
+
+
+export interface IBreadcrumb {
+    page: string;
+    path?: string | null;
+    queryParams?: any;
+    click?: (() => any);
+}
+
+
+export interface IGoBack {
+    show: boolean;
+    path?: string | null;
+    queryParams?: any;
+    click?: (() => any);
+}
+
+
+export interface ICoerRef {
+    coerRef: WritableSignal<string>;
+    title: WritableSignal<string>;
+    icon: WritableSignal<string>;
+    isDisabled: WritableSignal<boolean>;
+    show: WritableSignal<boolean>;
+    tooltip: WritableSignal<string>;
+    template: TemplateRef<any>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "coer",
@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/router": "^17.3.0",
     "guid-typescript": "^1.0.9",
     "moment": "^2.30.1",
     "rxjs": "^7.8.1",