oggui/ogWebconsole/src/app/components/groups/groups.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { UnidadOrganizativa } from './model';
import { MatDialog } from '@angular/material/dialog';
import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
import { DeleteModalComponent } from './delete-modal/delete-modal.component';
import { CreateClientComponent } from './clients/create-client/create-client.component';
import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component';
import { EditClientComponent } from './clients/edit-client/edit-client.component';

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.css']
})
export class GroupsComponent implements OnInit {
  unidadesOrganizativas: UnidadOrganizativa[] = [];
  selectedUnidad: UnidadOrganizativa | null = null;
  selectedDetail: any | null = null;  // Nueva variable para el detalle del elemento seleccionado
  children: any[] = [];
  breadcrumb: string[] = [];
  breadcrumbData: any[] = [];  // Almacenar datos de breadcrumb para navegar

  constructor(private dataService: DataService, public dialog: MatDialog) {}

  ngOnInit(): void {
    this.dataService.getUnidadesOrganizativas().subscribe(
      data => this.unidadesOrganizativas = data,
      error => console.error('Error fetching unidades organizativas', error)
    );
  }

  onSelectUnidad(unidad: UnidadOrganizativa): void {
    this.selectedUnidad = unidad;
    this.selectedDetail = unidad;  // Mostrar detalles de la unidad seleccionada
    this.breadcrumb = [unidad.nombre];
    this.breadcrumbData = [unidad];
    this.loadChildrenAndClients(unidad.uuid);
  }

  onSelectChild(child: any): void {
    this.selectedDetail = child;  // Mostrar detalles del niño seleccionado
    if (child.type !== 'client' && child.uuid && child.id) {
      this.breadcrumb.push(child.name || child.nombre);
      this.breadcrumbData.push(child);
      this.loadChildrenAndClients(child.uuid);
    }
  }

  navigateToBreadcrumb(index: number): void {
    this.breadcrumb = this.breadcrumb.slice(0, index + 1);
    const target = this.breadcrumbData[index];
    this.breadcrumbData = this.breadcrumbData.slice(0, index + 1);
    if (target.type === 'client') {
      this.selectedDetail = target;
    } else {
      this.loadChildrenAndClients(target.uuid);
    }
  }

  loadChildrenAndClients(uuid: string): void {
    this.dataService.getChildren(uuid).subscribe(
      childrenData => {
        console.log('Children data:', childrenData);
        this.dataService.getClients(uuid).subscribe(
          clientsData => {
            console.log('Clients data:', clientsData);
            const newChildren = [...childrenData, ...clientsData];

            if (newChildren.length > 0) {
              this.children = newChildren;
            } else {
              this.children = []; // Limpiar card2 cuando no hay elementos

              // Si deseas que la unidad organizativa se limpie completamente, descomenta la línea siguiente:
              // this.selectedUnidad = null;
            }
          },
          error => {
            console.error('Error fetching clients', error);
            this.children = []; // Limpiar card2 en caso de error
          }
        );
      },
      error => {
        console.error('Error fetching children', error);
        this.children = []; // Limpiar card2 en caso de error
      }
    );
  }

  addOU(): void {
    const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);

    // Subscribirse al evento unitAdded del componente de creación después de cerrar el diálogo
    dialogRef.afterClosed().subscribe(() => {
      // Aquí puedes actualizar las cards o hacer cualquier otra acción necesaria después de añadir una unidad organizativa
      this.dataService.getUnidadesOrganizativas().subscribe(
        data => this.unidadesOrganizativas = data,
        error => console.error('Error fetching unidades organizativas', error)
      );
    });
  }

  addClient(): void {
    const dialogRef = this.dialog.open(CreateClientComponent);

    // Subscribirse al evento unitAdded del componente de creación después de cerrar el diálogo
    dialogRef.afterClosed().subscribe(() => {
      // Aquí puedes actualizar las cards o hacer cualquier otra acción necesaria después de añadir una unidad organizativa
      this.dataService.getUnidadesOrganizativas().subscribe(
        data => this.unidadesOrganizativas = data,
        error => console.error('Error fetching unidades organizativas', error)
      );
    });
  }

  getIcon(type: string): string {
    switch(type) {
      case 'organizational-unit':
        return 'apartment';
      case 'classroom-group':
        return 'classrooms-group-icon';
      case 'classroom':
        return 'classroom-icon';
      case 'client':
        return 'client-icon';
      case 'clients-group':
        return 'clients-group-icon';
      default:
        return '';
    }
  }

  onDeleteClick(uuid: string, name: string, type: string): void {
    const dialogRef = this.dialog.open(DeleteModalComponent, {
      width: '250px',
      data: { name }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.dataService.deleteElement(uuid, type).subscribe(
          () => {
            this.loadChildrenAndClients(this.selectedUnidad?.uuid || '');

            this.dataService.getUnidadesOrganizativas().subscribe(
              data => this.unidadesOrganizativas = data,
              error => console.error('Error fetching unidades organizativas', error)
            );

          },
          error => console.error('Error deleting element', error)
        );
      }
    });
  }

  onEditClick(type: any, uuid: string): void {
    console.log('Tipo del elemento a editar:', type);
    console.log('UUID del elemento a editar:', uuid);
    if (type != "client") {
      const dialogRef = this.dialog.open(EditOrganizationalUnitComponent, { data: { uuid } });
    } else {
      console.log('Editar cliente');
      const dialogRef = this.dialog.open(EditClientComponent, { data: { uuid } } );
    }
  }
}