lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/menu-item1/menu-item1.component.ts

@@ -0,0 +1,117 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MenuItem, MenuEvent } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'app-menu-item1',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './menu-item1.component.html',
+  styleUrls: ['./menu-item1.component.scss']
+})
+export class MenuItem1Component implements OnInit {
+  @Input() item!: MenuItem;
+  @Input() showIcons: boolean = true;
+  @Input() showBadges: boolean = true;
+  @Input() collapsed: boolean = false;
+  @Input() depth: number = 0;
+  @Input() maxDepth: number = 3;
+  @Input() activeItemId?: string;
+  @Input() isItemExpanded: boolean = false;
+  @Input() expandedItems?: Set<string>; // Para acceder al Set de items expandidos
+
+  @Output() menuEvent = new EventEmitter<MenuEvent>();
+
+  hasSubItems = false;
+
+  ngOnInit() {
+    this.hasSubItems = !!(this.item.items && this.item.items.length > 0);
+  }
+
+  getItemClasses(): string {
+    const classes = ['menu-item'];
+    
+    if (this.item.disabled) {
+      classes.push('menu-item-disabled');
+    }
+    
+    if (this.activeItemId === this.item.id) {
+      classes.push('menu-item-active');
+    }
+    
+    if (this.item.class) {
+      classes.push(this.item.class);
+    }
+    
+    return classes.join(' ');
+  }
+
+  getLinkClasses(): string {
+    const classes = [];
+    
+    if (this.item.disabled) {
+      classes.push('menu-link-disabled');
+    }
+    
+    return classes.join(' ');
+  }
+
+  getBadgeClasses(): string {
+    const classes = ['badge'];
+    
+    if (this.item.badgeClass) {
+      classes.push(this.item.badgeClass);
+    } else {
+      classes.push('badge-primary');
+    }
+    
+    return classes.join(' ');
+  }
+
+  onItemClick(event: Event) {
+    if (this.item.disabled) {
+      return;
+    }
+
+    // Prevenir propagación del evento para evitar múltiples clicks
+    event.stopPropagation();
+
+    this.menuEvent.emit({
+      type: 'click',
+      item: this.item,
+      event: event
+    });
+  }
+
+  onItemHover(event: Event) {
+    if (this.item.disabled) {
+      return;
+    }
+
+    this.menuEvent.emit({
+      type: 'hover',
+      item: this.item,
+      event: event
+    });
+  }
+
+  onItemLeave(event: Event) {
+    // Opcional: emitir evento de salida del hover
+    if (this.item.disabled) {
+        // eslint-disable-next-line no-console
+      console.log('Elemento de menú deshabilitado', event);
+      return;
+    }
+  }
+
+  onSubMenuEvent(event: MenuEvent) {
+    // Propagar eventos de submenús hacia arriba
+    this.menuEvent.emit(event);
+  }
+
+  // Método para verificar si un subitem está expandido
+  isSubItemExpanded(itemId: string): boolean {
+    return this.expandedItems?.has(itemId) ?? false;
+  }
+} 

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/paginator-pg/paginator-pg.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { PaginatorModule } from 'primeng/paginator';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-paginator-pg',
+  standalone: true,
+  imports: [CommonModule, NgTemplateOutlet, PaginatorModule, PrimegModule],
+  templateUrl: './paginator-pg.html',
+})
+export class PaginatorPgComponent {
+
+
+     componente: ComponentesDTO = {
+        id: 36,
+        nombreComponente: 'lib-paginator-pg',
+        version: '1.0',
+        descripcion: 'Componente paginador personalizado echo en primeng'
+      };
+    
+  // datos para paginación
+  @Input() data: unknown[] = [];
+  // número total de registros por página
+  @Input() rows = 10;
+
+  // opciones de filas por página
+  @Input() rowsPerPageOptions: number[] = [10, 20, 50];
+
+  // habilitar/deshabilitar paginador
+  @Input() showCurrentPageReport = true;
+
+    // plantilla para el reporte de página
+  @Input() currentPageReportTemplate = 'Mostrando {first} a {last} de {totalRecords} ítems';
+
+  // Template para renderizar los ítems (se recibe desde el padre)
+  @Input() itemTemplate!: TemplateRef<unknown>;
+
+  first = 0;
+
+  onPage(event: { first?: number; rows?: number; page?: number; pageCount?: number }) {
+    this.first = event.first ?? 0;
+    this.rows = event.rows ?? this.rows;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/paginator-pg/paginator-pg.html

@@ -0,0 +1,26 @@
+@if (data && data.length) {
+	<ng-container
+		*ngTemplateOutlet="itemTemplate; context: { $implicit: data.slice(first, first + rows) }">
+	</ng-container>
+
+	<p-paginator
+		[rows]="rows"
+		[totalRecords]="data.length"
+		[first]="first"
+		[rowsPerPageOptions]="rowsPerPageOptions"
+		[showCurrentPageReport]="showCurrentPageReport"
+		[currentPageReportTemplate]="currentPageReportTemplate"
+		(onPageChange)="onPage($event)">
+	</p-paginator>
+} @else {
+	<div class="text-center text-gray-500 py-6">No hay datos para mostrar</div>
+	<p-paginator
+		[rows]="rows"
+		[totalRecords]="0"
+		[first]="0"
+		[rowsPerPageOptions]="rowsPerPageOptions"
+		[showCurrentPageReport]="showCurrentPageReport"
+		[currentPageReportTemplate]="currentPageReportTemplate">
+	</p-paginator>
+}
+

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/select-input1/select-input1.component.css

@@ -0,0 +1,8 @@
+.language-flag {
+    width: 20px;
+    height: 15px;
+    margin-right: 10px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/select-input1/select-input1.component.html

@@ -0,0 +1,8 @@
+<div class="input-group mb-3">
+  <ion-select placeholder="{{'lenguage'| translate}}"   [(ngModel)]="seleccionada" (ionChange)=cambiaLang(seleccionada) >
+    <ion-select-option  *ngFor="let i of lenguages"  [value]="i">{{i}}
+    </ion-select-option>
+  </ion-select>
+
+</div>
+

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/select-input1/select-input1.component.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/select-input1/select-input1.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { IonicModule } from '@ionic/angular';
+import { CoreModuleLib } from '../../../../modulos/core.lib.module';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-select-input1',
+  standalone: true,
+  imports: [CoreModuleLib,IonicModule,FormsModule,CommonModule],
+  templateUrl: './select-input1.component.html',
+  styleUrl: './select-input1.component.css'
+})
+export class SelectInput1Component {
+
+  componente: ComponentesDTO = {
+    id: 13,
+    nombreComponente: 'lib-select-input1',
+    version: '1.0',
+  };
+
+  seleccionada:string ="";
+
+  @Input()
+  lenguages :string[] =[]
+
+  constructor(private translate: TranslateService,
+  ){}
+
+  cambiaLang(event:string){
+    this.translate.use(event);
+     
+   }
+
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/sh-wats-button-card/sh-wats-button-card.html

@@ -0,0 +1,10 @@
+ <p-button
+              (click)="shareProductOnWhatsapp()"
+              pTooltip="Cotizar"
+              tooltipPosition="top"
+              icon="pi pi-whatsapp"
+              label="Cotizar"
+              styleClass="w-full font-bold border-round-lg shadow-3  hover-zoom"
+              class="w-full"
+            >
+            </p-button>

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/sh-wats-button-card/sh-wats-button-card.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/sh-wats-button-card/sh-wats-button-card.ts

@@ -0,0 +1,44 @@
+import { Component ,Input} from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ProductoDTO } from '@juliaosistem/core-dtos';
+import { CurrencyPipe } from '@angular/common';
+
+
+@Component({
+  selector: 'lib-sh-wats-button-card',
+  imports: [PrimegModule],
+  templateUrl: './sh-wats-button-card.html',
+  styleUrl: './sh-wats-button-card.css',
+  providers: [CurrencyPipe]
+})
+export class ShWatsButtonCard {
+
+  // producto a compartir
+  @Input() product : ProductoDTO = {} as ProductoDTO;
+
+  // indica si el usuario está logueado
+  @Input() isLogin: boolean = false;
+
+  // descuento del producto
+  @Input() discount: number = 0;
+
+   constructor(
+    private currencyPipe: CurrencyPipe,
+  ) {}
+
+  shareProductOnWhatsapp(): void {
+    const url = window.location.href;
+    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');
+  }
+
+}

package/projects/lib-common-angular/src/lib/componentes/shared/interfaces/dynamic-field.interface.ts

@@ -0,0 +1,86 @@
+import { DynamicField } from '@juliaosistem/core-dtos';
+
+export class DynamicEntity {
+  id?: string;
+  name?: string;
+  fields: DynamicField[] = [];
+  
+  constructor(data?: Partial<DynamicEntity>) {
+    if (data) {
+      Object.assign(this, data);
+    }
+  }
+
+  // Agregar un campo
+  addField(field: DynamicField): void {
+    this.fields.push(field);
+  }
+
+  // Obtener campo por clave
+  getField(key: string): DynamicField | undefined {
+    return this.fields.find(field => field.key === key);
+  }
+
+  // Obtener valor de un campo
+  getFieldValue<T = unknown>(key: string): T | undefined {
+    const field = this.getField(key);
+    return field?.value as T;
+  }
+
+  // Establecer valor de un campo
+  setFieldValue(key: string, value: unknown): void {
+    const field = this.getField(key);
+    if (field) {
+      field.value = value;
+    }
+  }
+
+  // Obtener campos ordenados
+  getOrderedFields(): DynamicField[] {
+    return this.fields.sort((a, b) => (a.order || 0) - (b.order || 0));
+  }
+
+  // Convertir a objeto plano para APIs
+  toPlainObject(): Record<string, unknown> {
+    const obj: Record<string, unknown> = {};
+    if (this.id) obj['id'] = this.id;
+    if (this.name) obj['name'] = this.name;
+    
+    this.fields.forEach(field => {
+      obj[field.key] = field.value;
+    });
+    
+    return obj;
+  }
+
+  // Crear desde objeto plano
+  static fromPlainObject(data: Record<string, unknown>, fieldDefinitions: Omit<DynamicField, 'value'>[]): DynamicEntity {
+    const entity = new DynamicEntity({
+      id: data['id'] as string,
+      name: data['name'] as string
+    });
+
+    fieldDefinitions.forEach(def => {
+      entity.addField({
+        ...def,
+        value: data[def.key]
+      });
+    });
+
+    return entity;
+  }
+
+  // Método auxiliar simplificado para crear definiciones básicas
+  static createBasicFieldDefinitions(): Omit<DynamicField, 'value'>[] {
+    return [
+      { key: 'name', type: 'text', label: 'Name', order: 1 },
+      { key: 'category', type: 'text', label: 'Category', order: 2 },
+      { key: 'price', type: 'number', label: 'Price', order: 3 },
+      { key: 'image', type: 'img', label: 'Image', order: 4 },
+    ];
+  }
+}
+export {
+  DynamicField // Agregar un campo
+};
+

package/projects/lib-common-angular/src/lib/componentes/shared/interfaces/menu.interface.ts

@@ -0,0 +1,98 @@
+
+import {MenuItem,MenuConfig} from '@juliaosistem/core-dtos';
+
+
+// Interfaz para el servicio de menú
+export interface MenuService {
+  getMenuConfig(menuId: string): Promise<MenuConfig>;
+  updateMenuConfig(menuId: string, config: MenuConfig): Promise<void>;
+  getMenuItems(menuId: string): Promise<MenuItem[]>;
+  addMenuItem(menuId: string, item: MenuItem): Promise<void>;
+  removeMenuItem(menuId: string, itemId: string): Promise<void>;
+  updateMenuItem(menuId: string, itemId: string, item: Partial<MenuItem>): Promise<void>;
+}
+
+// Clase para manejar la lógica del menú
+export class MenuManager {
+  private config: MenuConfig;
+
+  constructor(config: MenuConfig) {
+    this.config = config;
+  }
+
+  // Obtener elementos visibles
+  getVisibleItems(): MenuItem[] {
+    return this.filterVisibleItems(this.config.items);
+  }
+
+  // Filtrar elementos visibles recursivamente
+  private filterVisibleItems(items: MenuItem[]): MenuItem[] {
+    return items
+      .filter(item => item.visible !== false)
+      .map(item => ({
+        ...item,
+        items: item.items ? this.filterVisibleItems(item.items) : undefined
+      }));
+  }
+
+  // Obtener elementos ordenados
+  getOrderedItems(): MenuItem[] {
+    return this.sortItems(this.getVisibleItems());
+  }
+
+  // Ordenar elementos recursivamente
+  private sortItems(items: MenuItem[]): MenuItem[] {
+    return items
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map(item => ({
+        ...item,
+        items: item.items ? this.sortItems(item.items) : undefined
+      }));
+  }
+
+  // Buscar elemento por ID
+  findItemById(itemId: string): MenuItem | null {
+    return this.findItemRecursive(this.config.items, itemId);
+  }
+
+  // Búsqueda recursiva de elementos
+  private findItemRecursive(items: MenuItem[], itemId: string): MenuItem | null {
+    for (const item of items) {
+      if (item.id === itemId) {
+        return item;
+      }
+      if (item.items) {
+        const found = this.findItemRecursive(item.items, itemId);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  // Verificar permisos de un elemento
+  hasPermission(item: MenuItem, userPermissions: string[]): boolean {
+    if (!item.permissions || item.permissions.length === 0) {
+      return true;
+    }
+    return item.permissions.some(permission => userPermissions.includes(permission));
+  }
+
+  // Filtrar elementos por permisos
+  filterByPermissions(userPermissions: string[]): MenuItem[] {
+    return this.filterItemsByPermissions(this.config.items, userPermissions);
+  }
+
+  // Filtrado recursivo por permisos
+  private filterItemsByPermissions(items: MenuItem[], userPermissions: string[]): MenuItem[] {
+    return items
+      .filter(item => this.hasPermission(item, userPermissions))
+      .map(item => ({
+        ...item,
+        items: item.items ? this.filterItemsByPermissions(item.items, userPermissions) : undefined
+      }));
+  }
+} 
+
+export {
+  MenuItem,
+  MenuConfig,}

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

@@ -0,0 +1,132 @@
+<!-- Diálogo de edición CRUD -->
+<p-dialog
+  [visible]="visible"
+  [modal]="true"
+  [style]="{ width: '450px' }"
+  header="Item Details"
+  styleClass="p-fluid"
+  [dismissableMask]="true"
+  (onHide)="onDialogHide()"
+  (visibleChange)="onVisibilityChange($event)"
+>
+  <ng-template #content>
+    <ng-container *ngTemplateOutlet="body || defaultbody"> </ng-container>
+  </ng-template>
+  <ng-template #defaultbody>
+    <form [formGroup]="itemForm">
+      @for (field of displayFields; track field.key) {
+        <div class="field">
+          <label [for]="field.key">
+            {{ field.label }}
+          </label>
+
+          @switch (field.type) {
+            @case ("text") {
+              <input
+                pInputText
+                [id]="field.key"
+                [formControlName]="field.key"
+                [placeholder]="'Enter ' + field.label"
+              />
+            }
+            @case ("number") {
+              <p-inputNumber
+                [id]="field.key"
+                [formControlName]="field.key"
+                mode="decimal"
+                [placeholder]="'Enter ' + field.label"
+              />
+            }
+            @case ("checkbox") {
+              <p-checkbox
+                [id]="field.key"
+                [formControlName]="field.key"
+                [binary]="true"
+                class="flex align-items-center gap-2"
+              />
+            }
+            @case ("select") {
+              <p-select
+                [id]="field.key"
+                [formControlName]="field.key"
+                [options]="getSelectOptions(field.key)"
+                optionLabel="label"
+                optionValue="value"
+                [placeholder]="'Select ' + field.label"
+                [showClear]="true"
+              />
+            }
+            @case ("img") {
+              <!-- ✅ FileUpload de PrimeNG para imágenes -->
+              <div class="file-upload-container">
+                <p-fileUpload
+                  [multiple]="false"
+                  [accept]="field.accept || 'image/*'"
+                  [maxFileSize]="field.maxFileSize || 5242880"
+                  [showUploadButton]="false"
+                  [showCancelButton]="false"
+                  [chooseLabel]="'Choose ' + field.label"
+                  [chooseIcon]="'pi pi-upload'"
+                  [auto]="false"
+                  (onSelect)="onFileSelect($event, field.key)"
+                  (onRemove)="onFileRemove(field.key)"
+                  styleClass="w-full"
+                >
+                </p-fileUpload>
+              </div>
+            }
+            @case ("file") {
+              <!-- FileUpload de PrimeNG para PDF, Excel, etc. -->
+              <div class="file-upload-container">
+                <p-fileUpload
+                  [multiple]="false"
+                  [accept]="field.accept || '.pdf,.xls,.xlsx'"
+                  [maxFileSize]="field.maxFileSize || 10485760"
+                  [showUploadButton]="false"
+                  [showCancelButton]="false"
+                  [chooseLabel]="'Seleccionar ' + field.label"
+                  [chooseIcon]="'pi pi-upload'"
+                  [auto]="false"
+                  (onSelect)="onFileSelect($event, field.key)"
+                  (onRemove)="onFileRemove(field.key)"
+                  styleClass="w-full"
+                ></p-fileUpload>
+
+                <!--  Mostrar nombre del archivo seleccionado -->
+                @if (itemForm.get(field.key)?.value) {
+                  <small class="text-gray-500">
+                    Archivo: {{ itemForm.get(field.key)?.value }}
+                  </small>
+                }
+              </div>
+            }
+
+            @default {
+              <input
+                pInputText
+                [id]="field.key"
+                [formControlName]="field.key"
+                [placeholder]="'Enter ' + field.label"
+              />
+            }
+          }
+        </div>
+      }
+    </form>
+  </ng-template>
+
+  <ng-template #footer>
+    <p-button
+      label="Cancel"
+      icon="pi pi-times"
+      [text]="true"
+      (click)="hideDialog()"
+    />
+    <p-button
+      label="Save"
+      icon="pi pi-check"
+      [text]="true"
+      (click)="saveItem()"
+    />
+  </ng-template>
+</p-dialog>