lib-common-angular 0.0.9 → 0.0.11

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

@@ -0,0 +1,20 @@
+<lib-crud-doc
+  [component]="Crud"
+  [title]="'lib-crud Demo Completo'"
+  [description]="'CRUD dinámico con tabla/grid, sin modal externo.'"
+  [exampleCode]="exampleCode"
+  [inputsDocs]="inputsDocs"
+  [outputsDocs]="outputsDocs"
+  [demoInputs]="{
+    data: users(),
+    rows: 5,
+    paginator: true,
+    tableType: 'table'
+  }"
+  [demoOutputs]="{
+    newItemRequest: onNewItem.bind(this),
+    editItemRequest: onEditItem.bind(this),
+    itemSaved: onItemSaved.bind(this),
+    dialogCanceled: onDialogCanceled.bind(this)
+  }">
+</lib-crud-doc>

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

@@ -0,0 +1,67 @@
+import { Component, signal } from '@angular/core';
+import { Crud, CrudDocComponent, PrimegModule } from 'lib-common-angular';
+
+@Component({
+  selector: 'app-crud-doc-page',
+  standalone: true,
+  imports: [PrimegModule, CrudDocComponent, Crud],
+  templateUrl: './crud-doc-page.component.html'
+})
+export class CrudDocPageComponent {
+  // Componente demo
+  Crud = Crud;
+
+  // Datos de ejemplo
+  users = signal([
+    { id: 1, name: 'Ana Pérez', email: 'ana@example.com', role: 'Admin' },
+    { id: 2, name: 'Carlos Ruiz', email: 'carlos@example.com', role: 'User' }
+  ]);
+
+  // --- Eventos CRUD ---
+  onNewItem() {
+  }
+
+  onEditItem(item: any) {
+  }
+
+  onItemSaved(item: any) {
+  }
+
+  onDialogCanceled() {
+  }
+
+  // --- Documentación ---
+  exampleCode = `
+<lib-crud
+  [data]="users"
+  [rows]="5"
+  [paginator]="true"
+  (newItemRequest)="onNewItem()"
+  (editItemRequest)="onEditItem($event)"
+  (itemSaved)="onItemSaved($event)"
+  (dialogCanceled)="onDialogCanceled()">
+</lib-crud>
+`;
+
+  // Documentación de Inputs
+  inputsDocs = [
+    { name: 'data', type: 'any[]', description: 'Datos que se muestran en la tabla o grid.' },
+    { name: 'rows', type: 'number', description: 'Número de filas por página.' },
+    { name: 'paginator', type: 'boolean', description: 'Habilita paginación.' },
+    { name: 'tableType', type: `'table' | 'grid'`, description: 'Tipo de vista (tabla o grid).' },
+    { name: 'fieldTypeConfig', type: 'Record<string, FieldType>', description: 'Configuración de tipo de cada campo.' },
+    { name: 'fieldLabels', type: 'Record<string, string>', description: 'Etiquetas personalizadas para cada campo.' },
+    { name: 'fieldOrder', type: 'string[]', description: 'Orden de las columnas.' },
+    { name: 'excludeFields', type: 'string[]', description: 'Campos a excluir de la vista.' },
+    { name: 'fieldSelectOptions', type: 'Record<string,string[]>', description: 'Opciones para campos select dinámicos.' },
+  ];
+
+  // Documentación de Outputs
+  outputsDocs = [
+    { name: 'newItemRequest', type: 'EventEmitter<void>', description: 'Se dispara al solicitar un nuevo item.' },
+    { name: 'editItemRequest', type: 'EventEmitter<any>', description: 'Se dispara al solicitar editar un item existente.' },
+    { name: 'itemSaved', type: 'EventEmitter<any>', description: 'Se dispara cuando un item se guarda.' },
+    { name: 'dialogCanceled', type: 'EventEmitter<void>', description: 'Se dispara al cancelar el diálogo de edición.' },
+    { name: 'dataChange', type: 'EventEmitter<any[]>', description: 'Se dispara cuando los datos cambian (p. ej., al eliminar).' }
+  ];
+}

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

@@ -0,0 +1,5 @@
+import { Routes } from '@angular/router';
+import { CrudDocPageComponent } from './doc/crud/crud-doc-page.component';
+export default [
+   { path: 'crud', component: CrudDocPageComponent },
+] as Routes;

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

