cambios destinados para las siguientes fases

src/app/modules/main/Models/Ubicaciones/canton.ts

@@ -5,4 +5,5 @@ export class Canton {
     uzytcantonGrupo?: string;
     uzytcantonLatitud?: string;
     uzytcantonLongitud?: number;
+    uzytprovincia_id?: string;
 }

src/app/modules/main/Models/Ubicaciones/parroquia.ts

 export class Parroquia{
     uzytparroquia_id?: string;
+    uzytcanton_id?: string;
     uzytparroquia_nombre?: string;
     uzytparroquia_tipo?: string;
     uzytparroquia_grupo_recinto?: number;
 
-}
\ No newline at end of file
+}

src/app/modules/main/Models/docompar.ts

+export class docompar{
+  UZYTAVDOCOMPAR_CODE?: number;
+  UZYTAVINSTPROY_ID?: number;
+  UZYTAVDOCOMPAR_NOMBRE_DOC?: string;
+  UZYTAVDOCOMPAR_NOMBRE_URL?: string;
+  UZYTAVDOCOMPAR_FECHA_CREA?: Date;
+}

src/app/modules/main/Models/instituciones.ts

@@ -13,6 +13,7 @@ export class Instituciones {
   uzytparroquia_id?:string;
   uzytparroquia: {
     uzytparroquia_id: string;
+    uzytcanton_id: string;
     uzytparroquia_nombre: string;
     uzytparroquia_tipo: string;
     uzytparroquia_grupo_recinto: number;

src/app/modules/main/Models/instproy.ts

+export class instproy{
+  uzytavinstproy_id?: number;
+  uzytavproyec_id?: number;
+  uzytavinstituc_id?: number;
+  uzytparametros_det_id_organizacion?: number;
+  uzytparametros_det_id_entidad?: number;
+  uzytavinstproy_detaotro?: string;
+  uzytavinstproy_declaracion?: string;
+  uzytavinstproy_fecha_crea?: Date;
+  uzytavinstproy_dir_hombres?: number;
+  uzytavinstproy_dir_mujeres?: number;
+  uzytavinstproy_dir_ninios?: number;
+  uzytavinstproy_dir_discapacidad?: number;
+  uzytavinstproy_indirectos?: number;
+  uzytavinstproy_desc_benefic?: string;
+  uzytavinstproy_DIRECTOS?: number;
+  uzytavinstproy_TOTAL?: number;
+}

src/app/modules/main/Models/parametrosdet.ts

+export class parametrosdet{
+  uzytparametros_det_id?: number;
+  uzytparametros_det_id_alt?: string;
+  uzytparametros_det_descripcion?: string;
+  uzytparametros_det_estado?: string;
+  uzytparametros_det_orden?: number;
+}

src/app/modules/main/Models/usuario.ts

 import { Observable } from "rxjs"
 
 export class Usuario {
-    uzytusuario_id: number
-    uzytusuario_cc : string
-    uzytusuario_clave: string
-    uzytusuario_nombres: string
-    uzytusuario_apellidos: string
-    uzytusuario_email: string
-    fechaRegistro : Date
-    uzytusuario_estado: string
-    uzytusuario_mail_sinformul : number
-    uzytusuario_mail_incompletos : number
-    uzytusuario_tipo_doc: string
-    uzytusuario_cod_senescyt: string
-    uzytusuario_fecha_act_micuenta : Date
-    uzytusuario_hexadecimalid: string
-    uzytusuario_tratamiento: string
-    uzytusuario_modificacion: number
-    uzytusuario_tipo_user: string
-    uzytusuario_email_institucional
-    uzytusuario_telefono_fijo: string
-    uzytusuario_telefono_celular: string
-    spriden_id: string
-    spriden_pidm : number 
-    uzytusuario_clave_tmp: string
-    spbpers_name_prefix: string
-    spbpers_sex: string
-    uzytusuario_campus: string
-    uzytusuario_CAMPUS_ABREV_CODE: string;
-    uzytusuario_CAMPUS_CODE:string
-    uzytusuario_departamento: string
-    uzytusuario_DPTO_ABREV_CODE: string;
-    uzytusuario_DEPARTAMENTO_CODE; string
-    uzytusuario_foto: string
-    departamento$: Observable<string>; // Propiedad para almacenar el Observable del departamento
-    campus$: Observable<string>; 
-}
\ No newline at end of file
+  uzytusuario_id: number
+  uzytusuario_cc: string
+  uzytusuario_clave: string
+  uzytusuario_nombres: string
+  uzytusuario_apellidos: string
+  uzytusuario_email: string
+  fechaRegistro: Date
+  uzytusuario_estado: string
+  uzytusuario_mail_sinformul: number
+  uzytusuario_mail_incompletos: number
+  uzytusuario_tipo_doc: string
+  uzytusuario_cod_senescyt: string
+  uzytusuario_fecha_act_micuenta: Date
+  uzytusuario_hexadecimalid: string
+  uzytusuario_tratamiento: string
+  uzytusuario_modificacion: number
+  uzytusuario_tipo_user: string
+  uzytusuario_email_institucional
+  uzytusuario_telefono_fijo: string
+  uzytusuario_telefono_celular: string
+  spriden_id: string
+  spriden_pidm: number
+  uzytusuario_clave_tmp: string
+  spbpers_name_prefix: string
+  spbpers_sex: string
+  uzytusuario_campus: string
+  uzytusuario_CAMPUS_ABREV_CODE: string;
+  uzytusuario_CAMPUS_CODE: string
+  uzytusuario_departamento: string
+  uzytusuario_DPTO_ABREV_CODE: string;
+  uzytusuario_DEPARTAMENTO_CODE; string
+  uzytusuario_foto: string
+  departamento$: Observable<string>; // Propiedad para almacenar el Observable del departamento
+  campus$: Observable<string>;
+}

src/app/modules/main/main.module.ts

@@ -193,9 +193,32 @@ import { EnvioFormularioComponent } from './pages/programa/opciones/envio-formul
 import { ComisionEvaComponent } from './pages/asignar comision/comision-eva/comision-eva.component';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
 import { ResultadosComponent } from './pages/Proyectos/Cierre/resultados proyecto/resultados/resultados.component';
+import { MatTreeModule } from '@angular/material/tree';
+import { AddCompromisoComponent } from './pages/Proyectos/Inicio Ejecución/compromiso participacion/add-compromiso/add-compromiso.component';
+import { ListCompromisoComponent } from './pages/Proyectos/Inicio Ejecución/compromiso participacion/list-compromiso/list-compromiso.component';
+import { instproy } from './Models/instproy';
+import { ListDocumentosComponent } from './pages/Proyectos/Inicio Ejecución/compromiso participacion/list-documentos/list-documentos.component';
+import { AddDocumentosComponent } from './pages/Proyectos/Inicio Ejecución/compromiso participacion/add-documentos/add-documentos.component';
+import { CartaCompromisoComuComponent } from './pages/Proyectos/Inicio Ejecución/carta compromiso comunidad/carta-compromiso-comu/carta-compromiso-comu.component';
+import { ListInstiComponent } from './pages/Proyectos/Cierre/numerico de beneficiarios/list-insti/list-insti.component';
+import { EditInstiComponent } from './pages/Proyectos/Cierre/numerico de beneficiarios/edit-insti/edit-insti.component';
+import { ActaCompromisoCarrerasComponent } from './pages/Proyectos/Acta de Compromiso de Carreras/acta-compromiso-carreras/acta-compromiso-carreras.component';
+import { ActaConsejoDepartamentoComponent } from './pages/Proyectos/Acta de Consejo de Departamento/acta-consejo-departamento/acta-consejo-departamento.component';
+import { ActaDirectorProyectoComponent } from './pages/Proyectos/Acta Compromiso Director Proyecto/acta-director-proyecto/acta-director-proyecto.component';
+import { ListarActaCompromisoCarrerasComponent } from './pages/Proyectos/Acta de Compromiso de Carreras/listar-acta-compromiso-carreras/listar-acta-compromiso-carreras.component';
+import { ListarActaConsejoDepartamentoComponent } from './pages/Proyectos/Acta de Consejo de Departamento/listar-acta-consejo-departamento/listar-acta-consejo-departamento.component';
+import { PdfComponent } from './pages/Proyectos/pdf/pdf.component';
+import { ListObjetivosEjecComponent } from './pages/Proyectos/Cierre/objetivos ejecutados/list-objetivos-ejec/list-objetivos-ejec.component';
+import { EditObjetivosEjecComponent } from './pages/Proyectos/Cierre/objetivos ejecutados/edit-objetivos-ejec/edit-objetivos-ejec.component';
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [
+    ActaCompromisoCarrerasComponent,
+    ActaConsejoDepartamentoComponent,
+    ActaDirectorProyectoComponent,
+    ListCompromisoComponent,
+    ListarActaCompromisoCarrerasComponent,
+    ListarActaConsejoDepartamentoComponent,
     AddCronogramaActiComponent,
     AddHitosComponent,
     InicialProyectoComponent,
@@ -340,12 +363,22 @@ import { ResultadosComponent } from './pages/Proyectos/Cierre/resultados proyect
     EnvioFormularioComponent,
     ComisionEvaComponent,
     ResultadosComponent,
+    AddCompromisoComponent,
+    ListCompromisoComponent,
+    ListDocumentosComponent,
+    AddDocumentosComponent,
+    CartaCompromisoComuComponent,
+    ListInstiComponent,
+    EditInstiComponent,
+    PdfComponent,
+    ListObjetivosEjecComponent,
+    EditObjetivosEjecComponent,
     ],
   imports: [
+    MatTreeModule,
     CKEditorModule,
     FullCalendarModule,
     MatSelectFilterModule,
-    MatAutocompleteModule,
     AngularEditorModule,
     HttpClientModule,
     CommonModule,
@@ -374,6 +407,7 @@ import { ResultadosComponent } from './pages/Proyectos/Cierre/resultados proyect
     MatRadioModule
   ],
   providers: [
+    instproy,
     objetivoprograma,
     proObjeEstra,
     Proyectos,

src/app/modules/main/pages/Proyectos/Acta Compromiso Director Proyecto/acta-director-proyecto/acta-director-proyecto.component.css

+/* Estilos para el formulario */
+.formulario {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 96%;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 10px;
+  }
+  
+  .botones{
+    width: 100px;
+    height: 40px;
+    text-align: center;
+    padding: 0;
+  }
+  /* Estilos para la columna única */
+  .columna-unico {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 0;
+    padding-left: 0;
+  }
+  
+  /* Estilos para los labels */
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+  
+  /* Estilos para los inputs y selects */
+  input[type="text"],
+  select {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    background-color: transparent;
+    font-size: 16px;
+    margin-bottom: 16px;
+    transition: border-color 0.3s ease;
+  }
+  
+  input[type="text"]:focus,
+  select:focus {
+    outline: none;
+    border-color: #4caf50;
+  }
+  
+  /* Estilos para los mensajes de error */
+  .error-message {
+    color: red;
+    font-size: 14px;
+    margin-top: 4px;
+  }
+  
+  /* Estilos para el botón */
+  button {
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    background-color: rgb(71, 127, 75);
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  button:hover {
+    background-color:  rgb(90, 159, 95);
+  }
+  
+  /* Estilos para el contenedor principal */
+  .contenedor {
+    width: 96%;
+    margin-left: 2%;
+    margin-right: 2%;
+    margin-top: 10%;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    background-color: #ffffff;
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Estilos para el contenedor del formulario */
+  .contenedor-dos {
+    margin-top: 30px;
+    padding: 0.9375rem 20px;
+    position: relative;
+  }
+  
+  /* Estilos para el título sobremontado */
+  .sobremontado {
+    position: relative;
+    width: 96%;
+    top: -20px;
+    left: 2%;
+    background-color: #477f4b;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-bottom: -50px;
+    z-index: 2;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  }
+  
+  /* Estilos para el icono de instituciones */
+  .icono-instituciones {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    font-size: 20px;
+  }
+  
+  .volver{
+    position: absolute;
+    top: 25%;
+    right: 10px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    color: rgb(71, 127, 75);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  
+  }
+  
+  .save-button {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+  }
+  
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+  }
+  
\ No newline at end of file

src/app/modules/main/pages/Proyectos/Acta Compromiso Director Proyecto/acta-director-proyecto/acta-director-proyecto.component.html

+<div class="contenedor-dos">
+  <form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
+    <!-- Información de la institución -->
+    <div class="columna-unico">
+      <div class="save-button">
+        <button mat-raised-button color="primary" *ngIf="!cambio" (click)="cambiar()">Editar</button>
+        <button mat-raised-button color="primary" *ngIf="cambio">Guardar</button>
+        <span class="separator"></span>
+        <button mat-raised-button color="warn" *ngIf="cambio" (click)="cancelado()">Cancelar</button>
+      </div>
+
+      <!-- Control de PDF -->
+      <div class="input-container">
+        <label>Subir Archivo</label>
+        <input type="file" id="uzytavconvoca_digital" (change)="onFileChange($event)" 
+        formControlName="archivo">
+
+      </div>
+
+    </div>
+  </form>
+</div>
\ No newline at end of file

src/app/modules/main/pages/Proyectos/Acta Compromiso Director Proyecto/acta-director-proyecto/acta-director-proyecto.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ActaDirectorProyectoComponent } from './acta-director-proyecto.component';
+
+describe('ActaDirectorProyectoComponent', () => {
+  let component: ActaDirectorProyectoComponent;
+  let fixture: ComponentFixture<ActaDirectorProyectoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActaDirectorProyectoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActaDirectorProyectoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Acta Compromiso Director Proyecto/acta-director-proyecto/acta-director-proyecto.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { AnexosImagenes } from 'src/app/modules/main/Models/anexos-imagenes';
+import { AnexosImagenesService } from 'src/app/modules/main/services/anexos-imagenes/anexos-imagenes.service';
+import { ConvocatoriaService } from 'src/app/modules/main/services/convocatoria/convocatoria.service';
+import { MatDialog } from '@angular/material/dialog';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { format } from 'date-fns';
+import { ActualizarAnexosService } from 'src/app/modules/main/services/actualizar_anexos/actualizar-anexos.service';
+import { EnvioFormularioComponent } from '../../../programa/opciones/envio-formulario/envio-formulario.component';
+import { ProyectosService } from 'src/app/modules/main/services/proyectos/proyectos.service';
+import { ProyectoComponent } from '../../Proyectos/Proyecto/Proyecto.component';
+import { Proyectos } from 'src/app/modules/main/Models/proyectos';
+import { DatosEspeService } from 'src/app/modules/main/services/APIs Externas/Datos espe/datos-espe.service';
+
+@Component({
+  selector: 'app-acta-director-proyecto',
+  templateUrl: './acta-director-proyecto.component.html',
+  styleUrls: ['./acta-director-proyecto.component.css']
+})
+export class ActaDirectorProyectoComponent implements OnInit {
+
+  myForm: FormGroup;
+  selectedFile: File | null = null;
+  file: File;
+  anexosImagenes: AnexosImagenes = {};
+  enviarSolicitud = false;
+  formularioEnviado: boolean
+  cambio: boolean;
+  proyecto: Proyectos
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private proyectosService: ProyectosService,
+    private dialog: MatDialog,
+    private actualizarAnexosService: ActualizarAnexosService,
+    private datosCompartidos: Actualiza_datosService,
+    private idCompartido: Compartir_idService,
+    private datosEspeService: DatosEspeService,
+
+  ) {
+    this.proyecto = new Proyectos();
+  }
+
+  ngOnInit(): void {
+    this.cambio = false;
+    this.myForm = this.formBuilder.group({
+      archivo: [{ value: '', disabled: true }, Validators.required],
+    });
+  }
+
+
+  onFileSelected(event: any) {
+    this.selectedFile = event.target.files[0];
+  }
+
+
+  onFileChange(event: any) {
+    // Obtener el archivo seleccionado
+    const fileList: FileList = event.target.files;
+    if (fileList.length > 0) {
+      this.file = fileList[0];
+    }
+  }
+
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      width: '400px',
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.formularioEnviado = true;
+    });
+  }
+
+  async onSubmit() {
+    if (this.myForm.valid) {
+
+      this.proyecto.uzytavproyec_id = this.idCompartido.getIdGuardado();
+      const pdfData = await this.enviarPDF();
+      this.proyecto.uzytavproyec_com_part1_url = pdfData.idPDF;
+      this.proyecto.uzytavproyec_com_part1_nom = pdfData.filename;
+      this.proyectosService.modificarParametros(this.proyecto.uzytavproyec_id, this.proyecto).subscribe(
+        response => {
+          this.openModal();
+          console.log('Datos Actualizados', this.proyecto);
+          this.myForm.disable();
+          this.cambio = false;
+        },
+        error => {
+          console.log(error)
+        }
+      );
+    }
+  }
+
+  async enviarPDF() {
+    const formData = new FormData();
+    formData.append('files', this.file);
+    formData.append('sistema', 'vinculacion');
+
+    try {
+      const response = await this.datosEspeService.saveDocument(formData);
+      return {
+        idPDF: response.uuid,
+        filename: response.fileName
+      };
+    } catch (error) {
+      console.error('Error al guardar el PDF en el servidor:', error);
+      throw error;
+    }
+  }
+
+  cambiar() {
+    this.cambio = true;
+    this.myForm.get('archivo').enable();
+  }
+  cancelado() {
+    this.cambio = false;
+    this.myForm.disable();
+  }
+}

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/acta-compromiso-carreras/acta-compromiso-carreras.component.css

+/* Estilos para el formulario */
+.formulario {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 96%;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 10px;
+  }
+  
+  .botones{
+    width: 100px;
+    height: 40px;
+    text-align: center;
+    padding: 0;
+  }
+  /* Estilos para la columna única */
+  .columna-unico {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 0;
+    padding-left: 0;
+  }
+  
+  /* Estilos para los labels */
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+  
+  /* Estilos para los inputs y selects */
+  input[type="text"],
+  select {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    background-color: transparent;
+    font-size: 16px;
+    margin-bottom: 16px;
+    transition: border-color 0.3s ease;
+  }
+  
+  input[type="text"]:focus,
+  select:focus {
+    outline: none;
+    border-color: #4caf50;
+  }
+  
+  /* Estilos para los mensajes de error */
+  .error-message {
+    color: red;
+    font-size: 14px;
+    margin-top: 4px;
+  }
+  
+  /* Estilos para el botón */
+  button {
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    background-color: rgb(71, 127, 75);
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  button:hover {
+    background-color:  rgb(90, 159, 95);
+  }
+  
+  /* Estilos para el contenedor principal */
+  .contenedor {
+    width: 96%;
+    margin-left: 2%;
+    margin-right: 2%;
+    margin-top: 10%;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    background-color: #ffffff;
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Estilos para el contenedor del formulario */
+  .contenedor-dos {
+    margin-top: 30px;
+    padding: 0.9375rem 20px;
+    position: relative;
+  }
+  
+  /* Estilos para el título sobremontado */
+  .sobremontado {
+    position: relative;
+    width: 96%;
+    top: -20px;
+    left: 2%;
+    background-color: #477f4b;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-bottom: -50px;
+    z-index: 2;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  }
+  
+  /* Estilos para el icono de instituciones */
+  .icono-instituciones {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    font-size: 20px;
+  }
+  
+  .volver{
+    position: absolute;
+    top: 25%;
+    right: 10px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    color: rgb(71, 127, 75);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  
+  }
+  
+  .save-button {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+  }
+  
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+  }
+  
\ No newline at end of file

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/acta-compromiso-carreras/acta-compromiso-carreras.component.html

+<div class="contenedor-dos">
+  <form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
+    <!-- Información de la institución -->
+    <div class="columna-unico">
+      <div class="save-button">
+        <button mat-raised-button color="primary" *ngIf="!cambio" (click)="cambiar()">Editar</button>
+        <button mat-raised-button color="primary" *ngIf="cambio">Guardar</button>
+        <span class="separator"></span>
+        <button mat-raised-button color="warn" *ngIf="cambio" (click)="cancelado()">Cancelar</button>
+      </div>
+
+      <!-- Control de PDF -->
+      <div class="input-container">
+        <label>Subir Archivo</label>
+        <input type="file" id="uzytavconvoca_digital" (change)="onFileChange($event)" 
+        formControlName="archivo">
+
+      </div>
+
+    </div>
+  </form>
+</div>
\ No newline at end of file

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/acta-compromiso-carreras/acta-compromiso-carreras.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ActaCompromisoCarrerasComponent } from './acta-compromiso-carreras.component';
+
+describe('ActaCompromisoCarrerasComponent', () => {
+  let component: ActaCompromisoCarrerasComponent;
+  let fixture: ComponentFixture<ActaCompromisoCarrerasComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActaCompromisoCarrerasComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActaCompromisoCarrerasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/acta-compromiso-carreras/acta-compromiso-carreras.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { AnexosImagenes } from 'src/app/modules/main/Models/anexos-imagenes';
+import { AnexosImagenesService } from 'src/app/modules/main/services/anexos-imagenes/anexos-imagenes.service';
+import { ConvocatoriaService } from 'src/app/modules/main/services/convocatoria/convocatoria.service';
+import { MatDialog } from '@angular/material/dialog';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { format } from 'date-fns';
+import { ActualizarAnexosService } from 'src/app/modules/main/services/actualizar_anexos/actualizar-anexos.service';
+import { EnvioFormularioComponent } from '../../../programa/opciones/envio-formulario/envio-formulario.component';
+import { ProyectosService } from 'src/app/modules/main/services/proyectos/proyectos.service';
+import { ProyectoComponent } from '../../Proyectos/Proyecto/Proyecto.component';
+import { Proyectos } from 'src/app/modules/main/Models/proyectos';
+import { DatosEspeService } from 'src/app/modules/main/services/APIs Externas/Datos espe/datos-espe.service';
+
+@Component({
+  selector: 'app-acta-compromiso-carreras',
+  templateUrl: './acta-compromiso-carreras.component.html',
+  styleUrls: ['./acta-compromiso-carreras.component.css']
+})
+export class ActaCompromisoCarrerasComponent implements OnInit {
+
+  myForm: FormGroup;
+  selectedFile: File | null = null;
+  file: File;
+  anexosImagenes: AnexosImagenes = {};
+  enviarSolicitud = false;
+  formularioEnviado: boolean
+  cambio: boolean;
+  proyecto: Proyectos
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private proyectosService: ProyectosService,
+    private dialog: MatDialog,
+    private actualizarAnexosService: ActualizarAnexosService,
+    private datosCompartidos: Actualiza_datosService,
+    private idCompartido: Compartir_idService,
+    private datosEspeService: DatosEspeService,
+
+  ) {
+    this.proyecto = new Proyectos();
+  }
+
+  ngOnInit(): void {
+    this.cambio = false;
+    this.myForm = this.formBuilder.group({
+      archivo: [{ value: '', disabled: true }, Validators.required],
+    });
+  }
+
+
+  onFileSelected(event: any) {
+    this.selectedFile = event.target.files[0];
+  }
+
+
+  onFileChange(event: any) {
+    // Obtener el archivo seleccionado
+    const fileList: FileList = event.target.files;
+    if (fileList.length > 0) {
+      this.file = fileList[0];
+    }
+  }
+
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      width: '400px',
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.formularioEnviado = true;
+    });
+  }
+
+  async onSubmit() {
+    if (this.myForm.valid) {
+
+      this.proyecto.uzytavproyec_id = this.idCompartido.getIdGuardado();
+      const pdfData = await this.enviarPDF();
+      this.proyecto.uzytavproyec_com_part2_url = pdfData.idPDF;
+      this.proyecto.uzytavproyec_com_part2_nom = pdfData.filename;
+      this.proyectosService.modificarParametros(this.proyecto.uzytavproyec_id, this.proyecto).subscribe(
+        response => {
+          this.openModal();
+          console.log('Datos Actualizados', this.proyecto);
+          this.myForm.disable();
+          this.cambio = false;
+        },
+        error => {
+          console.log(error)
+        }
+      );
+    }
+  }
+
+  async enviarPDF() {
+    const formData = new FormData();
+    formData.append('files', this.file);
+    formData.append('sistema', 'vinculacion');
+
+    try {
+      const response = await this.datosEspeService.saveDocument(formData);
+      return {
+        idPDF: response.uuid,
+        filename: response.fileName
+      };
+    } catch (error) {
+      console.error('Error al guardar el PDF en el servidor:', error);
+      throw error;
+    }
+  }
+
+  cambiar() {
+    this.cambio = true;
+    this.myForm.get('archivo').enable();
+  }
+  cancelado() {
+    this.cambio = false;
+    this.myForm.disable();
+  }
+
+}

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/listar-acta-compromiso-carreras/listar-acta-compromiso-carreras.component.html

+<p>
+  listar-acta-compromiso-carreras works!
+</p>

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/listar-acta-compromiso-carreras/listar-acta-compromiso-carreras.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ListarActaCompromisoCarrerasComponent } from './listar-acta-compromiso-carreras.component';
+
+describe('ListarActaCompromisoCarrerasComponent', () => {
+  let component: ListarActaCompromisoCarrerasComponent;
+  let fixture: ComponentFixture<ListarActaCompromisoCarrerasComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListarActaCompromisoCarrerasComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListarActaCompromisoCarrerasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Acta de Compromiso de Carreras/listar-acta-compromiso-carreras/listar-acta-compromiso-carreras.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-listar-acta-compromiso-carreras',
+  templateUrl: './listar-acta-compromiso-carreras.component.html',
+  styleUrls: ['./listar-acta-compromiso-carreras.component.css']
+})
+export class ListarActaCompromisoCarrerasComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/acta-consejo-departamento/acta-consejo-departamento.component.css

