lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular-demo/public/assets/layout/variables/_light.scss

@@ -0,0 +1,5 @@
+:root {
+    --surface-ground: var(--p-surface-100);
+    --code-background: var(--p-surface-900);
+    --code-color: var(--p-surface-200);
+}

package/projects/lib-common-angular-demo/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet />

package/projects/lib-common-angular-demo/src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+standalone: true,
+})
+export class AppComponent {
+  title = 'lib-common-angular-demo';
+}

package/projects/lib-common-angular-demo/src/app/app.config.server.ts

@@ -0,0 +1,12 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+    // If you need routing, configure it with the correct provider from the appropriate Angular package
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

package/projects/lib-common-angular-demo/src/app/app.config.ts

@@ -0,0 +1,22 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+// import Aura from '@primeng/themes/aura';
+// import { providePrimeNG } from 'primeng/config';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { routes } from './app.routes';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { ConfirmationService, MessageService } from 'primeng/api';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), 
+      provideAnimations(),
+    provideHttpClient(withFetch()),
+    provideClientHydration(withEventReplay()),
+
+    MessageService,
+    ConfirmationService,
+  ]
+};

package/projects/lib-common-angular-demo/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

package/projects/lib-common-angular-demo/src/app/app.routes.ts

@@ -0,0 +1,86 @@
+import { Routes } from '@angular/router';
+import { DaskBoard3 } from 'lib-common-angular';
+import { 
+  defaultMenuConfig, 
+  adminMenuConfig, 
+  minimalMenuConfig, 
+  userMenuConfig,
+  permissionConfigs 
+} from './menu-configs';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: DaskBoard3,
+    data: {
+      menuConfig: defaultMenuConfig,
+      userPermissions: permissionConfigs.user
+    },
+    children: [
+      { 
+        path: '', 
+        component: DaskBoard3,
+        data: {
+          menuConfig: defaultMenuConfig,
+          userPermissions: permissionConfigs.user
+        }
+      },
+      { 
+        path: 'admin', 
+        component: DaskBoard3,
+        data: {
+          menuConfig: adminMenuConfig,
+          userPermissions: permissionConfigs.admin
+        }
+      },
+      { 
+        path: 'minimal', 
+        component: DaskBoard3,
+        data: {
+          menuConfig: minimalMenuConfig,
+          userPermissions: permissionConfigs.guest
+        }
+      },
+      { 
+        path: 'user', 
+        component: DaskBoard3,
+        data: {
+          menuConfig: userMenuConfig,
+          userPermissions: permissionConfigs.user
+        }
+      },
+      { 
+        path: 'navigation', 
+        component: DaskBoard3,
+        data: {
+          menuConfig: defaultMenuConfig,
+          userPermissions: permissionConfigs.user
+        }
+      },
+      { 
+        path: 'pages', 
+        loadChildren: () => import('./pages.routes'),
+        data: {
+          menuConfig: defaultMenuConfig,
+          userPermissions: permissionConfigs.user
+        }
+      },
+        { 
+        path: 'documentation', 
+        loadChildren: () => import('./doc.routes'),
+        data: {
+          menuConfig: defaultMenuConfig,
+          userPermissions: permissionConfigs.user
+        }
+      },
+      { 
+        path: 'componentes', 
+        loadChildren: () => import('./componentes.routes'),
+        data: {
+          menuConfig: defaultMenuConfig,
+          userPermissions: permissionConfigs.user
+        }
+      }
+    ]
+  }
+];

package/projects/lib-common-angular-demo/src/app/componentes/crud/crud.component.html

@@ -0,0 +1,43 @@
+<lib-crud 
+    [submitted]="submitted"
+    [loaded]="loaded"
+    [tableType]="tableType"
+    [data]="data"
+    [fieldTypeConfig]="fieldTypeConfig"
+    [fieldLabels]="fieldLabels"
+    [fieldOrder]="fieldOrder"
+    [excludeFields]="excludeFields"
+    [fieldSelectOptions]="fieldSelectOptions"
+    (dataChange)="onDataChanged($event)"
+    (editItemRequest)="onEditItemRequest($any($event))"
+    (newItemRequest)="onNewItemRequest()"
+    (itemSaved)="onItemSaved()"
+    (dialogCanceled)="onDialogCanceled()">
+</lib-crud>
+
+<!-- Diálogo CRUD manejado desde el componente demo -->
+<!-- Dialog CRUD -->
+<lib-crud-dialog1
+    #crudDialog
+    [(visible)]="showDialog"
+    [displayFields]="$any(dialogDisplayFields)"
+    [currentItem]="dialogCurrentItem"
+    [fieldSelectOptions]="dialogFieldSelectOptions"
+    [body]="productDialogTemplate"
+    showDefaultHeader="true"
+    (save)="onDialogSave($any($event))"
+    (cancel)="onDialogCancel()">
+    [showDefault]
+</lib-crud-dialog1>
+
+<!-- Template para el body del dialog -->
+<ng-template #productDialogTemplate>
+    <lib-product-dialog1
+        [productDialog]="true"
+        [product]="dialogCurrentItem"
+        [statuses]="['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']"
+        [triggerSave]="crudDialog.triggerSave"
+        (onSave)="onProductSave($event)"
+        (onCancel)="onProductCancel()">
+    </lib-product-dialog1>
+</ng-template>

