utn-cli 1.0.0

package/templates/frontend/src/app/Componentes/Nucleo/reporte-de-incidencias/reporte-de-incidencias.component.ts

@@ -0,0 +1,103 @@
+import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Component({
+  selector: 'app-reporte-de-incidencias',
+  templateUrl: './reporte-de-incidencias.component.html',
+  styleUrls: ['./reporte-de-incidencias.component.css'],
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    MatDialogContent,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogActions
+  ]
+})
+
+export class ReporteDeIncidenciasComponent implements OnInit {
+  formulario!: FormGroup;
+
+  archivos: File[] = [];
+
+  readonly dialogRef = inject(MatDialogRef<ReporteDeIncidenciasComponent>);
+
+  constructor(private fb: FormBuilder, private datosGlobalesService: DatosGlobalesService, private http: HttpClient) { }
+
+  @ViewChild('EntradDeArchivo') EntradDeArchivo!: ElementRef<HTMLInputElement>;
+
+  Archivo: any;
+
+  ngOnInit(): void {
+    this.formulario = this.fb.group({
+      detalle: ['', Validators.required],
+      resultado: ['', Validators.required],
+      adjuntos: ['', Validators.required],
+      contacto: ['', Validators.required]
+    });
+  }
+
+  Cerrar(): void {
+    this.dialogRef.close();
+  }
+
+  Enviar() {
+    if (this.Archivo) {
+      const archivo = new FormData();
+      archivo.append("file", this.Archivo);
+      const Datos = JSON.stringify(this.formulario.value);
+      this.http.post(this.datosGlobalesService.ObtenerURL() + 'misc/reporteDeIncidencia/' + Datos,
+        archivo)
+        .subscribe({
+          next: (data: any) => {
+            alert('Mensaje enviado');
+          },
+          error: (error) => {
+            console.error('Ocurrió un error al informar de la incidenmcia:', error);
+          }
+        })
+    }
+    this.Cerrar();
+  }
+
+  ArchivoSeleccionado(event: Event) {
+    const entrada = event.target as HTMLInputElement;
+    if (entrada.files?.length) {
+      this.Archivo = entrada.files[0];
+    }
+  }
+
+  AbrirGestorDeArchivos() {
+    this.EntradDeArchivo.nativeElement.click();
+  }
+
+  ArrastrarAdentro(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    const archivoZona = event.target as HTMLElement;
+    archivoZona.classList.add('arrastrar');
+  }
+
+  ArrastrarAfuera(event: DragEvent) {
+    const archivoZona = event.target as HTMLElement;
+    archivoZona.classList.remove('arrastrar');
+  }
+
+  Soltar(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    const archivoZona = event.target as HTMLElement;
+    archivoZona.classList.remove('arrastrar');
+    if (event.dataTransfer?.files.length) {
+      this.Archivo = event.dataTransfer.files[0];
+    }
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.css

@@ -0,0 +1,90 @@
+button:focus {
+  outline: none !important;
+}
+
+.contenedor {
+
+  min-height: 20vh;
+  padding: 2%;
+  padding-top: 10%;
+  padding-bottom: 5%;
+
+  background-color: white;
+}
+
+.zona-archivo {
+  width: 90%;
+  height: 10vh;
+  margin-left: 4%;
+  border: 2px dashed #3498db;
+  padding: 1%;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.texto {
+  width: 100%;
+  text-align: center;
+}
+
+.zona-archivo:hover,
+.zona-archivo.arrastrar {
+  background: #e3f2fd;
+}
+
+.texto-clic {
+  color: #007bff;
+  font-weight: bold;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.pie {
+  margin-top: 5%;
+  margin-right: 5%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.lista {
+  width: 95%;
+  margin-bottom: 2%;
+  padding-left: 4%;
+}
+
+.lista .archivo {
+  border: solid 1px #007bff;
+  ;
+  border-radius: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1%;
+}
+
+.lista .archivo p {
+
+  text-align: center;
+  width: 70%;
+  padding: 1%;
+}
+
+.lista p:nth-child(odd) {
+  margin-right: 2%;
+}
+
+.descargar {
+  color: #007bff;
+  margin-right: 5%;
+}
+
+.eliminar {
+  color: red;
+}
+
+.deshabilitado {
+  color: gray;
+}

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.html

@@ -0,0 +1,39 @@
+<div class="contenedor">
+  <div class="lista">
+    @for(archivo of ListaArchivos;track $index){
+    <div class="archivo">
+      <p>{{archivo.Nombre}}</p>
+      <button mat-icon-button (click)="DescargarArchivo(archivo.ArchivoId,archivo.Nombre)" matTooltip="Descargar">
+        <!--pone deshabilitado si es estado coincide con el indicado -->
+        <mat-icon class="descargar">download</mat-icon>
+      </button>
+      <button mat-icon-button [disabled]="!EsEditable" (click)="BorrarArchivo(archivo.ArchivoId)" matTooltip="Eliminar">
+        <!--pone deshabilitado si es estado coincide con el indicado -->
+        <mat-icon class="eliminar" [class.deshabilitado]="!EsEditable">delete</mat-icon>
+      </button>
+
+    </div>
+    }
+  </div>
+  @if(EsEditable) {
+  <div class="zona-archivo" (click)="AbrirGestorDeArchivos()" (dragover)="ArrastrarAdentro($event)"
+    (dragleave)="ArrastrarAfuera($event)" (drop)="Soltar($event)">
+    @if(!Archivo){
+    <p class="texto">Arrastra y suelta un archivo aquí o <span class="texto-clic">haz clic para subir</span></p>
+    }
+    @else{
+    <p>Archivo seleccionado: {{ Archivo.name }}</p>
+    }
+    <!-- Input oculto para seleccionar archivos manualmente -->
+    <input type="file" #EntradDeArchivo hidden (change)="ArchivoSeleccionado($event)">
+  </div>
+  } @else {
+  @if(ListaArchivos.length === 0) {
+  <p>Sin archivos adjuntos</p>
+  }
+  }
+  <div class="pie">
+    <button mat-button [disabled]="!EsEditable" (click)="SubirArchivo()">Guardar</button>
+    <button mat-button (click)="Cancelar()">Cerrar</button>
+  </div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.ts

@@ -0,0 +1,132 @@
+import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+
+@Component({
+  selector: 'app-subir-archivo',
+  imports: [MatButtonModule, MatIconModule],
+  templateUrl: './subir-archivo.component.html',
+  styleUrl: './subir-archivo.component.css'
+})
+export class SubirArchivoComponent implements OnInit {
+  readonly dialogRef = inject(MatDialogRef<SubirArchivoComponent>);
+  Archivo: any;
+  ListaArchivos: any[] = []
+  @ViewChild('EntradDeArchivo') EntradDeArchivo!: ElementRef<HTMLInputElement>;
+  readonly data = inject(MAT_DIALOG_DATA);
+  Permiso = '--Permiso=' + this.data.Permiso;
+  Etiqueta = this.data.Etiqueta + this.Permiso;
+  EsEditable = this.data.EsEditable;
+  Token: any;
+  constructor(private datosGlobalesService: DatosGlobalesService,
+    private http: HttpClient
+  ) { }
+  ngOnInit(): void {
+    this.ListarArchivos(this.Etiqueta)
+  }
+
+  ArrastrarAdentro(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    const archivoZona = event.target as HTMLElement;
+    archivoZona.classList.add('arrastrar');
+
+  }
+
+  ArrastrarAfuera(event: DragEvent) {
+    const archivoZona = event.target as HTMLElement;
+    archivoZona.classList.remove('arrastrar');
+  }
+
+  Soltar(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const archivoZona = event.target as HTMLElement;
+    archivoZona.classList.remove('arrastrar');
+
+    if (event.dataTransfer?.files.length && this.EsEditable) {
+      this.Archivo = event.dataTransfer.files[0];
+    }
+  }
+
+  ArchivoSeleccionado(event: Event) {
+    const entrada = event.target as HTMLInputElement;
+    if (entrada.files?.length) {
+      this.Archivo = entrada.files[0];
+    }
+  }
+
+  AbrirGestorDeArchivos() {
+    if (this.EsEditable) {
+      this.EntradDeArchivo.nativeElement.click();
+    }
+  }
+
+  SubirArchivo() {
+    if (this.Archivo) {
+      let archivo = new FormData();
+      archivo.append("file", this.Archivo);
+      this.CargarArchivo(archivo, this.Etiqueta)
+    }
+  }
+
+  CargarArchivo(archivo: any, Etiqueta: string) {
+    this.http.post(this.datosGlobalesService.ObtenerURL() + 'misc/cargarArchivo/' + Etiqueta,
+      archivo)
+      .subscribe({
+        next: (data: any) => {
+          this.Archivo = undefined;
+          this.ListarArchivos(Etiqueta)
+        },
+        error: (error) => {
+          console.error('Ocurrió un error guardando el archivo:', error);
+        }
+      })
+  }
+
+  ListarArchivos(Etiqueta: string) {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/listarArchivos/' + Etiqueta)
+      .subscribe({
+        next: (data: any) => {
+          this.ListaArchivos = data.body;
+        },
+        error: (error) => {
+          console.error('Ocurrió un error listando los archivos:', error);
+        }
+      })
+  }
+
+  DescargarArchivo(ArchivoId: string, Nombre: string) {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/descargarArchivo/' + ArchivoId + this.Permiso
+      , { responseType: 'blob' })
+      .subscribe((pdfBlob) => {
+        const url = window.URL.createObjectURL(pdfBlob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = Nombre;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      })
+  }
+
+  BorrarArchivo(ArchivoId: string) {
+    this.http.delete(this.datosGlobalesService.ObtenerURL() + 'misc/borrarArchivo/' + ArchivoId)
+      .subscribe({
+        next: (data: any) => {
+          this.ListarArchivos(this.Etiqueta);
+        },
+        error: (error) => {
+          console.error('Ocurrió un error borrando el archivo:', error);
+        }
+      })
+  }
+
+  Cancelar() {
+    this.dialogRef.close();
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/tabla/paginador-personalizado.ts

@@ -0,0 +1,17 @@
+import { MatPaginatorIntl } from '@angular/material/paginator';
+export class PaginadorPersonalizado extends MatPaginatorIntl  {
+    override itemsPerPageLabel = 'Elementos por página:';
+    override nextPageLabel = 'Siguiente página';
+    override previousPageLabel = 'Página anterior';
+    override firstPageLabel = 'Primera página';
+    override lastPageLabel = 'Última página';
+  
+    override getRangeLabel = (page: number, pageSize: number, length: number) => {
+      if (length === 0 || pageSize === 0) {
+        return `0 de ${length}`;
+      }
+      const startIndex = page * pageSize;
+      const endIndex = Math.min(startIndex + pageSize, length);
+      return `${startIndex + 1} - ${endIndex} de ${length}`;
+    };
+}

package/templates/frontend/src/app/Componentes/Nucleo/tabla/tabla.component.css

@@ -0,0 +1,332 @@
+.encabezado {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: 2px;
+  margin-bottom: 7px;
+}
+
+.custom-input {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 200px;
+}
+
+.izquierda,
+.derecha {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.centro {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.formField {
+  max-height: 60px;
+}
+
+.descargar {
+  background-color: #0069B4 !important;
+}
+
+.Activa, .Activo, .Finalizado, .Aprobada, .Aprobado, .Ejecutando, .Autorizado, .Aperturado, .Ejecutada {
+  background-color: #518a5f;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Inactiva, .Inactivo, .Cerrado {
+  background-color: #7d7d7d;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Pendiente, .Enviada {
+  background-color: #FFA757;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Formalizado, .Procesando, .Borrador {
+  background-color: rgb(163, 156, 156);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+.Tramitando, .revisión {
+  background-color: #F87600;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Tramitada, .Detenida {
+  background-color: #FDC652;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Recibido, .Espera, .Revisión {
+  background-color: #0069B4;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Rechazado, .Rechazada, .Excedido, .Cancelada, .Cancelado, .Fallida {
+  background-color: #F82617;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Aplicando {
+  background-color: #76B82A;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.Aplicada {
+  background-color: #007270;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+table {
+  width: 100%;
+  border: 1px solid #00000057;
+  border-radius: 8px;
+  background: white;
+}
+
+table td {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+table th {
+  border-bottom: 1px solid #ec0202;
+  text-align: center;
+}
+
+
+.azul {
+  color: blue;
+}
+
+.rojo {
+  color: red;
+}
+
+.verde {
+  color: green;
+}
+
+.marino {
+  color: #0069B4;
+}
+
+.verdeoscuro {
+  color: darkgreen;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: whitesmoke;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.separador {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+tr.example-element-row:hover {
+  filter: brightness(0.9); /* Oscurece un poco el color de fondo al pasar el mouse */
+}
+
+/* --- Ajustes para Mobile (Pantallas menores a 768px) --- */
+@media (max-width: 768px) {
+
+  /* 1. Forzar a la tabla a dejar de comportarse como tal */
+  .mat-mdc-table {
+    display: block !important;
+    background: transparent !important;
+    border: none !important;
+  }
+
+  /* Ocultar el encabezado por completo */
+  .mat-mdc-header-row {
+    display: none !important;
+  }
+
+  /* 2. Convertir cada FILA en una tarjeta blanca separada */
+  .mat-mdc-row {
+    display: block !important;
+    background: white;
+    border-radius: 10px !important;
+    margin-bottom: 20px !important;
+    padding: 15px !important;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+    height: auto !important;
+    border: 1px solid #eee !important;
+  }
+
+  /* 3. Convertir cada CELDA en una línea con espacio entre nombre y valor */
+  .mat-mdc-cell {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    border: none !important;
+    padding: 10px 0 !important;
+    width: 100% !important;
+    min-height: 40px !important;
+    text-align: right !important;
+    box-sizing: border-box !important;
+  }
+
+  /* 4. Crear el "Label" para cada celda dinámicamente */
+  .mat-mdc-cell::before {
+    content: attr(data-label);
+    font-weight: bold;
+    text-align: left;
+    color: #666;
+    flex: 1;
+  }
+
+  /* 5. Ajustar acciones */
+  .mat-column-acciones {
+    justify-content: center !important;
+    border-top: 1px solid #f0f0f0 !important;
+    margin-top: 10px !important;
+    padding-top: 15px !important;
+  }
+
+  /* 6. Ajustes de Filtros y Encabezado (NUEVA VERSIÓN) */
+  .encabezado {
+    flex-direction: column !important;
+    gap: 15px !important;
+    padding: 0 10px;
+  }
+
+  .izquierda, .derecha {
+    width: 100% !important;
+    flex-direction: column !important;
+    gap: 10px !important; /* Espacio uniforme entre elementos */
+  }
+
+  /* Forzamos que Input, Select y Botón sean idénticos en ancho */
+  .custom-input, 
+  mat-select.custom-input, 
+  .descargar {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    margin: 0 !important;
+    height: 45px !important; /* Altura uniforme para mejor tacto */
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  /* Ajuste específico para que el texto dentro del select no se corte */
+  ::ng-deep .mat-mdc-select-trigger {
+    width: 100% !important;
+    padding: 0 5px !important;
+  }
+
+  /* 7. Ajustar Paginador */
+  ::ng-deep .mat-mdc-paginator-container {
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+  }
+
+  /* Ocultar la fila de detalle si no está expandida */
+  .detalle-oculto {
+    display: none !important;
+  }
+}