@@ -0,0 +1,336 @@
+import { MenuConfig } from 'lib-common-angular';
+
+// Configuración de menú por defecto
+export const defaultMenuConfig: MenuConfig = {
+  id: 'dashboard3-menu',
+  name: 'Dashboard 3 Menu',
+  items: [
+      {
+          id: 'home',
+          label: 'Home',
+          icon: 'pi pi-fw pi-home',
+          type: 'group',
+         
+          order: 1,
+          items: [
+              {
+                  id: 'dashboard 3',
+                  label: 'Dashboard 3',
+                  icon: 'pi pi-fw pi-home',
+                  routerLink: ['/'],
+                  type: 'item',
+                  order: 1
+              },         
+          ]
+      },
+      {
+          id: 'ui-components',
+          label: 'UI Components',
+          icon: 'pi pi-fw pi-palette',
+          type: 'group',
+          order: 2,
+          items: [
+              {
+                  id: 'card-productos',
+                  label: 'card-productos',
+                  icon: 'pi-shopping-cart',
+                  routerLink: ['/componentes/card-productos'],
+                  type: 'item',
+                  order: 1
+              },
+                {
+                  id: 'detalle-carrito',
+                  label: 'Detalle Carrito',
+                  icon: 'pi-shopping-cart',
+                  routerLink: ['/componentes/detalle-carrito'],
+                  type: 'item',
+                  order: 2
+              },
+           
+              {
+                  id: 'table',
+                  label: 'Table',
+                  icon: 'pi pi-fw pi-table',
+                  routerLink: ['/componentes/crud'],
+                  type: 'group',
+                  order: 5,   
+                 items:[
+                       {
+                  id: 'crud',
+                  label: 'Crud',
+                  icon: 'pi pi-fw pi-pencil',
+                  routerLink: ['/componentes/crud'],
+                  type: 'item',
+                  order: 1,
+                  permissions: ['pages.crud.read']
+              },  
+                 ]
+                },
+              
+              {
+                  id: 'menu',
+                  label: 'Menu',
+                  icon: 'pi pi-fw pi-bars',
+                  routerLink: ['/pages/menu-navigation'],
+                  type: 'group',
+                  order: 11,
+                  items: [
+                                    {
+                            id: 'admin',
+                            label: 'Admin',
+                            icon: 'pi pi-fw pi-pencil',
+                            routerLink: ['/admin'],
+                            type: 'item',
+                            order: 1,
+                          },
+                          {
+                            id: 'minimal',
+                            label: 'Minimal',
+                            icon: 'pi pi-fw pi-pencil',
+                            routerLink: ['/minimal'],
+                            type: 'item',
+                            order: 1,
+                          },
+                          {
+                          id: 'user',
+                          label: 'User',
+                          icon: 'pi pi-fw pi-pencil',
+                          routerLink: ['/user'],
+                          type: 'item',
+                          order: 1,
+                        }
+                  ]
+              },
+          ]
+      },
+      {
+          id: 'pages',
+          label: 'Pages',
+          icon: 'pi pi-fw pi-briefcase',
+          type: 'group',
+          order: 3,
+          items: [
+              {
+                  id: 'ecommerce1',
+                  label: 'ecommerce1',
+                  icon: 'pi pi-fw pi-globe',
+                  routerLink: ['/pages/ecommerce1'],
+                  type: 'item',
+                  order: 1
+              },
+           
+            
+              {
+                  id: 'not-found',
+                  label: 'Not Found',
+                  icon: 'pi pi-fw pi-exclamation-circle',
+                  routerLink: ['/pages/notfound'],
+                  type: 'item',
+                  order: 5
+              },
+          ]
+      },
+
+        {
+      id: 'doc',
+      label: 'Documentación',
+      icon: 'pi pi-fw pi-book',
+      type: 'group',
+      order: 3,
+      items: [
+        {
+          id: 'crud-doc',
+          label: 'Crud',
+          icon: 'pi pi-fw pi-file',
+          routerLink: ['/documentation/crud'],
+          type: 'item',
+          order: 1
+        },
+/*         {
+          id: 'table-doc',
+          label: 'Table Docs',
+          icon: 'pi pi-fw pi-table',
+          routerLink: ['/doc/table'],
+          type: 'item',
+          order: 2
+        }, */
+   /*      {
+          id: 'form-doc',
+          label: 'Form Docs',
+          icon: 'pi pi-fw pi-file-edit',
+          routerLink: ['/doc/form'],
+          type: 'item',
+          order: 3
+        } */
+      ]
+    }
+  ],
+  theme: 'light',
+  orientation: 'horizontal',
+  collapsible: true,
+  showIcons: true,
+  showBadges: true,
+  maxDepth: 4
+};
+
+// Configuración de menú de administrador
+export const adminMenuConfig: MenuConfig = {
+  id: 'admin-menu',
+  name: 'Admin Menu',
+  items: [
+    {
+      id: 'administration',
+      label: 'Administración',
+      icon: 'pi pi-fw pi-cog',
+      type: 'group',
+      order: 1,
+      items: [
+        {
+          id: 'users',
+          label: 'Usuarios',
+          icon: 'pi pi-fw pi-users',
+          routerLink: ['/admin/users'],
+          type: 'item',
+          order: 1,
+          permissions: ['admin.users.read']
+        },
+        {
+          id: 'roles',
+          label: 'Roles',
+          icon: 'pi pi-fw pi-shield',
+          routerLink: ['/admin/roles'],
+          type: 'item',
+          order: 2,
+          permissions: ['admin.roles.read']
+        },
+        {
+          id: 'settings',
+          label: 'Configuración',
+          icon: 'pi pi-fw pi-cog',
+          routerLink: ['/admin/settings'],
+          type: 'item',
+          order: 3,
+          permissions: ['admin.settings.read']
+        }
+      ]
+    },
+    {
+      id: 'reports',
+      label: 'Reportes',
+      icon: 'pi pi-fw pi-file',
+      type: 'group',
+      order: 2,
+      items: [
+        {
+          id: 'sales-report',
+          label: 'Reporte de Ventas',
+          icon: 'pi pi-fw pi-chart-line',
+          routerLink: ['/reports/sales'],
+          type: 'item',
+          order: 1,
+          permissions: ['reports.sales.read']
+        },
+        {
+          id: 'inventory-report',
+          label: 'Reporte de Inventario',
+          icon: 'pi pi-fw pi-box',
+          routerLink: ['/reports/inventory'],
+          type: 'item',
+          order: 2,
+          permissions: ['reports.inventory.read']
+        }
+      ]
+    }
+  ],
+  theme: 'light',
+  orientation: 'vertical',
+  collapsible: true,
+  showIcons: true,
+  showBadges: true,
+  maxDepth: 3
+};
+
+// Configuración de menú minimalista
+export const minimalMenuConfig: MenuConfig = {
+  id: 'minimal-menu',
+  name: 'Minimal Menu',
+  items: [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: 'pi pi-fw pi-home',
+      routerLink: ['/'],
+      type: 'item',
+      order: 1
+    },
+    {
+      id: 'profile',
+      label: 'Perfil',
+      icon: 'pi pi-fw pi-user',
+      routerLink: ['/profile'],
+      type: 'item',
+      order: 2
+    }
+  ],
+  theme: 'light',
+  orientation: 'vertical',
+  collapsible: false,
+  showIcons: true,
+  showBadges: false,
+  maxDepth: 2
+};
+
+// Configuración de menú de usuario
+export const userMenuConfig: MenuConfig = {
+  id: 'user-menu',
+  name: 'User Menu',
+  items: [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: 'pi pi-fw pi-home',
+      routerLink: ['/'],
+      type: 'item',
+      order: 1
+    },
+    {
+      id: 'pages',
+      label: 'Páginas',
+      icon: 'pi pi-fw pi-briefcase',
+      type: 'group',
+      order: 2,
+      items: [
+        {
+          id: 'crud',
+          label: 'Crud',
+          icon: 'pi pi-fw pi-pencil',
+          routerLink: ['/componentes/crud'],
+          type: 'item',
+          order: 1
+        },
+        {
+          id: 'menu-demo',
+          label: 'Menu Demo',
+          icon: 'pi pi-fw pi-bars',
+          routerLink: ['/menu-demo'],
+          type: 'item',
+          order: 2
+        }
+      ]
+    }
+  ],
+  theme: 'light',
+  orientation: 'vertical',
+  collapsible: true,
+  showIcons: true,
+  showBadges: true,
+  maxDepth: 3
+};
+
+// Configuraciones de permisos predefinidas
+export const permissionConfigs = {
+  admin: ['admin.users.read', 'admin.roles.read', 'admin.settings.read', 'reports.sales.read', 'reports.inventory.read'],
+  user: ['pages.crud.read', 'pages.menu-demo.read'],
+  guest: ['pages.crud.read'],
+  custom: ['admin.users.read', 'pages.crud.read', 'reports.sales.read']
+}; 

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