package/projects/lib-common-angular-demo/src/app/componentes/crud/crud.component.spec.ts

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

package/projects/lib-common-angular-demo/src/app/componentes/crud/crud.component.ts

@@ -0,0 +1,243 @@
+import { Component,OnInit, ViewChild } from '@angular/core';
+import { Crud, CrudDialog1Component, ProductDialog1Component } from 'lib-common-angular';
+import { FieldType } from '@juliaosistem/core-dtos';
+import { Product } from '../../core/services/product.service';
+import { Table } from 'primeng/table';
+import { TablaDataSharedDTO } from 'juliaositembackenexpress/dist/api/dtos/componentes-common-lib-angular/tablaDataSharedDTO';
+
+import { Menu } from 'primeng/menu';
+
+@Component({
+  selector: 'app-crud',
+  imports: [CrudDialog1Component, ProductDialog1Component,Crud], 
+  templateUrl: './crud.component.html',
+  styleUrl: './crud.component.scss',
+  standalone: true,
+  providers: [] // Sin providers específicos por ahora
+
+})
+export class CrudComponent implements  OnInit {
+
+    productDialog: boolean = false;
+    submitted: boolean = false;
+    showDialog: boolean = false;
+    dialogCurrentItem: Record<string, unknown> = {};
+    dialogDisplayFields: unknown[] = [];
+dialogFieldSelectOptions: Record<string, { label: string; value: string }[]> = {};
+
+// aqui tienes q implementar la logica para el crud 
+// traerte los servicios de la libreria
+// y el crud.ts solo debe entender lo generico
+ @ViewChild('dt') dt!: Table;
+ loaded :boolean = false;
+
+ // ✅ Propiedad para controlar el tipo de vista
+ tableType: 'table' | 'grid' = 'table';
+
+ tablaDataSharedDTO: TablaDataSharedDTO<Menu, Product> = new TablaDataSharedDTO<Menu, Product>();
+  
+ constructor(
+         
+      ) {}
+
+  exportCSV() {
+        this.dt.exportCSV();
+    }
+
+    ngOnInit() {
+        this.loadDemoData();
+    }
+
+    loadDemoData() {
+this.loaded = false;
+    }
+
+    // ✅ Datos dinámicos de ejemplo
+    data: Record<string, unknown>[] = [
+        {
+            id: '1',
+            name: 'Laptop Gaming Pro',
+            description: 'High-performance gaming laptop with advanced graphics',
+            inventoryStatus: 'INSTOCK',
+            category: 'Electronics',
+            price: 1299.99,
+            quantity: 25,
+            image: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=300&fit=crop'
+        },
+        {
+            id: '2',
+            name: 'Wireless Headphones',
+            description: 'Premium noise-canceling wireless headphones',
+            inventoryStatus: 'LOWSTOCK',
+            category: 'Electronics',
+            price: 199.99,
+            quantity: 8,
+            image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop'
+        },
+        {
+            id: '3',
+            name: 'Running Shoes',
+            description: 'Comfortable running shoes for daily exercise',
+            inventoryStatus: 'INSTOCK',
+            category: 'Fitness',
+            price: 89.99,
+            quantity: 50,
+            image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&h=300&fit=crop'
+        },
+        {
+            id: '4',
+            name: 'Cotton T-Shirt',
+            description: 'Premium cotton t-shirt with modern fit',
+            inventoryStatus: 'OUTOFSTOCK',
+            category: 'Clothing',
+            price: 29.99,
+            quantity: 0,
+            image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=300&fit=crop'
+        },
+        {
+            id: '5',
+            name: 'Leather Wallet',
+            description: 'Genuine leather wallet with multiple compartments',
+            inventoryStatus: 'INSTOCK',
+            category: 'Accessories',
+            price: 49.99,
+            quantity: 15,
+            image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=400&h=300&fit=crop'
+        }
+    ];
+
+    // ✅ Configuración de tipos para cada campo
+    fieldTypeConfig: Record<string, FieldType> = {
+        name: 'text',
+        description: 'text',
+        inventoryStatus: 'select',
+        category: 'select',
+        price: 'number',
+        quantity: 'number',
+        image: 'img'
+    };
+
+    // ✅ Configuración de opciones para campos de tipo select
+fieldSelectOptions: Record<string, { label: string; value: string }[]> = {
+    inventoryStatus: [
+        { label: 'INSTOCK', value: 'INSTOCK' },
+        { label: 'LOWSTOCK', value: 'LOWSTOCK' },
+        { label: 'OUTOFSTOCK', value: 'OUTOFSTOCK' }
+    ],
+    category: [
+        { label: 'Accessories', value: 'Accessories' },
+        { label: 'Clothing', value: 'Clothing' },
+        { label: 'Electronics', value: 'Electronics' },
+        { label: 'Fitness', value: 'Fitness' }
+    ]
+};
+
+private mapSelectOptions(options: Record<string, string[]>): Record<string, { label: string; value: string }[]> {
+  const mapped: Record<string, { label: string; value: string }[]> = {};
+  Object.keys(options).forEach(key => {
+    mapped[key] = options[key].map(opt => ({ label: opt, value: opt }));
+  });
+  return mapped;
+}
+
+    // ✅ Etiquetas personalizadas
+    fieldLabels: Record<string, string> = {
+        name: 'Name',
+        description: 'Description',
+        inventoryStatus: 'Inventory Status',
+        category: 'Category',
+        price: 'Price',
+        quantity: 'Quantity',
+        image: 'Image'
+    };
+    
+   
+
+    // ✅ Orden personalizado de columnas
+    fieldOrder: string[] = [
+        'name',
+        'description',
+        'image',
+        'inventoryStatus',
+        'category',
+        'price',
+        'quantity'
+    ];
+
+    // ✅ Campos a excluir de la vista
+    excludeFields: string[] = ['id'];
+
+    // ✅ Método para recibir cambios de datos del componente CRUD
+    onDataChanged(updatedData: Record<string, unknown>[]) {
+        this.data = [...updatedData]; // Actualizar la data local
+    }
+
+    // ✅ Métodos para manejar los eventos del dialog
+  onEditItemRequest(item: Record<string, unknown>) {
+    this.dialogCurrentItem = { ...item };
+    this.dialogDisplayFields = this.createDisplayFields();
+this.dialogFieldSelectOptions = this.fieldSelectOptions;
+    this.showDialog = true;
+}
+
+    onNewItemRequest() {
+    this.dialogCurrentItem = {};
+    this.dialogDisplayFields = this.createDisplayFields();
+this.dialogFieldSelectOptions = this.fieldSelectOptions;
+    this.showDialog = true;
+}
+
+    onDialogSave(savedItem: Record<string, unknown>) {
+        // Procesar el guardado localmente por ahora
+        if (savedItem['id']) {
+            // Actualizar item existente
+            const index = this.data.findIndex(item => item['id'] === savedItem['id']);
+            if (index !== -1) {
+                this.data[index] = { ...savedItem };
+            }
+        } else {
+            // Crear nuevo item
+            savedItem['id'] = Date.now().toString(); // ID temporal
+            this.data.push({ ...savedItem });
+        }
+        this.data = [...this.data]; // Trigger change detection
+        this.showDialog = false;
+    }
+
+    onDialogCancel() {
+        this.showDialog = false;
+        this.dialogCurrentItem = {};
+    }
+
+    onDialogCanceled() {
+        this.showDialog = false;
+    }
+
+    onItemSaved() {
+        // Método llamado cuando el CRUD confirma que se guardó el item
+        this.showDialog = false;
+    }
+
+    // ✅ Métodos para manejar el ProductDialog1Component
+    onProductSave(product: unknown) {
+        // Convertir el producto a Record<string, unknown> y procesarlo
+        const productItem = product as Record<string, unknown>;
+        this.onDialogSave(productItem);
+    }
+
+    onProductCancel() {
+        this.onDialogCancel();
+    }
+
+    private createDisplayFields() {
+        // Crear los campos de display basados en la configuración
+        return this.fieldOrder.map(fieldKey => ({
+            key: fieldKey,
+            type: this.fieldTypeConfig[fieldKey] || 'text',
+            label: this.fieldLabels[fieldKey] || fieldKey,
+            value: '',
+            required: false,
+            visible: !this.excludeFields.includes(fieldKey)
+        })).filter(field => field.visible);
+    }
+}