+/* Estilos para el formulario */
+.formulario {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 96%;
+    margin: 0 auto;
+    background-color: white;
+    border-radius: 10px;
+  }
+  
+  .botones{
+    width: 100px;
+    height: 40px;
+    text-align: center;
+    padding: 0;
+  }
+  /* Estilos para la columna única */
+  .columna-unico {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 0;
+    padding-left: 0;
+  }
+  
+  /* Estilos para los labels */
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+  
+  /* Estilos para los inputs y selects */
+  input[type="text"],
+  select {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    background-color: transparent;
+    font-size: 16px;
+    margin-bottom: 16px;
+    transition: border-color 0.3s ease;
+  }
+  
+  input[type="text"]:focus,
+  select:focus {
+    outline: none;
+    border-color: #4caf50;
+  }
+  
+  /* Estilos para los mensajes de error */
+  .error-message {
+    color: red;
+    font-size: 14px;
+    margin-top: 4px;
+  }
+  
+  /* Estilos para el botón */
+  button {
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    background-color: rgb(71, 127, 75);
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  button:hover {
+    background-color:  rgb(90, 159, 95);
+  }
+  
+  /* Estilos para el contenedor principal */
+  .contenedor {
+    width: 96%;
+    margin-left: 2%;
+    margin-right: 2%;
+    margin-top: 10%;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    background-color: #ffffff;
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Estilos para el contenedor del formulario */
+  .contenedor-dos {
+    margin-top: 30px;
+    padding: 0.9375rem 20px;
+    position: relative;
+  }
+  
+  /* Estilos para el título sobremontado */
+  .sobremontado {
+    position: relative;
+    width: 96%;
+    top: -20px;
+    left: 2%;
+    background-color: #477f4b;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-bottom: -50px;
+    z-index: 2;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  }
+  
+  /* Estilos para el icono de instituciones */
+  .icono-instituciones {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    font-size: 20px;
+  }
+  
+  .volver{
+    position: absolute;
+    top: 25%;
+    right: 10px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    color: rgb(71, 127, 75);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  
+  }
+  
+  .save-button {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+  }
+  
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+  }
+  
\ No newline at end of file

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/acta-consejo-departamento/acta-consejo-departamento.component.html

+<div class="contenedor-dos">
+  <form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
+    <!-- Información de la institución -->
+    <div class="columna-unico">
+      <div class="save-button">
+        <button mat-raised-button color="primary" *ngIf="!cambio" (click)="cambiar()">Editar</button>
+        <button mat-raised-button color="primary" *ngIf="cambio">Guardar</button>
+        <span class="separator"></span>
+        <button mat-raised-button color="warn" *ngIf="cambio" (click)="cancelado()">Cancelar</button>
+      </div>
+
+      <!-- Control de PDF -->
+      <div class="input-container">
+        <label>Subir Archivo</label>
+        <input type="file" id="uzytavconvoca_digital" (change)="onFileChange($event)" 
+        formControlName="archivo">
+      </div>
+    </div>
+  </form>
+</div>
\ No newline at end of file

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/acta-consejo-departamento/acta-consejo-departamento.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ActaConsejoDepartamentoComponent } from './acta-consejo-departamento.component';
+
+describe('ActaConsejoDepartamentoComponent', () => {
+  let component: ActaConsejoDepartamentoComponent;
+  let fixture: ComponentFixture<ActaConsejoDepartamentoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActaConsejoDepartamentoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActaConsejoDepartamentoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/acta-consejo-departamento/acta-consejo-departamento.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { AnexosImagenes } from 'src/app/modules/main/Models/anexos-imagenes';
+import { AnexosImagenesService } from 'src/app/modules/main/services/anexos-imagenes/anexos-imagenes.service';
+import { ConvocatoriaService } from 'src/app/modules/main/services/convocatoria/convocatoria.service';
+import { MatDialog } from '@angular/material/dialog';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { format } from 'date-fns';
+import { ActualizarAnexosService } from 'src/app/modules/main/services/actualizar_anexos/actualizar-anexos.service';
+import { EnvioFormularioComponent } from '../../../programa/opciones/envio-formulario/envio-formulario.component';
+import { ProyectosService } from 'src/app/modules/main/services/proyectos/proyectos.service';
+import { ProyectoComponent } from '../../Proyectos/Proyecto/Proyecto.component';
+import { Proyectos } from 'src/app/modules/main/Models/proyectos';
+import { DatosEspeService } from 'src/app/modules/main/services/APIs Externas/Datos espe/datos-espe.service';
+
+@Component({
+  selector: 'app-acta-consejo-departamento',
+  templateUrl: './acta-consejo-departamento.component.html',
+  styleUrls: ['./acta-consejo-departamento.component.css']
+})
+export class ActaConsejoDepartamentoComponent implements OnInit {
+
+  myForm: FormGroup;
+  selectedFile: File | null = null;
+  file: File;
+  anexosImagenes: AnexosImagenes = {};
+  enviarSolicitud = false;
+  formularioEnviado: boolean
+  cambio: boolean;
+  proyecto: Proyectos
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private proyectosService: ProyectosService,
+    private dialog: MatDialog,
+    private actualizarAnexosService: ActualizarAnexosService,
+    private datosCompartidos: Actualiza_datosService,
+    private idCompartido: Compartir_idService,
+    private datosEspeService: DatosEspeService,
+
+  ) {
+    this.proyecto = new Proyectos();
+  }
+
+  ngOnInit(): void {
+    this.cambio = false;
+    this.myForm = this.formBuilder.group({
+      archivo: [{ value: '', disabled: true }, Validators.required],
+    });
+  }
+
+
+  onFileSelected(event: any) {
+    this.selectedFile = event.target.files[0];
+  }
+
+
+  onFileChange(event: any) {
+    // Obtener el archivo seleccionado
+    const fileList: FileList = event.target.files;
+    if (fileList.length > 0) {
+      this.file = fileList[0];
+    }
+  }
+
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      width: '400px',
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.formularioEnviado = true;
+    });
+  }
+
+  async onSubmit() {
+    if (this.myForm.valid) {
+
+      this.proyecto.uzytavproyec_id = this.idCompartido.getIdGuardado();
+      const pdfData = await this.enviarPDF();
+      this.proyecto.uzytavproyec_aprob_con_dep_url = pdfData.idPDF;
+      this.proyecto.uzytavproyec_aprob_con_dep_nom = pdfData.filename;
+      this.proyectosService.modificarParametros(this.proyecto.uzytavproyec_id, this.proyecto).subscribe(
+        response => {
+          this.openModal();
+          console.log('Datos Actualizados', this.proyecto);
+          this.myForm.disable();
+          this.cambio = false;
+        },
+        error => {
+          console.log(error)
+        }
+      );
+    }
+  }
+
+  async enviarPDF() {
+    const formData = new FormData();
+    formData.append('files', this.file);
+    formData.append('sistema', 'vinculacion');
+
+    try {
+      const response = await this.datosEspeService.saveDocument(formData);
+      return {
+        idPDF: response.uuid,
+        filename: response.fileName
+      };
+    } catch (error) {
+      console.error('Error al guardar el PDF en el servidor:', error);
+      throw error;
+    }
+  }
+
+  cambiar() {
+    this.cambio = true;
+    this.myForm.get('archivo').enable();
+  }
+  cancelado() {
+    this.cambio = false;
+    this.myForm.disable();
+  }
+
+}

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/listar-acta-consejo-departamento/listar-acta-consejo-departamento.component.html

+<p>
+  listar-acta-consejo-departamento works!
+</p>

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/listar-acta-consejo-departamento/listar-acta-consejo-departamento.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ListarActaConsejoDepartamentoComponent } from './listar-acta-consejo-departamento.component';
+
+describe('ListarActaConsejoDepartamentoComponent', () => {
+  let component: ListarActaConsejoDepartamentoComponent;
+  let fixture: ComponentFixture<ListarActaConsejoDepartamentoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListarActaConsejoDepartamentoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListarActaConsejoDepartamentoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Acta de Consejo de Departamento/listar-acta-consejo-departamento/listar-acta-consejo-departamento.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-listar-acta-consejo-departamento',
+  templateUrl: './listar-acta-consejo-departamento.component.html',
+  styleUrls: ['./listar-acta-consejo-departamento.component.css']
+})
+export class ListarActaConsejoDepartamentoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/main/pages/Proyectos/Alineamiento del Proyecto/Objetivos Provinciales/objetivos-provinciales/objetivos-provinciales.component.html

@@ -2,7 +2,7 @@
   <app-objetivos-zona *ngIf="idCompartido.mostrar"></app-objetivos-zona>
 
   <div class="mat-elevation-z8">
-    
+
     <table mat-table [dataSource]="dataSource" matSort>
 
       <!-- Nro Column -->

src/app/modules/main/pages/Proyectos/Alineamiento del Proyecto/Objetivos Provinciales/objetivos-zona/objetivos-zona.component.ts