@@ -0,0 +1,11 @@
+@if (loading) {
+  <div class="loading-container">
+    <p>Cargando datos...</p>
+  </div>
+} @else {
+  <lib-ecommerce1 
+    [isLogin]="isLogin"
+    [Products]="productos"
+    [Categorias]="categorias">
+  </lib-ecommerce1>
+}

package/projects/lib-common-angular-demo/src/app/pages/ecommerce1-demo/ecommerce1-demo.spec.ts

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

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

@@ -0,0 +1,102 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { Observable, Subscription } from 'rxjs';
+import { ProductoDTO, CategoriaDTO } from '@juliaosistem/core-dtos';
+import { PlantillaResponse } from 'juliaositembackenexpress/dist/utils/PlantillaResponse';
+import { Ecommerce1 } from "../../../../../lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/ecommerce1";
+import { ProductosActions } from '../../../../../lib-common-angular/src/lib/assets/state/productos.state';
+import { CategoriaproductoActions } from '../../../../../lib-common-angular/src/lib/assets/state/categorias-productos.state';
+
+@Component({
+  selector: 'app-ecommerce1-demo',
+  imports: [Ecommerce1],
+  templateUrl: './ecommerce1-demo.html',
+  styleUrl: './ecommerce1-demo.scss'
+})
+export class Ecommerce1Demo implements OnInit, OnDestroy {
+
+  // Observables de state (nueva sintaxis sin @Select deprecado)
+  productos$!: Observable<PlantillaResponse<ProductoDTO>>;
+  categorias$!: Observable<PlantillaResponse<CategoriaDTO>>;
+
+  // Datos para pasar a los componentes
+  productos: ProductoDTO[] = [];
+  categorias: CategoriaDTO[] = [];
+  isLogin: boolean = false;
+  loading: boolean = true;
+
+  private subscriptions = new Subscription();
+
+  constructor(private store: Store) { 
+    // Inicializar observables usando store.select con string path (nueva forma recomendada)
+    
+  }
+
+  ngOnInit() {
+
+    this.loadMockData();
+    
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+
+  private setupSubscriptions() {
+    // Suscribirse a cambios en productos
+    this.subscriptions.add(
+      this.productos$.subscribe(response => {
+        if (response?.rta && response.dataList) {
+          this.productos = response.dataList;
+          this.checkLoadingComplete();
+        }
+      })
+    );
+
+    // Suscribirse a cambios en categorías
+    this.subscriptions.add(
+      this.categorias$.subscribe(response => {
+        if (response?.rta && response.dataList) {
+          this.categorias = response.dataList;
+          this.checkLoadingComplete();
+        }
+      })
+    );
+  }
+
+  private loadMockData() {
+    // Despachar acciones para cargar datos mock
+    this.store.dispatch(new ProductosActions.LoadMock());
+    this.store.dispatch(new CategoriaproductoActions.LoadMock());
+    this.productos$ = this.store.select(state => state.producto);
+    this.categorias$ = this.store.select(state => state.categoriaproducto);
+
+    this.categorias$.subscribe(response => {
+        if (response?.rta && response.dataList) {
+          this.categorias = response.dataList;
+          this.checkLoadingComplete();
+        }
+      });
+
+    this.productos$.subscribe(response => {
+        if (response?.rta && response.dataList) {
+          this.productos = response.dataList;
+          this.checkLoadingComplete();
+        }
+      });
+  }
+
+  private checkLoadingComplete() {
+    // El loading se completa cuando ambos arrays tienen datos
+    console.log('Productos cargados:', this.productos.length);
+    console.log('Categorías cargadas:', this.categorias.length);
+    if (this.productos.length > 0 || this.categorias.length > 0) {
+      this.loading = false;
+    }
+  }
+
+  // Método para simular login
+  onLogin() {
+    this.isLogin = !this.isLogin;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { MenuNavigationComponent } from './componentes/menu-navigation/menu-navigation.component';
+import { CrudDocComponent, Notfound ,ecomerce1Routes} from 'lib-common-angular';
+
+export default [
+    { path: 'notfound', component: Notfound },
+    { path: 'menu-navigation', component: MenuNavigationComponent },
+    { path: 'doc/crud', component: CrudDocComponent },
+    { path: 'ecommerce1', children:[...ecomerce1Routes] },
+    { path: '**', redirectTo: '/notfound' }
+] as Routes;

package/projects/lib-common-angular-demo/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Lib-CommonAngular-Demo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

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

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

package/projects/lib-common-angular-demo/src/main.ts

@@ -0,0 +1,47 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { importProvidersFrom } from '@angular/core';
+
+// Importar los states
+import { ProductosState } from 'lib-common-angular';
+/* import { CategoriasProductosState } from 'lib-common-angular';
+ */
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
+import { MessageService } from 'primeng/api';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(),
+    provideAnimations(),
+    MessageService,
+    // Configurar NGXS
+    importProvidersFrom(
+      NgxsModule.forRoot([
+        ProductosState,
+/*         CategoriasProductosState
+ */      ], {
+        developmentMode: true, // Solo en desarrollo
+        selectorOptions: {
+          suppressErrors: false,
+          injectContainerState: false
+        }
+      }),
+      
+      // Plugins opcionales (solo en desarrollo)
+      NgxsLoggerPluginModule.forRoot({
+        disabled: false // Cambiar a true en producción
+      }),
+      
+      NgxsReduxDevtoolsPluginModule.forRoot({
+        disabled: false // Cambiar a true en producción
+      })
+    )
+  ]
+}).catch(err => console.error(err));