package/projects/lib-common-angular-demo/src/app/componentes/menu-navigation/menu-demo-visual.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MenuConfig, MenuComponent } from "lib-common-angular";
+
+@Component({
+  selector: 'app-menu-demo-visual',
+  standalone: true,
+  imports: [CommonModule, RouterModule, MenuComponent],
+  template: `
+    <div class="menu-demo-container">
+      <h4>Vista previa del menú real:</h4>
+      <div class="mock-menu-wrapper">
+        <lib-menu 
+          [menuConfig]="menuConfig" 
+          [userPermissions]="userPermissions"
+          class="demo-menu">
+        </lib-menu>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .menu-demo-container {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 16px 0;
+      background: #f9f9f9;
+      max-width: 300px;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .mock-menu-wrapper {
+      background: white;
+      border-radius: 4px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      max-height: 400px;
+      overflow-y: auto;
+      position: relative;
+      z-index: 1;
+    }
+    
+    /* Aislar estilos del menú demo */
+    .demo-menu {
+      position: static !important;
+      width: 100% !important;
+      height: auto !important;
+      box-shadow: none !important;
+      border: none !important;
+    }
+    
+    /* Evitar que afecte el layout principal */
+    :host {
+      contain: layout style;
+      isolation: isolate;
+    }
+    
+    /* Resetear cualquier posicionamiento absoluto del menú */
+    .demo-menu ::ng-deep * {
+      position: static !important;
+    }
+    
+    .demo-menu ::ng-deep .layout-sidebar,
+    .demo-menu ::ng-deep .sidebar {
+      position: static !important;
+      width: 100% !important;
+      height: auto !important;
+      transform: none !important;
+    }
+  `]
+})
+export class MenuDemoVisualComponent {
+  @Input() menuConfig!: MenuConfig;
+  @Input() userPermissions: string[] = [];
+}