@@ -60,7 +60,7 @@ export class ObjetivosZonaComponent implements OnInit {
 
 
   ngOnInit() {
-    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'),10);
+    this.idRecuperado = this.idCompartido.getIdZonaDetalle();
     this.zonaDM = this.mostrarOcultarService.coberturaEdit;
     this.mostrarObjetivosZona = true
     console.log("en el componente agregar se inicializa como :  ", this.mostrarObjetivosZona)
@@ -139,7 +139,6 @@ export class ObjetivosZonaComponent implements OnInit {
   async obtenerProvincia(id: string) {
     try {
       const provincia = await this.ubicacionesService.obtenerProvinciasId(id).toPromise();
-      console.log("provincia obtenida", provincia);
       this.provincia = provincia;
       this.mostrarOcultarService.provinciaEditado = this.provincia;
     } catch (error) {
@@ -151,7 +150,6 @@ export class ObjetivosZonaComponent implements OnInit {
   obtenerCanton(id: string) {
     this.ubicacionesService.obtenerCantonId(id).subscribe(
       canton => {
-        console.log("canton obtenida", canton)
         this.canton = canton;
       },
       error => {
@@ -163,7 +161,6 @@ export class ObjetivosZonaComponent implements OnInit {
     obtenerParroquia(id:string) {
       this.ubicacionesService.obtenerParroquiasId(id).subscribe(
         parroquia => {
-          console.log("parroquia obtenida",parroquia)
           this.parroquia = parroquia;
         },
         error => {

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/edit-insti/edit-insti.component.css

+/* Estilos para el formulario */
+.formulario {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 96%;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.botones{
+  width: 100px;
+  height: 40px;
+  text-align: center;
+  padding: 0;
+}
+/* Estilos para la columna única */
+.columna-unico {
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+/* Estilos para los labels */
+label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+}
+
+/* Estilos para los inputs y selects */
+input[type="text"],
+select {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  background-color: transparent;
+  font-size: 16px;
+  margin-bottom: 16px;
+  transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus,
+select:focus {
+  outline: none;
+  border-color: #4caf50;
+}
+
+/* Estilos para los mensajes de error */
+.error-message {
+  color: red;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+/* Estilos para el botón */
+button {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  background-color: rgb(71, 127, 75);
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color:  rgb(90, 159, 95);
+}
+
+/* Estilos para el contenedor principal */
+.contenedor {
+  width: 96%;
+  margin-left: 2%;
+  margin-right: 2%;
+  margin-top: 10%;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  background-color: #ffffff;
+  position: relative;
+  z-index: 1;
+}
+
+/* Estilos para el contenedor del formulario */
+.contenedor-dos {
+  margin-top: 30px;
+  padding: 0.9375rem 20px;
+  position: relative;
+}
+
+/* Estilos para el título sobremontado */
+.sobremontado {
+  position: relative;
+  width: 96%;
+  top: -20px;
+  left: 2%;
+  background-color: #477f4b;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+  box-sizing: border-box;
+  margin-bottom: -50px;
+  z-index: 2;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* Estilos para el icono de instituciones */
+.icono-instituciones {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 5px;
+  font-size: 20px;
+}
+
+.volver{
+  position: absolute;
+  top: 25%;
+  right: 10px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background-color: white;
+  display: flex;
+  color: rgb(71, 127, 75);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+}
+
+.save-button {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+
+.input-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+/* Estilos para el formulario */
+.formulario {
+display: flex;
+flex-wrap: wrap;
+justify-content: space-between;
+max-width: 96%;
+margin: 0 auto;
+background-color: white;
+border-radius: 10px;
+}
+
+.botones{
+width: 100px;
+height: 40px;
+text-align: center;
+padding: 0;
+}
+/* Estilos para la columna única */
+.columna-unico {
+width: 100%;
+box-sizing: border-box;
+padding-right: 0;
+padding-left: 0;
+}
+
+/* Estilos para los labels */
+label {
+display: block;
+margin-bottom: 8px;
+font-weight: bold;
+}
+
+/* Estilos para los inputs y selects */
+input[type="text"],
+select {
+width: 100%;
+padding: 10px;
+border: none;
+border-bottom: 1px solid #ccc;
+background-color: transparent;
+font-size: 16px;
+margin-bottom: 16px;
+transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus,
+select:focus {
+outline: none;
+border-color: #4caf50;
+}
+
+/* Estilos para los mensajes de error */
+.error-message {
+color: red;
+font-size: 14px;
+margin-top: 4px;
+}
+
+/* Estilos para el botón */
+button {
+display: block;
+margin: 20px auto;
+padding: 10px 20px;
+background-color: rgb(71, 127, 75);
+color: #fff;
+border: none;
+border-radius: 5px;
+font-size: 16px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+}
+
+button:hover {
+background-color:  rgb(90, 159, 95);
+}
+
+/* Estilos para el contenedor principal */
+.contenedor {
+width: 96%;
+margin-left: 2%;
+margin-right: 2%;
+margin-top: 10%;
+border-radius: 10px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+background-color: #ffffff;
+position: relative;
+z-index: 1;
+}
+
+/* Estilos para el contenedor del formulario */
+.contenedor-dos {
+margin-top: 30px;
+padding: 0.9375rem 20px;
+position: relative;
+}
+
+/* Estilos para el título sobremontado */
+.sobremontado {
+position: relative;
+width: 96%;
+top: -20px;
+left: 2%;
+background-color: #477f4b;
+color: #fff;
+text-align: center;
+padding: 10px;
+box-sizing: border-box;
+margin-bottom: -50px;
+z-index: 2;
+border-radius: 10px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* Estilos para el icono de instituciones */
+.icono-instituciones {
+display: flex;
+align-items: center;
+justify-content: center;
+margin-right: 5px;
+font-size: 20px;
+}
+
+.volver{
+position: absolute;
+top: 25%;
+right: 10px;
+transform: translateY(-50%);
+border-radius: 50%;
+background-color: white;
+display: flex;
+color: rgb(71, 127, 75);
+align-items: center;
+justify-content: center;
+padding: 0;
+width: 32px;
+height: 32px;
+border: none;
+outline: none;
+cursor: pointer;
+
+}
+
+.save-button {
+display: flex;
+justify-content: flex-end;
+margin-bottom: 16px;
+}
+
+
+.input-container {
+width: 100%;
+display: flex;
+flex-direction: column;
+margin-bottom: 16px;
+}

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/edit-insti/edit-insti.component.html

+
+<form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <!-- Información de la institución -->
+  <div class="columna-unico">
+    <!-- Control de fechas inicio -->
+    <div class="save-button">
+      <button mat-raised-button class="botones" color="primary" [disabled]="myForm.invalid">Guardar</button>
+      <span class="separator"></span>
+      <button mat-raised-button class="botones" color="warn" (click)="cancelado()">Cancelar</button>
+    </div>
+
+
+    <div class="input-container" *ngIf="insti">
+      <mat-form-field>
+        <mat-label>Comunidad Beneficiaria</mat-label>
+        <input matInput placeholder="comunidad" [(ngModel)]="insti.uzytavinstituc_nombre"  formControlName="comunidad">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Directos Hombres</mat-label>
+        <input matInput placeholder="hombre"  formControlName="hombre" (input)="calcularTotalDirectos()" (blur)="calcularTotalDirectos()">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Directos Mujeres</mat-label>
+        <input matInput placeholder="mujer"  formControlName="mujer" (input)="calcularTotalDirectos()" (blur)="calcularTotalDirectos()">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Directos Niños</mat-label>
+        <input matInput placeholder="nino"  formControlName="nino" (input)="calcularTotalDirectos()" (blur)="calcularTotalDirectos()">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Directos Personas con Capacidades Especiales</mat-label>
+        <input matInput placeholder="Numero de personas con capacidades especiales"  formControlName="espe" (input)="calcularTotalDirectos()" (blur)="calcularTotalDirectos()">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Total Directos</mat-label>
+        <input matInput placeholder="Suma del Total de beneficiarios Directos"  formControlName="directo"  (input)="calcularTotal()" (blur)="calcularTotal()">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Total Indirectos</mat-label>
+        <input matInput placeholder="Total de beneficiarios Indirectos"  formControlName="indirecto"  (input)="calcularTotal()" (blur)="calcularTotal()">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Total</mat-label>
+        <input matInput placeholder="Suma del total beneficiarios directos e indirectos"  formControlName="total">
+      </mat-form-field>
+    </div>
+
+  </div>
+</form>

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/edit-insti/edit-insti.component.spec.ts

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

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/edit-insti/edit-insti.component.ts

+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { Instituciones } from 'src/app/modules/main/Models/instituciones';
+import { instproy } from 'src/app/modules/main/Models/instproy';
+import { InstitucionesService } from 'src/app/modules/main/services/Instituciones/instituciones.service';
+import { UbicacionesService } from 'src/app/modules/main/services/Ubicaciones/ubicaciones.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
+import { ParametrosdetService } from 'src/app/modules/main/services/parametrosdet/parametrosdet.service';
+import { EnvioFormularioComponent } from '../../../../programa/opciones/envio-formulario/envio-formulario.component';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+
+@Component({
+  selector: 'vex-edit-insti',
+  templateUrl: './edit-insti.component.html',
+  styleUrls: ['./edit-insti.component.css']
+})
+export class EditInstiComponent implements OnInit {
+
+  /*Variables necesarias*/
+  myForm: FormGroup;
+  dataSource: MatTableDataSource<instproy>;
+  formularioEnviado: boolean;
+  instuPro: instproy;
+  mostrarInst: boolean = false;
+  insti: Instituciones;
+  idRecuperado: number;
+  constructor(
+    private formBuilder: FormBuilder,
+    private dialog: MatDialog,
+    private idCompartido: Compartir_idService,
+    private instP: ParametrosdetService,
+    private mostrarOcultarService: MostrarOcultarService,
+    private ubicacionesService: UbicacionesService,
+    private instiS: InstitucionesService,
+    private datosCompartidos: Actualiza_datosService
+  ) {
+    this.dataSource = new MatTableDataSource<instproy>([]);
+  }
+
+  ngOnInit(): void {
+    this.instuPro = this.mostrarOcultarService.editInst;
+    this.idRecuperado = this.idCompartido.getIdInst();
+    this.obtenerInsti(this.instuPro.uzytavinstituc_id);
+    this.initializerForm();
+    this.mostrarInst = true;
+  }
+  initializerForm() {
+    this.myForm = this.formBuilder.group({
+      comunidad: [{ value: this.instuPro.uzytavinstituc_id, disabled: true }, Validators.required],
+      hombre: [{ value: this.instuPro.uzytavinstproy_dir_hombres, disabled: false }, Validators.required],
+      mujer: [{ value: this.instuPro.uzytavinstproy_dir_mujeres, disabled: false }, Validators.required],
+      nino: [{ value: this.instuPro.uzytavinstproy_dir_ninios, disabled: false }, Validators.required],
+      espe: [{ value: this.instuPro.uzytavinstproy_dir_discapacidad, disabled: false }, Validators.required],
+      directo: [{ value: this.instuPro.uzytavinstproy_DIRECTOS, disabled: true }, Validators.required],
+      indirecto: [{ value: this.instuPro.uzytavinstproy_indirectos, disabled: false }, Validators.required],
+      total: [{ value: this.instuPro.uzytavinstproy_TOTAL, disabled: true }, Validators.required],
+    });
+  }
+
+  obtenerInsti(id: number) {
+    this.instiS.obtenerParametrosId2(id).subscribe(data => {
+      this.insti = data;
+    });
+  }
+
+
+  calcularTotalDirectos() {
+    const hombres = parseInt(this.myForm.get('hombre').value ,10) || 0;
+    const mujeres = parseInt(this.myForm.get('mujer').value,10) || 0 ;
+    const nino = parseInt(this.myForm.get('nino').value,10) || 0;
+    const espe = parseInt(this.myForm.get('espe').value,10) || 0;
+
+    const totalDirectos = hombres + mujeres + nino + espe;
+    this.myForm.get('directo').setValue(totalDirectos);
+  }
+
+  calcularTotal(){
+    const directo = parseInt(this.myForm.get('directo').value,10) || 0;
+    const indirecto = parseInt(this.myForm.get('indirecto').value,10) || 0;
+    const total = directo + indirecto;
+    this.myForm.get('total').setValue(total);
+  }
+  onSubmit() {
+    if (this.myForm.valid) {
+      this.instuPro.uzytavproyec_id = this.idRecuperado;
+      this.instuPro.uzytavinstproy_dir_hombres = this.myForm.get('hombre').value;
+      this.instuPro.uzytavinstproy_dir_mujeres = this.myForm.get('mujer').value;
+      this.instuPro.uzytavinstproy_dir_ninios = this.myForm.get('nino').value;
+      this.instuPro.uzytavinstproy_dir_discapacidad = this.myForm.get('espe').value;
+      this.instuPro.uzytavinstproy_DIRECTOS = this.myForm.get('directo').value;
+      this.instuPro.uzytavinstproy_indirectos = this.myForm.get('indirecto').value;
+      this.instuPro.uzytavinstproy_TOTAL = this.myForm.get('total').value;
+      this.instP.modificarParametros(this.instuPro.uzytavinstproy_id, this.instuPro).subscribe(response => {
+        this.openModal();
+        this.idCompartido.ocultarFormulario2();
+        this.datosCompartidos.actualizarDatos(this.instuPro);
+      }, error => {
+        console.log(error)
+      });
+    }
+  }
+
+  cancelado() {
+    this.idCompartido.ocultarFormulario2();
+    this.mostrarInst = false;
+    this.myForm.enable();
+    this.myForm.reset();
+  }
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.formularioEnviado = true;
+    });
+  }
+}

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/list-insti/list-insti.component.css

+
+.Column {
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 100px;
+  white-space: inherit;
+}
+
+.Column1 {
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 10px;
+  white-space: normal;
+  overflow: visible;
+}
+
+.Column2 {
+  width: 25px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+  font-family: 'Roboto', sans-serif;
+  color: #333;
+}
+
+table th,
+table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+table th {
+  background-color: rgb(248, 249, 250);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+table td {
+  position: relative;
+}
+
+table td::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e0e0e0;
+}
+
+
+input[type="text"] {
+  width: 200px;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+
+.azul{
+  color: blue;
+}
+@media (max-width: 600px) {
+  table {
+    font-size: 14px;
+  }
+
+  table th,
+  table td {
+    padding: 8px;
+  }
+}

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/list-insti/list-insti.component.html

+<div class="container" >
+
+  <vex-edit-insti *ngIf="idCompartido.mostrar2"></vex-edit-insti>
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="Nro" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef
+          mat-sort-header> Nro </th>
+        <td class="Column1" mat-cell *matCellDef="let i = index"> {{ i+1 }}
+        </td>
+      </ng-container>
+
+      <!-- Parroquia Column -->
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="Comunidad" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Comunidad Beneficiaria </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ getInstitucionNombre(dato.uzytavinstituc_id)}} </td>
+      </ng-container>
+
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="Hombres" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Directos Hombres </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ dato.uzytavinstproy_dir_hombres}} </td>
+      </ng-container>
+
+      <!-- Representante Column -->
+      <ng-container matColumnDef="mujeres" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Directos Mujeres </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_dir_mujeres}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="ninos" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Directos Niños </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_dir_ninios}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="especiales" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Directos Personas con Capacidades Especiles </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_dir_discapacidad}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="directors" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Total Directos </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_DIRECTOS}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="indirectos" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Total Indirectos </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_indirectos}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="total" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Total </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_TOTAL}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="acciones" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <button mat-icon-button (click)="mostrarInstu(dato.uzytavinstproy_id)">
+            <mat-icon class="azul">edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+</div>

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/list-insti/list-insti.component.spec.ts

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

src/app/modules/main/pages/Proyectos/Cierre/numerico de beneficiarios/list-insti/list-insti.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { Instituciones } from 'src/app/modules/main/Models/instituciones';
+import { instproy } from 'src/app/modules/main/Models/instproy';
+import { InstitucionesService } from 'src/app/modules/main/services/Instituciones/instituciones.service';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
+import { ParametrosdetService } from 'src/app/modules/main/services/parametrosdet/parametrosdet.service';
+
+@Component({
+  selector: 'vex-list-insti',
+  templateUrl: './list-insti.component.html',
+  styleUrls: ['./list-insti.component.css']
+})
+export class ListInstiComponent implements OnInit {
+
+  //variables necesarias
+  displayedColumns: string[] = ['Nro', 'Comunidad', 'Hombres', 'mujeres', 'ninos', 'especiales','directors','indirectos','total','acciones'];
+  idRecuperado: number;
+  dataSource: MatTableDataSource<instproy>;
+  instuProyect: instproy[] = [];
+  institucion: Instituciones[] = [];
+  constructor(
+    public idCompartido: Compartir_idService,
+    private datosCompartidos: Actualiza_datosService,
+    private instP: ParametrosdetService,
+    private InstitucionesS: InstitucionesService,
+    private mostrarOcultarService: MostrarOcultarService
+  ) {
+    this.dataSource = new MatTableDataSource<instproy>([]);
+  }
+
+  ngOnInit(): void {
+    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
+    this.datosCompartidos.datos$.subscribe(() =>{
+      this.obtenerRegistros();
+    });
+
+    this.instP.parametrosActualizados.subscribe(() =>{
+      this.obtenerRegistros();
+    });
+  }
+
+  obtenerRegistros(){
+    this.instP.obtenerRegistrosRelacionados(this.idRecuperado).subscribe(data =>{
+      this.instuProyect = data;
+      this.dataSource.data = this.instuProyect;
+    });
+
+    this.InstitucionesS.obtenerParametros().subscribe(data =>{
+      this.institucion = data;
+    });
+  }
+  mostrarInstu(id: number) {
+    this.idCompartido.mostrarFormulario2();
+    const registroSeleccionado = this.instuProyect.find(
+      inst => inst.uzytavinstproy_id === id);
+    this.idCompartido.setIdInst(id);
+    this.mostrarOcultarService.editInst = registroSeleccionado;
+  }
+
+  getInstitucionNombre(id: number): string {
+    const instit = this.institucion.find(i => i.uzytavinstituc_id === id);
+    if (instit) {
+      const nombre = instit.uzytavinstituc_nombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+}

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/edit-objetivos-ejec/edit-objetivos-ejec.component.css

+/* Estilos para el formulario */
+.formulario {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 96%;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.botones{
+  width: 100px;
+  height: 40px;
+  text-align: center;
+  padding: 0;
+}
+/* Estilos para la columna única */
+.columna-unico {
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+/* Estilos para los labels */
+label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+}
+
+/* Estilos para los inputs y selects */
+input[type="text"],
+select {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  background-color: transparent;
+  font-size: 16px;
+  margin-bottom: 16px;
+  transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus,
+select:focus {
+  outline: none;
+  border-color: #4caf50;
+}
+
+/* Estilos para los mensajes de error */
+.error-message {
+  color: red;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+/* Estilos para el botón */
+button {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  background-color: rgb(71, 127, 75);
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color:  rgb(90, 159, 95);
+}
+
+/* Estilos para el contenedor principal */
+.contenedor {
+  width: 96%;
+  margin-left: 2%;
+  margin-right: 2%;
+  margin-top: 10%;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  background-color: #ffffff;
+  position: relative;
+  z-index: 1;
+}
+
+/* Estilos para el contenedor del formulario */
+.contenedor-dos {
+  margin-top: 30px;
+  padding: 0.9375rem 20px;
+  position: relative;
+}
+
+/* Estilos para el título sobremontado */
+.sobremontado {
+  position: relative;
+  width: 96%;
+  top: -20px;
+  left: 2%;
+  background-color: #477f4b;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+  box-sizing: border-box;
+  margin-bottom: -50px;
+  z-index: 2;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* Estilos para el icono de instituciones */
+.icono-instituciones {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 5px;
+  font-size: 20px;
+}
+
+.volver{
+  position: absolute;
+  top: 25%;
+  right: 10px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background-color: white;
+  display: flex;
+  color: rgb(71, 127, 75);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+}
+
+.save-button {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+
+.input-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+/* Estilos para el formulario */
+.formulario {
+display: flex;
+flex-wrap: wrap;
+justify-content: space-between;
+max-width: 96%;
+margin: 0 auto;
+background-color: white;
+border-radius: 10px;
+}
+
+.botones{
+width: 100px;
+height: 40px;
+text-align: center;
+padding: 0;
+}
+/* Estilos para la columna única */
+.columna-unico {
+width: 100%;
+box-sizing: border-box;
+padding-right: 0;
+padding-left: 0;
+}
+
+/* Estilos para los labels */
+label {
+display: block;
+margin-bottom: 8px;
+font-weight: bold;
+}
+
+/* Estilos para los inputs y selects */
+input[type="text"],
+select {
+width: 100%;
+padding: 10px;
+border: none;
+border-bottom: 1px solid #ccc;
+background-color: transparent;
+font-size: 16px;
+margin-bottom: 16px;
+transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus,
+select:focus {
+outline: none;
+border-color: #4caf50;
+}
+
+/* Estilos para los mensajes de error */
+.error-message {
+color: red;
+font-size: 14px;
+margin-top: 4px;
+}
+
+/* Estilos para el botón */
+button {
+display: block;
+margin: 20px auto;
+padding: 10px 20px;
+background-color: rgb(71, 127, 75);
+color: #fff;
+border: none;
+border-radius: 5px;
+font-size: 16px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+}
+
+button:hover {
+background-color:  rgb(90, 159, 95);
+}
+
+/* Estilos para el contenedor principal */
+.contenedor {
+width: 96%;
+margin-left: 2%;
+margin-right: 2%;
+margin-top: 10%;
+border-radius: 10px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+background-color: #ffffff;
+position: relative;
+z-index: 1;
+}
+
+/* Estilos para el contenedor del formulario */
+.contenedor-dos {
+margin-top: 30px;
+padding: 0.9375rem 20px;
+position: relative;
+}
+
+/* Estilos para el título sobremontado */
+.sobremontado {
+position: relative;
+width: 96%;
+top: -20px;
+left: 2%;
+background-color: #477f4b;
+color: #fff;
+text-align: center;
+padding: 10px;
+box-sizing: border-box;
+margin-bottom: -50px;
+z-index: 2;
+border-radius: 10px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* Estilos para el icono de instituciones */
+.icono-instituciones {
+display: flex;
+align-items: center;
+justify-content: center;
+margin-right: 5px;
+font-size: 20px;
+}
+
+.volver{
+position: absolute;
+top: 25%;
+right: 10px;
+transform: translateY(-50%);
+border-radius: 50%;
+background-color: white;
+display: flex;
+color: rgb(71, 127, 75);
+align-items: center;
+justify-content: center;
+padding: 0;
+width: 32px;
+height: 32px;
+border: none;
+outline: none;
+cursor: pointer;
+
+}
+
+.save-button {
+display: flex;
+justify-content: flex-end;
+margin-bottom: 16px;
+}
+
+
+.input-container {
+width: 100%;
+display: flex;
+flex-direction: column;
+margin-bottom: 16px;
+}

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/edit-objetivos-ejec/edit-objetivos-ejec.component.html

+
+<form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <!-- Información de la institución -->
+  <div class="columna-unico">
+    <!-- Control de fechas inicio -->
+    <div class="save-button">
+      <button mat-raised-button class="botones" color="primary" [disabled]="myForm.invalid">Guardar</button>
+      <span class="separator"></span>
+      <button mat-raised-button class="botones" color="warn" (click)="cancelado()">Cancelar</button>
+    </div>
+
+
+    <div class="input-container">
+      <mat-form-field>
+        <mat-label>Comunidad Beneficiaria</mat-label>
+        <input matInput placeholder="descrip" formControlName="descrip">
+      </mat-form-field>
+    </div>
+
+    <div class="input-container">
+      <mat-form-field class="example-full-width">
+        <mat-label>Ingresar el valor ejecutado durante el desarrollo del Proyecto</mat-label>
+        <input matInput placeholder="Ingresar el valor ejecutado durante el desarrollo del Proyecto"  formControlName="valor">
+        <mat-error *ngIf="myForm.get('valor').hasError('valorMaximoExcedido')">El valor excede al indicador planificado</mat-error>
+      </mat-form-field>
+    </div>
+  </div>
+</form>

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/edit-objetivos-ejec/edit-objetivos-ejec.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditObjetivosEjecComponent } from './edit-objetivos-ejec.component';
+
+describe('EditObjetivosEjecComponent', () => {
+  let component: EditObjetivosEjecComponent;
+  let fixture: ComponentFixture<EditObjetivosEjecComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditObjetivosEjecComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditObjetivosEjecComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/edit-objetivos-ejec/edit-objetivos-ejec.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDivider } from '@angular/material/divider';
+import { objetivoprograma } from 'src/app/modules/main/Models/objetivoPrograma';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
+import { Objetivo_programaService } from 'src/app/modules/main/services/objetivo_programa/objetivo_programa.service';
+import { EnvioFormularioComponent } from '../../../../programa/opciones/envio-formulario/envio-formulario.component';
+
+@Component({
+  selector: 'vex-edit-objetivos-ejec',
+  templateUrl: './edit-objetivos-ejec.component.html',
+  styleUrls: ['./edit-objetivos-ejec.component.css']
+})
+export class EditObjetivosEjecComponent implements OnInit {
+  myForm: FormGroup;
+  formularioEnviado: boolean;
+  objetivoProgra: objetivoprograma;
+  mostrarObje: boolean = false;
+  idRecuperado: number;
+  constructor(
+    private formBuilder: FormBuilder,
+    private dialog: MatDialog,
+    private idCompartido: Compartir_idService,
+    private objS: Objetivo_programaService,
+    private mostrarOcultarSerivce: MostrarOcultarService,
+    private datosCompartidos: Actualiza_datosService
+  ) { }
+
+  ngOnInit(): void {
+    this.objetivoProgra = this.mostrarOcultarSerivce.editObje;
+    this.idRecuperado = this.idCompartido.getIdObj();
+    this.initializeForm();
+    this.mostrarObje = true;
+  }
+
+  initializeForm(){
+    this.myForm = this.formBuilder.group({
+      descrip: [{value: this.objetivoProgra.uzytavobjetivo_programaobjetivo_proy, disabled: true}, Validators.required],
+      valor: [{value: this.objetivoProgra.uzytavobjetivo_programaindicador_valor_eje, disabled: false}, [Validators.required, this.valorMaximoValidator.bind(this)]]
+    });
+  }
+
+  valorMaximoValidator(control: FormControl) {
+    const valorIngresado = control.value;
+    const valorMaximoGuardado = this.objetivoProgra.uzytavobjetivo_programaindicador_valor;
+
+    if (valorIngresado > valorMaximoGuardado) {
+      return { valorMaximoExcedido: true };
+    } else {
+      return null;
+    }
+  }
+
+  onSubmit(){
+    if(this.myForm.valid){
+      this.objetivoProgra.uzytavobjetivo_programaindicador_valor_eje = this.myForm.get('valor').value;
+      this.objS.modificarParametros(this.objetivoProgra.uzytavobjetivo_programa_id, this.objetivoProgra).subscribe(response => {
+        this.openModal();
+        this.idCompartido.ocultarFormulario3();
+        this.datosCompartidos.actualizarDatos(this.objetivoProgra);
+      });
+    }
+  }
+
+  cancelado(){
+    this.idCompartido.ocultarFormulario3();
+    this.mostrarObje = false;
+    this.myForm.enable();
+    this.myForm.reset();
+  }
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.formularioEnviado = true;
+    });
+  }
+}

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/list-objetivos-ejec/list-objetivos-ejec.component.css

+
+.Column {
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 100px;
+  white-space: inherit;
+}
+
+.Column1 {
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 10px;
+  white-space: normal;
+  overflow: visible;
+}
+
+.Column2 {
+  width: 25px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+  font-family: 'Roboto', sans-serif;
+  color: #333;
+}
+
+table th,
+table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+table th {
+  background-color: rgb(248, 249, 250);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+table td {
+  position: relative;
+}
+
+table td::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e0e0e0;
+}
+
+
+input[type="text"] {
+  width: 200px;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+
+.azul{
+  color: blue;
+}
+@media (max-width: 600px) {
+  table {
+    font-size: 14px;
+  }
+
+  table th,
+  table td {
+    padding: 8px;
+  }
+}
+
+.separa{
+  margin-top: 4%;
+}

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/list-objetivos-ejec/list-objetivos-ejec.component.html

+<div class="container" #activitySection>
+  <vex-edit-objetivos-ejec *ngIf="idCompartido.mostrar3"></vex-edit-objetivos-ejec>
+</div>
+
+<div class="container" >
+  <label for=""><strong>Fin</strong></label>
+
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSourceFin" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="descrip" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef
+          mat-sort-header> Descripción </th>
+        <td class="Column1" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programaobjetivo_proy }}
+        </td>
+      </ng-container>
+
+      <!-- Parroquia Column -->
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="verifica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Medio de Verificación </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programamverifica}} </td>
+      </ng-container>
+
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="tipo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Tipo Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ especificarValor(dato.uzytavobjetivo_programaindicador_tipo)}} </td>
+      </ng-container>
+
+      <!-- Representante Column -->
+      <ng-container matColumnDef="indica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Descripción Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="indicaPlanValor" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Planificado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="indicaEjecu" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Ejecutado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor_eje}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="acciones" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <button mat-icon-button (click)="mostrarObjetivoFin(dato.uzytavobjetivo_programa_id)">
+            <mat-icon class="azul">edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumnsFin"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsFin;"></tr>
+    </table>
+  </div>
+</div>
+
+<!--objetivo general-->
+<div class="separa"></div>
+<div class="container" >
+  <label for=""><strong>Objetivo General</strong></label>
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSourceGeneral" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="descrip" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef
+          mat-sort-header> Descripción </th>
+        <td class="Column1" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programaobjetivo_proy }}
+        </td>
+      </ng-container>
+
+      <!-- Parroquia Column -->
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="verifica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Medio de Verificación </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programamverifica}} </td>
+      </ng-container>
+
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="tipo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Tipo Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ especificarValor(dato.uzytavobjetivo_programaindicador_tipo)}} </td>
+      </ng-container>
+
+      <!-- Representante Column -->
+      <ng-container matColumnDef="indica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Descripción Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="indicaPlanValor" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Planificado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="indicaEjecu" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Ejecutado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor_eje}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="acciones" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <button mat-icon-button (click)="mostrarObjetivoGeneral(dato.uzytavobjetivo_programa_id)">
+            <mat-icon class="azul">edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumnsFin"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsFin;"></tr>
+    </table>
+  </div>
+</div>
+
+
+<!--objetivo especifico-->
+<div class="separa"></div>
+<div class="container" >
+  <label for=""><strong>Componente (Objetivo Especifico)</strong></label>
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSourceEspe" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="descrip" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef
+          mat-sort-header> Descripción </th>
+        <td class="Column1" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programaobjetivo_proy }}
+        </td>
+      </ng-container>
+
+      <!-- Parroquia Column -->
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="verifica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Medio de Verificación </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programamverifica}} </td>
+      </ng-container>
+
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="tipo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Tipo Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ especificarValor(dato.uzytavobjetivo_programaindicador_tipo)}} </td>
+      </ng-container>
+
+      <!-- Representante Column -->
+      <ng-container matColumnDef="indica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Descripción Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="indicaPlanValor" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Planificado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="indicaEjecu" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Ejecutado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor_eje}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="acciones" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <button mat-icon-button (click)="mostrarObjetivoEspecifico(dato.uzytavobjetivo_programa_id)">
+            <mat-icon class="azul">edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumnsFin"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsFin;"></tr>
+    </table>
+  </div>
+</div>
+
+<!--actividades-->
+<div class="separa"></div>
+<div class="container" >
+  <label for=""><strong>Actividades</strong></label>
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSourceActi" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="descrip" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef
+          mat-sort-header> Descripción </th>
+        <td class="Column1" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programaobjetivo_proy }}
+        </td>
+      </ng-container>
+
+      <!-- Parroquia Column -->
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="verifica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Medio de Verificación </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ dato.uzytavobjetivo_programamverifica}} </td>
+      </ng-container>
+
+      <!-- Dirección Column -->
+      <ng-container matColumnDef="tipo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Tipo Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{ especificarValor(dato.uzytavobjetivo_programaindicador_tipo)}} </td>
+      </ng-container>
+
+      <!-- Representante Column -->
+      <ng-container matColumnDef="indica" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Descripción Indicador </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="indicaPlanValor" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Planificado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="indicaEjecu" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Valor Indicador Ejecutado </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavobjetivo_programaindicador_valor_eje}} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="acciones" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <button mat-icon-button (click)="mostrarObjetivoActividad(dato.uzytavobjetivo_programa_id)">
+            <mat-icon class="azul">edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumnsFin"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsFin;"></tr>
+    </table>
+  </div>
+</div>

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/list-objetivos-ejec/list-objetivos-ejec.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListObjetivosEjecComponent } from './list-objetivos-ejec.component';
+
+describe('ListObjetivosEjecComponent', () => {
+  let component: ListObjetivosEjecComponent;
+  let fixture: ComponentFixture<ListObjetivosEjecComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ListObjetivosEjecComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ListObjetivosEjecComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Cierre/objetivos ejecutados/list-objetivos-ejec/list-objetivos-ejec.component.ts

+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { objetivoprograma } from 'src/app/modules/main/Models/objetivoPrograma';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
+import { Objetivo_programaService } from 'src/app/modules/main/services/objetivo_programa/objetivo_programa.service';
+
+@Component({
+  selector: 'vex-list-objetivos-ejec',
+  templateUrl: './list-objetivos-ejec.component.html',
+  styleUrls: ['./list-objetivos-ejec.component.css']
+})
+export class ListObjetivosEjecComponent implements OnInit {
+  @ViewChild('activitySection') activitySection!: ElementRef;
+  displayedColumnsFin: string[] = ['descrip', 'verifica', 'tipo', 'indica', 'indicaPlanValor', 'indicaEjecu', 'acciones'];
+  idRecuperado: number;
+  dataSourceFin: MatTableDataSource<objetivoprograma>;
+  dataSourceGeneral: MatTableDataSource<objetivoprograma>;
+  dataSourceEspe: MatTableDataSource<objetivoprograma>;
+  dataSourceActi: MatTableDataSource<objetivoprograma>;
+  objetivoPrograma: objetivoprograma[] = [];
+  objetivoProgramaGeneral: objetivoprograma[] = [];
+  objetivoProgramaEspe: objetivoprograma[] = [];
+  objetivoProgramaActi: objetivoprograma[] = [];
+  constructor(
+    private mostrarOcultarService: MostrarOcultarService,
+    public idCompartido: Compartir_idService,
+    private datosCompartidos: Actualiza_datosService,
+    private objetivoS: Objetivo_programaService
+  ) {
+    this.dataSourceFin = new MatTableDataSource<objetivoprograma>([]);
+    this.dataSourceGeneral = new MatTableDataSource<objetivoprograma>([]);
+    this.dataSourceEspe = new MatTableDataSource<objetivoprograma>([]);
+    this.dataSourceActi = new MatTableDataSource<objetivoprograma>([]);
+  }
+
+  ngOnInit(): void {
+    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
+
+    this.datosCompartidos.datos$.subscribe(() =>{
+      this.obtenerRegistros();
+    });
+
+    this.objetivoS.parametrosActualizados.subscribe(() => {
+      this.obtenerRegistros();
+    });
+  }
+
+  obtenerRegistros(){
+    this.objetivoS.obtenerParametros().subscribe(data => {
+      //llenado de los arreglos
+      this.objetivoPrograma = data.filter(item => item.uzytavobjetivo_programatipo === 1 && item.uzytavproyec_id === this.idRecuperado);
+      this.objetivoProgramaGeneral = data.filter(item => item.uzytavobjetivo_programatipo === 2 && item.uzytavproyec_id === this.idRecuperado);
+      this.objetivoProgramaEspe = data.filter(item => item.uzytavobjetivo_programatipo === 3 && item.uzytavproyec_id === this.idRecuperado);
+      this.objetivoProgramaActi = data.filter(item => item.uzytavobjetivo_programatipo === 4 && item.uzytavproyec_id === this.idRecuperado);
+      //data source
+      this.dataSourceFin.data = this.objetivoPrograma;
+      this.dataSourceGeneral.data = this.objetivoProgramaGeneral;
+      this.dataSourceEspe.data = this.objetivoProgramaEspe;
+      this.dataSourceActi.data = this.objetivoProgramaActi;
+    });
+  }
+
+  mostrarObjetivoFin(id: number) {
+    this.idCompartido.mostrarFormulario3();
+    const registroSeleccionado = this.objetivoPrograma.find(
+      objet => objet.uzytavobjetivo_programa_id === id);
+    this.idCompartido.setIdObj(id);
+    this.mostrarOcultarService.editObje = registroSeleccionado;
+    this.scrollIntoView();
+  }
+
+  mostrarObjetivoGeneral(id: number) {
+    this.idCompartido.mostrarFormulario3();
+    const registroSeleccionado = this.objetivoProgramaGeneral.find(
+      objet => objet.uzytavobjetivo_programa_id === id);
+    this.idCompartido.setIdObj(id);
+    this.mostrarOcultarService.editObje = registroSeleccionado;
+    this.scrollIntoView();
+  }
+
+  mostrarObjetivoEspecifico(id: number) {
+    this.idCompartido.mostrarFormulario3();
+    const registroSeleccionado = this.objetivoProgramaEspe.find(
+      objet => objet.uzytavobjetivo_programa_id === id);
+    this.idCompartido.setIdObj(id);
+    this.mostrarOcultarService.editObje = registroSeleccionado;
+    this.scrollIntoView();
+  }
+
+  mostrarObjetivoActividad(id: number) {
+    this.idCompartido.mostrarFormulario3();
+    const registroSeleccionado = this.objetivoProgramaActi.find(
+      objet => objet.uzytavobjetivo_programa_id === id);
+    this.idCompartido.setIdObj(id);
+    this.mostrarOcultarService.editObje = registroSeleccionado;
+    this.scrollIntoView();
+  }
+
+  especificarValor(tipo: number) {
+    if (tipo === 1) {
+      return 'Valor';
+    } else {
+      return 'Porcentaje';
+    }
+  }
+
+  scrollIntoView() {
+    if (this.activitySection && this.activitySection.nativeElement) {
+      this.activitySection.nativeElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+}

src/app/modules/main/pages/Proyectos/Cierre/resultados proyecto/resultados/resultados.component.css

+.editor-separator{
+  margin-top: 4%;
+}

src/app/modules/main/pages/Proyectos/Cierre/resultados proyecto/resultados/resultados.component.html

@@ -15,31 +15,43 @@
       <mat-card-content>
 
         <div>
-          <label class="label-negrita"> Productos y/o servicios generados por el proyecto:</label>
+          <label class="label-negrita"> <strong>Productos y/o servicios generados por el proyecto:</strong> </label>
           <ckeditor formControlName="productoCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
 
         </div>
         <div class="editor-separator"></div>
         <div>
-          <label class="label-negrita"> Bienes a favor de la ESPE:</label>
+          <label class="label-negrita"> <strong>Bienes a favor de la ESPE:</strong></label>
           <ckeditor formControlName="bienesCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
         </div>
         <div class="editor-separator"></div>
         <div>
-          <label class="label-negrita"> Resultados del proyecto:</label>
+          <label class="label-negrita"> <strong>Resultados del proyecto:</strong></label>
           <ckeditor formControlName="resultadoCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
         </div>
         <div class="editor-separator"></div>
         <div>
-          <label class="label-negrita"> Otras aplicaciones del producto y/o servicios:</label>
+          <label class="label-negrita"> <strong>Otras aplicaciones del producto y/o servicios:</strong></label>
           <ckeditor formControlName="servicioCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
         </div>
         <div class="editor-separator"></div>
         <div>
-          <label class="label-negrita"> Impacto futuro del proyecto:</label>
+          <label class="label-negrita"> <strong>Impacto futuro del proyecto:</strong></label>
           <ckeditor formControlName="impactoCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
         </div>
 
+        <div class="editor-separator"></div>
+        <div>
+          <label class="label-negrita"> <strong>Restricciones que limitan el impacto del proyecto:</strong></label>
+          <ckeditor formControlName="restricCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
+        </div>
+
+        <div class="editor-separator"></div>
+        <div>
+          <label class="label-negrita"> <strong>Comentarios Generales:</strong></label>
+          <ckeditor formControlName="comenCierre" class="custom-ckeditor" [disabled]="!isEditorEnabled" [style.height]="editorHeight" [editor]="Editor"></ckeditor>
+        </div>
+
       </mat-card-content>
     </mat-card>
   </form>

src/app/modules/main/pages/Proyectos/Cierre/resultados proyecto/resultados/resultados.component.ts

@@ -49,7 +49,9 @@ export class ResultadosComponent implements OnInit {
       bienesCierre: [this.proyectos.uzytavproyec_cierre_bien, Validators.required],
       resultadoCierre: [this.proyectos.uzytavproyec_cierre_resul, Validators.required],
       servicioCierre: [this.proyectos.uzytavproyec_cierre_aplic, Validators.required],
-      impactoCierre: [this.proyectos.uzytavproyec_cierre_imp, Validators.required]
+      impactoCierre: [this.proyectos.uzytavproyec_cierre_imp, Validators.required],
+      restricCierre: [this.proyectos.uzytavproyec_cierre_rest, Validators.required],
+      comenCierre: [this.proyectos.uzytavproyec_cierre_comen, Validators.required]
     });
   }
 
@@ -62,7 +64,9 @@ export class ResultadosComponent implements OnInit {
           bienesCierre: this.proyectos.uzytavproyec_cierre_bien,
           resultadoCierre: this.proyectos.uzytavproyec_cierre_resul,
           servicioCierre: this.proyectos.uzytavproyec_cierre_aplic,
-          impactoCierre: this.proyectos.uzytavproyec_cierre_imp
+          impactoCierre: this.proyectos.uzytavproyec_cierre_imp,
+          restricCierre: this.proyectos.uzytavproyec_cierre_rest,
+          comenCierre: this.proyectos.uzytavproyec_cierre_comen
         });
       });
     } else {
@@ -78,6 +82,8 @@ export class ResultadosComponent implements OnInit {
         this.proyectos.uzytavproyec_cierre_resul = this.myForm.get('resultadoCierre').value;
         this.proyectos.uzytavproyec_cierre_aplic = this.myForm.get('servicioCierre').value;
         this.proyectos.uzytavproyec_cierre_imp = this.myForm.get('impactoCierre').value;
+        this.proyectos.uzytavproyec_cierre_rest = this.myForm.get('restricCierre').value;
+        this.proyectos.uzytavproyec_cierre_comen = this.myForm.get('comenCierre').value;
         this.proyectosService.modificarParametros(this.idRecuperado, this.proyectos).subscribe(response => {
           this.cambio = false;
           this.isEditorEnabled = false;

src/app/modules/main/pages/Proyectos/Diagnostico y problema/Anexos e Imagenes/add-anexos-imagenes/add-anexos-imagenes.component.html

@@ -12,19 +12,19 @@
       </div>
 
       <div class="input-container">
-        <mat-form-field>
+       <!-- <mat-form-field>
           <mat-label>Fecha de Subida:</mat-label>
           <input matInput [matDatepicker]="pickerInicio" placeholder="Seleccione una fecha de Subida"
            formControlName="fechaInicio" required>
           <mat-datepicker-toggle matSuffix [for]="pickerInicio"></mat-datepicker-toggle>
           <mat-datepicker #pickerInicio></mat-datepicker>
-        </mat-form-field>
+        </mat-form-field>-->
       </div>
 
       <!-- Control de PDF -->
       <div class="input-container">
         <label>Subir Archivo</label>
-        <input type="file" id="uzytavconvoca_digital" (change)="onFileChange($event)" 
+        <input type="file" id="uzytavconvoca_digital" (change)="onFileChange($event)"
         formControlName="archivo">
 
       </div>
@@ -32,4 +32,4 @@
 
     </div>
   </form>
-</div>
\ No newline at end of file
+</div>

src/app/modules/main/pages/Proyectos/Diagnostico y problema/Anexos e Imagenes/add-anexos-imagenes/add-anexos-imagenes.component.ts

@@ -48,7 +48,7 @@ export class AddAnexosImagenesComponent implements OnInit {
 
     this.myForm = this.formBuilder.group({
       archivo: [{ value: '', disabled: true }, Validators.required],
-      fechaInicio: [{ value: '', disabled: true }, Validators.required],
+      //fechaInicio: [{ value: '', disabled: true }, Validators.required],
     });
   }
 
@@ -80,7 +80,9 @@ export class AddAnexosImagenesComponent implements OnInit {
   onSubmit() {
     if (this.myForm.valid) {
       this.anexosImagenes.uzytavproyec_id = this.idRecuperado;
-      this.anexosImagenes.uzytavanexospr_fech_subida = this.myForm.value.fechaInicio
+      console.log('prueba imagen', this.anexosImagenes.uzytavproyec_id)
+      //this.anexosImagenes.uzytavanexospr_fech_subida = this.myForm.value.fechaInicio;
+      //this.anexosImagenes.uzytavanexospr_fech_subida = new Date();
       this.anexosImagenesService.guardarParametrosSeparados(this.file, this.anexosImagenes).subscribe(
         response => {
           this.openModal();
@@ -103,7 +105,7 @@ export class AddAnexosImagenesComponent implements OnInit {
 
   cambiar() {
     this.cambio = true;
-    this.myForm.get('fechaInicio').enable();
+    //this.myForm.get('fechaInicio').enable();
     this.myForm.get('archivo').enable();
   }
 

src/app/modules/main/pages/Proyectos/Inicio Ejecución/carta compromiso comunidad/carta-compromiso-comu/carta-compromiso-comu.component.css

+.button-container {
+  margin-left: 13px;
+}
+
+.sep{
+  margin-top: 25px;
+}
+

src/app/modules/main/pages/Proyectos/Inicio Ejecución/carta compromiso comunidad/carta-compromiso-comu/carta-compromiso-comu.component.html

+<div class="container">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Carta de Compromiso de la Comunidad</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <mat-card-actions class="button-container">
+        <input type="file" (change)="handleFileInput($event)" accept=".pdf" />
+      <div>
+        <button mat-raised-button class="sep" color="primary" (click)="guardarPDF()">Guardar</button>
+      </div>
+
+      </mat-card-actions>
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/modules/main/pages/Proyectos/Inicio Ejecución/carta compromiso comunidad/carta-compromiso-comu/carta-compromiso-comu.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CartaCompromisoComuComponent } from './carta-compromiso-comu.component';
+
+describe('CartaCompromisoComuComponent', () => {
+  let component: CartaCompromisoComuComponent;
+  let fixture: ComponentFixture<CartaCompromisoComuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CartaCompromisoComuComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CartaCompromisoComuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/Proyectos/Inicio Ejecución/carta compromiso comunidad/carta-compromiso-comu/carta-compromiso-comu.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'vex-carta-compromiso-comu',
+  templateUrl: './carta-compromiso-comu.component.html',
+  styleUrls: ['./carta-compromiso-comu.component.css']
+})
+export class CartaCompromisoComuComponent implements OnInit {
+  archivoPDF: File | null = null;
+  finalizado: boolean = false;
+
+  ngOnInit(): void {
+  }
+  onSubmit() {}
+
+  handleFileInput(event: any) {
+    this.archivoPDF = event.target.files[0];
+    if (this.archivoPDF) {
+      console.log('Archivo seleccionado:', this.archivoPDF);
+    }
+  }
+
+  guardarPDF() {
+    if (this.archivoPDF) {
+      // Aquí puedes realizar la lógica para enviar el archivo a la base de datos
+      // Por ejemplo, si estás usando un servicio para comunicarte con la base de datos:
+      // this.miServicio.guardarPDFEnBaseDeDatos(this.archivoPDF);
+
+      console.log('Guardando archivo en la base de datos:', this.archivoPDF);
+    } else {
+      console.log('No se ha seleccionado ningún archivo PDF para guardar.');
+    }
+  }
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-compromiso/add-compromiso.component.css

+
+
+.form-row {
+  display: flex;
+}
+
+.form-column {
+  flex: 1;
+  margin: 0 10px;
+  max-width: 100%;
+}
+.contenedor-dos {
+  margin-top: 30px;
+  padding: 0.9375rem 20px;
+  position: relative;
+  width: 100%;
+}
+.example-radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+  align-items: flex-start;
+}
+.example-section {
+  margin: 12px 0;
+}
+.example-radio-button {
+  margin: 5px;
+}
+
+.save-button {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+.form-column mat-form-field {
+  display: block;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.separa {
+  margin-left: 16px;
+}
+
+.sepa{
+  margin-bottom: 32px;
+}
+
+.sube{
+  margin-top: 10px;
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-compromiso/add-compromiso.component.html

+<div class="container">
+
+  <form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">
+    <mat-card>
+      <mat-card-header>
+        <div class="save-button">
+          <button mat-raised-button color="primary"
+            [disabled]="myForm.invalid">Guardar</button>
+        </div>
+      </mat-card-header>
+
+      <mat-card-content>
+
+        <div class="form-row">
+          <div class="form-column">
+            <div>
+              <mat-label><strong>TIPO DE ENTIDAD</strong></mat-label>
+            </div>
+            <div class="sepa">
+              <mat-radio-group class="sube" formControlName="entidad">
+                <mat-radio-button *ngFor="let entidad of entidad" [value]="entidad.uzytparametros_det_id">{{ entidad.uzytparametros_det_descripcion}} </mat-radio-button>
+              </mat-radio-group>
+            </div>
+
+            <mat-label><strong>INSTITUCIÓN O COMUNIDAD</strong></mat-label>
+
+            <mat-form-field>
+              <mat-label>Nombre:</mat-label>
+              <mat-select formControlName="nombreI"
+                placeholder="Nombre del Proyecto" (selectionChange)="onInstitucionSelected($event.value)">
+                <mat-option *ngFor="let item2 of institu" [value]="item2.uzytavinstituc_id">{{item2.uzytavinstituc_nombre}}</mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Provincia:</mat-label>
+              <input matInput formControlName="provinciaI">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Dirección</mat-label>
+              <input matInput formControlName="direccionI">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Tipo de Organización</mat-label>
+              <mat-select formControlName="organizacionI">
+                <mat-option *ngFor="let item of orga" [value]="item.uzytparametros_det_id">{{item.uzytparametros_det_descripcion}}</mat-option>
+              </mat-select>
+            </mat-form-field>
+
+          </div>
+
+          <div class="form-column">
+
+            <mat-label><strong>REPRESENTANTE LEGAL Y/O RESPONSABLE</strong></mat-label>
+
+            <mat-form-field>
+              <mat-label>Nombres</mat-label>
+              <input matInput [disabled]="true" formControlName="nombreR">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Apellido</mat-label>
+              <input matInput [disabled]="true" formControlName="apellidoR">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Cargo</mat-label>
+              <input matInput [disabled]="true" formControlName="cargoR">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Correo Electronico</mat-label>
+              <input matInput placeholder="Correo Institucional"
+                formControlName="correoR">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Telefono</mat-label>
+              <input matInput placeholder="Telefono Director"
+                formControlName="telefonoR">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Declaración</mat-label>
+              <input matInput formControlName="declaracion">
+            </mat-form-field>
+          </div>
+
+        </div>
+
+      </mat-card-content>
+    </mat-card>
+  </form>
+</div>

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-compromiso/add-compromiso.component.spec.ts

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

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-compromiso/add-compromiso.component.ts

+import { Component, OnInit, Output,EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Instituciones } from 'src/app/modules/main/Models/instituciones';
+import { instproy } from 'src/app/modules/main/Models/instproy';
+import { parametrosdet } from 'src/app/modules/main/Models/parametrosdet';
+import { InstitucionesService } from 'src/app/modules/main/services/Instituciones/instituciones.service';
+import { ParametrosdetService } from 'src/app/modules/main/services/parametrosdet/parametrosdet.service';
+import { EnvioFormularioComponent } from '../../../../programa/opciones/envio-formulario/envio-formulario.component';
+import { MatDialog } from '@angular/material/dialog';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+
+
+@Component({
+  selector: 'vex-add-compromiso',
+  templateUrl: './add-compromiso.component.html',
+  styleUrls: ['./add-compromiso.component.css']
+})
+export class AddCompromisoComponent implements OnInit {
+  myForm: FormGroup;
+  idRecuperado: number;
+  formularioEnviado: boolean;
+
+  //enviar o comunicar entre componentes con el emiter
+  @Output() formularioGuardado = new EventEmitter<void>();
+  //arreglos
+  entidad: parametrosdet[] = [];
+  orga: parametrosdet[] = [];
+  institu: Instituciones[] = [];
+  constructor(
+    private formBuilder: FormBuilder,
+    private instP: ParametrosdetService,
+    private instituS: InstitucionesService,
+    private instproyM: instproy,
+    private dialog: MatDialog,
+    private datosCompartidos: Actualiza_datosService
+  ) { }
+
+  ngOnInit(): void {
+    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
+    this.obtenerRegistros();
+    this.myForm = this.formBuilder.group({
+      entidad: ['', Validators.required],
+      nombreI: ['', Validators.required],
+      provinciaI: [{ value: '', disabled: true }],
+      direccionI: [{ value: '', disabled: true }],
+      organizacionI: [],
+      nombreR: [{ value: '', disabled: true }],
+      apellidoR: [{ value: '', disabled: true }],
+      cargoR: [{ value: '', disabled: true }],
+      correoR: [{ value: '', disabled: true }],
+      telefonoR: [{ value: '', disabled: true }],
+      declaracion: ['', Validators.required]
+    });
+  }
+
+  onSubmit() {
+    if (this.myForm.valid) {
+      try {
+        this.instproyM.uzytavproyec_id = this.idRecuperado;
+        this.instproyM.uzytparametros_det_id_entidad = this.myForm.get('entidad').value;
+        this.instproyM.uzytavinstituc_id = this.myForm.get('nombreI').value;
+        this.instproyM.uzytparametros_det_id_organizacion = this.myForm.get('organizacionI').value;
+        this.instproyM.uzytavinstproy_declaracion = this.myForm.get('declaracion').value;
+        this.instP.guardarParametros(this.instproyM).subscribe(response => {
+          this.openModal();
+          this.instP.parametrosActualizados.next();
+          this.datosCompartidos.actualizarDatos(this.instproyM);
+
+        });
+      } catch (error) {
+        console.error('Error al enviar los datos:', error);
+      }
+    }
+  }
+
+  cancelar() {
+
+  }
+
+  obtenerRegistros() {
+    this.instP.obtenerParametros().subscribe(data => {
+      this.entidad = data.filter(item => item.uzytparametros_det_id_alt === '1');
+      this.orga = data.filter(item => item.uzytparametros_det_id_alt === '2');
+    });
+
+    this.instituS.obtenerParametros().subscribe(data => {
+      this.institu = data;
+    });
+  }
+
+  onInstitucionSelected(selectedInstitucionId: number) {
+    const selectedInstitucion = this.institu.find(item => item.uzytavinstituc_id === selectedInstitucionId);
+    if (selectedInstitucion) {
+      this.myForm.get('direccionI')?.setValue(selectedInstitucion.uzytavinstituc_calle);
+      this.myForm.get('nombreR')?.setValue(selectedInstitucion.uzytavinstituc_nombre);
+      this.myForm.get('apellidoR')?.setValue(selectedInstitucion.uzytavinstituc_apellirl);
+      this.myForm.get('cargoR')?.setValue(selectedInstitucion.uzytavinstituc_cargorl);
+      this.myForm.get('correoR')?.setValue(selectedInstitucion.uzytavinstituc_mailrl1);
+      this.myForm.get('telefonoR')?.setValue(selectedInstitucion.uzytavinstituc_telefono);
+    }
+  }
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('La ventana modal se ha cerrado');
+      this.formularioEnviado = true;
+    });
+  }
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-documentos/add-documentos.component.css

+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px; /* Ajusta el ancho máximo del formulario */
+  width: 100%;
+}.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px; /* Ajusta el ancho máximo del formulario */
+  width: 100%;
+}
+
+.modal-content h2 {
+  margin-top: 0;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  font-weight: bold;
+}
+
+.form-group input[type="file"] {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  outline: none;
+}
+
+.form-group input[type="file"]:hover {
+  border-color: #007bff;
+}
+
+.form-group input[type="file"]:focus {
+  border-color: #007bff;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+}
+
+.form-actions button {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #28a745; /* Verde */
+  color: white;
+}
+
+.form-actions button[type="submit"]:hover {
+  background-color: #218838; /* Verde más oscuro al pasar el mouse */
+}
+
+.form-actions button[type="button"] {
+  background-color: #ccc;
+}
+
+.form-actions button[type="button"]:hover {
+  background-color: #b3b3b3;
+}
+
+
+.modal-content h2 {
+  margin-top: 0;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  font-weight: bold;
+}
+
+.form-group input[type="file"] {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+}
+
+.form-actions button {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #007bff;
+  color: white;
+}
+
+.form-actions button[type="submit"]:hover {
+  background-color: #0056b3;
+}
+
+.form-actions button[type="button"] {
+  background-color: #ccc;
+}
+
+.form-actions button[type="button"]:hover {
+  background-color: #b3b3b3;
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-documentos/add-documentos.component.html

+<div class="modal-container">
+  <div class="modal-content">
+    <h2>Documento (Convenio o Carta de Participación) (.pdf)</h2>
+    <form (ngSubmit)="submitForm()" #documentForm="ngForm">
+      <div class="form-group">
+        <label for="pdfFile">Seleccionar archivo PDF:</label>
+        <input type="file" id="pdfFile" name="pdfFile" accept=".pdf" required #pdfInput>
+      </div>
+      <div class="form-actions">
+        <button type="submit" [disabled]="!documentForm.form.valid">Guardar</button>
+        <button type="button" (click)="cerrarModal()">Cerrar</button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-documentos/add-documentos.component.spec.ts

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

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/add-documentos/add-documentos.component.ts

+import { Component, OnInit, Inject  } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'vex-add-documentos',
+  templateUrl: './add-documentos.component.html',
+  styleUrls: ['./add-documentos.component.css']
+})
+export class AddDocumentosComponent implements OnInit {
+
+  constructor(
+    private dialogRef: MatDialogRef<AddDocumentosComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { idConf: number }
+  ) { }
+
+  ngOnInit(): void {
+    console.log('ID recibido:', this.data.idConf);
+  }
+
+  submitForm(){
+    this.dialogRef.close();
+  }
+  cerrarModal(){
+
+      this.dialogRef.close();
+
+  }
+
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-compromiso/list-compromiso.component.css

+/* Estilos generales */
+.container {
+  width: 100%;
+  max-width: 1200px; /* Cambia este valor según tus necesidades */
+  margin: 0 auto;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Estilos de la tabla */
+.table-container {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  font-family: 'Roboto', sans-serif;
+  color: #333;
+  border: 1px solid #e0e0e0;
+}
+
+table th,
+table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+table th {
+  background-color: rgb(248, 249, 250);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Ajuste de la celda que contiene el componente expandido */
+td.expanded-cell {
+  padding: 0;
+}
+
+/* Estilos del botón de expansión */
+.button-expand {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.button-expand mat-icon {
+  font-size: 24px;
+}
+
+/* Estilos del componente expandido */
+.expanded-content {
+  padding: 10px;
+  background-color: white;
+}
+
+/* Estilos del botón de eliminación */
+.button-delete {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.button-delete mat-icon {
+  color: red;
+}
+
+/* Estilos del contenedor principal */
+.contenedorP {
+  width: 100%;
+  margin: 10px auto;
+  border-radius: 10px;
+  text-align: center;
+  background-color: white;
+}
+
+/* Estilos de los botones redondos */
+.rounder {
+  border-radius: 50%;
+  background-color: rgb(71, 127, 75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.rounder mat-icon {
+  font-size: 24px;
+  color: #fff;
+}
+
+/* Estilos de los íconos de edición */
+.colorEditar {
+  color: blue;
+}
+
+.colorEditar svg {
+  fill: blue;
+}
+
+/* Estilos del encabezado de la tabla */
+.colorsito {
+  background-color: rgb(248, 249, 250);
+}
+
+/* Media Queries para pantallas pequeñas */
+@media (max-width: 768px) {
+  table th,
+  table td {
+    padding: 8px;
+  }
+}
+
+@media (max-width: 1200px) {
+  table th,
+  table td {
+    padding: 10px;
+  }
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-compromiso/list-compromiso.component.html

+<div class="contenedorP">
+
+  <div>
+
+    <mat-card class="card">
+      <table>
+        <thead class="colorsito">
+          <tr>
+            <th class="colorsito"></th>
+            <th class="colorsito">Nro</th>
+            <th class="colorsito">Tipo</th>
+            <th class="colorsito">Nombre Institución</th>
+            <th class="colorsito">Ubicación</th>
+            <th class="colorsito">Tipo de Organización</th>
+            <th class="colorsito">Representante Legal</th>
+            <th class="colorsito">Declaración</th>
+            <th class="colorsito">Acciones</th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let dato of instuProyect; let i = index">
+            <tr id="fila-{{ i }}">
+              <td>
+                <button (click)="toggleDiv(i)">
+                  <mat-icon>{{ mostrarDiv[i] ? 'keyboard_arrow_down' :
+                    'keyboard_arrow_right' }}</mat-icon>
+                </button>
+              </td>
+              <td>{{ i+1}}</td>
+              <td>{{ getNombrePar(dato.uzytparametros_det_id_entidad) }}</td>
+              <td>{{getInstitucionNombre(dato.uzytavinstituc_id)}}</td>
+              <td>{{getIdParroquiaCanton(dato.uzytavinstituc_id)+ ''+'-' +''+
+                getIdParroquiaN(dato.uzytavinstituc_id)+ ''+'-' +''+ getInstitucionDireccion(dato.uzytavinstituc_id) }}</td>
+              <td>{{ getNombrePar(dato.uzytparametros_det_id_organizacion)}}</td>
+              <td>{{getInstitucionNombreRepresentante(dato.uzytavinstituc_id) }}</td>
+              <td>{{dato.uzytavinstproy_declaracion }}</td>
+              <td>
+                <button>
+                  <mat-icon color="warn"
+                    (click)="eliminarParametro(dato.uzytavinstproy_id)">delete</mat-icon>
+                </button>
+              </td>
+
+            </tr>
+            <tr *ngIf="mostrarDiv[i]">
+              <div></div>
+              <td colspan="5">
+                <vex-list-documentos [idConf]="dato.uzytavinstproy_id"></vex-list-documentos>
+              </td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+    </mat-card>
+  </div>
+</div>

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-compromiso/list-compromiso.component.spec.ts

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

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-compromiso/list-compromiso.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { Canton } from 'src/app/modules/main/Models/Ubicaciones/canton';
+import { Parroquia } from 'src/app/modules/main/Models/Ubicaciones/parroquia';
+import { Provincia } from 'src/app/modules/main/Models/Ubicaciones/provincia';
+import { Instituciones } from 'src/app/modules/main/Models/instituciones';
+import { instproy } from 'src/app/modules/main/Models/instproy';
+import { parametrosdet } from 'src/app/modules/main/Models/parametrosdet';
+import { InstitucionesService } from 'src/app/modules/main/services/Instituciones/instituciones.service';
+import { UbicacionesService } from 'src/app/modules/main/services/Ubicaciones/ubicaciones.service';
+import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+import { ParametrosdetService } from 'src/app/modules/main/services/parametrosdet/parametrosdet.service';
+
+@Component({
+  selector: 'vex-list-compromiso',
+  templateUrl: './list-compromiso.component.html',
+  styleUrls: ['./list-compromiso.component.css']
+})
+export class ListCompromisoComponent implements OnInit {
+  idRecuperado: number;
+  dataSource: MatTableDataSource<instproy>;
+  //arreglo para la información
+  instuProyect: instproy[] = [];
+  institucion: Instituciones[] = [];
+  parroquia: Parroquia[] = [];
+  provincia: Provincia[] = [];
+  canton: Canton[] = [];
+  parat: parametrosdet[] = [];
+  //arreglo de los nombres de las columnas
+  displayedColumns: string[] = ['Expandir','Nro', 'Tipo', 'Nombre', 'Provincia', 'Direción', 'TipoO', 'Representante', 'Declaración', 'Acciones'];
+
+  constructor(
+
+    private datosCompartidos: Actualiza_datosService,
+    private instP: ParametrosdetService,
+    private ubicacionesS: UbicacionesService,
+    private InstitucionesS: InstitucionesService,
+    private paratS: ParametrosdetService
+  ) {
+    this.dataSource = new MatTableDataSource<instproy>([]);
+  }
+
+  ngOnInit(): void {
+    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
+
+    this.datosCompartidos.datos$.subscribe(() => {
+      this.obtenerRegistros();
+    });
+
+    this.instP.parametrosActualizados.subscribe(() => {
+      this.obtenerRegistros();
+    });
+  }
+
+  obtenerRegistros() {
+    this.instP.obtenerRegistrosRelacionados(this.idRecuperado).subscribe(data => {
+      this.instuProyect = data;
+      this.dataSource.data = this.instuProyect;
+    });
+
+    this.InstitucionesS.obtenerParametros().subscribe(data => {
+      this.institucion = data;
+    });
+
+    this.ubicacionesS.obtenerParro().subscribe(data => {
+      this.parroquia = data;
+    });
+
+    this.ubicacionesS.obtenerProvincias().subscribe(prov => {
+      this.provincia = prov;
+    });
+
+    this.ubicacionesS.obtenerCant().subscribe(cant => {
+      this.canton = cant;
+    });
+
+    this.paratS.obtenerParametros().subscribe(par => {
+      this.parat = par;
+    });
+  }
+
+  mostrarDiv: boolean[] = [];
+
+  toggleDiv(i: number) {
+    this.mostrarDiv[i] = !this.mostrarDiv[i];
+  }
+
+  getNombrePar(id: number):string{
+    const busca = this.parat.find(i=> i.uzytparametros_det_id === id)
+    if(busca){
+      const nombre = busca.uzytparametros_det_descripcion
+      return nombre;
+    }
+    return '';
+  }
+
+  getInstitucionNombreRepresentante(id: number): string {
+    const instit = this.institucion.find(i => i.uzytavinstituc_id === id);
+    if (instit) {
+      const nombre = instit.uzytavinstituc_nomrepl+ ' ' + instit.uzytavinstituc_apellirl;
+      return nombre;
+    }
+    return '';
+  }
+
+  getInstitucionNombre(id: number): string {
+    const instit = this.institucion.find(i => i.uzytavinstituc_id === id);
+    if (instit) {
+      const nombre = instit.uzytavinstituc_nombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+  getInstitucionDireccion(id: number): string {
+    const instit = this.institucion.find(i => i.uzytavinstituc_id === id);
+    if (instit) {
+      const nombre = instit.uzytavinstituc_calle.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+  getIdParroquiaCanton(parroquiaId: number): string {
+    const parroquia = this.institucion.find(p => p.uzytavinstituc_id === parroquiaId);
+    if (parroquia) {
+      const nombre = parroquia.uzytparroquia_id;
+      return this.getParroquia(nombre);
+    }
+    return '';
+  }
+
+  getParroquia(id: string): string {
+    const canton = this.parroquia.find(p => p.uzytparroquia_id === id);
+    if(canton){
+      const nombre = canton.uzytcanton_id;
+      return this.getCantonNombre(nombre);
+    }
+    return '';
+  }
+  getCantonNombre(id: string): string {
+    const canton = this.canton.find(c => c.uzytcanton_id === id);
+    if (canton) {
+      const nombre = canton.uzytcantonnombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+  getIdParroquiaN(id: number): string {
+    const parro = this.institucion.find(i => i.uzytavinstituc_id === id);
+    if (parro) {
+      const parroId = parro.uzytparroquia_id;
+      return this.getParroquiaNombre(parroId);
+    }
+    return '';
+  }
+
+  getParroquiaNombre(parroquiaId: string): string {
+    const parroquia = this.parroquia.find(p => p.uzytparroquia_id === parroquiaId);
+    if (parroquia) {
+      const nombre = parroquia.uzytparroquia_nombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+
+
+  eliminarParametro(id: number) {
+    const confirmacion = confirm('¿Desea eliminar el registro?');
+    if (confirmacion) {
+      this.instP.eliminarParametros(id).subscribe(
+        () => {
+          console.log('El registro se ha eliminado');
+          this.obtenerRegistros();
+        },
+        (error) => {
+          // No mostrar el error en la consola
+          console.log('Error durante el tratamiento al registro');
+        }
+      );
+    }
+  }
+
+
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-documentos/list-documentos.component.css

+/* Estilos del componente hijo */
+.principal {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+}
+
+.principal th,
+.principal td {
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+  word-break: break-word;
+}
+
+.principal th {
+  font-size: 14px; /* Ajusta el tamaño de fuente de los encabezados */
+}
+
+.colorsito {
+  background-color: rgb(248, 249, 250);
+}
+
+.rounder-nuevo {
+  border-radius: 50%;
+  background-color: rgb(71, 127, 75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+.warn svg,
+.azul svg {
+  fill: blue;
+}
+
+.titulo {
+  display: flex;
+  align-items: center;
+}
+
+.titulo-texto {
+  font-weight: bold;
+  font-size: 15px;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  margin-right: 10px;
+}
+
+.white-icon {
+  color: white;
+}

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-documentos/list-documentos.component.html

+<div class="titulo">
+  <span class="titulo-texto">Documentos: </span>
+  <button class="rounder-nuevo" (click)="GuardarParametro()">
+    <mat-icon class="white-icon">add</mat-icon>
+  </button>
+</div>
+
+
+<table class="principal">
+  <thead class="colorsito">
+    <tr>
+      <th class="colorsito">Nro</th>
+      <th class="colorsito" style="min-width:200px">Documento (Convenio o Carta de participación)</th>
+      <th class="colorsito" style="min-width:200px" >Acciones</th>
+    </tr>
+  </thead>
+  <tbody>
+    <ng-container *ngIf="documentoInst.length > 0; else noRegistros">
+      <tr *ngFor="let dato of documentoInst; let i = index" >
+        <td>{{ i+1 }}</td>
+        <td>{{ dato.UZYTAVDOCOMPAR_NOMBRE_DOC }}</td>
+
+        <td>
+          <button>
+            <mat-icon class="warn" (click)="eliminarPDF()">delete</mat-icon>
+          </button>
+          <button>
+            <mat-icon color="azul" (click)="descargar()">download</mat-icon>
+          </button>
+        </td>
+      </tr>
+    </ng-container>
+    <ng-template #noRegistros>
+      <tr>
+        <td colspan="3" style="text-align: center;">No existen registros</td>
+      </tr>
+    </ng-template>
+  </tbody>
+</table>

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-documentos/list-documentos.component.spec.ts

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

src/app/modules/main/pages/Proyectos/Inicio Ejecución/compromiso participacion/list-documentos/list-documentos.component.ts

+import { Component, OnInit,Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { docompar } from 'src/app/modules/main/Models/docompar';
+import { AddDocumentosComponent } from '../add-documentos/add-documentos.component';
+
+@Component({
+  selector: 'vex-list-documentos',
+  templateUrl: './list-documentos.component.html',
+  styleUrls: ['./list-documentos.component.css']
+})
+export class ListDocumentosComponent implements OnInit {
+  @Input() idConf: number;
+
+  documentoInst: docompar[] = [];
+  showModal = false;
+  constructor(
+    private dialog: MatDialog
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  GuardarParametro(){
+    const dialogRef = this.dialog.open(AddDocumentosComponent, {
+      data: { idConf: this.idConf } // Puedes pasar datos al componente modal si es necesario
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // Puedes realizar acciones después de que la ventana modal se cierra si lo deseas
+    });
+  }
+
+
+  descargar(){
+
+  }
+
+  eliminarPDF(){
+
+  }
+}

src/app/modules/main/pages/Proyectos/Matriz del Marco Logico/add-matriz-logico/add-matriz-logico.component.html

@@ -33,7 +33,8 @@
             <!--valor del indicador-->
             <mat-form-field class="form-field-dos">
               <mat-label>Valor Indicador</mat-label>
-              <input matInput formControlName="valorindicadorFin">
+              <input matInput formControlName="valorindicadorFin" type="number" max="100">
+              <mat-error>El valor no puede ser mayor que 100</mat-error>
             </mat-form-field>
           </div>
 
@@ -95,7 +96,8 @@
             <!--valor del indicador-->
             <mat-form-field class="form-field-dos">
               <mat-label>Valor Indicador:</mat-label>
-              <input matInput formControlName="valorindicadorObjG">
+              <input matInput formControlName="valorindicadorObjG" type="number" max="100">
+              <mat-error>El valor no puede ser mayor que 100</mat-error>
             </mat-form-field>
           </div>
 
@@ -157,7 +159,8 @@
           <!--valor del indicador-->
           <mat-form-field class="form-field-dos">
             <mat-label>Valor Indicador:</mat-label>
-            <input matInput formControlName="valorindicadorObjEspe">
+            <input matInput formControlName="valorindicadorObjEspe" type="number" max="100">
+            <mat-error>El valor no puede ser mayor que 100</mat-error>
           </mat-form-field>
         </div>
 
@@ -220,6 +223,8 @@
           <mat-form-field class="form-field-dos">
             <mat-label>Valor Indicador:</mat-label>
             <input matInput formControlName="valorindicadorActi">
+            <input matInput formControlName="valorindicadorActi" type="number" max="100">
+            <mat-error>El valor no puede ser mayor que 100</mat-error>
           </mat-form-field>
         </div>
 
@@ -335,6 +340,7 @@
     <table>
       <thead>
         <tr>
+          <th class="Column1"></th>
           <th class="Column1 negrita">Nro</th>
           <th class="Column1 negrita">Descripción</th>
           <th class="Column1 negrita">Tipo Indicador</th>
@@ -348,6 +354,12 @@
       <tbody>
         <ng-container *ngFor="let item of objetivoProEsp; let i = index">
           <tr id="fila-{{i}}">
+            <td>
+              <button (click)="toggleDiv(i)">
+                <mat-icon>{{ mostrarDiv[i] ? 'keyboard_arrow_down' :
+                  'keyboard_arrow_right' }}</mat-icon>
+              </button>
+            </td>
             <td>
               {{i+1}}
             </td>
@@ -366,11 +378,11 @@
           </tr>
 
           <!-- tabla interna para cada item -->
-          <tr>
+          <tr *ngIf="mostrarDiv[i]">
             <td colspan="8">
               <div class="container">
-                <div class="mat-elevation-z8">
-                  <div class="div-container">
+                <div class="">
+                  <div>
                     <label class="label-negrita">Actividades: </label>
                     <button (click)="AddActi(item.uzytavobjetivo_programa_id)">
                       <mat-icon color="primary">add_circle</mat-icon>

src/app/modules/main/pages/Proyectos/Matriz del Marco Logico/add-matriz-logico/add-matriz-logico.component.ts

-import { Component, OnInit,ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { objetivoprograma } from 'src/app/modules/main/Models/objetivoPrograma';
 import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
 import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
 import { Objetivo_programaService } from 'src/app/modules/main/services/objetivo_programa/objetivo_programa.service';
-
+import { MatTreeNestedDataSource } from '@angular/material/tree';
+import { NestedTreeControl } from '@angular/cdk/tree'
 @Component({
   selector: 'app-add-matriz-logico',
   templateUrl: './add-matriz-logico.component.html',
@@ -14,364 +15,371 @@ export class AddMatrizLogicoComponent implements OnInit {
   //propiedad que me permite subir al formulario
   @ViewChild('activitySection') activitySection!: ElementRef;
 
-   //variables necesarias para mostrar u ocultar los formularios
-   cambio: boolean = false;
-   cambio2: boolean = false;
-   cambio3: boolean = false;
-   cambio4: boolean = false;
-   //declaracion de los formularios
-   //fin
-   myForm: FormGroup;
-   //objetivo g
-   myForm2: FormGroup;
-   //objetivo espe
-   myForm3: FormGroup;
-   //actividades;
-   myForm4: FormGroup;
-
-   //recuperación de id proyecto
-   idRecuperado: number;
-   //recuperación de id de objetivo
-   idObjeGeneral: number;
-   idObjeGeneralRecu: number;
-   idEspecifico: number;
-   idObjeEspecifico: number;
-
-
-   //arreglo de los datos
-   objetivoPro: objetivoprograma[] = []; //esto recupera el arreglo para los del fin
-   objetivoProObj: objetivoprograma[] = []; //esto recupera el arreglo para los objetivos generales
-   objetivoProEsp: objetivoprograma[] = []; // esto recupera el arreglo para los objetivos especificos
-   objetivoProAct: objetivoprograma[] = []; // esto recupera el arreglo para los actividades de cada objetivo
-   constructor(
-     private formBuilder: FormBuilder,
-     private objeProS: Objetivo_programaService,
-     private objeProM: objetivoprograma,
-     private idCompartido: Compartir_idService,
-     private datosCompartidos: Actualiza_datosService
-   ) { }
-
-   ngOnInit(): void {
-    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'),10);
-     this.myForm = this.formBuilder.group({
-       fin: [],
-       tipoindiFin: [],
-       valorindicadorFin: [],
-       indicadorFin: [],
-       medioVeriFin: [],
-       supuestoFin: []
-     });
-
-     this.myForm2 = this.formBuilder.group({
-       objetivoG: [],
-       tipoindiObjG: [],
-       valorindicadorObjG: [],
-       indicadorObjG: [],
-       medioVeriObjG: [],
-       supuestoObjG: []
-     });
-
-     this.myForm3 = this.formBuilder.group({
-       objetivoEspe: [],
-       tipoindiObjEspe: [],
-       valorindicadorObjEspe: [],
-       indicadorObjEspe: [],
-       medioVeriObjEspe: [],
-       supuestoObjEspe: []
-     });
-
-     this.myForm4 = this.formBuilder.group({
-       actividadEspe: [],
-       tipoindiActi: [],
-       valorindicadorActi: [],
-       indicadorObjActi: [],
-       medioVeriActi: [],
-       supuestoActi: []
-     });
-
-     this.datosCompartidos.datos$.subscribe( () => {
-       this.obtenerRegistros();
-     });
-     this.objeProS.parametrosActualizados.subscribe(()=>{
-       this.obtenerRegistros();
-     });
-
-   }
-   //cancela el fin
-   cancelado() {
-     this.cambio = false;
-     this.myForm.reset();
-   }
-   //cancela el objetivo general
-   cancelado2() {
-     this.cambio2 = false;
-     this.myForm.reset();
-   }
-   //cancela el objetio espec
-   canceladoObjEs() {
-     this.cambio3 = false;
-     this.myForm.reset();
-   }
-   //cancela la actividad
-   canceladoActi() {
-     this.cambio4 = false;
-     this.myForm.reset();
-   }
-
-   //guardar el fin
-   onSubmitFin() {
-     if (this.myForm.valid) {
-       try {
-         //guardar el id del proyecto
-         this.objeProM.uzytavproyec_id = this.idRecuperado;
-
-         //guardar el tipo por defecto que sea de 1.
-         this.objeProM.uzytavobjetivo_programatipo = 1;
-         //ingreso similar al formulario que recibe
-         this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm.value.fin;
-         this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm.value.tipoindiFin;
-         this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm.value.valorindicadorFin;
-         this.objeProM.uzytavobjetivo_programaindicador = this.myForm.value.indicadorFin;
-         this.objeProM.uzytavobjetivo_programamverifica = this.myForm.value.medioVeriFin;
-         this.objeProM.uzytavobjetivo_programasupuestos = this.myForm.value.supuestoFin;
-
-         this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
-           console.log('Datos Enviados');
-           this.objeProS.parametrosActualizados.next();
-           this.datosCompartidos.actualizarDatos(this.objeProM);
-           this.cambio = false;
-         });
-       } catch (error) {
-         console.error('Error al enviar los datos:', error);
-       }
-     }
-   }
-
-
-   //guardar el objetivo general
-   onSubmitObjetivo() {
-     if (this.myForm2.valid) {
-       try {
-         //guardar el id del proyecto
-         this.objeProM.uzytavproyec_id = this.idRecuperado;
-
-         //guardar el tipo por defecto que sea de 2.
-         this.objeProM.uzytavobjetivo_programatipo = 2;
-         //ingreso similar al formulario que recibe
-         this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm2.value.objetivoG;
-         this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm2.value.tipoindiObjG;
-         this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm2.value.valorindicadorObjG;
-         this.objeProM.uzytavobjetivo_programaindicador = this.myForm2.value.indicadorObjG;
-         this.objeProM.uzytavobjetivo_programamverifica = this.myForm2.value.medioVeriObjG;
-         this.objeProM.uzytavobjetivo_programasupuestos = this.myForm2.value.supuestoObjG;
-
-         this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
-           console.log('Datos Enviados');
-           this.objeProS.parametrosActualizados.next();
-           this.datosCompartidos.actualizarDatos(this.objeProM);
-           this.cambio2 = false;
-           //para recuperar el id
-           this.idObjeGeneral = this.objeProS.obtenerIdPro();
-           localStorage.setItem('proyectoId',this.idObjeGeneral.toString());
-         });
-       } catch (error) {
-         console.error('Error al enviar los datos:', error);
-       }
-     }
-   }
-
-   //guardar los objetivos espe
-   onSubmitObjetivoEspe() {
-     if (this.myForm3.valid) {
-       try {
-         //guardar el id del proyecto
-         this.objeProM.uzytavproyec_id = this.idRecuperado;
-         //guardar el id del objetivo general
-         this.objeProM.uzytavobjetivo_programa_id_padre = this.idCompartido.getIdPadre();
-         //guardar el tipo por defecto que sea de 3.
-         this.objeProM.uzytavobjetivo_programatipo = 3;
-         //ingreso similar al formulario que recibe
-         this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm3.value.objetivoEspe;
-         this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm3.value.tipoindiObjEspe;
-         this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm3.value.valorindicadorObjEspe;
-         this.objeProM.uzytavobjetivo_programaindicador = this.myForm3.value.indicadorObjEspe;
-         this.objeProM.uzytavobjetivo_programamverifica = this.myForm3.value.medioVeriObjEspe;
-         this.objeProM.uzytavobjetivo_programasupuestos = this.myForm3.value.supuestoObjEspe;
-
-         this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
-           console.log('Datos Enviados');
-           this.objeProS.parametrosActualizados.next();
-           this.datosCompartidos.actualizarDatos(this.objeProM);
-           this.cambio3 = false;
-           //para recuperar el id
-           //this.idEspecifico = this.objeProS.obtenerIdPro();
-           //this.idCompartido.setIdObjeEspe(this.idRecuperado);
-         });
-       } catch (error) {
-         console.error('Error al enviar los datos:', error);
-       }
-     }
-   }
-
-   //guardar las actividades para cada objetivo especifico
-   onSubmitActi() {
-     if (this.myForm4.valid) {
-       try {
-         //guardar el id del proyecto
-         this.objeProM.uzytavproyec_id = this.idRecuperado;
-         this.objeProM.uzytavobjetivo_programa_id_padre = this.idCompartido.getIdEspe();
-         //guardar el tipo por defecto que sea de 4.
-         this.objeProM.uzytavobjetivo_programatipo = 4;
-         //ingreso similar al formulario que recibe
-         this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm4.value.actividadEspe;
-         this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm4.value.tipoindiActi;
-         this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm4.value.valorindicadorActi;
-         this.objeProM.uzytavobjetivo_programaindicador = this.myForm4.value.indicadorObjActi;
-         this.objeProM.uzytavobjetivo_programamverifica = this.myForm4.value.medioVeriActi;
-         this.objeProM.uzytavobjetivo_programasupuestos = this.myForm4.value.supuestoActi;
-
-         this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
-           console.log('Datos Enviados');
-           this.objeProS.parametrosActualizados.next();
-           this.datosCompartidos.actualizarDatos(this.objeProM);
-           this.cambio4 = false;
-           //para recuperar el id
-           //this.idRecuperado = this.objeProS.obtenerIdPro();
-           //this.idCompartido.setIdPadreGuardado(this.idRecuperado);
-         });
-       } catch (error) {
-         console.error('Error al enviar los datos:', error);
-       }
-     }
-   }
-
-   //esto recupera todo lo que tiene relación con el proyecto considerando los filtros
-   obtenerRegistros() {
-     if (this.idRecuperado !== undefined) {
-       this.objeProS.registrosRelacionadosConProyecto(this.idRecuperado).subscribe(data => {
-         if (data !== undefined) {
-           //principal para obtener todos los registros con relación al proyecto
-           this.objetivoPro = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 1);
-           //secundario para listar el objetivo General
-           this.objetivoProObj = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 2);
-           if(this.objetivoProObj.length > 0){
-             this.idObjeGeneralRecu = this.objetivoProObj[0].uzytavobjetivo_programa_id;
-             this.idCompartido.setIdPadreGuardado(this.idObjeGeneralRecu);
-           }
-           this.idObjeGeneralRecu = this.idCompartido.getIdPadre();
-           //secundario para listar el objetivo
-           this.objetivoProEsp = data.filter(item => item.uzytavobjetivo_programatipo === 3 && item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programa_id_padre === this.idObjeGeneralRecu);
-           //cuarto para listar us hijos de aca objetivo especifico
-           this.objetivoProAct = data.filter(item => item.uzytavobjetivo_programatipo === 4 && item.uzytavproyec_id === this.idRecuperado);
-         }
-       });
-     }
-   }
-
-   //funciones secundarias
-
-   editar() {
-     this.cambio = true;
-     this.myForm.reset();
-     this.scrollIntoView();
-   }
-
-   AddObjEspe() {
-     this.cambio3 = true;
-     this.myForm3.reset();
-     this.scrollIntoView();
-   }
-
-   AddActi(id_Re: number) {
-     this.cambio4 = true;
-     this.myForm4.reset();
-     this.idEspecifico = id_Re;
-     this.idCompartido.setIdObjeEspe(this.idEspecifico);
-     this.scrollIntoView();
-   }
-
-   addOBJG(){
-     this.cambio2 = true;
-     this.myForm2.reset();
-     this.scrollIntoView();
-   }
-   EditarObjEsp() {
-
-   }
-
-   eliminarObjG(id: number) {
-     const confirmacion = confirm('¿Desea eliminar el registro?');
-     if (confirmacion) {
-       this.objeProS.eliminarParametros(id).subscribe(
-         () => {
-           console.log('El registro se ha eliminado');
-           this.obtenerRegistros();
-         },
-         (error) => {
-           // No mostrar el error en la consola
-           console.log('Error durante el tratamiento al registro');
-         }
-       );
-     }
-   }
-
-   eliminarFin(id: number) {
-     const confirmacion = confirm('¿Desea eliminar el registro?');
-     if (confirmacion) {
-       this.objeProS.eliminarParametros(id).subscribe(
-         () => {
-           console.log('El registro se ha eliminado');
-           this.obtenerRegistros();
-         },
-         (error) => {
-           // No mostrar el error en la consola
-           console.log('Error durante el tratamiento al registro');
-         }
-       );
-     }
-   }
-
-   eliminarObjEsp(id: number){
-     const confirmacion = confirm('¿Desea eliminar el registro?');
-     if (confirmacion) {
-       this.objeProS.eliminarParametros(id).subscribe(
-         () => {
-           console.log('El registro se ha eliminado');
-           this.obtenerRegistros();
-         },
-         (error) => {
-           // No mostrar el error en la consola
-           console.log('Error durante el tratamiento al registro');
-         }
-       );
-     }
-   }
-
-   eliminarActividad(id: number){
-     const confirmacion = confirm('¿Desea eliminar el registro?');
-     if (confirmacion) {
-       this.objeProS.eliminarParametros(id).subscribe(
-         () => {
-           console.log('El registro se ha eliminado');
-           this.obtenerRegistros();
-         },
-         (error) => {
-           // No mostrar el error en la consola
-           console.log('Error durante el tratamiento al registro');
-         }
-       );
-     }
-   }
-
-   especificarValor(tipo : number){
-     if(tipo === 1){
-       return 'Valor';
-     }else {
-       return 'Porcentaje';
-     }
-   }
-
-   scrollIntoView() {
+  //variables necesarias para mostrar u ocultar los formularios
+  cambio: boolean = false;
+  cambio2: boolean = false;
+  cambio3: boolean = false;
+  cambio4: boolean = false;
+  //declaracion de los formularios
+  //fin
+  myForm: FormGroup;
+  //objetivo g
+  myForm2: FormGroup;
+  //objetivo espe
+  myForm3: FormGroup;
+  //actividades;
+  myForm4: FormGroup;
+
+  //recuperación de id proyecto
+  idRecuperado: number;
+  //recuperación de id de objetivo
+  idObjeGeneral: number;
+  idObjeGeneralRecu: number;
+  idEspecifico: number;
+  idObjeEspecifico: number;
+
+
+  //arreglo de los datos
+  objetivoPro: objetivoprograma[] = []; //esto recupera el arreglo para los del fin
+  objetivoProObj: objetivoprograma[] = []; //esto recupera el arreglo para los objetivos generales
+  objetivoProEsp: objetivoprograma[] = []; // esto recupera el arreglo para los objetivos especificos
+  objetivoProAct: objetivoprograma[] = []; // esto recupera el arreglo para los actividades de cada objetivo
+
+  //mostrar la tabla interna
+  mostrarDiv: boolean[] = [];
+
+  toggleDiv(i: number) {
+    this.mostrarDiv[i] = !this.mostrarDiv[i];
+  }
+  constructor(
+    private formBuilder: FormBuilder,
+    private objeProS: Objetivo_programaService,
+    private objeProM: objetivoprograma,
+    private idCompartido: Compartir_idService,
+    private datosCompartidos: Actualiza_datosService
+  ) { }
+
+  ngOnInit(): void {
+    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
+    this.myForm = this.formBuilder.group({
+      fin: [],
+      tipoindiFin: [],
+      valorindicadorFin: [],
+      indicadorFin: [],
+      medioVeriFin: [],
+      supuestoFin: []
+    });
+
+    this.myForm2 = this.formBuilder.group({
+      objetivoG: [],
+      tipoindiObjG: [],
+      valorindicadorObjG: [],
+      indicadorObjG: [],
+      medioVeriObjG: [],
+      supuestoObjG: []
+    });
+
+    this.myForm3 = this.formBuilder.group({
+      objetivoEspe: [],
+      tipoindiObjEspe: [],
+      valorindicadorObjEspe: [],
+      indicadorObjEspe: [],
+      medioVeriObjEspe: [],
+      supuestoObjEspe: []
+    });
+
+    this.myForm4 = this.formBuilder.group({
+      actividadEspe: [],
+      tipoindiActi: [],
+      valorindicadorActi: [],
+      indicadorObjActi: [],
+      medioVeriActi: [],
+      supuestoActi: []
+    });
+
+    this.datosCompartidos.datos$.subscribe(() => {
+      this.obtenerRegistros();
+    });
+    this.objeProS.parametrosActualizados.subscribe(() => {
+      this.obtenerRegistros();
+    });
+
+  }
+  //cancela el fin
+  cancelado() {
+    this.cambio = false;
+    this.myForm.reset();
+  }
+  //cancela el objetivo general
+  cancelado2() {
+    this.cambio2 = false;
+    this.myForm.reset();
+  }
+  //cancela el objetio espec
+  canceladoObjEs() {
+    this.cambio3 = false;
+    this.myForm.reset();
+  }
+  //cancela la actividad
+  canceladoActi() {
+    this.cambio4 = false;
+    this.myForm.reset();
+  }
+
+  //guardar el fin
+  onSubmitFin() {
+    if (this.myForm.valid) {
+      try {
+        //guardar el id del proyecto
+        this.objeProM.uzytavproyec_id = this.idRecuperado;
+
+        //guardar el tipo por defecto que sea de 1.
+        this.objeProM.uzytavobjetivo_programatipo = 1;
+        //ingreso similar al formulario que recibe
+        this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm.value.fin;
+        this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm.value.tipoindiFin;
+        this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm.value.valorindicadorFin;
+        this.objeProM.uzytavobjetivo_programaindicador = this.myForm.value.indicadorFin;
+        this.objeProM.uzytavobjetivo_programamverifica = this.myForm.value.medioVeriFin;
+        this.objeProM.uzytavobjetivo_programasupuestos = this.myForm.value.supuestoFin;
+
+        this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
+          console.log('Datos Enviados');
+          this.objeProS.parametrosActualizados.next();
+          this.datosCompartidos.actualizarDatos(this.objeProM);
+          this.cambio = false;
+        });
+      } catch (error) {
+        console.error('Error al enviar los datos:', error);
+      }
+    }
+  }
+
+
+  //guardar el objetivo general
+  onSubmitObjetivo() {
+    if (this.myForm2.valid) {
+      try {
+        //guardar el id del proyecto
+        this.objeProM.uzytavproyec_id = this.idRecuperado;
+
+        //guardar el tipo por defecto que sea de 2.
+        this.objeProM.uzytavobjetivo_programatipo = 2;
+        //ingreso similar al formulario que recibe
+        this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm2.value.objetivoG;
+        this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm2.value.tipoindiObjG;
+        this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm2.value.valorindicadorObjG;
+        this.objeProM.uzytavobjetivo_programaindicador = this.myForm2.value.indicadorObjG;
+        this.objeProM.uzytavobjetivo_programamverifica = this.myForm2.value.medioVeriObjG;
+        this.objeProM.uzytavobjetivo_programasupuestos = this.myForm2.value.supuestoObjG;
+
+        this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
+          console.log('Datos Enviados');
+          this.objeProS.parametrosActualizados.next();
+          this.datosCompartidos.actualizarDatos(this.objeProM);
+          this.cambio2 = false;
+          //para recuperar el id
+          this.idObjeGeneral = this.objeProS.obtenerIdPro();
+          localStorage.setItem('proyectoId', this.idObjeGeneral.toString());
+        });
+      } catch (error) {
+        console.error('Error al enviar los datos:', error);
+      }
+    }
+  }
+
+  //guardar los objetivos espe
+  onSubmitObjetivoEspe() {
+    if (this.myForm3.valid) {
+      try {
+        //guardar el id del proyecto
+        this.objeProM.uzytavproyec_id = this.idRecuperado;
+        //guardar el id del objetivo general
+        this.objeProM.uzytavobjetivo_programa_id_padre = this.idCompartido.getIdPadre();
+        //guardar el tipo por defecto que sea de 3.
+        this.objeProM.uzytavobjetivo_programatipo = 3;
+        //ingreso similar al formulario que recibe
+        this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm3.value.objetivoEspe;
+        this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm3.value.tipoindiObjEspe;
+        this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm3.value.valorindicadorObjEspe;
+        this.objeProM.uzytavobjetivo_programaindicador = this.myForm3.value.indicadorObjEspe;
+        this.objeProM.uzytavobjetivo_programamverifica = this.myForm3.value.medioVeriObjEspe;
+        this.objeProM.uzytavobjetivo_programasupuestos = this.myForm3.value.supuestoObjEspe;
+
+        this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
+          console.log('Datos Enviados');
+          this.objeProS.parametrosActualizados.next();
+          this.datosCompartidos.actualizarDatos(this.objeProM);
+          this.cambio3 = false;
+          //para recuperar el id
+          //this.idEspecifico = this.objeProS.obtenerIdPro();
+          //this.idCompartido.setIdObjeEspe(this.idRecuperado);
+        });
+      } catch (error) {
+        console.error('Error al enviar los datos:', error);
+      }
+    }
+  }
+
+  //guardar las actividades para cada objetivo especifico
+  onSubmitActi() {
+    if (this.myForm4.valid) {
+      try {
+        //guardar el id del proyecto
+        this.objeProM.uzytavproyec_id = this.idRecuperado;
+        this.objeProM.uzytavobjetivo_programa_id_padre = this.idCompartido.getIdEspe();
+        //guardar el tipo por defecto que sea de 4.
+        this.objeProM.uzytavobjetivo_programatipo = 4;
+        //ingreso similar al formulario que recibe
+        this.objeProM.uzytavobjetivo_programaobjetivo_proy = this.myForm4.value.actividadEspe;
+        this.objeProM.uzytavobjetivo_programaindicador_tipo = this.myForm4.value.tipoindiActi;
+        this.objeProM.uzytavobjetivo_programaindicador_valor = this.myForm4.value.valorindicadorActi;
+        this.objeProM.uzytavobjetivo_programaindicador = this.myForm4.value.indicadorObjActi;
+        this.objeProM.uzytavobjetivo_programamverifica = this.myForm4.value.medioVeriActi;
+        this.objeProM.uzytavobjetivo_programasupuestos = this.myForm4.value.supuestoActi;
+
+        this.objeProS.guardarParametros(this.objeProM).subscribe(response => {
+          console.log('Datos Enviados');
+          this.objeProS.parametrosActualizados.next();
+          this.datosCompartidos.actualizarDatos(this.objeProM);
+          this.cambio4 = false;
+          //para recuperar el id
+          //this.idRecuperado = this.objeProS.obtenerIdPro();
+          //this.idCompartido.setIdPadreGuardado(this.idRecuperado);
+        });
+      } catch (error) {
+        console.error('Error al enviar los datos:', error);
+      }
+    }
+  }
+
+  //esto recupera todo lo que tiene relación con el proyecto considerando los filtros
+  obtenerRegistros() {
+    if (this.idRecuperado !== undefined) {
+      this.objeProS.registrosRelacionadosConProyecto(this.idRecuperado).subscribe(data => {
+        if (data !== undefined) {
+          //principal para obtener todos los registros con relación al proyecto
+          this.objetivoPro = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 1);
+          //secundario para listar el objetivo General
+          this.objetivoProObj = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 2);
+          if (this.objetivoProObj.length > 0) {
+            this.idObjeGeneralRecu = this.objetivoProObj[0].uzytavobjetivo_programa_id;
+            this.idCompartido.setIdPadreGuardado(this.idObjeGeneralRecu);
+          }
+          this.idObjeGeneralRecu = this.idCompartido.getIdPadre();
+          //secundario para listar el objetivo
+          this.objetivoProEsp = data.filter(item => item.uzytavobjetivo_programatipo === 3 && item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programa_id_padre === this.idObjeGeneralRecu);
+          //cuarto para listar us hijos de aca objetivo especifico
+          this.objetivoProAct = data.filter(item => item.uzytavobjetivo_programatipo === 4 && item.uzytavproyec_id === this.idRecuperado);
+        }
+      });
+    }
+  }
+
+  //funciones secundarias
+
+  editar() {
+    this.cambio = true;
+    this.myForm.reset();
+    this.scrollIntoView();
+  }
+
+  AddObjEspe() {
+    this.cambio3 = true;
+    this.myForm3.reset();
+    this.scrollIntoView();
+  }
+
+  AddActi(id_Re: number) {
+    this.cambio4 = true;
+    this.myForm4.reset();
+    this.idEspecifico = id_Re;
+    this.idCompartido.setIdObjeEspe(this.idEspecifico);
+    this.scrollIntoView();
+  }
+
+  addOBJG() {
+    this.cambio2 = true;
+    this.myForm2.reset();
+    this.scrollIntoView();
+  }
+  EditarObjEsp() {
+
+  }
+
+  eliminarObjG(id: number) {
+    const confirmacion = confirm('¿Desea eliminar el registro?');
+    if (confirmacion) {
+      this.objeProS.eliminarParametros(id).subscribe(
+        () => {
+          console.log('El registro se ha eliminado');
+          this.obtenerRegistros();
+        },
+        (error) => {
+          // No mostrar el error en la consola
+          console.log('Error durante el tratamiento al registro');
+        }
+      );
+    }
+  }
+
+  eliminarFin(id: number) {
+    const confirmacion = confirm('¿Desea eliminar el registro?');
+    if (confirmacion) {
+      this.objeProS.eliminarParametros(id).subscribe(
+        () => {
+          console.log('El registro se ha eliminado');
+          this.obtenerRegistros();
+        },
+        (error) => {
+          // No mostrar el error en la consola
+          console.log('Error durante el tratamiento al registro');
+        }
+      );
+    }
+  }
+
+  eliminarObjEsp(id: number) {
+    const confirmacion = confirm('¿Desea eliminar el registro?');
+    if (confirmacion) {
+      this.objeProS.eliminarParametros(id).subscribe(
+        () => {
+          console.log('El registro se ha eliminado');
+          this.obtenerRegistros();
+        },
+        (error) => {
+          // No mostrar el error en la consola
+          console.log('Error durante el tratamiento al registro');
+        }
+      );
+    }
+  }
+
+  eliminarActividad(id: number) {
+    const confirmacion = confirm('¿Desea eliminar el registro?');
+    if (confirmacion) {
+      this.objeProS.eliminarParametros(id).subscribe(
+        () => {
+          console.log('El registro se ha eliminado');
+          this.obtenerRegistros();
+        },
+        (error) => {
+          // No mostrar el error en la consola
+          console.log('Error durante el tratamiento al registro');
+        }
+      );
+    }
+  }
+
+  especificarValor(tipo: number) {
+    if (tipo === 1) {
+      return 'Valor';
+    } else {
+      return 'Porcentaje';
+    }
+  }
+
+  scrollIntoView() {
     if (this.activitySection && this.activitySection.nativeElement) {
       this.activitySection.nativeElement.scrollIntoView({ behavior: 'smooth' });
     }

src/app/modules/main/pages/Proyectos/Proyectos/Proyecto/Proyecto.component.html

@@ -319,32 +319,204 @@
         <!--Stepper version dos-->
       </mat-expansion-panel>
       <!--Seguimiento-->
+      <!--Seguimiento-->
       <mat-expansion-panel hideToggle>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <strong>Seguimiento</strong>
+            <strong>Inicio Ejecución</strong>
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <p>I'm visible because I am open</p>
+
+        <!--Acceso numero 1-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              1.- Asignación de Docentes
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--acceso numero 2-->
+
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              2.- Asignación de Estudiantes
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--acceso numero 3-->
+
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              3.- Compromiso de Participación
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <!--fin-->
+        </mat-expansion-panel>
+
       </mat-expansion-panel>
-      <!--Cierre-->
+
+      <!--Ejecución-->
       <mat-expansion-panel hideToggle>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <strong>Cierre</strong>
+            <strong>Ejecución</strong>
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <p>I'm visible because I am open</p>
+        <!--ejecucuipon punto 1-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              1.- Informes de avance
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--ejecución punto dos-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              2.- Horas dedicación docente
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--ejecución punto tres-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              3.- Horas dedicación estudiante
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--ejecución punto cuatro-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              4.- Finalizar proceso de ejecución
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--fin-->
+        </mat-expansion-panel>
+
       </mat-expansion-panel>
-      <!--Evaluación-->
+
+      <!--Cierre-->
       <mat-expansion-panel hideToggle>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <strong>Evaluación</strong>
+            <strong>Cierre</strong>
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <p>I'm visible because I am open</p>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              1.- Numérico de Beneficiarios
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-resultados></vex-resultados>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              2.- Objetivos ejecutados
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-resultados></vex-resultados>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              3.- Presupuesto ejecutado
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-resultados></vex-resultados>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              4.- Resultados Proyecto
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-resultados></vex-resultados>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              5..- Finalizar Proceso de Cierre
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-resultados></vex-resultados>
+          <!--fin-->
+        </mat-expansion-panel>
+
       </mat-expansion-panel>
+
+
     </mat-accordion>
 
   </div>

src/app/modules/main/pages/Proyectos/Proyectos/edit-proyecto/edit-proyecto.component.html

@@ -374,19 +374,53 @@
           <!--fin-->
         </mat-expansion-panel>
 
-        <!--Proyectos Planificados-->
+        <!--Acta de Consejo de Departamento-->
         <mat-expansion-panel (opened)="contraccion = true"
           (closed)="contraccion = false">
           <mat-expansion-panel-header>
             <mat-panel-title>
               <mat-icon
                 [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
-              Proyectos Planificados
+              8.- Acta de Consejo de Departamento
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <!--Datos generales internos-->
+          <app-acta-consejo-departamento></app-acta-consejo-departamento>
+          <app-listar-acta-consejo-departamento></app-listar-acta-consejo-departamento>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Acta de Compromiso Director del Proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              9.- Acta de Compromiso Director del Proyecto
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--Datos generales internos-->
+          <app-acta-director-proyecto></app-acta-director-proyecto>
+          <!--fin-->
+        </mat-expansion-panel>
 
+        <!--Acta de Compromiso de Carreras -->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              10.- Acta de Compromiso de Carreras
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--Datos generales internos-->
+          <app-acta-compromiso-carreras></app-acta-compromiso-carreras>
+          <app-listar-acta-compromiso-carreras></app-listar-acta-compromiso-carreras>
           <!--fin-->
         </mat-expansion-panel>
 
@@ -404,6 +438,20 @@
           <!--fin-->
         </mat-expansion-panel>
 
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              Ver y descargar PDF.
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+        <!-- <vex-pdf></vex-pdf> -->
+
+          <!--fin-->
+        </mat-expansion-panel>
+
         <!--Stepper version dos-->
       </mat-expansion-panel>
       <!--Seguimiento-->
@@ -453,6 +501,26 @@
               3.- Compromiso de Participación
             </mat-panel-title>
           </mat-expansion-panel-header>
+          <button mat-raised-button color="primary"
+            (click)="mostrarCompro = true">Agregar</button>
+          <button mat-raised-button color="warn"
+            (click)="cancelarCompro()">Cancelar</button>
+          <vex-add-compromiso *ngIf="mostrarCompro"
+            (formularioGuardado)="cancelarCompro()"></vex-add-compromiso>
+          <vex-list-compromiso></vex-list-compromiso>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              4.- Carta Compromiso Comunidad
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-carta-compromiso-comu></vex-carta-compromiso-comu>
           <!--fin-->
         </mat-expansion-panel>
 
@@ -462,7 +530,7 @@
       <mat-expansion-panel hideToggle>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <strong>Cierre</strong>
+            <strong>Ejecución</strong>
           </mat-panel-title>
         </mat-expansion-panel-header>
         <!--ejecucuipon punto 1-->
@@ -514,7 +582,7 @@
             <mat-panel-title>
               <mat-icon
                 [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
-              3.- Finalizar proceso de ejecución
+              4.- Finalizar proceso de ejecución
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -530,6 +598,49 @@
             <strong>Cierre</strong>
           </mat-panel-title>
         </mat-expansion-panel-header>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              1.- Numérico de Beneficiarios
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-list-insti></vex-list-insti>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              2.- Objetivos ejecutados
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <vex-list-objetivos-ejec></vex-list-objetivos-ejec>
+          <!--fin-->
+        </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              3.- Presupuesto ejecutado
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+
+          <!--fin-->
+        </mat-expansion-panel>
+
         <!--Resultados del proyecto-->
         <mat-expansion-panel (opened)="contraccion = true"
           (closed)="contraccion = false">
@@ -543,6 +654,20 @@
           <vex-resultados></vex-resultados>
           <!--fin-->
         </mat-expansion-panel>
+
+        <!--Resultados del proyecto-->
+        <mat-expansion-panel (opened)="contraccion = true"
+          (closed)="contraccion = false">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon
+                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
+              5..- Finalizar Proceso de Cierre
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <!--fin-->
+        </mat-expansion-panel>
+
       </mat-expansion-panel>
 
     </mat-accordion>

src/app/modules/main/pages/Proyectos/Proyectos/edit-proyecto/edit-proyecto.component.ts

@@ -16,6 +16,7 @@ export class EditProyectoComponent implements OnInit {
   mostrarPCP:boolean = false;
   mostrarLineas: boolean = false;
   mostrarPresupuestoDetallado: boolean = false;
+  mostrarCompro: boolean = false;
   mostrarEstra: boolean = false;
 
   idRecu: number;
@@ -34,6 +35,10 @@ export class EditProyectoComponent implements OnInit {
     console.log('Valor de contraccion:', this.contraccion);
   }
 
+  cancelarCompro(){
+    this.mostrarCompro = false;
+  }
+
   volver(){
     localStorage.removeItem('proyectoId');
     this.router.navigate(['main/ListaProyectos']);

src/app/modules/main/pages/Proyectos/Viabilidad y Plan de Sostenibilidad/edit-viabilidad/edit-viabilidad.component.html

 <div class="container">
-  <form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmit()" >
+  <form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">
     <mat-card>
       <mat-card-header>
         <div class="save-button">
@@ -16,18 +16,25 @@
 
         <div>
           <label class="label-negrita"> Viabilidad Técnica:</label>
-            <angular-editor formControlName="viabilidad" [config]="editorConfig"></angular-editor>
-
+          <ckeditor formControlName="viabilidad" class="custom-ckeditor"
+            [disabled]="!isEditorEnabled" [style.height]="editorHeight"
+            [editor]="Editor"></ckeditor>
         </div>
         <div class="editor-separator"></div>
         <div>
-          <label class="label-negrita"> ¿Qué perdería el país si el proyecto no se ejecuta en este periodo?</label>
-            <angular-editor formControlName="perderia" [config]="editorConfig"></angular-editor>
+          <label class="label-negrita"> ¿Qué perdería el país si el proyecto no
+            se ejecuta en este periodo?</label>
+          <ckeditor formControlName="perderia" class="custom-ckeditor"
+            [disabled]="!isEditorEnabled" [style.height]="editorHeight"
+            [editor]="Editor"></ckeditor>
         </div>
         <div class="editor-separator"></div>
         <div>
-          <label class="label-negrita"> ¿Cuáles son los resultados o impactos esperados del proyecto?</label>
-            <angular-editor formControlName="resultadoO" [config]="editorConfig"></angular-editor>
+          <label class="label-negrita"> ¿Cuáles son los resultados o impactos
+            esperados del proyecto?</label>
+            <ckeditor formControlName="resultadoO" class="custom-ckeditor"
+            [disabled]="!isEditorEnabled" [style.height]="editorHeight"
+            [editor]="Editor"></ckeditor>
         </div>
       </mat-card-content>
     </mat-card>

src/app/modules/main/pages/Proyectos/Viabilidad y Plan de Sostenibilidad/edit-viabilidad/edit-viabilidad.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Form, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AngularEditorConfig } from '@kolkov/angular-editor';
 import { Proyectos } from 'src/app/modules/main/Models/proyectos';
 import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
 import { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
 import { ProyectosService } from 'src/app/modules/main/services/proyectos/proyectos.service';
-
+import ClassicEditor from '../../ckeditor-custom/build/ckeditor';
+import { MatDialog } from '@angular/material/dialog';
+import { EnvioFormularioComponent } from '../../../programa/opciones/envio-formulario/envio-formulario.component';
 @Component({
   selector: 'vex-edit-viabilidad',
   templateUrl: './edit-viabilidad.component.html',
   styleUrls: ['./edit-viabilidad.component.css']
 })
 export class EditViabilidadComponent implements OnInit {
+  public Editor = ClassicEditor;
   idRecuperado: number;
   htmlContent: string = '';
   myForm: FormGroup;
   cambio: boolean;
   private proyectos: Proyectos = new Proyectos();
-  editorConfig: AngularEditorConfig = {
-    editable: false,
-    spellcheck: true,
-    height: '10rem',
-    minHeight: '5rem',
-    translate: 'yes',
-    enableToolbar: true,
-    showToolbar: true,
-    placeholder: 'Enter text here...',
-    defaultParagraphSeparator: '',
-    defaultFontName: '',
-    defaultFontSize: '',
-    fonts: [
-      { class: 'arial', name: 'Arial' },
-      { class: 'times-new-roman', name: 'Times New Roman' },
-      { class: 'calibri', name: 'Calibri' },
-      { class: 'comic-sans-ms', name: 'Comic Sans MS' }
-    ],
-    customClasses: [
-      {
-        name: 'quote',
-        class: 'quote',
-      },
-      {
-        name: 'redText',
-        class: 'redText'
-      },
-      {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
-      },
-    ]
-  };
+  editorHeight = '400px';
+  formularioEnviado: boolean;
+  isEditorEnabled = false;
 
   constructor(
     private formBuilder: FormBuilder,
     private proyectosService: ProyectosService,
     private compartiId: Compartir_idService,
-    private mostrarOcultarService: MostrarOcultarService
+    private mostrarOcultarService: MostrarOcultarService,
+    private dialog: MatDialog,
   ) { }
 
   cambiar() {
     this.cambio = true;
-    this.editorConfig.editable = true;
+    this.isEditorEnabled = true;
   }
 
   cancelado() {
     this.cambio = false;
-    this.editorConfig.editable = false;
+    this.isEditorEnabled = false;
   }
 
   ngOnInit(): void {
@@ -105,12 +77,23 @@ export class EditViabilidadComponent implements OnInit {
         this.proyectos.uzytavproyec_perderia = this.myForm.get('perderia').value;
         this.proyectos.uzytavproyec_resultados = this.myForm.get('resultadoO').value;
         this.proyectosService.modificarParametros(this.idRecuperado, this.proyectos).subscribe(response => {
-          this.editorConfig.editable = false;
           this.cambio = false;
+          this.openModal();
         });
       } catch (error) {
         console.error('Error al enviar los datos:', error);
       }
     }
   }
+
+  openModal() {
+    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('La ventana modal se ha cerrado');
+      this.formularioEnviado = true;
+    });
+  }
 }

src/app/modules/main/pages/Proyectos/pdf/pdf.component.css

+table {
+  width: 100%;
+}
+
+/* Estilos generales */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.sinborder {
+
+  text-align: center;
+  font-weight: bold;
+}
+
+.General th {
+  padding: 10px;
+  border: 1px solid black;
+  font-weight: bold;
+  background-color: #b6b6b6
+}
+
+.Duracion th {
+  padding: 4px;
+  border: 1px solid black;
+  font-weight: bold;
+  background-color: #b6b6b6
+}
+
+.encabezado table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.encabezado td {
+  padding: 10px;
+  border: 1px solid black;
+}
+
+.encabezado .image-cell img {
+  max-width: 100px;
+  height: auto;
+}
+
+.encabezado .center-cell {
+  text-align: center;
+  font-weight: bold;
+}
+
+/* Estilos para la tabla de detalles */
+.detalle-table {
+  margin-top: 20px;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.detalle-table td {
+  padding: 5px;
+  border: 1px solid black;
+}
+
+.detalle-table .codigo-cell {
+  width: 30%;
+  font-weight: bold;
+}
+
+/* Estilos para el pie de página */
+.pie {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.Column {
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 100px;
+  white-space: inherit;
+}
+
+.Column1 negrita {
+  font-weight: bold;
+}
+
+.Column1 {
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 10px;
+  white-space: normal;
+  overflow: visible;
+}
+
+.Column2 {
+  width: 25px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+
+.label-negrita {
+  font-weight: bold;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.div-container {
+  display: flex;
+  align-items: center;
+  padding: 0%;
+}
+
+.container {
+  padding: 0%;
+}
+
+.Marco_Lógico tr {
+  border: 5px;
+}
+
+.containerActividades {
+  padding: 0%;
+  border-left: 15px;
+}
+
+.container tr {
+  border-top: 3%;
+  border-width: 3%;
+}
+
+.separa {
+  margin-top: 3%;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 5% 10% 45% 10% 5% 10% 15%;
+  border: 1px solid #ccc;
+}
+
+table,
+th,
+tr,
+td {
+  border: 1px solid black;
+  border-collapse: collapse;
+  padding: 5px;
+
+}
+
+.mat-elevation-z8 table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.mat-elevation-z8 th,
+.mat-elevation-z8 td {
+  border: 1px solid black;
+  text-align: left;
+}
+
+.mat-elevation-z8 th {
+  background-color: #f2f2f2;
+}

src/app/modules/main/pages/Proyectos/pdf/pdf.component.html

+<div id="PDF">
+
+  <div class="encabezado">
+    <table>
+      <tr>
+        <td class="image-cell"> img </td>
+        <td class="center-cell">VINCULACIÓN CON LA SOCIEDAD DE LA LINEA OPERATIVA DE PROYECTOS SOCIALES</td>
+        <td class="sinborder" style="
+        padding: 0px;
+        border: 0px;">
+      <tr>
+        <td colspan="2">Unidad de Gestión de la Vinculación</td>
+      </tr>
+      <table>
+
+        <tr>
+          <td>Código de documento:</td>
+          <td>1</td>
+        </tr>
+        <tr>
+          <td>Página</td>
+          <td>1</td>
+        </tr>
+      </table>
+      </td>
+      </tr>
+    </table>
+  </div>
+  <br>
+  <br>
+
+
+
+  <table>
+    <tr class="General">
+      <th>1. DATOS GENERALES</th>
+    </tr>
+    <tr>
+      <th>Nombre del Programa al que pertenece</th>
+    </tr>
+    <td>{{ programaSeleccionado?.uzytavprograma_vnombre }}</td>
+    <tr>
+      <th>Nombre o Título del proyecto</th>
+    </tr>
+    <tr>
+      <td>{{ proyecto?.uzytavproyec_nombre }}</td>
+    </tr>
+  </table>
+
+  <br>
+  <table>
+
+    <th colspan="1">Tipo de cobertura</th>
+    <td>{{ tipoCobertura }}</td>
+  </table>
+
+
+  <br>
+
+  <app-listar-cobertura-proyecto></app-listar-cobertura-proyecto>
+  <!-- <div class="mat-elevation-z8">
+      <table mat-table [dataSource]="dataSource" matSort>
+
+        <ng-container matColumnDef="Nro" class="Column1">
+          <th class="Column1 negrita" mat-header-cell *matHeaderCellDef mat-sort-header> Nro </th>
+          <td class="Column1" mat-cell *matCellDef="let i = index"> {{ i+1 }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="Provincia" class="Column">
+          <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+            Provincia </th>
+          <td class="Column" mat-cell *matCellDef="let dato"> {{ getProvinciaNombre(dato.uzytprovincia_id)}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="Canton" class="Column">
+          <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+            Cantón </th>
+          <td class="Column" mat-cell *matCellDef="let dato"> {{ getCantonNombre(dato.uzytcanton_id)}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="Parroquia" class="Column">
+          <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+            Parroquia </th>
+          <td class="Column" mat-cell *matCellDef="let dato"> {{getParroquiaNombre(dato.uzytparroquia_id)}} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+    </div> -->
+
+
+  <br>
+
+
+  <table>
+    <tr class="Duracion">
+      <th colspan="3"> Plazo de ejecución </th>
+    </tr>
+
+    <tr>
+      <th>Fecha de inicio planificada</th>
+      <th>Fecha de finalización planificada</th>
+      <th>Duración</th>
+    </tr>
+    <!-- Fila de resultados -->
+    <tr>
+      <td>{{ formatFecha(proyecto?.uzytavproyec_fecha_inicio) }}</td>
+      <td>{{ formatFecha(proyecto?.uzytavproyec_fecha_finaliza) }}</td>
+      <td>{{ duracionProyecto }}</td>
+    </tr>
+  </table>
+
+  <br>
+
+  <table>
+    <tr class="Duracion">
+      <th colspan="4"> Director del proyecto </th>
+    </tr>
+
+    <tr>
+      <th>Nombre y Apellido:</th>
+      <td colspan="3">{{ usuario?.uzytusuario_nombres }} {{ usuario?.uzytusuario_apellidos }} </td>
+    </tr>
+    <!-- Fila de resultados -->
+    <tr>
+      <th>Departamento:</th>
+      <td>{{ usuario?.uzytusuario_departamento }}</td>
+      <th>Cargo:</th>
+      <td>{{ usuario?.uzytusuario_campus }}</td>
+    </tr>
+    <tr>
+      <th>Correo electrónico:</th>
+      <td>{{ usuario?.uzytusuario_email_institucional }}</td>
+      <th>Teléfono celular:</th>
+      <td>{{ usuario?.uzytusuario_telefono_celular }}</td>
+    </tr>
+  </table>
+
+  <br>
+
+  <table>
+
+    <tr class="Duracion">
+      <th colspan="2"> El proyecto social es resultado de </th>
+    </tr>
+
+    <tr *ngFor="let objetivo of objetivoPro">
+      <th>Otro</th>
+      <td>{{ objetivo.uzytavobjetivo_programaobjetivo_proy }}</td>
+    </tr>
+
+
+  </table>
+
+  <br>
+
+  <table>
+
+    <tr class="Duracion">
+      <th colspan="3"> Detalle de entregables del proyecto </th>
+    </tr>
+    <tr *ngFor="let objetivo of objetivoProObj">
+      <th>El proyecto espera generar alguno de los siguientes resultados:</th>
+      <th>Otro</th>
+      <td>{{ objetivo.uzytavobjetivo_programaobjetivo_proy }}</td>
+    </tr>
+
+
+  </table>
+
+  <br>
+
+  <table>
+
+    <tr class="Duracion">
+      <th colspan="2"> El proyecto social es resultado de </th>
+    </tr>
+
+    <tr style="text-align: center;">
+      <th>Tipo</th>
+      <th>Descripción</th>
+    </tr>
+
+    <tr>
+      <th>Otro</th>
+      <td>Otros posibles impactos que el proyecto podría generar al finalizar la ejecución.</td>
+    </tr>
+
+
+  </table>
+
+  <br>
+
+  <table>
+    <tr class="General">
+      <th>2. DIAGNÓSTICO Y PROBLEMA </th>
+    </tr>
+
+    <tr>
+      <th>Descripción de la situación actual del área de intervención del proyecto: </th>
+    </tr>
+    <td>{{ proyecto.uzytavproyec_situactual}}</td>
+    <tr>
+      <th>Identificación, descripción y diagnóstico del problema: </th>
+    </tr>
+    <tr>
+      <td>{{ proyecto.uzytavproyec_diagnostico }}</td>
+    </tr>
+    <tr>
+      <th>Linea Base:</th>
+    </tr>
+    <tr>
+      <td>Ninguna</td>
+    </tr>
+  </table>
+
+  <br>
+  <table>
+    <tr class="General">
+      <th colspan="8">3. MARCO LÓGICO </th>
+    </tr>
+
+    <app-add-matriz-logico></app-add-matriz-logico>
+
+  </table>
+
+  <br>
+
+  <!--    <div class="Marco_Lógico">
+
+
+
+
+      <div class="container">
+        <div class="mat-elevation-z8">
+
+          <table>
+            <tr>
+              <th class="Column1 negrita"></th>
+              <th class="Column1 negrita">Descripción</th>
+              <th class="Column1 negrita">Tipo Indicador</th>
+              <th class="Column1 negrita">Valor Indicador</th>
+              <th class="Column1 negrita">Descripción Indicador</th>
+              <th class="Column1 negrita">Medio de Verificación</th>
+            </tr>
+            <tr *ngIf="objetivoPro.length === 0">
+              <td colspan="7" class="Column1">Fin</td>
+
+            </tr>
+
+            <tr *ngFor="let item of objetivoPro">
+              <td class="Column1">Fin</td>
+              <td class="Column1">{{item.uzytavobjetivo_programaobjetivo_proy || ''}}</td>
+              <td class="Column1">{{especificarValor(item.uzytavobjetivo_programaindicador_tipo)
+                || ''}}</td>
+              <td class="Column1">{{item.uzytavobjetivo_programaindicador_valor || ''}}</td>
+              <td class="Column1">{{item.uzytavobjetivo_programaindicador || ''}}</td>
+              <td class="Column1">{{item.uzytavobjetivo_programamverifica || ''}}</td>
+              <td class="Column1">{{item.uzytavobjetivo_programasupuestos || ''}}</td>
+
+            </tr>
+
+            <tr *ngIf="objetivoProObj.length === 0">
+              <td colspan="7" class="Column1">Proposito(Objetivo General)</td>
+
+            </tr>
+            <tr *ngFor="let objG of objetivoProObj">
+              <td class="Column1">Proposito(Objetivo General)</td>
+              <td class="Column1">{{ objG.uzytavobjetivo_programaobjetivo_proy || ''}}</td>
+              <td class="Column1">{{
+                especificarValor(objG.uzytavobjetivo_programaindicador_tipo) || ''}}</td>
+              <td class="Column1">{{ objG.uzytavobjetivo_programaindicador_valor || ''}}</td>
+              <td class="Column1">{{ objG.uzytavobjetivo_programaindicador || ''}}</td>
+              <td class="Column1">{{ objG.uzytavobjetivo_programamverifica || ''}}</td>
+              <td class="Column1">{{ objG.uzytavobjetivo_programasupuestos || ''}}</td>
+
+            </tr>
+          </table>
+
+        </div>
+      </div>
+      <div class="separa"></div>
+
+      <div class="container">
+        <div class="mat-elevation-z8">
+          <div class="div-container">
+            <label class="label-negrita">Componentes (objetivos específicos):</label>
+
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th class="Column1 negrita">Nro</th>
+                <th class="Column1 negrita">Descripción</th>
+                <th class="Column1 negrita">Tipo Indicador</th>
+                <th class="Column1 negrita">Valor Indicador</th>
+                <th class="Column1 negrita">Descripción Indicador</th>
+                <th class="Column1 negrita">Medio de Verificación</th>
+                <th class="Column1 negrita">Supuestos</th>
+              </tr>
+            </thead>
+            <tbody>
+              <ng-container *ngFor="let item of objetivoProEsp; let i = index">
+                <tr id="fila-{{i}}">
+                  <td>
+                    {{i+1}}
+                  </td>
+                  <td>{{item.uzytavobjetivo_programaobjetivo_proy}}</td>
+                  <td>{{especificarValor(item.uzytavobjetivo_programaindicador_tipo)}}</td>
+                  <td>{{item.uzytavobjetivo_programaindicador_valor}}</td>
+                  <td>{{item.uzytavobjetivo_programaindicador}}</td>
+                  <td>{{item.uzytavobjetivo_programamverifica}}</td>
+                  <td>{{item.uzytavobjetivo_programasupuestos}}</td>
+
+                </tr>
+
+                <tr>
+                  <td colspan="8">
+                    <div class="container">
+                      <div class="mat-elevation-z8">
+                        <div class="div-container">
+                          <label class="label-negrita">Actividades: </label>
+
+                        </div>
+                        <table>
+                          <thead>
+                            <tr>
+                              <th class="Column1 negrita">Nro</th>
+                              <th class="Column1 negrita">Descripción</th>
+                              <th class="Column1 negrita">Tipo Indicador</th>
+                              <th class="Column1 negrita">Valor Indicador</th>
+                              <th class="Column1 negrita">Descripción Indicador</th>
+                              <th class="Column1 negrita">Medio de Verificación</th>
+                              <th class="Column1 negrita">Supuestos</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr *ngFor="let acti of objetivoProAct;  let i = index">
+                              <ng-container
+                                *ngIf="acti.uzytavobjetivo_programa_id_padre === item.uzytavobjetivo_programa_id">
+                                <td>{{ i+1 }}</td>
+                                <td>{{acti.uzytavobjetivo_programaobjetivo_proy}}</td>
+                                <td>{{especificarValor(acti.uzytavobjetivo_programaindicador_tipo)}}</td>
+                                <td>{{acti.uzytavobjetivo_programaindicador_valor}}</td>
+                                <td>{{acti.uzytavobjetivo_programaindicador}}</td>
+                                <td>{{acti.uzytavobjetivo_programamverifica}}</td>
+                                <td>{{acti.uzytavobjetivo_programasupuestos}}</td>
+
+                              </ng-container>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </ng-container>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+ -->
+
+
+  <br>
+  <table>
+
+    <tr class="Duracion">
+      <th colspan="6"> Identificación y caracterización de la población objetivo (beneficiarios y participantes) </th>
+    </tr>
+
+    <tr>
+      <th>Item</th>
+      <th>Hombres</th>
+      <th>Mujeres</th>
+      <th>Niños</th>
+      <th>Personas con discapacidades </th>
+      <th>Total </th>
+    </tr>
+
+    <tr>
+      <th>DIRECTOS</th>
+      <td>{{proyecto.uzytavproyec_directos_hombres}}</td>
+      <td>{{proyecto.uzytavproyec_directos_mujeres }}</td>
+      <td>{{proyecto.uzytavproyec_directos_ninios }}</td>
+      <td>{{proyecto.uzytavproyec_directos_discapac}}</td>
+      <td>{{ proyecto.uzytavproyec_directos_ejec}}</td>
+    </tr>
+
+    <tr>
+      <th>INDIRECTOS</th>
+      <td>{{proyecto.uzytavproyec_inidirectos_hombres}}</td>
+      <td>{{proyecto.uzytavproyec_inidirectos_mujeres }}</td>
+      <td>{{proyecto.uzytavproyec_indirectos_ninios }}</td>
+      <td>{{proyecto.uzytavproyec_inidirectos_discapa }}</td>
+      <td>{{proyecto.uzytavproyec_indirectos }}</td>
+    </tr>
+
+
+  </table>
+
+  <br>
+
+  <table>
+    <app-listar-docentes-participantes></app-listar-docentes-participantes>
+    <br>
+    <app-listar-estudiantes-participantes></app-listar-estudiantes-participantes>
+    <br>
+  </table>
+
+  <table>
+    <tr class="General">
+      <th>4. PRESUPUESTO DETALLADO Y FUENTES DE FINANCIAMIENTO. </th>
+    </tr>
+  </table>
+
+  <br>
+
+  <table>
+    <app-aporte-universidad></app-aporte-universidad>
+    <br>
+    <app-aporte-entidad></app-aporte-entidad>
+    <br>
+    <app-aporte-comunidad></app-aporte-comunidad>
+    <br>
+  </table>
+  <table>
+    <tr class="General">
+      <th>5. ALINEAMIENTO DEL PROYECTO </th>
+    </tr>
+    <br>
+    <tr class="Duracion">
+      <th colspan="2"> ¿A qué objetivos de desarrollo sostenible 2030 se alinea el proyecto? </th>
+    </tr>
+    <vex-list-objetivos-plnbv></vex-list-objetivos-plnbv>
+  </table>
+
+  <br>
+
+  <table>
+    <tr class="Duracion">
+      <th colspan="2"> ¿A qué campos de educación y capacitación (CINE- UNESCO) apunta el Proyecto? </th>
+    </tr>
+    <ex-list-linea></ex-list-linea>
+  </table>
+
+  <br>
+
+  <table>
+    <tr class="Duracion">
+      <th colspan="2"> ¿A qué objetivo u objetivos del Plan de Desarrollo del Ecuador se respalda el Proyecto?: </th>
+    </tr>
+    <br>
+
+    <app-objetivos-provinciales> </app-objetivos-provinciales>
+
+  </table>
+
+
+
+
+  <br>
+
+  <table>
+    <tr class="Duracion">
+      <th colspan="2"> ¿A qué Objetivos Estratégicos Institucionales se alinea el Proyecto?: </th>
+    </tr>
+    <vex-list-objetivos-estra></vex-list-objetivos-estra>
+  </table>
+
+  <br>
+
+
+  <table>
+    <tr class="General">
+      <th> 6. ESTRATEGIA DE EJECUCIÓN-CRONOGRAMA </th>
+    </tr>
+    <vex-add-cronograma-acti></vex-add-cronograma-acti>
+  </table>
+
+
+
+</div>
+
+<br>
+
+<div>
+  <button class="btn col col-lg-4 btn-danger btn-block ml-4" (click)="downloadPDF()">Download PDF</button>
+</div>

src/app/modules/main/pages/Proyectos/pdf/pdf.component.spec.ts

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

src/app/modules/main/pages/Proyectos/pdf/pdf.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Usuario } from '../../../Models/usuario';
+import { objetivoprograma } from '../../../Models/objetivoPrograma';
+import { ZonaDetalle } from '../../../Models/zona_detalle';
+import { MatTableDataSource } from '@angular/material/table';
+import { Parroquia } from '../../../Models/Ubicaciones/parroquia';
+import { Canton } from '../../../Models/Ubicaciones/canton';
+import { Provincia } from '../../../Models/Ubicaciones/provincia';
+import { Observable } from 'rxjs';
+import { Carrera } from '../../../Models/carrera';
+import { PoblacionProyecto } from '../../../Models/poblacion-proyecto';
+import { Poblacion } from '../../../Models/poblacion';
+import { Programa } from '../../../Models/programa-v';
+import { Proyectos } from '../../../Models/proyectos';
+import { FormBuilder } from '@angular/forms';
+import { Compartir_idService } from '../../../services/compartir_id/compartir_id.service';
+import { ProyectosService } from '../../../services/proyectos/proyectos.service';
+import { UsuariosService } from '../../../services/usuarios/usuarios.service';
+import { MostrarOcultarService } from '../../../services/mostrar-ocultar.service';
+import { PoblacionService } from '../../../services/población/poblacion.service';
+import { PoblacionProyectoService } from '../../../services/poblacion-proyecto/poblacion-proyecto.service';
+import { ActivatedRoute } from '@angular/router';
+import { DatosEspeService } from '../../../services/APIs Externas/Datos espe/datos-espe.service';
+import { ProgramaService } from '../../../services/programa/programa.service';
+import { Zona_detalleService } from '../../../services/zona_detalle/zona_detalle.service';
+import { UbicacionesService } from '../../../services/Ubicaciones/ubicaciones.service';
+import { Actualiza_datosService } from '../../../services/actualiza_datos/actualiza_datos.service';
+import { Objetivo_programaService } from '../../../services/objetivo_programa/objetivo_programa.service';
+import { differenceInCalendarDays, differenceInDays, format } from 'date-fns';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+@Component({
+  selector: 'vex-pdf',
+  templateUrl: './pdf.component.html',
+  styleUrls: ['./pdf.component.css']
+})
+export class PdfComponent implements OnInit {
+  proyecto: Proyectos;
+  usuario: Usuario;
+  selectedProgramaId: number;
+  selectedCarreraId: string
+  programas: Programa[];
+  poblacion: Poblacion[] = [];
+  poblacionProyecto: PoblacionProyecto[] = [];
+  carrera: Carrera[];
+  tipoGasto: string;
+  idUsuarioTipo: string;
+  idProyecto: number;
+  anioCodigo: string;
+  selectedCarreraValue: string; // Variable para almacenar el valor seleccionado
+  campus$: Observable<string> | undefined; // para el test
+  programaSeleccionado: any; // Agrega esta línea
+  provincias: Provincia[] = [];
+  cantones: Canton[] = [];
+  parroquias: Parroquia[] = [];
+  idRecuperado: number;
+  dataSource: MatTableDataSource<ZonaDetalle>;
+  zonaDM: ZonaDetalle[] = [];
+  displayedColumns: string[] = ['Nro', 'Provincia', 'Canton', 'Parroquia'];
+  tipoCobertura: string = '';
+  duracionProyecto: '';
+
+  idObjeGeneral: number;
+  idObjeGeneralRecu: number;
+  idEspecifico: number;
+  idObjeEspecifico: number;
+
+  objetivoPro: objetivoprograma[] = [];//esto recupera el arreglo para los del fin
+  objetivoProObj: objetivoprograma[] = []; //esto recupera el arreglo para los objetivos generales
+  objetivoProEsp: objetivoprograma[] = []; // esto recupera el arreglo para los objetivos especificos
+  objetivoProAct: objetivoprograma[] = []; // esto recupera el arreglo para los actividades de cada objetivo
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private ID_compartido: Compartir_idService,
+    private proyectosService: ProyectosService,
+    private mostrarOcultarService: MostrarOcultarService,
+    private datosUsuarioService: UsuariosService,
+    private poblacionService: PoblacionService,
+    private poblacionProyectoService: PoblacionProyectoService,
+    private route: ActivatedRoute,
+    private datosESPEService: DatosEspeService,
+    private programaService: ProgramaService,
+    private zonaS: Zona_detalleService,
+    private datosCompar: Actualiza_datosService,
+    private ubicacionesS: UbicacionesService,
+    private idCompartido: Compartir_idService,
+
+    private objeProS: Objetivo_programaService,
+    private objeProM: objetivoprograma,
+    private datosCompartidos: Actualiza_datosService
+
+  ) {
+
+    this.dataSource = new MatTableDataSource<ZonaDetalle>([]);
+
+
+  }
+  ngOnInit(): void {
+    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'),10)
+    this.datosCompartidos.datos$.subscribe(() => {
+      this.obtenerRegistros();
+    });
+    this.objeProS.parametrosActualizados.subscribe(() => {
+      this.obtenerRegistros();
+    });
+
+    if (this.zonaDM.length === null) {
+      this.tipoCobertura = 'Internacional';
+    } else if (this.getProvinciaNombre.length === 0) {
+      this.tipoCobertura = 'Nacional';
+    } else if (this.getCantonNombre.length === 0) {
+      this.tipoCobertura = 'Provincial';
+    } else if (this.getParroquiaNombre.length === 0) {
+      this.tipoCobertura = 'Cantonal';
+    } else {
+      this.tipoCobertura = 'Parroquial';
+    }
+
+    this.proyecto = this.mostrarOcultarService.editProyecto;
+
+    this.obtenerDatosDirector();
+    this.obtenerRegistrosObjetivos();
+    this.usuario = new Usuario();
+    this.obtenerParametrosPoblacion();
+    this.obtenerPoblacionProyecto();
+    this.obtenerParametrosPrograma(); // Agrega esta línea
+
+    this.datosCompar.datos$.subscribe(() => {
+      this.obtenerRegistros();
+      this.obtenerProvincias();
+      this.obtenerParroquias();
+      this.obtenerCantones();
+    });
+
+    this.zonaS.parametrosActualizados.subscribe(() => {
+      this.obtenerRegistros();
+      this.obtenerProvincias();
+      this.obtenerParroquias();
+      this.obtenerCantones();
+    });
+
+    console.log("objetivoProobj", this.objetivoProObj);
+    console.log("objetivoPro", this.objetivoPro);
+
+
+  }
+
+  especificarValor(tipo: number) {
+    if (tipo === 1) {
+      return 'Valor';
+    } else {
+      return 'Porcentaje';
+    }
+  }
+
+  obtenerRegistrosObjetivos() {
+    this.idRecuperado = this.idCompartido.getIdGuardado();
+    if (this.idRecuperado !== undefined) {
+      this.objeProS.registrosRelacionadosConProyecto(this.idRecuperado).subscribe(data => {
+        if (data !== undefined) {
+          //principal para obtener todos los registros con relación al proyecto
+          this.objetivoPro = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 1);
+          //secundario para listar el objetivo General
+          this.objetivoProObj = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 2);
+          if (this.objetivoProObj.length > 0) {
+            this.idObjeGeneralRecu = this.objetivoProObj[0].uzytavobjetivo_programa_id;
+            this.idCompartido.setIdPadreGuardado(this.idObjeGeneralRecu);
+          }
+          this.idObjeGeneralRecu = this.idCompartido.getIdPadre();
+          //secundario para listar el objetivo
+          this.objetivoProEsp = data.filter(item => item.uzytavobjetivo_programatipo === 3 && item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programa_id_padre === this.idObjeGeneralRecu);
+          //cuarto para listar us hijos de aca objetivo especifico
+          this.objetivoProAct = data.filter(item => item.uzytavobjetivo_programatipo === 4 && item.uzytavproyec_id === this.idRecuperado);
+        }
+      });
+    }
+  }
+
+  obtenerDatosDirector() {
+    this.datosUsuarioService.obtenerUsuarioPorId(this.proyecto?.uzytusuario_id).subscribe(
+      usuario => {
+        this.usuario = usuario;
+      },
+      error => {
+        console.log('Error al obtener los parámetros:', error);
+      }
+    );
+  }
+
+
+  formatFecha(fecha: Date): string {
+    const dateObj = new Date(fecha);
+    return format(dateObj, 'dd-MM-yyyy');
+  }
+
+
+  obtenerRegistros() {
+    this.idRecuperado = this.idCompartido.getIdGuardado();
+    if (this.idRecuperado !== undefined) {
+      this.zonaS.obtenerRegistrosRelacionadosProyecto(this.idRecuperado).subscribe(data => {
+        this.zonaDM = data;
+        this.dataSource.data = this.zonaDM;
+      });
+    }
+  }
+
+
+
+  obtenerParroquias() {
+    this.ubicacionesS.obtenerCant().subscribe(cant => {
+      this.cantones = cant;
+    });
+  }
+
+  obtenerCantones() {
+    this.ubicacionesS.obtenerParro().subscribe(parro => {
+      this.parroquias = parro;
+    });
+  }
+
+  obtenerProvincias() {
+    this.ubicacionesS.obtenerProvincias().subscribe(prov => {
+      this.provincias = prov;
+    });
+  }
+
+  getProvinciaNombre(provinciaId: string): string {
+    const provincia = this.provincias.find(p => p.uzytprovincia_id === provinciaId);
+    if (provincia) {
+      const nombre = provincia.uzytprovincia_nombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+  getCantonNombre(cantonId: string): string {
+    const canton = this.cantones.find(p => p.uzytcanton_id === cantonId);
+    if (canton) {
+      const nombre = canton.uzytcantonnombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+  getParroquiaNombre(parroquiaId: string): string {
+    const parroquia = this.parroquias.find(p => p.uzytparroquia_id === parroquiaId);
+    if (parroquia) {
+      const nombre = parroquia.uzytparroquia_nombre.toLowerCase();
+      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
+    }
+    return '';
+  }
+
+  eliminarParametro(id: number) {
+    const confirmacion = confirm('¿Desea eliminar el registro?');
+    if (confirmacion) {
+      this.zonaS.eliminarParametros(id).subscribe(
+        () => {
+          console.log('El registro se ha eliminado');
+          this.obtenerRegistros();
+        },
+        (error) => {
+          // No mostrar el error en la consola
+          console.log('Error durante el tratamiento al registro');
+        }
+      );
+    }
+  }
+
+  obtenerParametrosPrograma() {
+    const uzytavprograma_v_id = this.idProyecto;
+    this.programaService.obtenerParametros().subscribe(
+      programas => {
+        this.programas = programas;
+        this.programaSeleccionado = this.programas.find(programa => programa.uzytavprograma_v_id === this.proyecto.uzytavprograma_v_id);
+      },
+      error => {
+        console.log('Error al obtener los parámetros:', error);
+      }
+    );
+  }
+
+
+
+  compareFn(perfil1: PoblacionProyecto, perfil2: PoblacionProyecto): boolean {
+    // Compara los perfiles por su identificador (uzytperfil_id)
+    return perfil1 && perfil2 ? perfil1.uzytavpobla_id === perfil2.uzytavpobla_id : perfil1 === perfil2;
+  }
+
+
+
+
+
+
+
+
+  obtenerPoblacionProyecto() {
+
+    if (this.idUsuarioTipo == "1") {
+      this.idProyecto = this.proyecto.uzytavproyec_id;
+
+    } else {
+      this.idProyecto = this.ID_compartido.getIdGuardado();
+    }
+
+    this.poblacionProyectoService.obtenerParametrosId(this.idProyecto).subscribe(
+      poblacion => {
+        this.poblacionProyecto = poblacion;
+        console.log("la poblacion por proyecto", this.poblacionProyecto)
+
+      },
+      error => {
+        console.log('Error al obtener los parámetros:', error);
+      }
+    );
+  }
+
+
+
+  obtenerParametrosPoblacion() {
+    this.poblacionService.obtenerParametros().subscribe(
+      poblacion => {
+        this.poblacion = poblacion;
+        console.log("la poblacion", this.poblacion)
+      },
+      error => {
+        console.log('Error al obtener los parámetros:', error);
+      }
+    );
+  }
+
+  /*  public downloadPDF(): void {
+
+     const DATA = document.getElementById('PDF');
+     const doc = new jsPDF('p', 'pt', 'a4');
+     const options = {
+       background: 'white',
+       scale: 3
+     };
+
+     html2canvas(DATA, options).then((canvas) => {
+
+       const img = canvas.toDataURL('image/PNG');
+
+       // Add image Canvas to PDF
+       const bufferX = 15;
+       const bufferY = 15;
+       const imgProps = (doc as any).getImageProperties(img);
+       const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
+       const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+       doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'FAST');
+
+
+
+       return doc;
+
+     }).then((docResult) => {
+       docResult.save(`${new Date().toISOString()}_Proyecto.pdf`);
+     });
+   } */
+
+  /* public downloadPDF(): void {
+
+    const DATA = document.getElementById('PDF');
+    const doc = new jsPDF('p', 'pt', 'a4');
+    const options = {
+      background: 'white',
+      scale: 3
+    };
+
+    html2canvas(DATA, options).then((canvas) => {
+
+      var imgData = canvas.toDataURL('image/png');
+
+      var imgWidth = 200;
+      var pageHeight = 200;
+      var imgHeight = canvas.height * imgWidth / canvas.width;
+      var heightLeft = imgHeight;
+
+      var doc = new jsPDF('p', 'mm', 'a4');
+      var position = 5;
+
+      doc.addImage(imgData, 'PNG', 5, position, imgWidth, imgHeight);
+      heightLeft -= pageHeight;
+
+      while (heightLeft >= 200) {
+        position = 5;
+        doc.addPage();
+        doc.addImage(imgData, 'PNG', 5, position, imgWidth, imgHeight);
+        heightLeft -= pageHeight;
+        heightLeft = -3;
+      }
+
+      doc.save('file.pdf');
+    });
+  }
+ */
+  /* public downloadPDF(): void {
+    const DATA = document.getElementById('PDF');
+    const options = {
+      background: 'white',
+      scale: 3
+    };
+
+    html2canvas(DATA, options).then((canvas) => {
+      var imgData = canvas.toDataURL('image/png');
+      var imgWidth = 200;
+      var pageHeight = 200;
+      var imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+      var doc = new jsPDF('p', 'mm', 'a4');
+      var position = 5;
+      var heightLeft = imgHeight;
+
+      while (heightLeft >= 0) {
+        doc.addImage(imgData, 'PNG', 5, position, imgWidth, imgHeight);
+
+        heightLeft = -1;
+        if (heightLeft > 0) {
+          doc.addPage();
+          position = 0;
+        }
+      }
+
+      doc.save('file.pdf');
+    });
+  }
+   */
+
+  downloadPDF() {
+    var data = document.getElementById('PDF');
+    html2canvas(data).then(canvas => {
+      var imgWidth = 200;
+      var pageHeight = 300;
+      var imgHeight = canvas.height * imgWidth / canvas.width;
+      var heightLeft = imgHeight;
+      const contentDataURL = canvas.toDataURL('image/png', 10)
+      var options = {
+        size: '70px',
+        pagesplit: true,
+      };
+
+      let pdf = new jsPDF('p', 'mm', 'a4', 5); // A4 size page of PDF
+
+      var position = 5;
+      var width = pdf.internal.pageSize.width;
+      var height = pdf.internal.pageSize.height;
+      pdf.addImage(contentDataURL, 'PNG', 5, position, imgWidth, imgHeight, options)
+      pdf.addImage(contentDataURL, 'PNG', 5, position, imgWidth, imgHeight, options);
+      heightLeft -= pageHeight;
+      while (heightLeft >= 0) {
+        position = heightLeft - imgHeight;
+        pdf.addPage();
+        pdf.addImage(contentDataURL, 'PNG', 5, position, imgWidth, imgHeight, options);
+        heightLeft -= pageHeight;
+      }
+
+      pdf.save('informe.pdf'); // Generated PDF
+    });
+  }
+
+
+}

src/app/modules/main/pages/Seccion-configuraciones/Catalogo Partidas Presupuestarias/catalogo/catalogo-partidas/catalogo-partidas.component.ts

@@ -72,6 +72,7 @@ export class CatalogoPartidasComponent implements OnInit {
         this.getGrupo(data).toLowerCase().includes(filter) ||
         this.getSubgrupo1(data).toLowerCase().includes(filter) ||
         this.getSubgrupo2(data).toLowerCase().includes(filter) ||
+        this.getSubgrupo3(data).toLowerCase().includes(filter) ||
         data.uzytclasificador_presup_nombre.toLowerCase().includes(filter);
 
       this.dataSource.filter = this.filtroGeneral.toLowerCase();

src/app/modules/main/pages/Seccion-configuraciones/Comision de Evaluacion/Integrantes de la Comision/add-integrantes-comision/add-integrantes-comision.component.html

@@ -21,15 +21,15 @@
         <mat-label>Nombres</mat-label>
         <input matInput [(ngModel)]="searchTerm" (ngModelChange)="realizarBusqueda()" placeholder="Realizar búsqueda" />
       </mat-form-field>
-      
+
       <mat-autocomplete *ngIf="usuarios" [displayWith]="displayFn">
         <mat-option *ngFor="let usuario of usuarios" (clic)="onUsuarioSelected(usuario)" [value]="usuario" >
           {{ usuario.uzytusuario_nombres }} {{ usuario.uzytusuario_apellidos }}
         </mat-option>
       </mat-autocomplete>
-      
-      
-      
+
+
+
     </div>
 -->
 
@@ -38,14 +38,14 @@
     <mat-label>Nombres</mat-label>
     <input matInput [(ngModel)]="searchTerm" (ngModelChange)="realizarBusqueda()" placeholder="Realizar búsqueda" />
   </mat-form-field>
-  
+
   <mat-autocomplete *ngIf="usuarios" [displayWith]="displayFn">
     <mat-option *ngFor="let usuario of usuarios" [value]="usuario" (onSelectionChange)="onUsuarioSelected(usuario)">
       {{ usuario.uzytusuario_nombres }} {{ usuario.uzytusuario_apellidos }}
     </mat-option>
-    
-  </mat-autocomplete>  
-  
+
+  </mat-autocomplete>
+
 </div>
     <form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formulario">
 
@@ -97,4 +97,4 @@
       <button mat-raised-button color="primary" [disabled]="myForm.invalid" (click)="onSubmit()">Guardar</button>
     </form>
   </div>
-</div>
\ No newline at end of file
+</div>

src/app/modules/main/pages/Seccion-configuraciones/Parametros de Evaluacion/Configuracion parametro Evaluacion/conf-parametros-eva/conf-parametros-eva.component.ts

@@ -6,6 +6,8 @@ import { ParametrosService } from '../../../../../services/conf-parametros/param
 import { format } from 'date-fns';
 import { Usuario } from 'src/app/modules/main/Models/usuario';
 import { UsuariosService } from 'src/app/modules/main/services/usuarios/usuarios.service';
+import { ConfirmacionEliminacionComponent } from '../../../../programa/opciones/ConfirmacionEliminacion/ConfirmacionEliminacion.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-conf-parametros-eva',
@@ -22,6 +24,7 @@ export class ConfParametrosEvaComponent implements OnInit {
     public mostrarOcultarService: MostrarOcultarService,
     private router: Router,
     private parametrosService: ParametrosService,
+    private dialog: MatDialog,
   ) {
     this.tipo = 1;
     
@@ -64,21 +67,25 @@ export class ConfParametrosEvaComponent implements OnInit {
   // Código para el buscar
 
   eliminarParametro(id: number) {
-    const confirmacion = confirm('¿Estás seguro de que quieres eliminar este parámetro?');
-    if (confirmacion) {
-      console.log("id", id);
-      this.parametrosService.eliminarParametros(id).subscribe(
-        () => {
-          // Manejar la eliminación exitosa
-          console.log('Registro eliminado correctamente');
-          this.obtenerRegistros();
-        },
-        (error) => {
-          // Manejar el error en caso de que ocurra
-          console.error('Error al eliminar el registro', error);
-        }
-      );
-    }
+
+    const dialogRef = this.dialog.open(ConfirmacionEliminacionComponent, {
+      width: '400px', // Personaliza el ancho de la ventana modal
+      data: '¿Estás seguro de que quieres eliminar este registro?'
+    });
+    
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === 'confirm') {
+        this.parametrosService.eliminarParametros(id).subscribe(
+          () => {
+            console.log('Registro eliminado correctamente');
+            this.obtenerRegistros();
+          },
+          (error) => {
+            console.error('Error al eliminar el registro', error);
+          }
+        );
+      }
+    });
   }
 
   buscarParametros() {

src/app/modules/main/pages/asignar comision/comision-eva/comision-eva.component.html

@@ -37,3 +37,40 @@
     </form>
   </div>
 </div>
+
+<div class="container">
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="Nro" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef
+          mat-sort-header> Nro </th>
+        <td class="Column1" mat-cell *matCellDef="let i = index"> {{ i+1 }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="cedula" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Cedula </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_dir_discapacidad}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="info" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Nombre y Apellidos </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_DIRECTOS}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="correo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Correo Electronico </th>
+        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstproy_TOTAL}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+</div>

src/app/modules/main/pages/asignar comision/comision-eva/comision-eva.component.ts

@@ -9,6 +9,9 @@ import { ParametrosService } from '../../../services/conf-parametros/parametros.
 import { ProyectosService } from '../../../services/proyectos/proyectos.service';
 import { MatDialog } from '@angular/material/dialog';
 import { Route, Router } from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
+import { IntegrantesComision } from '../../../Models/Comision de evaluacion/integrantes-comision';
+import { IntegrantesComisionService } from '../../../services/integrantes-comision/integrantes-comision.service';
 
 @Component({
   selector: 'vex-comision-eva',
@@ -20,8 +23,11 @@ export class ComisionEvaComponent implements OnInit {
   myForm: FormGroup
   comisionA: ComisionEvaluacion[] = [];
   parametroA: Parametros[] = [];
+  integrantes: IntegrantesComision[] = [];
   datos: Proyectos;
   formularioEnviado: boolean = false;
+  dataSource: MatTableDataSource<IntegrantesComision>;
+  displayedColumns: string[] = ['Nro','cedula', 'info', 'correo'];
   constructor(
     private formBuilder: FormBuilder,
     private comiS: ComisionEvaluacionService,
@@ -29,7 +35,8 @@ export class ComisionEvaComponent implements OnInit {
     private proyecM: Proyectos,
     private proyecS: ProyectosService,
     private dialog: MatDialog,
-    private router: Router
+    private router: Router,
+    private integranteService: IntegrantesComisionService
   ) {
     this.myForm = formBuilder.group({
       comision: ['', Validators.required],
@@ -91,10 +98,11 @@ export class ComisionEvaComponent implements OnInit {
         localStorage.setItem('comisionId',this.datos.uzytavcabcomca_id.toString());
         localStorage.setItem('parametrosId',this.datos.uzytavconparaeva_id.toString());
       }
-
-
     });
 
+    this.integranteService.obtenerParametros().subscribe(data=>{
+      this.integrantes = data;
+    });
   }
 
   openModal() {

src/app/modules/main/pages/asignar comision/list-proyecto-asigna/list-proyecto-asigna.component.html

@@ -29,6 +29,16 @@
         </td>
       </ng-container>
 
+      <!-- Nombre Institución Column -->
+      <ng-container matColumnDef="Estado" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Estado </th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          {{ (dato.uzytavcabcomca_id === null && dato.uzytavconparaeva_id === null) ? 'Por Asignar' : 'Aplicado' }}
+        </td>
+      </ng-container>
+
+
       <ng-container matColumnDef="Codigo" class="Column">
         <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
           Codigo </th>
@@ -37,6 +47,8 @@
         </td>
       </ng-container>
 
+
+
       <!-- Nombre Institución Column -->
       <ng-container matColumnDef="Nombre" class="Column">
         <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>

src/app/modules/main/pages/asignar comision/list-proyecto-asigna/list-proyecto-asigna.component.ts

@@ -22,15 +22,16 @@ import { DatosEspeService } from '../../../services/APIs Externas/Datos espe/dat
 })
 export class ListProyectoAsignaComponent implements OnInit {
   usuario!: Usuario[];
+  selectedTipo: string;
   proyecto: Proyectos;
   proyectos!: Proyectos[];
   enviarIdUsuario: Proyectos;
   director: string;
   displayedColumns: string[] = [
     'Nro',
+    'Estado',
     'Codigo',
     'Nombre',
-    //'Estado',
     'Director',
     'Campus',
     'Departamento',
@@ -55,7 +56,7 @@ export class ListProyectoAsignaComponent implements OnInit {
     this.proyecto = new Proyectos();
     this.dataSource = new MatTableDataSource<Proyectos>([]);
     this.enviarIdUsuario = new Proyectos()
-   }
+  }
 
   ngOnInit(): void {
     this.dataSource.paginator = this.paginator;
@@ -75,11 +76,10 @@ export class ListProyectoAsignaComponent implements OnInit {
           ...proyecto,
           departamento$: this.obtenerDatosDepartamento(proyecto.stvsubj_code),
           campus$: this.obtenerDatosCampus(proyecto.stvcamp_code),
-          nombres$: this.obtenerDatosUsuario(proyecto.uzytusuario_id)
-
+          nombres$: this.obtenerDatosUsuario(proyecto.uzytusuario_id),
         };
       });
-      this.dataSource.data = this.proyectos.filter(item => item.uzytavcabcomca_id === null && item.uzytavconparaeva_id === null);
+      this.dataSource.data = this.proyectos;
     });
   }
 
@@ -106,8 +106,8 @@ export class ListProyectoAsignaComponent implements OnInit {
       map(data => {
         const usuarioEncontrado = data.find(c => c.uzytusuario_id === id);
         return usuarioEncontrado ? usuarioEncontrado.uzytusuario_telefono_celular + " - "
-        + usuarioEncontrado.uzytusuario_nombres + " " +
-        usuarioEncontrado.uzytusuario_apellidos : 'No encontrado';
+          + usuarioEncontrado.uzytusuario_nombres + " " +
+          usuarioEncontrado.uzytusuario_apellidos : 'No encontrado';
       })
     );
   }
@@ -116,7 +116,7 @@ export class ListProyectoAsignaComponent implements OnInit {
     const registroSeleccionado = this.proyectos.find(
       proyectoFind => proyectoFind.uzytavproyec_id === id
     );
-    localStorage.setItem('proyectoId',id.toString());
+    localStorage.setItem('proyectoId', id.toString());
     //this.compartirID.setIdGuardad(id);
     this.mostrarOcultarService.editProyecto = registroSeleccionado;
     this.router.navigate(['main/AsinarC-proyecto/', id],
@@ -141,4 +141,16 @@ export class ListProyectoAsignaComponent implements OnInit {
       );
     };
   }
+
+  applyFilterByEstado() {
+    this.dataSource.filterPredicate = (data: Proyectos) => {
+      if (this.selectedTipo === 'A') {
+        return (data.uzytavcabcomca_id === null && data.uzytavconparaeva_id === null);
+      } else if (this.selectedTipo === 'I') {
+        return !(data.uzytavcabcomca_id === null && data.uzytavconparaeva_id === null);
+      }
+      return true;
+    };
+  }
+
 }

src/app/modules/main/pages/programa/opciones/ConfirmacionEliminacion/ConfirmacionEliminacion.component.css

+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+  
+  .modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+    position: relative;
+  }
+  
+  .success-icon {
+    font-size: 80px;
+    color: #006400;
+    margin-right: 1em;
+  }
+
+
+  
+  .confirm-button {
+    margin-right: 10px; 
+    background-color: #17853E;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .modal-content p {
+    margin-bottom: 20px;
+  }
+  
+  .cancel {
+    background-color: #d62020;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .modal-content button:hover {
+    background-color: #ecc87a;
+
+  }
+  
\ No newline at end of file

src/app/modules/main/pages/programa/opciones/ConfirmacionEliminacion/ConfirmacionEliminacion.component.html

+<div class="modal-container">
+  <div class="modal-content">
+    <p>{{ mensaje }}</p>
+  
+    <button mat-button  class="confirm-button" (click)="cerrarModal(true)">
+      Confirmar
+    </button>
+    <button mat-button class="cancel"  (click)="cerrarModal(false)">Cancelar</button>
+  </div>
+</div>
+

src/app/modules/main/pages/programa/opciones/ConfirmacionEliminacion/ConfirmacionEliminacion.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ConfirmacionEliminacionComponent } from './ConfirmacionEliminacion.component';
+
+describe('ConfirmacionEliminacionComponent', () => {
+  let component: ConfirmacionEliminacionComponent;
+  let fixture: ComponentFixture<ConfirmacionEliminacionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmacionEliminacionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmacionEliminacionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/main/pages/programa/opciones/ConfirmacionEliminacion/ConfirmacionEliminacion.component.ts

+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-ConfirmacionEliminacion',
+  templateUrl: './ConfirmacionEliminacion.component.html',
+  styleUrls: ['./ConfirmacionEliminacion.component.css']
+})
+export class ConfirmacionEliminacionComponent implements OnInit {
+
+  constructor(
+    private dialogRef: MatDialogRef<ConfirmacionEliminacionComponent>,
+    @Inject(MAT_DIALOG_DATA) public mensaje: string
+  ) {}
+
+  ngOnInit(): void {}
+
+  cerrarModal(confirmacion: boolean) {
+    this.dialogRef.close(confirmacion ? 'confirm' : 'cancel');
+  }
+}

src/app/modules/main/pages/programa/opciones/envio-formulario/envio-formulario.component.html

 <div class="modal">
   <div class="modal-content">
     <p>
-      Su información ha sido enviada con éxito. Agradecemos su colaboración</p>
+      Su información ha sido enviada con éxito.</p>
     <button mat-button (click)="closeModal()">Cerrar</button>
   </div>
 </div>

src/app/modules/main/services/Instituciones/instituciones.service.ts

@@ -9,10 +9,10 @@
   })
   export class InstitucionesService {
 
-    private readonly URL = environment.appApiUrl + '/instituc';  
-    
+    private readonly URL = environment.appApiUrl + '/instituc';
+    private readonly URL_id = environment.appApiUrl + '/instituc/exampleFindId';
     parametrosActualizados: Subject<void> = new Subject<void>();
-    
+
     constructor(private httpClient: HttpClient) {}
 
     getAll(): Observable<Instituciones[]> {
@@ -28,13 +28,15 @@
       return this.httpClient.get<Instituciones[]>(`${this.URL}/${id}`)
     }
 
+    obtenerParametrosId2(id: number): Observable<Instituciones> {
+      return this.httpClient.get<Instituciones>(`${this.URL_id}/${id}`)
+    }
 
-    
     guardarParametros(parametros: Instituciones):Observable<Object>{
       return this.httpClient.post(`${this.URL+"/guardar"}`, parametros)
      }
-    
-    
+
+
     modificarParametros(id: number, parametros: Instituciones): Observable<any> {
       return this.httpClient.put<any>(`${this.URL}/editar/${id}`, parametros)
     }

src/app/modules/main/services/compartir_id/compartir_id.service.ts

@@ -9,6 +9,8 @@ export class Compartir_idService {
   private filename: string;
   private idPDF: string;
   private _mostrarFormulario: boolean = false;
+  private _mostrarFormulario2: boolean = false;
+  private _mostrarFormulario3: boolean = false;
   private provincia: string;
   private canton: string;
   private parroquia: string;
@@ -21,10 +23,18 @@ export class Compartir_idService {
   private abrevDpto: string;
   private idDepartamento: string;
   private nombreDepartamento: string;
+  private idObje: number;
+  private id_insti: number;
 
   constructor() { }
 
+  getIdInst(){
+    return this.id_insti
+  }
 
+  setIdInst(id:number){
+    this.id_insti = id;
+  }
 
   getNombreDepartamento() {
     return this.nombreDepartamento
@@ -103,6 +113,31 @@ export class Compartir_idService {
     return this._mostrarFormulario;
   }
 
+
+  mostrarFormulario2(): void {
+    this._mostrarFormulario2 = true;
+  }
+
+  ocultarFormulario2(): void {
+    this._mostrarFormulario2 = false;
+  }
+
+  get mostrar2(): boolean {
+    return this._mostrarFormulario2;
+  }
+
+  mostrarFormulario3(): void {
+    this._mostrarFormulario3 = true;
+  }
+
+  ocultarFormulario3(): void {
+    this._mostrarFormulario3 = false;
+  }
+
+  get mostrar3(): boolean {
+    return this._mostrarFormulario3;
+  }
+
   setIdZonaDetalle(id: number) {
     this.idZonaDetalle = id;
   }
@@ -170,5 +205,13 @@ getIdUsuario() {
   return this.idUsuario;
 }
 
+setIdObj(id: number) {
+  this.idObje = id;
+}
+
+getIdObj() {
+  return this.idObje;
+}
+
 
 }

src/app/modules/main/services/mostrar-ocultar.service.ts

@@ -23,6 +23,8 @@ import { Canton } from '../Models/Ubicaciones/canton';
 import { Provincia } from '../Models/Ubicaciones/provincia';
 import { Parroquia } from '../Models/Ubicaciones/parroquia';
 import { PresupuestoPartidas } from '../Models/presupuesto-partidas';
+import { instproy } from '../Models/instproy';
+import { objetivoprograma } from '../Models/objetivoPrograma';
 
 @Injectable({
   providedIn: 'root'
@@ -49,12 +51,13 @@ export class MostrarOcultarService {
   editarConfO: confObj;
   catalogosGeneralesEditado: CatalogosGenerales;
   editPrograma : Programa
-  editProyecto : Proyectos  
+  editProyecto : Proyectos
   editEntidad: opcionInst;
   coberturaEdit: ZonaDetalle;
   cantonEditado : Canton;
   provinciaEditado: Provincia;
   parroquiaEditado: Parroquia;
   presupuestoEditado: PresupuestoPartidas;
-
+  editInst: instproy;
+  editObje: objetivoprograma
 }

src/app/modules/main/services/parametrosdet/parametrosdet.service.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { ParametrosdetService } from './parametrosdet.service';
+
+describe('Service: Parametrosdet', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ParametrosdetService]
+    });
+  });
+
+  it('should ...', inject([ParametrosdetService], (service: ParametrosdetService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/modules/main/services/parametrosdet/parametrosdet.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { parametrosdet } from '../../Models/parametrosdet';
+import { instproy } from '../../Models/instproy';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ParametrosdetService {
+  parametrosActualizados: Subject<void> = new Subject<void>();
+
+  private readonly URL = environment.appApiUrl + '/parametrosdet';
+
+  private readonly URL_INSTP = environment.appApiUrl + '/instproy';
+  private readonly URL_INSTP_RELA = environment.appApiUrl + '/instproy/obtenerRegistrosProyec';
+  constructor(private httpClient: HttpClient) { }
+
+  /*obtiene los registros que van en el radio button y en el select*/
+  obtenerParametros(): Observable<parametrosdet[]> {
+    return this.httpClient.get<parametrosdet[]>(`${this.URL}/getAll`);
+  }
+
+  /*control para recuperar los crud para la institucion proyecto*/
+  obtenerParametrosInst(): Observable<instproy[]> {
+    return this.httpClient.get<instproy[]>(`${this.URL}/getAll`);
+  }
+
+  obtenerRegistrosRelacionados(id: number): Observable<instproy[]>{
+    return this.httpClient.get<instproy[]>(`${this.URL_INSTP_RELA}/${id}`);
+  }
+
+  guardarParametros(parametros: instproy) {
+    return this.httpClient.post(this.URL_INSTP + '/guardar', parametros);
+  }
+
+  eliminarParametros(id: number): Observable<any> {
+    return this.httpClient.delete(`${this.URL_INSTP}/eliminar/${id}`, { responseType: 'text' });
+  }
+
+  modificarParametros(id: number, parametros: instproy): Observable<any> {
+    return this.httpClient.put<any>(`${this.URL_INSTP}/editar/${id}`, parametros);
+  }
+}