ng-easycommerce-v18 0.0.1 → 0.0.2

package/projects/ng-easycommerce/src/lib/constants/core.constants.service.ts

@@ -1,210 +0,0 @@
-import { inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { ApiConstantsService } from './api.constants.service';
-import { isPlatformBrowser } from '@angular/common';
-import { CurrencyConfig, currencyType, ParamsProductsWithUniqueVariant } from '../interfaces';
-/**
- * Servicio que provee las constantes necesarias que se utilizan por toda la aplicación.
- * @export
- * @class CoreConstantsService
- */
-@Injectable({
-	providedIn: 'root'
-})
-export class CoreConstantsService {
-
-	/**
-	 * Servicio que contiene las constantes usadas para la API
-	 */
-	private apiConstants = inject(ApiConstantsService)
-	/**
-	 * Provee el ID de la plataforma en donde se esta ejecutando el codigo, esto sirve para poder diferenciar si es de un servidor o un navegador web.
-	 */
-	private platformId: any = inject(PLATFORM_ID)
-	/**
-	 * Guarda la variable window del web browser.
-	 */
-	private window: any;
-
-	constructor() {
-		if (isPlatformBrowser(this.platformId)) {
-			this.window = window
-		}
-	}
-	/**
-	 * Path usado en las colecciones de productos.
-	 */
-	public PRODUCT_LIST_ROUTE: string = 'collection/';
-	/**
-	 * Path usado para acceder a las secciones.
-	 */
-	public SECTIONS_ROUTE: string = 'sections/';
-	/**
-	 * Path que aloja la carpeta de los assets.
-	 */
-	public readonly ASSETS_URL: string = this.apiConstants.API_URL;
-	/**
-	 * Retorna la url donde se guarda las imagenes.
-	 * @param postMedia 
-	 * @returns 
-	 */
-	public mediaUrl = (postMedia?: string) => this.ASSETS_URL + (this.ASSETS_URL == this.apiConstants.API_URL ? 'media/' : '') + (postMedia ? postMedia : "image/");
-	/**
-	 * Retorna la url de las imagenes de los banners
-	 * @returns 
-	 */
-	public mediaBannerUrl = () => this.ASSETS_URL + (this.ASSETS_URL == this.apiConstants.API_URL ? 'media/' : '') + "banner-image/";
-	/**
-	 * Retorna `true` si la vista es mobile, `false` caso contrario.
-	 * @returns {boolean}
-	 */
-	public mobileScreen = () => this.window?.innerWidth < 750;
-	/**
-	 * Contiene los valores para la moneda actual
-	 */
-	public currency: CurrencyConfig = {
-		code: 'ARG',
-		symbol: '$',
-		position: 'Left',
-		withoutDecimal: false
-	};
-
-	/**
-	 * Arreglo de valores usados para el pipe currencyPrice
-	 */
-	public currencyTypeConfig: CurrencyConfig[] = [
-		{
-			code: 'EUR',
-			symbol: '€',
-			position: 'Right',
-			withoutDecimal: false
-
-		},
-		{
-			code: 'ARG',
-			symbol: '$',
-			position: 'Left',
-			withoutDecimal: false
-		},
-		{
-			code: 'ARS',
-			symbol: '$',
-			position: 'Left',
-			withoutDecimal: false
-		},
-		{
-			code: 'USD',
-			symbol: '$',
-			position: 'Left',
-			withoutDecimal: false
-		},
-		{
-			code: 'PYG',
-			symbol: 'Gs.',
-			position: 'Left',
-			withoutDecimal: false
-		},
-		{
-			code: 'PEN',
-			symbol: 'S/',
-			position: 'Left',
-			withoutDecimal: false
-		},
-		{
-			code: 'SEK',
-			symbol: 'SEK',
-			position: 'Right',
-			withoutDecimal: true
-		},
-	]
-	/**
-	 * Cambia la configuración de la moneda.
-	 * @param currencyTypeConfig Arreglo con las distintas monedas.
-	 */
-	public setCurrencyTypeConfig(currencyTypeConfig: CurrencyConfig[]) {
-		this.currencyTypeConfig = currencyTypeConfig;
-	}
-
-	/**
-	 * @param currencyTypeFind Definir el code del tipo de moneda que se quiera utilizar.
-	 * Si el tipo es CUSTOM se toman los valores del segundo parametro donde se puede definir la simbología y posesión que se quiera.
-	 * @param customType Formato del parámetro ejemplo { code: 'ARG', symbol: '$', position: 'L' , withoutDecimals: false } ,
-	 * todas las key son opcionales y por defecto se toman los valores del ejemplo.
-	 * @returns se retorna la configuración que se seteo a la propiedad currency del servicio.
-	 */
-	public setCurrency(currencyTypeFind: currencyType, customType?: CurrencyConfig): CurrencyConfig {
-		this.currency = this.currencyTypeConfig.find((ct: CurrencyConfig) => ct.code == currencyTypeFind.toUpperCase()) || this.currency
-		customType && (this.currency = { ...this.currency, ...customType })
-		return this.currency;
-	};
-
-
-	public modifyChannelConfig(channelConfig: any) {
-		if (channelConfig.channel || channelConfig.code)
-			this.apiConstants.setChannel(channelConfig.channel || channelConfig.code)
-
-		if (channelConfig.locale || channelConfig.locales.code)
-			this.apiConstants.setLocale(channelConfig.locale || channelConfig.locales.code)
-
-		if (channelConfig.currency || channelConfig.baseCurrency)
-			this.setCurrency(channelConfig.currency || channelConfig.baseCurrency)
-
-		return channelConfig;
-	}
-
-	/**
-	* @description se utiliza para configurar que filtros del tipo `SortFilter` se quiere mostrar en la vista.
-	* Se usan los codigo de los filtros para indicar cuales se deben mostrar.
-	*/
-	private sortFilters: string[] = ['price', 'order-alph', 'recent']
-
-	/**
-	 *
-	 * @param filtersCode arreglo de strings con los codigos de los filtros.
-	 * Si se le pasa el parametro **all** este mostrara todos.
-	 * @example price | order-alph | recent | update | all
-	 * @returns
-	 */
-	setSortFilters = (filtersCode: string[] = ['all']) => this.sortFilters = filtersCode;
-
-	getSortFilters = () => this.sortFilters;
-
-	// ABOUT PRODUCTS 
-	private productsWithUniqueVariant: boolean = false;
-	setProductWithUniqueVariant(value: boolean) { this.productsWithUniqueVariant = value; }
-	getProductWithUniqueVariant() { return this.productsWithUniqueVariant }
-
-	/**
-	* @description esta variable se utiliza para configurar los parametros cuando se desea mostrar
-	* variantes el listado de productos.
-	* @param {string}type tipo de options
-	* @param {string}code codigo de options
-	* @param {boolean}defaultFirstOption `true` toma el primer option del producto en general
-	* @param {boolean}checkIfStock `true` se realiza un chequeo de si la variante tiene stock para mostrarla
-	* @example  ```javascript
-	* {
-	   type: 'color',
-	   code: 'color',
-	   defaultFirstOption: false ,
-	   checkIfStock:true
-	   } ```
-	*/
-	private paramsProductsWithUniqueVariant: ParamsProductsWithUniqueVariant = {
-		type: 'color',
-		code: 'color',
-		defaultFirstOption: false,
-		checkIfStock: true
-	}
-
-	setParamsProductsWithUniqueVariant = (value: ParamsProductsWithUniqueVariant) => {
-		this.paramsProductsWithUniqueVariant = {
-			...this.paramsProductsWithUniqueVariant,
-			...value
-		}
-	}
-
-	getParamsProductsWithUniqueVariant = () => this.paramsProductsWithUniqueVariant
-	
-	public getChannel(){
-		return this.apiConstants.CHANNEL;
-	}
-}

package/projects/ng-easycommerce/src/lib/constants/index.ts

@@ -1,2 +0,0 @@
-export * from './api.constants.service';
-export * from './core.constants.service';

package/projects/ng-easycommerce/src/lib/ec-components/abstractions-components/block-ec.component.ts

@@ -1,107 +0,0 @@
-import { afterNextRender, Component, inject } from "@angular/core";
-import { ApiConstantsService, CoreConstantsService } from "../../constants";
-import { SwiperOptions } from "swiper/types";
-/**
- * Componente para abstraer la funcionalidad de los componentes
- * y que puedan heredarla.
- * @export
- * @class BlockEcComponent
- */
-@Component({
-	selector: 'lib-block-ec',
-	standalone: true,
-	imports: [],
-	template: '<p>Block Helper Component</p>'
-})
-export class BlockEcComponent {
-    /**
-     * Constantes del core
-     */
-    private consts = inject(CoreConstantsService)
-    /**
-     * Constantes de la API
-     */
-    protected apiConsts = inject(ApiConstantsService)
-    /**
-     * Url para las imagenes
-     */
-    public mediaUrl = this.consts.mediaUrl()
-    /**
-     * Url para las imagenes de los banners
-     */
-    public mediaBannerUrl = this.consts.mediaBannerUrl()
-    /**
-     * Si la vista es mobile o no.
-     */
-    public mobileScreen:boolean = this.consts.mobileScreen(); 
-    
-    constructor(){}
-    /**
-     * Esta función separa el código del bloque y se queda con el elemento en la posicion uno para usarlo como clase CSS. 
-     * La idea es que el código del bloque mantenga un formato similar a **BLOQUE-[nombre]-[extra]...** entonces esta función 
-     * se quedaria con lo que contiene **nombre** para usarlo como nombre de clase css.
-     * @param code Código del bloque.
-     * @returns {string}
-     */
-    trimClassBlock (code:string):string {
-        return (code.split('-').length > 1) ? code.split('-')[1].toLowerCase() : ''
-    }
-    /**
-     * Obtiene la imagen del banner dependiendo de si es para mobile o desktop
-     * @param banner 
-     * @returns 
-     */
-    getBannerImage(banner: any):string {
-        return (this.mobileScreen && banner.translations[this.apiConsts.LOCALE].mobileImageName && banner.translations[this.apiConsts.LOCALE].mobileImageName != '')
-            ? banner.translations[this.apiConsts.LOCALE].mobileImageName
-            : banner.translations[this.apiConsts.LOCALE].imageName;
-    }
-
-     /**
-     * Obtiene la imagen del banner dependiendo de si es para mobile o desktop.
-     * Le suma el path para las url del banner.
-     * @param banner 
-     * @returns 
-     */
-    getImage(banner: any): string {
-        return this.mediaBannerUrl +
-            (this.mobileScreen && banner.translations[this.apiConsts.LOCALE].mobileImageName && banner.translations[this.apiConsts.LOCALE].mobileImageName != '')
-            ? banner.translations[this.apiConsts.LOCALE].mobileImageName
-            : banner.translations[this.apiConsts.LOCALE].imageName
-    }
-    /**
-     * Retorna la configuración base para el carrusel.
-     * Más detalles: {@link https://swiperjs.com/types/interfaces/types_swiper_options.SwiperOptions}
-     * @returns {SwiperOptions}
-     * 
-     */
-    swiperOptions():SwiperOptions {
-        return {
-            slidesPerView: 1,
-            autoplay: true,
-            loop: true,
-            speed: 1050,
-            pagination: true,
-            navigation: false,
-            autoHeight: true,
-            breakpoints: {
-                0: {
-                    slidesPerView: 1
-                },
-                576:{
-                    slidesPerView: 1 
-                },
-                768: {
-                    slidesPerView: 1,
-                },
-                992: {
-                    slidesPerView: 1,
-                },
-                1200: {
-                    slidesPerView: 1,
-                }
-            }
-        }
-    }
-
-}

package/projects/ng-easycommerce/src/lib/ec-components/abstractions-components/index.ts

@@ -1,2 +0,0 @@
-export * from './menu-ec.component';
-export * from './block-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/abstractions-components/menu-ec.component.ts

@@ -1,102 +0,0 @@
-import { afterNextRender, afterRender, Component, inject } from '@angular/core';
-import { AuthService, OptionsService, ParametersService } from '../../ec-services';
-import { map, Observable } from 'rxjs';
-import { CoreConstantsService } from '../../constants';
-import { Attribute, Category, Parameter, Section } from '../../interfaces';
-/**
- * Para diferenciar los tipos de Menu
- */
-type MenuType = "category" | "attribute" | "section"
-/**
- * Componente que sirve para abstraer la funcionalidad que comparten 
- * el menú y el footer.
- * @class MenuEcComponent
- */
-@Component({
-	selector: 'lib-footer-ec',
-	standalone: true,
-	imports: [],
-	template: '<p>Menu and Footer Helper Component</p>'
-})
-export class MenuEcComponent {
-	private optionsService = inject(OptionsService)
-	private parametersService = inject(ParametersService)
-	private _authService: AuthService = inject(AuthService)
-	/**
-	 * Constantes del core.
-	 */
-	private consts = inject(CoreConstantsService)
-
-	/**
-	 * Observable de categorias
-	 */
-	public categories$: Observable<Category[]> = this.optionsService.getCategories()
-	/**
-	 * Observable de secciones
-	 */
-	public sections$: Observable<Section[]> = this.optionsService.getSections()
-	/**
-	 * Observable de atributos
-	 */
-	public attributes$: Observable<Attribute[]> = this.optionsService.getAttributes()
-	/**
-	 * Observable de parametros
-	 */
-	public parameters$: Observable<Parameter[] | null> = this.parametersService.getParameters()
-	/**
-	 * Url para las imagenes guardades en el backend.
-	 */
-	public mediaUrl = this.consts.mediaUrl()
-	/**
-	 * Funcion para saber si existen un parametro. 
-	 */
-	public hasParams = this.parametersService.hasParams
-
-	constructor() {}
-
-	protected addChildren = (menuType: MenuType, code: string, item: any, stackPlace = 'end'): void => {
-
-	}
-
-	/* protected addChildren = (menuItems: any[], code: string, item: any, stackPlace = 'end') => {
-	  (stackPlace === 'start')
-		? menuItems.find(item => item.code?.toLowerCase().includes(code))?.children.unshift(item)
-		: menuItems.find(item => item.code?.toLowerCase().includes(code))?.children.push(item)
-    
-	} */
-	/**
-	 * Actualiza las categorias agregando nuevas.
-	 * @param categories 
-	 */
-	protected updateCategories(categories: Category[]) {
-		this.categories$ = this.categories$.pipe(map((data: Category[]) => {
-			return [...data, ...categories]
-		}))
-	}
-	/**
-	 * Actualiza las secciones agregando nuevas.
-	 * @param sections 
-	 */
-	protected updateSections(sections: Section[]) {
-		this.sections$ = this.sections$.pipe(map((data: Section[]) => {
-			return [...data, ...sections]
-		}))
-	}
-	/**
-	 * Actualiza el menú de atributos agredando nuevos.
-	 * @param attributes 
-	 */
-	protected updateAttributes(attributes: Attribute[]) {
-		this.attributes$ = this.attributes$.pipe(map((data: Attribute[]) => {
-			return [...data, ...attributes]
-		}))
-	}
-
-	public isAuthenticated() {
-		return this._authService.isAuthenticated();
-	}
-
-	public logout() {
-		this._authService.logout();
-	}
-}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/auth-ec.component.html

@@ -1,10 +0,0 @@
-<div class="container-xl">
-    <div class="row">
-        <div class="col-md-6 col-12">
-            <app-login-form-ec />
-        </div>
-        <div class="col-md-6 col-12">
-            
-        </div>
-    </div>
-</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/auth-ec.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { LoginFormEcComponent } from "./login-form-ec/login-form-ec.component";
-
-@Component({
-  selector: 'app-auth-ec',
-  standalone: true,
-  imports: [LoginFormEcComponent],
-  templateUrl: './auth-ec.component.html',
-  styleUrl: './auth-ec.component.scss'
-})
-export class AuthEcComponent {
-
-}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/confirm-account-ec/confirm-account-ec.component.html

@@ -1,19 +0,0 @@
-<div class="mt-5 mb-5">
-    <div class="row">
-         <div class="col-md-12 col-12 text-center">
-              <h4 class="confirm-title text-white py-3 text-uppercase d-inline-block">
-                   {{ ('thanks-for-register' | translate) | uppercase }}</h4>
-         </div>
-    </div>
-    
-    
-    <div class="row">
-         <div class="col-md-12 col-12 text-center">
-              <h4>{{ 'thanks-for-register-detail' | translate }}</h4>
-              <a routerLink="/auth/login">
-                   <button class="btn btn-primary my-4" type="button">{{ 'login' | translate |
-                        uppercase }}</button>
-              </a>
-         </div>
-    </div>
-</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/confirm-account-ec/confirm-account-ec.component.ts

@@ -1,34 +0,0 @@
-import { UpperCasePipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { AuthService } from '../../../ec-services';
-import { ActivatedRoute } from '@angular/router';
-import { firstValueFrom } from 'rxjs';
-
-@Component({
-	selector: 'app-confirm-account-ec',
-	standalone: true,
-	imports: [TranslateModule, UpperCasePipe],
-	templateUrl: './confirm-account-ec.component.html',
-	styleUrl: './confirm-account-ec.component.scss'
-})
-export class ConfirmAccountEcComponent implements OnInit  {
-
-	private _authService: AuthService = inject(AuthService)
-	private _activedRoute: ActivatedRoute = inject(ActivatedRoute)
-
-	public ok:boolean = false;
-	public error:boolean = false;
-
-	ngOnInit(): void {
-		const token = this._activedRoute.snapshot.queryParams['token'];
-		firstValueFrom(this._authService.confirmAccount(token))
-			.then( res => {
-				this.ok = true;
-			}).catch( res => {
-				this.error = true;
-			});
-	}
-
-
-}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/forgot-password-ec/forgot-password-ec.component.html

@@ -1,31 +0,0 @@
-<div class="container" id="passReset">
-    @if(!ready){
-    <div>
-        <form [formGroup]="form" (submit)="recoverPassword($event)" class="row justify-content-center">
-            <div class="col-12 col-md-10 text-center">
-                <h3>{{ 'set-forgot-email' | translate }}</h3>
-                <div class="element-container">
-                    <input type="email" class="form-control" formControlName="email" />
-                </div>
-                <button class="btn btn-primary btn-passreset my-2" type="submit" [disabled]="form.invalid">{{ 'recover-password' | translate
-                    }}</button>
-                @if(loading)
-                {
-                <app-loading-inline-ec />
-                }
-            </div>
-        </form>
-    </div>
-    } @else {
-    <div class="row d-flex justify-content-center">
-        <div class="col-12 col-md-8">
-            <div class="element-container text-center">
-                <h3>{{ 'mail-sent' | translate }}</h3>
-            </div>
-            <div class="element-container text-center">
-                <h5 class="center-text">{{ 'check-your-email' | translate }}</h5>
-            </div>
-        </div>
-    </div>
-    }
-</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/forgot-password-ec/forgot-password-ec.component.ts

@@ -1,55 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { LoadingInlineEcComponent } from "../../widgets-ec/loading";
-import { firstValueFrom } from 'rxjs';
-import { AuthService, ToastService } from '../../../ec-services';
-
-@Component({
-	selector: 'app-forgot-password-ec',
-	standalone: true,
-	imports: [TranslateModule, ReactiveFormsModule, LoadingInlineEcComponent],
-	templateUrl: './forgot-password-ec.component.html',
-	styleUrl: './forgot-password-ec.component.scss'
-})
-export class ForgotPasswordEcComponent {
-	private _formBuilder: FormBuilder = inject(FormBuilder);
-	private _authService: AuthService = inject(AuthService);
-	private _toastService: ToastService = inject(ToastService);
-	/**
-	 * Para indicarle a la vista que se realizo con exito la petición
-	 */
-	public ready: boolean = false;
-	/**
-	 * Para mostrar el spinner.
-	 */
-	public loading: boolean = false;
-
-	/**
-	 * Contiene el formulario.
-	 */
-	public form:FormGroup;
-
-	constructor(){
-		this.form = this._formBuilder.group({
-			email: ['', [Validators.required, Validators.email]],
-		})
-	}
-
-	/**
-	 * Genera una petición al backend para recuperar la contraseña.
-	 * @param event 
-	 */
-	recoverPassword = (event:Event) => {
-		event.preventDefault();
-		this.loading = true;
-		firstValueFrom(this._authService.recoverPassword(this.form.value.email))
-			.then((res:any) => {
-				this.ready = true
-			}).catch((res:any) => {
-				(!res || res.error)
-				? this._toastService.show('non-existent-email')
-				: this._toastService.show(res.error);
-			}).finally(() => this.loading = false)
-	}
-}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/login-form-ec/login-form-ec.component.html

@@ -1,30 +0,0 @@
-<div class="d-flex flex-column position-relative">
-    <h1 class="right-line ff-ubuntu-light mb-2"><span>Ingresar</span></h1>
-    <p class="ff-ubuntu-light font-sm pr-4">
-        Si ya estás registrado. Ingresa en tu cuenta con tu email y la
-        contraseña adecuada.
-    </p>
-    <div class="w-md-50 w-100 text-center">
-        <form [formGroup]="loginForm()" (submit)="login($event)">
-            <input class="form-control mb-4 radius-0" type="email" formControlName="username"
-                placeholder="Correo Electrónico">
-            <input class="form-control mb-4 radius-0" type="password" formControlName="password"
-                placeholder="Contraseña">
-
-            <div class="row d-flex flex-column">
-                <div class="col-12">
-                    <button type="submit"
-                        class="bg-gray border-0 px-4 py-2 color-white ff-ubuntu-light">INGRESAR</button>
-                </div>
-                <div class="col-12 d-flex justify-content-center align-items-center">
-                    <a [routerLink]="'/auth/forgot-password'" class="font-md ff-ubuntu-light">
-                        ¿Olvidó su contraseña?
-                    </a>
-                </div>
-            </div>
-        </form>
-    </div>
-    @if(loading){
-    <app-loading-section-ec></app-loading-section-ec>
-    }
-</div>