lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/product-dialog1/product-dialog1.component.html

@@ -0,0 +1,112 @@
+
+    <div class="flex flex-col gap-6">
+      @if (product['image']) {
+        <img
+          [src]="product['image']"
+          [alt]="product['image']"
+          class="block m-auto pb-4"
+        />
+      }
+      <div>
+        <label for="name" class="block font-bold mb-3">Name</label>
+        <input
+          type="text"
+          pInputText
+          id="name"
+          [(ngModel)]="product['name']"
+          required
+          autofocus
+          fluid
+        />
+        @if (submitted && !product['name']) {
+          <small class="text-red-500">Name is required.</small>
+        }
+      </div>
+      <div>
+        <label for="description" class="block font-bold mb-3"
+          >Description</label
+        >
+        <textarea
+          id="description"
+          pTextarea
+          [(ngModel)]="product['description']"
+          required
+          rows="3"
+          cols="20"
+          fluid
+        ></textarea>
+      </div>
+
+      <div>
+        <label for="inventoryStatus" class="block font-bold mb-3"
+          >Inventory Status</label
+        >
+        <p-select
+          [(ngModel)]="product['inventoryStatus']"
+          inputId="inventoryStatus"
+          [options]="statuses"
+          placeholder="Select a Status"
+          fluid
+        />
+      </div>
+
+      <div>
+        <span class="block font-bold mb-4">Category</span>
+        <div class="grid grid-cols-12 gap-4">
+          <div class="flex items-center gap-2 col-span-6">
+            <p-radiobutton
+              id="category1"
+              name="category"
+              value="Accessories"
+              [(ngModel)]="product['category']"
+            />
+            <label for="category1">Accessories</label>
+          </div>
+          <div class="flex items-center gap-2 col-span-6">
+            <p-radiobutton
+              id="category2"
+              name="category"
+              value="Clothing"
+              [(ngModel)]="product['category']"
+            />
+            <label for="category2">Clothing</label>
+          </div>
+          <div class="flex items-center gap-2 col-span-6">
+            <p-radiobutton
+              id="category3"
+              name="category"
+              value="Electronics"
+              [(ngModel)]="product['category']"
+            />
+            <label for="category3">Electronics</label>
+          </div>
+          <div class="flex items-center gap-2 col-span-6">
+            <p-radiobutton
+              id="category4"
+              name="category"
+              value="Fitness"
+              [(ngModel)]="product['category']"
+            />
+            <label for="category4">Fitness</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-12 gap-4">
+        <div class="col-span-6">
+          <label for="price" class="block font-bold mb-3">Price</label>
+          <p-inputnumber
+            id="price"
+            [(ngModel)]="product['price']"
+            mode="currency"
+            currency="USD"
+            locale="en-US"
+            fluid
+          />
+        </div>
+        <div class="col-span-6">
+          <label for="quantity" class="block font-bold mb-3">Quantity</label>
+          <p-inputnumber id="quantity" [(ngModel)]="product['quantity']" fluid />
+        </div>
+      </div>
+    </div>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/product-dialog1/product-dialog1.component.ts