package/projects/lib-common-angular-demo/src/app/componentes/menu-navigation/menu-navigation.component.html

@@ -0,0 +1,60 @@
+<!-- Demo de configuración de menús - No renderizar el menú real aquí -->
+<div class="menu-navigation">
+  <h2>Navegación de Menús</h2>
+  <p>Selecciona una ruta para ver diferentes configuraciones de menú:</p>
+
+  <div class="navigation-buttons">
+    <a routerLink="/" class="nav-button">
+      <i class="pi pi-home"></i>
+      <span>Menú por Defecto</span>
+      <p>Este es el que usa este dashboard</p>
+    </a>
+
+    <a routerLink="/admin" class="nav-button">
+      <i class="pi pi-cog"></i>
+      <span>Menú de Administrador</span>
+    </a>
+
+    <a routerLink="/minimal" class="nav-button">
+      <i class="pi pi-list"></i>
+      <span>Menú Minimalista</span>
+    </a>
+
+  </div>
+
+  <div class="relative">
+    <p>Ejemplo de configuraciones de menú:</p>
+    <lib-terminal [code]="menuPrivateConfig" language="typescript"> </lib-terminal>
+  </div>
+
+  <div class="info-panel">
+    <h3>Información de Configuración</h3>
+
+    <p><strong>Configuración de menú:</strong> Se carga automáticamente desde los datos de la ruta</p>
+
+    <lib-terminal [code]="codeExample" language="typescript"> </lib-terminal>
+    <p><strong>Permisos:</strong> Se aplican según el tipo de usuario se configuran de la siguiente forma </p>
+    <lib-terminal [code]="permisos" language="typescript"> </lib-terminal>
+
+    <p><strong>Como queda en la interfaz</strong> Se requiere llenar una interfaz para cargar la configuración del menú
+    </p>
+
+    <!-- Demo visual del menú -->
+    <app-menu-demo-visual [menuConfig]="userMenuConfig" [userPermissions]="permissionConfigs.custom">
+    </app-menu-demo-visual>
+
+    <a routerLink="/user" class="nav-button">
+      <i class="pi pi-user"></i>
+      <span>Menú de Usuario</span>
+    </a>
+    <p>Ejemplo de Router</p>
+
+    <div class="relative">
+
+      <lib-terminal [code]="router" language="typescript"> </lib-terminal>
+
+
+    </div>
+
+  </div>
+</div>

package/projects/lib-common-angular-demo/src/app/componentes/menu-navigation/menu-navigation.component.scss

@@ -0,0 +1,63 @@
+.menu-navigation {
+      padding: 2rem;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    
+    h2 {
+      color: #495057;
+      margin-bottom: 1rem;
+    }
+    
+    .navigation-buttons {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin: 2rem 0;
+    }
+    
+    .nav-button {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 1rem;
+      background: #ffffff;
+      border: 1px solid #dee2e6;
+      border-radius: 0.5rem;
+      text-decoration: none;
+      color: #495057;
+      transition: all 0.2s ease;
+    }
+    
+    .nav-button:hover {
+      background: #f8f9fa;
+      border-color: #3b82f6;
+      color: #3b82f6;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .nav-button i {
+      font-size: 1.2rem;
+    }
+    
+    .info-panel {
+      background: #f8f9fa;
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      margin-top: 2rem;
+    }
+    
+    .info-panel h3 {
+      color: #495057;
+      margin-bottom: 1rem;
+    }
+    
+    .info-panel p {
+      margin: 0.5rem 0;
+      color: #6c757d;
+    }
+    
+    .info-panel strong {
+      color: #495057;
+    }