oggui/ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.ts

import {Component, Inject, Input, isDevMode, OnInit} from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
import {HttpClient} from "@angular/common/http";
import {ToastrService} from "ngx-toastr";
import {JoyrideService} from "ngx-joyride";
import {ConfigService} from "@services/config.service";
import {Router} from "@angular/router";
import {Observable} from "rxjs";
import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
import {ImportImageComponent} from "../import-image/import-image.component";
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
import {ExportImageComponent} from "../../images/export-image/export-image.component";
import {BackupImageComponent} from "../backup-image/backup-image.component";
import {EditImageComponent} from "../edit-image/edit-image.component";

@Component({
  selector: 'app-show-git-commits',
  templateUrl: './show-git-images.component.html',
  styleUrl: './show-git-images.component.css'
})
export class ShowGitCommitsComponent implements OnInit{
  baseUrl: string;
  private apiUrl: string;
  dataSource = new MatTableDataSource<any>();
  length: number = 0;
  itemsPerPage: number = 10;
  page: number = 0;
  loading: boolean = false;
  filters: { [key: string]: string } = {};
  alertMessage: string | null = null;
  repository: any = {};
  datePipe: DatePipe = new DatePipe('es-ES');
  branches: string[] = [];
  selectedBranch: string = '';
  loadingBranches: boolean = false;
  repositories: string[] = [];
  selectedRepository: string = '';
  loadingRepositories: boolean = false;
  
  private initialLoad = true;
  
  columns = [
    {
      columnDef: 'hexsha',
      header: 'Commit ID',
      cell: (commit: any) => commit.hexsha
    },
    {
      columnDef: 'message',
      header: 'Mensaje del commit',
      cell: (commit: any) => commit.message
    },
    {
      columnDef: 'committed_date',
      header: 'Fecha del commit',
      cell: (commit: any) => `${this.datePipe.transform(commit.committed_date * 1000, 'dd/MM/yyyy hh:mm:ss')}`
    },
    {
      columnDef: 'size',
      header: 'Tamaño',
      cell: (commit: any) => `${commit.size} bytes`
    },
    {
      columnDef: 'stats_total',
      header: 'Estadísticas',
      cell: (commit: any) => {
        if (commit.stats_total) {
          return `+${commit.stats_total.insertions} -${commit.stats_total.deletions} (${commit.stats_total.files} archivos)`;
        }
        return '';
      }
    },
    {
      columnDef: 'tags',
      header: 'Tags',
      cell: (commit: any) => commit.tags?.length > 0 ? commit.tags.join(', ') : 'Sin tags'
    }
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];

  constructor(
    public dialog: MatDialog,
    private http: HttpClient,
    private toastService: ToastrService,
    private joyrideService: JoyrideService,
    private configService: ConfigService,
    private router: Router,
    public dialogRef: MatDialogRef<ShowGitCommitsComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.baseUrl = this.configService.apiUrl;
    this.apiUrl = `${this.baseUrl}/image-repositories/server/git/${this.data.repositoryUuid}`;
  }

  ngOnInit(): void {
    if (this.data) {
      this.loadRepositories();
    }
  }

  loadRepositories(): void {
    this.loadingRepositories = true;
    this.http.get<any>(`${this.apiUrl}/get-collection`).subscribe(
      data => {
        this.repositories = data.repositories || [];
        this.loadingRepositories = false;
        if (this.repositories.length > 0) {
          this.selectedRepository = this.repositories[0];
          this.loadBranches();
        }
      },
      error => {
        console.error('Error fetching repositories', error);
        this.toastService.error('Error al cargar los repositorios');
        this.loadingRepositories = false;
      }
    );
  }

  onRepositoryChange(): void {
    this.selectedBranch = '';
    this.branches = [];
    this.page = 0;
    this.loadBranches();
  }

  loadBranches(): void {
    if (!this.selectedRepository) {
      return;
    }
    this.loadingBranches = true;
    this.http.post<any>(`${this.apiUrl}/branches`, { repositoryName: this.selectedRepository }).subscribe(
      data => {
        this.branches = data.branches || [];
        this.loadingBranches = false;
        if (this.branches.length > 0) {
          this.selectedBranch = this.branches[0];
          this.loadData();
          if (this.initialLoad) {
            this.initialLoad = false;
          }
        }
      },
      error => {
        console.error('Error fetching branches', error);
        this.toastService.error('Error al cargar las ramas del repositorio');
        this.loadingBranches = false;
      }
    );
  }

  onBranchChange(): void {
    this.page = 0; 
    this.loadData();
  }

  loadData(): void {
    if (!this.selectedBranch || !this.selectedRepository) {
      return;
    }
    
    this.loading = true;
    const payload = { 
      repositoryName: this.selectedRepository,
      branch: this.selectedBranch 
    };
    
    this.http.post<any>(`${this.apiUrl}/commits`, payload).subscribe(
      data => {
        this.dataSource.data = data.commits || [];
        this.length = data.commits?.length || 0;
        this.loading = false;
      },
      error => {
        console.error('Error fetching commits', error);
        this.toastService.error('Error al cargar los commits');
        this.loading = false;
      }
    );
  }

  onPageChange(event: any): void {
    this.page = event.pageIndex;
    this.itemsPerPage = event.pageSize;
    this.length = event.length;
  }

  toggleAction(commit: any, action: string): void {
    switch (action) {
      case 'view-details':
        this.dialog.open(ServerInfoDialogComponent, {
          width: '800px',
          data: {
            title: 'Detalles del Commit',
            content: {
              'Commit ID': commit.hexsha,
              'Mensaje': commit.message,
              'Fecha': this.datePipe.transform(commit.committed_date * 1000, 'dd/MM/yyyy hh:mm:ss'),
              'Tamaño': `${commit.size} bytes`,
              'Archivos modificados': commit.stats_total?.files || 0,
              'Líneas añadidas': commit.stats_total?.insertions || 0,
              'Líneas eliminadas': commit.stats_total?.deletions || 0,
              'Tags': commit.tags?.join(', ') || 'Sin tags'
            }
          }
        });
        break;
      case 'copy-commit-id':
        navigator.clipboard.writeText(commit.hexsha).then(() => {
          this.toastService.success('Commit ID copiado al portapapeles');
        });
        break;
      default:
        console.error('Acción no soportada:', action);
        break;
    }
  }

  iniciarTour(): void {
    this.joyrideService.startTour({
      steps: [
        'commitsTitleStep',
        'repositorySelector',
        'branchSelector',
        'searchCommitsField',
        'commitsTable',
        'actionsHeader',
        'viewCommitButton',
        'copyCommitButton',
        'commitsPagination'
      ],
      showPrevButton: true,
      themeColor: '#3f51b5'
    });
  }

  openImageInfoDialog() {
    this.dialog.open(ServerInfoDialogComponent, {
      width: '800px',
      data: {
        title: 'Información del Repositorio',
        content: {
          'Nombre del repositorio': this.selectedRepository || 'No seleccionado',
          'UUID del repositorio': this.data.repositoryUuid,
          'Rama seleccionada': this.selectedBranch || 'No seleccionada',
          'Total de repositorios': this.repositories.length,
          'Total de ramas': this.branches.length,
          'Total de commits': this.length
        }
      }
    });
  }

  goToPage(commit: any) {
    window.open(`http://localhost:3100/oggit/${this.selectedRepository}/commit/${commit.hexsha}`, '_blank');
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

  protected readonly isDevMode = isDevMode;
}