@@ -0,0 +1,87 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-product-dialog1',
+  imports: [CommonModule, FormsModule, PrimegModule],
+  templateUrl: './product-dialog1.component.html',
+  styleUrls: ['./product-dialog1.component.scss']
+})
+export class ProductDialog1Component implements OnInit, OnChanges {
+  
+  @Input() productDialog: boolean = false;
+  @Input() product: Record<string, unknown> = {};
+  @Input() statuses: string[] = [];
+  @Input() triggerSave?: EventEmitter<void>;
+  
+  @Output() productDialogChange = new EventEmitter<boolean>();
+  @Output() onSave = new EventEmitter<Record<string, unknown>>();
+  @Output() onCancel = new EventEmitter<void>();
+
+  componente: ComponentesDTO = {
+    id: 23,
+    nombreComponente: 'lib-product-dialog1',
+    version: '1.0'
+  };
+
+  submitted: boolean = false;
+  originalProduct: Record<string, unknown> = {};
+
+  ngOnInit() {
+    // Crear una copia del producto para evitar modificar el original
+    if (this.product) {
+      this.originalProduct = { ...this.product };
+    }
+
+    // Suscribirse al triggerSave si está disponible
+    if (this.triggerSave) {
+      this.triggerSave.subscribe(() => {
+        this.saveProduct();
+      });
+    }
+  }
+
+  ngOnChanges() {
+    // Cuando se abre el dialog, crear una copia del producto
+    if (this.productDialog && this.product) {
+      this.originalProduct = { ...this.product };
+    }
+
+    // Suscribirse al triggerSave si cambia
+    if (this.triggerSave) {
+      this.triggerSave.subscribe(() => {
+        this.saveProduct();
+      });
+    }
+  }
+
+  hideDialog() {
+    this.productDialog = false;
+    this.productDialogChange.emit(false);
+    this.submitted = false;
+    
+    // Restaurar el producto original si se cancela
+    if (this.originalProduct) {
+      Object.assign(this.product, this.originalProduct);
+    }
+    
+    this.onCancel.emit();
+  }
+
+  saveProduct() {
+    this.submitted = true;
+    
+    if (this.product['name'] && typeof this.product['name'] === 'string' && this.product['name'].trim()) {
+      // Emitir el producto modificado
+      this.onSave.emit(this.product);
+      
+      // Cerrar el dialog
+      this.productDialog = false;
+      this.productDialogChange.emit(false);
+      this.submitted = false;
+    }
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/card-productos1/card-productos1.component.html

@@ -0,0 +1,118 @@
+<div class="surface-card shadow-3 border-round-xl overflow-visible relative transition-all transition-duration-300 hover:shadow-6 flex flex-column h-full hover-effect"
+    style="min-height: 520px; max-width: 400px; margin: 0 auto">
+    @if (product) {
+    <div class="relative surface-ground flex align-items-center justify-content-center overflow-hidden p-3 image-hover-container"
+        style="height: 280px">
+        <img [src]="currentImageUrl || product.imagen[0]?.url" [alt]="product.name"
+            loading="lazy" width="400" height="280"
+            class="max-w-full max-h-full object-contain cursor-pointer transition-transform transition-duration-300 hover-zoom"
+            (click)="navigateToProductDetail()" />
+
+        <!-- Overlay con icono de ojo al hover -->
+        <div class="image-overlay">
+            <button pButton type="button" class="p-button-rounded p-button-info p-button-lg shadow-4"
+                    (click)="navigateToProductDetail()" pTooltip="Ver detalles" tooltipPosition="top">
+                <i class="pi pi-eye text-xl"></i>
+            </button>
+        </div>
+
+        <button (click)="shareProductOnWhatsapp()"
+            class="absolute bottom-0 right-0 m-3 bg-green-500 border-none text-white w-3rem h-3rem border-circle shadow-4 flex align-items-center justify-content-center cursor-pointer transition-colors transition-duration-200 hover:bg-green-600 z-2">
+            <i class="pi pi-whatsapp text-2xl"></i>
+        </button>
+    </div>
+
+    <div class="p-3 flex flex-column flex-grow-1">
+        <div class="flex gap-2 overflow-x-auto pb-2 mb-3 z-1">
+            @for (image of product.imagen; track $index) {
+            <img [src]="image.url" (click)="selectImage($index)"
+                loading="lazy" width="48" height="48"
+                class="w-3rem h-3rem border-round border-2 cursor-pointer flex-shrink-0 transition-all transition-duration-200 object-cover"
+                [class.border-900]="isActiveThumbnail($index)" [class.border-transparent]="!isActiveThumbnail($index)"
+                [class.opacity-60]="!isActiveThumbnail($index)" />
+            }
+        </div>
+
+        <div class="surface-border border-top-1 w-full mb-3"></div>
+
+        <div class="flex justify-content-between align-items-start gap-2 mb-3">
+            <h3 class="text-xl font-semibold text-900 m-0 line-height-3 flex-grow-1 cursor-pointer hover:text-700 transition-colors"
+                (click)="navigateToProductDetail()" style="word-break: break-word">
+                {{ product.name }}
+            </h3>
+
+            <div class="flex gap-2 flex-shrink-0 mt-1" style="position: relative;">
+                @if (isLogin) {
+                <p-button (click)="navigateToProductDetail()" pTooltip="Personalizar" icon="pi pi-pencil"
+                    tooltipPosition="top"
+                    styleClass="bg-900 text-white w-2rem h-2rem border-circle border-none flex align-items-center justify-content-center cursor-pointer hover:bg-700 transition-colors shadow-1">
+                </p-button>
+                }
+                                <!-- Menú flotante de redes estilo PrimeNG -->
+                                <div class="relative" style="position: absolute; right: -0.75rem; top: -0.75rem; z-index: 10;">
+                                    <button (click)="toggleShareMenu()"
+                                        class="bg-green-500 border-none text-white w-2rem h-2rem border-circle shadow-2 flex align-items-center justify-content-center cursor-pointer transition-colors transition-duration-200 hover:bg-green-600">
+                                        <i class="pi" [ngClass]="{'pi-times': shareMenuOpen, 'pi-share-alt': !shareMenuOpen}"></i>
+                                    </button>
+                                    @if (shareMenuOpen) {
+                                        <div class="flex gap-2 absolute" style="right: 0; top: 2.6rem;">
+                                            <button (click)="touchRedes('whatsapp')" class="border-none w-2rem h-2rem border-circle flex align-items-center justify-content-center cursor-pointer shadow-1" style="background:#25D366;color:#fff">
+                                                <i class="pi pi-whatsapp"></i>
+                                            </button>
+                                            <button (click)="touchRedes('facebook')" class="border-none w-2rem h-2rem border-circle flex align-items-center justify-content-center cursor-pointer shadow-1" style="background:#1877F2;color:#fff">
+                                                <i class="pi pi-facebook"></i>
+                                            </button>
+                                           
+                                        </div>
+                                    }
+                                </div>
+            </div>
+        </div>
+
+        <div class="surface-ground p-3 border-round-xl border-1 surface-border text-sm mb-4">
+            <div class="flex justify-content-between align-items-center mb-2">
+                <strong class="font-bold text-700">Categoría:</strong>
+                <span class="text-600 text-right overflow-hidden text-overflow-ellipsis" style="max-width: 60%">
+                    {{ product.nombreCategoria || 'Sin categoría' }}
+                </span>
+            </div>
+            <div class="flex justify-content-between align-items-center">
+                <strong class="font-bold text-700">Disponibles:</strong>
+                <span class="text-600 font-medium">{{ product.cantidad }}</span>
+            </div>
+        </div>
+
+        <div class="mt-auto">
+
+
+            <div class="flex align-items-end gap-2 mb-3 flex-wrap">
+                @if(isLogin){
+                        @if (product.descuento && product.descuento > 0) {
+                        <span class="text-500 line-through text-sm mb-1">
+                            {{ product.precios[0].precio | currency: product.precios[0].codigo_iso : "code" }}
+                        </span>
+                        }
+
+                        <span class="text-2xl font-bold text-900">
+                            {{ discount | currency: product.precios[0].codigo_iso : "code" }}
+                        </span>
+
+                        @if (product.descuento && product.descuento > 0) {
+                        <div class="bg-green-100 text-green-700 px-2 py-1 text-xs font-bold border-round mb-1 ml-auto">
+                            {{ product.descuento }}% OFF
+                        </div>
+                        }
+                } 
+            </div>
+
+            <lib-section-add-cards-buttons [product]="product" [isLogin]="isLogin">
+            </lib-section-add-cards-buttons>
+
+        </div>
+    </div>
+    } @else {
+    <div class="flex align-items-center justify-content-center h-full text-500">
+        Producto no disponible
+    </div>
+    }
+</div>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/card-productos1/card-productos1.component.scss

@@ -0,0 +1,42 @@
+/* 1. Mueve la tarjeta hacia arriba al pasar el mouse (Tu efecto translateY) */
+.hover-effect {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    &:hover {
+        transform: translateY(-4px);
+        /* shadow-6 de primeflex ya se encarga de la sombra */
+    }
+}
+
+/* 2. Zoom suave en la imagen interna */
+.hover-zoom {
+    transition: transform 0.35s ease;
+    &:hover {
+        transform: scale(1.05);
+    }
+}
+
+/* 3. Ocultar scrollbar en miniaturas */
+.overflow-x-auto {
+    scrollbar-width: none; /* Firefox */
+    &::-webkit-scrollbar { display: none; } /* Chrome/Safari */
+}
+
+/* 4. Overlay de ojo en la imagen del producto */
+.image-hover-container {
+    position: relative;
+    .image-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0,0,0,0.18);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity .25s ease;
+    }
+    &:hover .image-overlay {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/card-productos1/card-productos1.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardProductos1Component } from './card-productos1.component';
+
+describe('CardProductos1Component', () => {
+  let component: CardProductos1Component;
+  let fixture: ComponentFixture<CardProductos1Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardProductos1Component]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardProductos1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/card-productos1/card-productos1.component.ts

@@ -0,0 +1,202 @@
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { CurrencyPipe, CommonModule } from '@angular/common';
+import { PrimegModule } from '../../../../../modulos/primeg.module';
+import { ImagenDTO, ProductoDTO } from '@juliaosistem/core-dtos';
+import { Router } from '@angular/router';
+import { ProductService } from '../../../services/product.service';
+import { SectionAddCardsButtons } from "../../section-add-cards-buttons/section-add-cards-buttons";
+import { IonicModule } from '@ionic/angular';
+
+ type ProductoView = ProductoDTO & { nombreCategoria?: string };
+
+
+@Component({
+  selector: 'lib-card-productos1',
+  standalone: true,
+  templateUrl: './card-productos1.component.html',
+  styleUrls: ['./card-productos1.component.scss'],
+  imports: [CommonModule, PrimegModule, SectionAddCardsButtons,IonicModule],
+  providers: [CurrencyPipe]
+})
+export class CardProductos1Component implements OnInit, OnDestroy {
+
+  @Input() product!: ProductoView;
+  @Output() addToCart = new EventEmitter<{ product: ProductoDTO, quantity: number }>();
+  @Input() isLogin: boolean = false;
+  // Ruta base configurable desde el frontal para navegar al detalle
+  @Input() detailRouteBase: string[] = ['detalle'];
+
+  discount = 0;
+  currentImageIndex = 0;
+  shareMenuOpen = false;
+  private readonly shareBaseUrl = 'https://zigmainflables.com';
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  autoSlideInterval: any;
+
+  constructor(
+    private currencyPipe: CurrencyPipe,
+    private productService: ProductService,
+    private router: Router
+  ) {}
+
+  /**
+   * Inicializa el componente calculando el descuento y
+   * arrancando el carrusel de imágenes si el producto es válido.
+   */
+  ngOnInit(): void {
+   if (this.productService.checkIsProductIsnotEmptyOrNull(this.product)) {
+      this.discount = this.productService.calculateDiscount(this.product);
+      this.startAutoSlide();
+    }
+  }
+
+  /**
+   * Limpia recursos al destruir el componente, deteniendo
+   * el carrusel automático si está activo.
+   */
+  ngOnDestroy(): void {
+    this.stopAutoSlide();
+  }
+
+  /**
+   * Devuelve la imagen actualmente seleccionada para el producto.
+   * @returns ImagenDTO imagen activa
+   */
+  get currentImage(): ImagenDTO {
+    return this.product.imagen[this.currentImageIndex];
+  }
+
+  /**
+   * Devuelve la URL de la imagen actualmente seleccionada.
+   * @returns string URL de la imagen activa
+   */
+  get currentImageUrl(): string {
+    return this.currentImage.url;
+  }
+
+  /**
+   * Avanza a la siguiente imagen del carrusel, ciclando al inicio
+   * cuando se alcanza el final.
+   */
+  nextImage(): void {
+    this.currentImageIndex = (this.currentImageIndex + 1) % this.product.imagen.length;
+  }
+
+  /**
+   * Retrocede a la imagen anterior del carrusel, ciclando al final
+   * cuando se está al inicio.
+   */
+  prevImage(): void {
+    this.currentImageIndex = (this.currentImageIndex - 1 + this.product.imagen.length) % this.product.imagen.length;
+  }
+
+  /**
+   * Selecciona la imagen por índice dentro de la lista de imágenes del producto.
+   * @param index Índice de la imagen a mostrar
+   */
+  selectImage(index: number): void {
+    this.currentImageIndex = index;
+  }
+
+  /**
+   * Indica si el índice recibido corresponde a la miniatura activa.
+   * @param index Índice de miniatura a verificar
+   * @returns boolean `true` si es la miniatura activa
+   */
+  isActiveThumbnail(index: number): boolean {
+    return this.currentImageIndex === index;
+  }
+
+  /**
+   * Inicia el carrusel automático de imágenes cambiando cada 3 segundos.
+   */
+  startAutoSlide(): void {
+    this.stopAutoSlide();
+    this.autoSlideInterval = setInterval(() => this.nextImage(), 3000);
+  }
+
+  /**
+   * Detiene el carrusel automático si está activo.
+   */
+  stopAutoSlide(): void {
+    if (this.autoSlideInterval) clearInterval(this.autoSlideInterval);
+  }
+
+  /**
+   * Emite el evento para agregar el producto al carrito con la cantidad indicada.
+   * @param event Objeto con `{ product, quantity }`
+   */
+  onAddToCart(event: { product: ProductoDTO; quantity: number }) {
+    this.addToCart.emit(event);
+  }
+
+  /**
+   * Navega al detalle del producto construyendo la ruta a partir de `detailRouteBase`.
+   * Acepta rutas absolutas (inician con `/`) o relativas y pasa el producto en `history.state`.
+   */
+navigateToProductDetail(): void {
+  if (this.product?.id) {
+      const parts = this.detailRouteBase
+        .map(p => (p ? p.split('/') : []))
+        .reduce((acc: string[], cur: string[]) => acc.concat(cur), [])
+        .filter(seg => seg && seg.trim().length > 0);
+      const isAbsolute = this.detailRouteBase[0]?.startsWith('/') || false;
+      let basePrefix = '';
+      if (!isAbsolute) {
+        const currentPath = this.router.url.split('?')[0].split('#')[0];
+        const firstSeg = currentPath.split('/').filter(Boolean)[0] || '';
+        basePrefix = firstSeg ? `/${firstSeg}/` : '/';
+      }
+      const joined = [...parts, String(this.product.id)].join('/');
+      const normalized = (isAbsolute ? '/' : basePrefix) + joined;
+      this.router.navigateByUrl(normalized, {
+        state: { product: this.product, isLogin: this.isLogin }
+      });
+  }
+}
+
+
+  /**
+   * Abre WhatsApp para compartir información del producto con un mensaje
+   * basado en si el usuario tiene sesión iniciada.
+   */
+  shareProductOnWhatsapp(): void {
+    const url = this.shareBaseUrl;
+    let text = '';
+
+    if (this.isLogin) {
+      const precio = this.currencyPipe.transform(this.discount, this.product.precios[0].codigo_iso, 'code');
+      text = `¡Mira esto! ${this.product.name} por solo ${precio}`;
+    } else {
+      const id = this.product?.id ?? '';
+      text = `Hola, estoy interesado en el producto Referencia ${id}: ${this.product.name}`;
+    }
+
+    window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
+  }
+  /**
+   * Alterna la visibilidad del menú flotante de compartir en redes.
+   */
+  toggleShareMenu(): void {
+    this.shareMenuOpen = !this.shareMenuOpen;
+  }
+
+  /**
+   * Acciones de compartir en redes sociales soportadas.
+   * @param red Red a utilizar: `'whatsapp' | 'facebook' | 'instagram'`
+   */
+  touchRedes(red: 'whatsapp' | 'facebook' | 'instagram') {
+    const url = this.shareBaseUrl;
+    const name = this.product?.name ?? '';
+    if (red === 'whatsapp') {
+      const text = `Mira este producto: ${name} - ${url}`;
+      window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`,'_blank');
+    }
+    if (red === 'facebook') {
+      const fbUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+      window.open(fbUrl,'_blank','noopener');
+    }
+  }
+
+}