actualización con proyecto y programa

parent 1462be24
export class estrategiasvplan{
uzytavestrategias_v_plan_id?: number;
uzytavestrategias_v_plan_descripcion?: string;
uzytavestrategias_v_plan_orden?: number;
}
export class objetivo_planVincu{
uzytavobj_plan_vinvula_id?: number;
uzytavobj_plan_vinvula_descripcion?: String;
uzytavobj_plan_vinvula_orden?: number;
}
export class planvprograma{
uzytavplan_v_programa_id?: number;
uzytavobj_plan_vinvula_id?: number;
uzytavprograma_v_id?: number;
}
export class programaeplanv{
uzytavprograma_eplanv_id?: number;
uzytavestrategias_v_plan_id?: number;
uzytavprograma_v_id?: number;
}
......@@ -147,7 +147,6 @@ import { CoberturaProyectoComponent } from './pages/Proyectos/Datos Generales/Co
import { ListarCoberturaProyectoComponent } from './pages/Proyectos/Datos Generales/Cobertura y Localizacion/listar-cobertura-proyecto/listar-cobertura-proyecto.component';
import { AddAnexosImagenesComponent } from './pages/Proyectos/Diagnostico y problema/Anexos e Imagenes/add-anexos-imagenes/add-anexos-imagenes.component';
import { ListarAnexosImagenesComponent } from './pages/Proyectos/Diagnostico y problema/Anexos e Imagenes/listar-anexos-imagenes/listar-anexos-imagenes.component';
import { IdentificacionPoblacionComponent } from './pages/Proyectos/Diagnostico y problema/Identificacion de poblacion/identificacion-poblacion/identificacion-poblacion.component';
import { DocentesParticipantesService } from './services/docentes-participantes/docentes-participantes.service';
import { ListarDocentesParticipantesComponent } from './pages/Proyectos/Diagnostico y problema/Docentes Participantes/listar-docentes-participantes/listar-docentes-participantes.component';
import { AddDocentesParticipantesComponent } from './pages/Proyectos/Diagnostico y problema/Docentes Participantes/add-docentes-participantes/add-docentes-participantes.component';
......@@ -178,6 +177,16 @@ import { objetivoprograma } from './Models/objetivoPrograma';
import { AddMatrizLogicoComponent } from './pages/Proyectos/Matriz del Marco Logico/add-matriz-logico/add-matriz-logico.component';
import { AddCronogramaActiComponent } from './pages/Proyectos/Estrategias de Ejecución/add-cronograma-acti/add-cronograma-acti.component';
import { AddHitosComponent } from './pages/Proyectos/Estrategias de Ejecución/add-hitos/add-hitos.component';
import { ResumenPrograComponent } from './pages/programa/opciones/introduccion/resumen del programa/resumen-progra/resumen-progra.component';
import { AddObjeVincuComponent } from './pages/programa/opciones/introduccion/objetivos plan de vinculación/add-obje-vincu/add-obje-vincu.component';
import { ListObjeVincuComponent } from './pages/programa/opciones/introduccion/objetivos plan de vinculación/list-obje-vincu/list-obje-vincu.component';
import { planvprograma } from './Models/planvprograma';
import { AddEstraVincuComponent } from './pages/programa/opciones/introduccion/estrategias del plan de vinculación/add-estra-vincu/add-estra-vincu.component';
import { ListEstraVincuComponent } from './pages/programa/opciones/introduccion/estrategias del plan de vinculación/list-estra-vincu/list-estra-vincu.component';
import { programaeplanv } from './Models/programaeplanv';
import { EditEntidadComponent } from './pages/programa/opciones/datos_generales/edit-entidad/edit-entidad.component';
import { DiagnosticoComponent } from './pages/programa/opciones/diagnostico y problema/diagnostico/diagnostico.component';
import { AddIdentificacionPoblacionComponent } from './pages/Proyectos/Diagnostico y problema/Identificacion de poblacion/add-identificacion-poblacion/add-identificacion-poblacion.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
......@@ -299,7 +308,6 @@ import { AddHitosComponent } from './pages/Proyectos/Estrategias de Ejecución/a
AddDiagnosticoComponent,
EditDiagnosticoComponent,
AddEntregablesComponent,
IdentificacionPoblacionComponent,
EditEntregablesComponent,
AddViabilidadComponent,
AddObjetivosPLNBVComponent,
......@@ -310,11 +318,18 @@ import { AddHitosComponent } from './pages/Proyectos/Estrategias de Ejecución/a
ListarEstudiantesParticipantesComponent,
AddDocentesParticipantesComponent,
ListarDocentesParticipantesComponent,
IdentificacionPoblacionComponent,
ListarAnexosImagenesComponent,
AddAnexosImagenesComponent,
AddLineaComponent,
ListLineaComponent
ListLineaComponent,
ResumenPrograComponent,
AddObjeVincuComponent,
ListObjeVincuComponent,
AddEstraVincuComponent,
ListEstraVincuComponent,
EditEntidadComponent,
DiagnosticoComponent,
AddIdentificacionPoblacionComponent
],
imports: [
FullCalendarModule,
......@@ -364,7 +379,9 @@ import { AddHitosComponent } from './pages/Proyectos/Estrategias de Ejecución/a
Provincia,
Actualiza_datosService,
prograObj,
FormBuilder
FormBuilder,
planvprograma,
programaeplanv
]
})
export class MainModule {
......
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { LineasInvestigacion } from 'src/app/modules/main/Models/lineas-investigacion';
......@@ -16,7 +16,7 @@ import { EnvioFormularioComponent } from '../../../../programa/opciones/envio-fo
styleUrls: ['./add-linea.component.css']
})
export class AddLineaComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
lineasInvestigacion!: LineasInvestigacion[];
selectedLinea: number;
subLineaInvestigacion!: SubLineaInvestigacion[];
......@@ -62,6 +62,7 @@ export class AddLineaComponent implements OnInit {
console.log('Datos enviados', this.proyectoLineas);
this.proyectoLineasInvService.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.proyectoLineas);
this.myForm.reset();
Object.values(this.myForm.controls).forEach(control => {
......
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
......@@ -16,6 +16,7 @@ import { PrograObjService } from 'src/app/modules/main/services/prograObj/progra
styleUrls: ['./add-objetivos-plnbv.component.css']
})
export class AddObjetivosPLNBVComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
obj!: objetivosBV[];
politicas: any[] = [];
objetivos: any[] = [];
......@@ -24,7 +25,6 @@ export class AddObjetivosPLNBVComponent implements OnInit {
selectedObjetivo: string;
constructor(
private formBuilder: FormBuilder,
private objM: objetivosBV,
private objS: ObjetivosPLNBVService,
private objPM: prograObj,
private idCompartido: Compartir_idService,
......@@ -47,13 +47,12 @@ export class AddObjetivosPLNBVComponent implements OnInit {
if (this.myForm.valid) {
try {
this.objPM.uzytavproyec_id = this.idCompartido.getIdGuardado();
console.log('muestreo del id: ', this.objPM.uzytavproyec_id);
this.objPM.uzytavobjetivo_b_vivir_id = this.myForm.value.politica;
this.objPS.guardarParametros(this.objPM).subscribe(response => {
console.log('Datos Enviados');
this.objPS.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.objPM);
this.myForm.reset();
});
......
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { objetivosEstraInst } from 'src/app/modules/main/Models/objetivoEstraInst';
......@@ -14,9 +14,9 @@ import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_
styleUrls: ['./add-objetivos-estrategicos.component.scss']
})
export class AddObjetivosEstrategicosComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
selectedOption: string;
myForm: FormGroup;
myForm2: FormGroup;
//arreglos
objEstraInst: objetivosEstraInst[] = [];
......@@ -42,7 +42,6 @@ export class AddObjetivosEstrategicosComponent implements OnInit {
objetivo: [''],
estrategia: ['', Validators.required],
});
;
}
ngOnInit(): void {
......@@ -78,6 +77,7 @@ export class AddObjetivosEstrategicosComponent implements OnInit {
console.log('Datos Enviados');
this.estraS.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.estraS);
this.myForm.reset();
});
......
......@@ -91,10 +91,12 @@ export class ListObjetivosEstraComponent implements OnInit {
obtenerDescripcionPerspectiva(id: number): string {
if (id !== undefined && this.objet && this.objet.length > 0) {
const objetivo = this.objet.find(item => item.uzytavobjetivos_ESTRA_INSTI_ID === id);
return objetivo && objetivo.uzyTavObjetivosEstraInstiPadre.uzyTavObjetivosEstraInstiPadre
if (objetivo && objetivo.uzyTavObjetivosEstraInstiPadre) {
return objetivo.uzyTavObjetivosEstraInstiPadre.uzyTavObjetivosEstraInstiPadre
? objetivo.uzyTavObjetivosEstraInstiPadre.uzyTavObjetivosEstraInstiPadre.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION
: 'N/A';
}
}
return 'N/A';
}
......
......@@ -9,7 +9,7 @@ import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/
import { MatDialog } from '@angular/material/dialog';
import { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
import { Poblacion } from 'src/app/modules/main/Models/poblacion';
import { PoblacionService } from 'src/app/modules/main/services/poblacion/poblacion.service';
import { Observable, forkJoin } from 'rxjs';
import { PoblacionProyectoService } from 'src/app/modules/main/services/poblacion-proyecto/poblacion-proyecto.service';
import { PoblacionProyecto } from 'src/app/modules/main/Models/poblacion-proyecto';
......@@ -19,6 +19,7 @@ import { DatosEspeService } from 'src/app/modules/main/services/APIs Externas/Da
import { Carrera } from 'src/app/modules/main/Models/carrera';
import { Route, Router } from '@angular/router';
import { map } from 'rxjs/operators';
import { PoblacionService } from 'src/app/modules/main/services/población/poblacion.service';
@Component({
selector: 'app-add-datos-generales',
......
......@@ -13,7 +13,8 @@ import { DatosEspeService } from 'src/app/modules/main/services/APIs Externas/Da
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 { PoblacionProyectoService } from 'src/app/modules/main/services/poblacion-proyecto/poblacion-proyecto.service';
import { PoblacionService } from 'src/app/modules/main/services/poblacion/poblacion.service';
import { PoblacionService } from 'src/app/modules/main/services/población/poblacion.service';
import { ProgramaService } from 'src/app/modules/main/services/programa/programa.service';
import { ProyectosService } from 'src/app/modules/main/services/proyectos/proyectos.service';
import { UsuariosService } from 'src/app/modules/main/services/usuarios/usuarios.service';
......
......@@ -80,7 +80,6 @@ export class EditEntregablesComponent implements OnInit {
obtenerRegistros() {
const id_recuperado = this.compartiId.getIdGuardado();
console.log('err', id_recuperado);
if (typeof id_recuperado !== 'undefined') {
this.proyectosService.obtenerParametrosId(id_recuperado).subscribe(data => {
......
.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%;
}
.separator {
margin: 0 5px;
opacity: 0;
pointer-events: none;
}
mat-form-field{
margin: 20px;
}
.deshabilitado{
font-weight: bold;
color: black;
}
.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%;
}
\ No newline at end of file
<div class="container">
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<mat-card>
<mat-card-header>
<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>
</mat-card-header>
<mat-card-content>
<div>
<h3>Tipo Directos</h3>
<mat-form-field>
<mat-label>Hombres</mat-label>
<input matInput type="number" placeholder="Hombres" formControlName="HombresD" required
(change)="calcularTotal()" min="0" (change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('HombresD').invalid && (myForm.get('HombresD').dirty
|| myForm.get('HombresD').touched)">
Por favor, ingrese la cantidad de hombres directos.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Mujeres</mat-label>
<input matInput type="number" placeholder="Mujeres" formControlName="MujeresD" required
(change)="calcularTotal()" min="0" (change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('MujeresD').invalid && (myForm.get('MujeresD').dirty
|| myForm.get('MujeresD').touched)">
Por favor, ingrese la cantidad de Mujeres directas.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Niños</mat-label>
<input matInput type="number" formControlName="Niños" formControlName="ninosD" required
(change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('ninosD').invalid && (myForm.get('ninosD').dirty
|| myForm.get('ninosD').touched)">
Por favor, ingrese la cantidad de Niños directos.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Personas con Capacidades Especiales</mat-label>
<input matInput type="number" formControlName="Personas con Capacidades Especiales"
formControlName="PersonasD" required (change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('PersonasD').invalid && (myForm.get('PersonasD').dirty
|| myForm.get('PersonasD').touched)">
Por favor, ingrese la cantidad de Personas con Capacidades Especiales directas.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Total Directos</mat-label>
<input matInput type="number" class="deshabilitado" formControlName="Total Directos"
formControlName="TotalD" required
(change)="calcularTotal()" min="0" pattern="[0-9]+" [value]="totalDirectos">
</mat-form-field>
</div>
<div>
<h3>Tipo Indirectos</h3>
<mat-form-field>
<mat-label>Hombres</mat-label>
<input matInput type="number" placeholder="Hombres" formControlName="HombresI" required
(change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('HombresI').invalid && (myForm.get('HombresI').dirty
|| myForm.get('HombresI').touched)">
Por favor, ingrese la cantidad de hombres indirectos.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Mujeres</mat-label>
<input matInput type="number" placeholder="Mujeres" formControlName="MujeresI" required
(change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('MujeresI').invalid && (myForm.get('MujeresI').dirty
|| myForm.get('MujeresI').touched)">
Por favor, ingrese la cantidad de Mujeres indirectas.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Niños</mat-label>
<input matInput type="number" formControlName="Niños" formControlName="ninosI" required
(change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('ninosI').invalid && (myForm.get('ninosI').dirty
|| myForm.get('ninosI').touched)">
Por favor, ingrese la cantidad de Niños directos.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Personas con Capacidades Especiales</mat-label>
<input matInput type="number" formControlName="Personas con Capacidades Especiales"
formControlName="PersonasI" required (change)="calcularTotal()" min="0" pattern="[0-9]+">
<mat-error *ngIf="myForm.get('PersonasI').invalid && (myForm.get('PersonasI').dirty
|| myForm.get('PersonasI').touched)">
Por favor, ingrese la cantidad de Personas con Capacidades Especiales Indirectas.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Total Indirectos</mat-label>
<input matInput class="deshabilitado" type="number" formControlName="Total Indirectos" formControlName="TotalI" required
(change)="calcularTotal()" min="0" pattern="[0-9]+" [value]="totalIndirectos">
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
\ No newline at end of file
/* 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 { AddIdentificacionPoblacionComponent } from './add-identificacion-poblacion.component';
describe('AddIdentificacionPoblacionComponent', () => {
let component: AddIdentificacionPoblacionComponent;
let fixture: ComponentFixture<AddIdentificacionPoblacionComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddIdentificacionPoblacionComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddIdentificacionPoblacionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Carrera } from 'src/app/modules/main/Models/carrera';
import { Poblacion } from 'src/app/modules/main/Models/poblacion';
import { PoblacionProyecto } from 'src/app/modules/main/Models/poblacion-proyecto';
import { Programa } from 'src/app/modules/main/Models/programa-v';
import { Proyectos } from 'src/app/modules/main/Models/proyectos';
import { Usuario } from 'src/app/modules/main/Models/usuario';
import { DatosEspeService } from 'src/app/modules/main/services/APIs Externas/Datos espe/datos-espe.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 { PoblacionProyectoService } from 'src/app/modules/main/services/poblacion-proyecto/poblacion-proyecto.service';
import { ProgramaService } from 'src/app/modules/main/services/programa/programa.service';
import { ProyectosService } from 'src/app/modules/main/services/proyectos/proyectos.service';
import { UsuariosService } from 'src/app/modules/main/services/usuarios/usuarios.service';
@Component({
selector: 'app-add-identificacion-poblacion',
templateUrl: './add-identificacion-poblacion.component.html',
styleUrls: ['./add-identificacion-poblacion.component.css']
})
export class AddIdentificacionPoblacionComponent implements OnInit {
myForm: FormGroup;
proyecto: Proyectos;
cambio: boolean;
public idRecuperado;
usuario: Usuario;
totalDirectos: number;
totalIndirectos: number;
constructor(
private formBuilder: FormBuilder,
private ID_compartido: Compartir_idService,
private proyectosService: ProyectosService,
private mostrarOcultarService: MostrarOcultarService,
) {
this.proyecto = new Proyectos();
}
ngOnInit(): void {
this.idRecuperado = this.ID_compartido.getIdGuardado();
console.log("this.idRecuperado")
this.proyecto = this.mostrarOcultarService.editProyecto;
this.initializeForm();
this.cambio = false;
this.usuario = new Usuario()
}
initializeForm() {
this.myForm = this.formBuilder.group({
HombresD: [{ value: this.proyecto.uzytavproyec_directos_hombres, disabled: true }, Validators.required],
MujeresD: [{ value: this.proyecto.uzytavproyec_directos_mujeres, disabled: true }, Validators.required],
ninosD: [{ value: this.proyecto.uzytavproyec_directos_ninios, disabled: true }, Validators.required],
PersonasD: [{ value: this.proyecto.uzytavproyec_directos_discapac, disabled: true }, Validators.required],
TotalD: [{ value: this.proyecto.uzytavproyec_directos_ejec, disabled: true }, Validators.required],
HombresI: [{ value: this.proyecto.uzytavproyec_inidirectos_hombres, disabled: true }, Validators.required],
MujeresI: [{ value: this.proyecto.uzytavproyec_inidirectos_mujeres, disabled: true }, Validators.required],
ninosI: [{ value: this.proyecto.uzytavproyec_indirectos_ninios, disabled: true }, Validators.required],
PersonasI: [{ value: this.proyecto.uzytavproyec_inidirectos_discapa, disabled: true }, Validators.required],
TotalI: [{ value: this.proyecto.uzytavproyec_indirectos, disabled: true }, Validators.required],
});
}
calcularTotal() {
const HombresD = this.myForm.value.HombresD || 0;
const MujeresD = this.myForm.value.MujeresD || 0;
const ninosD = this.myForm.value.ninosD || 0;
const PersonasD = this.myForm.value.PersonasD || 0;
this.totalDirectos = HombresD + MujeresD+ ninosD + PersonasD
const HombresI = this.myForm.value.HombresI || 0;
const MujeresI = this.myForm.value.MujeresI || 0;
const ninosI = this.myForm.value.ninosI || 0;
const PersonasI = this.myForm.value.PersonasI || 0;
this.totalIndirectos = HombresI + MujeresI + ninosI+PersonasI
}
cambiar() {
this.cambio = true;
this.myForm.enable();
this.myForm.get('TotalD').disable();
this.myForm.get('TotalI').disable();
}
cancelado() {
this.cambio = false;
this.myForm.disable();
}
guardar() {
this.cambio = false;
this.myForm.disable();
}
enviarSolicitud = false;
idGuardado: number;
onSubmit() {
if (this.myForm.valid) {
try {
this.proyecto.uzytavproyec_id = this.idRecuperado
this.proyecto.uzytavproyec_directos_hombres = this.myForm.value.HombresD;
this.proyecto.uzytavproyec_directos_mujeres = this.myForm.value.MujeresD;
this.proyecto.uzytavproyec_directos_ninios = this.myForm.value.ninosD;
this.proyecto.uzytavproyec_directos_discapac = this.myForm.value.PersonasD;
this.proyecto.uzytavproyec_inidirectos_hombres = this.myForm.value.HombresI ;
this.proyecto.uzytavproyec_inidirectos_mujeres = this.myForm.value.MujeresI ;
this.proyecto.uzytavproyec_indirectos_ninios = this.myForm.value.ninosI ;
this.proyecto.uzytavproyec_inidirectos_discapa = this.myForm.value.PersonasI ;
this.proyecto.uzytavproyec_indirectos = this.totalIndirectos;
this.proyecto.uzytavproyec_directos_ejec = this.totalDirectos;
this.mostrarOcultarService.editProyecto = this.proyecto;
this.proyectosService.modificarParametros(this.proyecto.uzytavproyec_id, this.proyecto).subscribe(response => {
console.log('Datos Actualizados', this.proyecto);
this.myForm.disable();
this.cambio = false;
//his.openModal();
//this.guardarFormulario = true;
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
}
<div class="subir">
<div class="container">
<div class="container" #activitySection>
<!--primer formulario para llenar el fin.-->
<form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmitFin()"
*ngIf="cambio">
......@@ -62,7 +62,7 @@
<div class="subir2">
<!--segundo formulario para llenar el objetivo-->
<div class="container">
<div class="container" #activitySection>
<form class="example-form" [formGroup]="myForm2"
(ngSubmit)="onSubmitObjetivo()" *ngIf="cambio2">
<mat-card>
......@@ -124,7 +124,7 @@
<div class="subir3">
<!--formulario para agregar objetivos especificos-->
<div class="container">
<div class="container" #activitySection>
<form class="example-form" [formGroup]="myForm3"
(ngSubmit)="onSubmitObjetivoEspe()" *ngIf="cambio3">
<mat-card>
......@@ -186,7 +186,7 @@
<!--Formulario para ingresar las actividades-->
<div class="container">
<div class="container" #activitySection>
<form class="example-form" [formGroup]="myForm4"
(ngSubmit)="onSubmitActi()" *ngIf="cambio4">
<mat-card>
......
import { Component, OnInit } 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';
......@@ -11,6 +11,8 @@ import { Objetivo_programaService } from 'src/app/modules/main/services/objetivo
styleUrls: ['./add-matriz-logico.component.css']
})
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;
......@@ -271,11 +273,13 @@ export class AddMatrizLogicoComponent implements OnInit {
editar() {
this.cambio = true;
this.myForm.reset();
this.scrollIntoView();
}
AddObjEspe() {
this.cambio3 = true;
this.myForm3.reset();
this.scrollIntoView();
}
AddActi(id_Re: number) {
......@@ -283,11 +287,13 @@ export class AddMatrizLogicoComponent implements OnInit {
this.myForm4.reset();
this.idEspecifico = id_Re;
this.idCompartido.setIdObjeEspe(this.idEspecifico);
this.scrollIntoView();
}
addOBJG(){
this.cambio2 = true;
this.myForm2.reset();
this.scrollIntoView();
}
EditarObjEsp() {
......@@ -365,4 +371,10 @@ export class AddMatrizLogicoComponent implements OnInit {
}
}
scrollIntoView() {
if (this.activitySection && this.activitySection.nativeElement) {
this.activitySection.nativeElement.scrollIntoView({ behavior: 'smooth' });
}
}
}
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
......@@ -20,7 +20,7 @@ import { PartidasPresupuestariasService } from 'src/app/modules/main/services/pa
styleUrls: ['./add-presup-det.component.css']
})
export class AddPresupDetComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
myForm: FormGroup;
formularioEnviado: boolean;
selectedObjetivo: string;
......@@ -106,6 +106,7 @@ export class AddPresupDetComponent implements OnInit {
console.log('Datos Enviados');
this.presupuestoPartidasService.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.presupuesto);
this.myForm.reset();
});
......
......@@ -128,7 +128,7 @@
</mat-panel-title>
</mat-expansion-panel-header>
<!--Datos Diagnostico internos-->
<app-identificacion-poblacion></app-identificacion-poblacion>
<app-add-identificacion-poblacion></app-add-identificacion-poblacion>
</mat-expansion-panel>
......@@ -189,7 +189,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarPLNBV = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarFormularioPLNBV()">Cancelar</button>
<vex-add-objetivos-plnbv *ngIf="mostrarPLNBV"></vex-add-objetivos-plnbv>
<vex-add-objetivos-plnbv *ngIf="mostrarPLNBV" (formularioGuardado)="cancelarFormularioPLNBV()"></vex-add-objetivos-plnbv>
<vex-list-objetivos-plnbv></vex-list-objetivos-plnbv>
<!--fin-->
</mat-expansion-panel>
......@@ -222,7 +222,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarEstra = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarEstrategia()">Cancelar</button>
<vex-add-objetivos-estrategicos *ngIf="mostrarEstra"></vex-add-objetivos-estrategicos>
<vex-add-objetivos-estrategicos *ngIf="mostrarEstra" (formularioGuardado)="cancelarEstrategia()"></vex-add-objetivos-estrategicos>
<vex-list-objetivos-estra></vex-list-objetivos-estra>
<!--<vex-cobertura-list></vex-cobertura-list>-->
<!--fin-->
......@@ -240,7 +240,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarLineas = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarLineasInvestigacion()">Cancelar</button>
<vex-add-linea *ngIf="mostrarLineas"></vex-add-linea>
<vex-add-linea *ngIf="mostrarLineas" (formularioGuardado)="cancelarLineasInvestigacion()"></vex-add-linea>
<vex-list-linea></vex-list-linea>
<!--<vex-cobertura-list></vex-cobertura-list>-->
<!--fin-->
......@@ -283,7 +283,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarPresupuestoDetallado = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarPresupuestoDetallado()">Cancelar</button>
<app-add-presup-det *ngIf="mostrarPresupuestoDetallado"></app-add-presup-det>
<app-add-presup-det *ngIf="mostrarPresupuestoDetallado" (formularioGuardado)="cancelarPresupuestoDetallado()"></app-add-presup-det>
<app-aporte-universidad></app-aporte-universidad>
<app-aporte-entidad></app-aporte-entidad>
<app-aporte-comunidad></app-aporte-comunidad>
......
......@@ -127,9 +127,7 @@
2.3.- Identificación de Población
</mat-panel-title>
</mat-expansion-panel-header>
<!--Datos Diagnostico internos-->
<!--<app-identificacion-poblacion></app-identificacion-poblacion>-->
<!--fin-->
<app-add-identificacion-poblacion></app-add-identificacion-poblacion>
</mat-expansion-panel>
......@@ -190,7 +188,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarPLNBV = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarFormularioPLNBV()">Cancelar</button>
<vex-add-objetivos-plnbv *ngIf="mostrarPLNBV"></vex-add-objetivos-plnbv>
<vex-add-objetivos-plnbv *ngIf="mostrarPLNBV" (formularioGuardado)="cancelarFormularioPLNBV()"></vex-add-objetivos-plnbv>
<vex-list-objetivos-plnbv ></vex-list-objetivos-plnbv>
<!--fin-->
</mat-expansion-panel>
......@@ -226,7 +224,7 @@
(click)="mostrarEstra = true">Agregar</button>
<button mat-raised-button color="warn"
(click)="cancelarEstrategia()">Cancelar</button>
<vex-add-objetivos-estrategicos *ngIf="mostrarEstra"></vex-add-objetivos-estrategicos>
<vex-add-objetivos-estrategicos *ngIf="mostrarEstra" (formularioGuardado)="cancelarEstrategia()"></vex-add-objetivos-estrategicos>
<vex-list-objetivos-estra></vex-list-objetivos-estra>
<!--<vex-cobertura-list></vex-cobertura-list>-->
<!--fin-->
......@@ -243,7 +241,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarLineas = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarLineasInvestigacion()">Cancelar</button>
<vex-add-linea *ngIf="mostrarLineas"></vex-add-linea>
<vex-add-linea *ngIf="mostrarLineas" (formularioGuardado)="cancelarLineasInvestigacion()"></vex-add-linea>
<vex-list-linea ></vex-list-linea>
<!--<vex-cobertura-list></vex-cobertura-list>-->
<!--fin-->
......@@ -295,7 +293,7 @@
<!--Datos generales internos-->
<button mat-raised-button color="primary" (click)="mostrarPresupuestoDetallado = true">Agregar</button>
<button mat-raised-button color="warn" (click)="cancelarPresupuestoDetallado()">Cancelar</button>
<app-add-presup-det *ngIf="mostrarPresupuestoDetallado"></app-add-presup-det>
<app-add-presup-det *ngIf="mostrarPresupuestoDetallado" (formularioGuardado)="cancelarPresupuestoDetallado()"></app-add-presup-det>
<app-aporte-universidad></app-aporte-universidad>
<app-aporte-entidad></app-aporte-entidad>
<app-aporte-comunidad></app-aporte-comunidad>
......@@ -380,10 +378,38 @@
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
<strong>Seguimiento</strong>
<strong>Calificación Comisión Vinculació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>
Asignar Comisión de Evaluación
</mat-panel-title>
</mat-expansion-panel-header>
<vex-add-comision-eva></vex-add-comision-eva>
<!--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>
revisión
</mat-panel-title>
</mat-expansion-panel-header>
<vex-add-calificacion></vex-add-calificacion>
<!--fin-->
</mat-expansion-panel>
</mat-expansion-panel>
<!--Cierre-->
<mat-expansion-panel hideToggle>
......
......@@ -70,6 +70,13 @@
</div>
<div class="input-container">
<label>Archivo PDF:</label>
<a *ngIf="convocatoria.uzytavconvoca_digital_nombre"
[href]="pdfUrl" target="_blank">{{ convocatoria.uzytavconvoca_digital_nombre }}</a>
</div>
<!-- Control de PDF -->
<div class="input-container">
<label>Archivo PDF</label>
......
......@@ -30,6 +30,7 @@ export class ConvocatoriasEditarComponent implements OnInit {
private router: Router,
private convocatoriaService: ConvocatoriaService,
private route: ActivatedRoute,
private ConvocatoriaService: ConvocatoriaService,
private mostrarOcultarService: MostrarOcultarService
) {
this.myForm = this.formBuilder.group({
......@@ -64,6 +65,9 @@ export class ConvocatoriasEditarComponent implements OnInit {
}
initializeForm() {
this.pdfUrl = this.ConvocatoriaService.getPdfUrl(this.convocatoria.uzytavconvoca_id_file,
this.convocatoria.uzytavconvoca_digital_nombre);
this.myForm = this.formBuilder.group({
nombre: [this.convocatoria.uzytavconvoca_nombre || '', Validators.required],
descripcion: [
......@@ -79,11 +83,42 @@ export class ConvocatoriasEditarComponent implements OnInit {
Validators.required
],
estado: [this.convocatoria.uzytavconvoca_estado === 'A'],
archivo: [this.convocatoria.uzytavconvoca_digital || '']
archivo: ['']
});
}
verPDF(id: string, nombre: string) {
this.ConvocatoriaService.verPDF(id, nombre).subscribe(
(response: any) => {
if (response) {
const contentDispositionHeader = response.headers.get('content-disposition');
const filename = this.getFilenameFromResponse(contentDispositionHeader);
const blob = new Blob([response.body], { type: 'application/pdf' });
saveAs(blob, nombre);
} else {
console.error('No se pudieron obtener las cabeceras de la respuesta.');
}
},
error => {
console.error('Error al obtener el PDF:', error);
}
);
}
getFilenameFromResponse(contentDispositionHeader: string | null): string {
if (contentDispositionHeader) {
const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDispositionHeader);
if (matches != null && matches[1]) {
return matches[1].replace(/['"]/g, '');
}
}
return 'document.pdf'; // Nombre predeterminado si no se puede obtener el nombre del archivo
}
onSubmit() {
this.verificarCheckbox();
if (this.myForm.valid && !this.enviarSolicitud) {
......@@ -133,3 +168,7 @@ export class ConvocatoriasEditarComponent implements OnInit {
return null;
}
}
function saveAs(blob: Blob, nombre: string) {
throw new Error('Function not implemented.');
}
......@@ -81,7 +81,7 @@
<td class="Column2" mat-cell *matCellDef="let dato">
<div>
<!-- ver PDF -->
<button class="btn" (click)="verPDF(dato.uzytavconvoca_id)">
<button class="btn" (click)="verPDF(dato.uzytavconvoca_id_file,dato.uzytavconvoca_digital_nombre)">
<mat-icon aria-placeholder="Ver PDF">visibility</mat-icon>
</button>
<!-- Editar -->
......
......@@ -92,32 +92,57 @@ export class ConvocatoriasListarComponent implements OnInit {
}
agregarConvocatoria() {
this.router.navigate(['main/AgregarConvocatoria']);
}
verPDF(id: number) {
this.ConvocatoriaService.verPDF(id).subscribe(response => {
const filename = this.getFilenameFromResponse(response); // Obtener el nombre del archivo desde la respuesta
/* verPDF(id: string, nombre: string) {
this.ConvocatoriaService.verPDF(id, nombre).subscribe(
(response: HttpResponse<Blob>) => {
if (response && response.body) {
const contentDispositionHeader = response.headers.get('content-disposition');
const filename = this.getFilenameFromResponse(contentDispositionHeader) || nombre;
const blob = new Blob([response.body], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
const blob = response.body;
const newTab = window.open();
if (newTab) {
newTab.location.href = url;
// Crear una URL del objeto Blob
const pdfUrl = URL.createObjectURL(blob);
// Abrir una nueva ventana o pestaña para mostrar el PDF
const newTab = window.open(pdfUrl, '_blank');
if (!newTab) {
console.error('No se pudo abrir la nueva ventana.');
}
} else {
window.open(url, '_blank');
console.error('No se pudo obtener el contenido del PDF.');
}
});
},
error => {
console.error('Error al obtener el PDF:', error);
}
getFilenameFromResponse(response: any): string {
);
}*/
verPDF(id: string, nombre: string) {
this.ConvocatoriaService.verPDF(id, nombre).subscribe(
(response: any) => {
if (response) {
const contentDispositionHeader = response.headers.get('content-disposition');
const filename = this.getFilenameFromResponse(contentDispositionHeader);
const blob = new Blob([response.body], { type: 'application/pdf' });
saveAs(blob, nombre);
} else {
console.error('No se pudieron obtener las cabeceras de la respuesta.');
}
},
error => {
console.error('Error al obtener el PDF:', error);
}
);
}
getFilenameFromResponse(contentDispositionHeader: string | null): string {
if (contentDispositionHeader) {
const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDispositionHeader);
if (matches != null && matches[1]) {
......
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ComunicarService } from '../../../services/comunicar/comunicar.service';
import { Compartir_idService } from '../../../services/compartir_id/compartir_id.service';
@Component({
selector: 'vex-agregar-programa',
templateUrl: './agregar-programa.component.html',
......@@ -12,12 +13,16 @@ export class AgregarProgramaComponent implements OnInit {
mostrarCober: boolean = false;
mostrarPLNBV: boolean = false;
mostrarPCP: boolean = false;
mostrarInstObj: boolean = false;
mostrarobjVinc: boolean = false;
mostrarestraVinc: boolean = false;
constructor(private router: Router,
private comunicarC: ComunicarService) {
private comunicarC: ComunicarService,
private idCompartido: Compartir_idService) {
}
ngOnInit(): void {
this.idCompartido.setIdGuardad(undefined);
}
......@@ -37,6 +42,18 @@ export class AgregarProgramaComponent implements OnInit {
this.mostrarCober = false;
}
cancelarFormularioObjEstraInst(){
this.mostrarInstObj = false;
}
cancelarObjVinc(){
this.mostrarobjVinc = false;
}
cancelarEstraVinc(){
this.mostrarestraVinc = false;
}
cancelarFormularioPLNBV(){
this.mostrarPLNBV = false;
}
......
......@@ -13,6 +13,9 @@ export class EditProgramaComponent implements OnInit {
mostrarCober: boolean = false;
mostrarPLNBV: boolean = false;
mostrarPCP: boolean = false;
mostrarInstObj: boolean = false;
mostrarobjVinc: boolean = false;
mostrarestraVinc: boolean = false;
constructor(private router: Router,private comunicarC: ComunicarService
) { }
......@@ -32,10 +35,22 @@ export class EditProgramaComponent implements OnInit {
cancelarFormulario() {
this.mostrarFormulario = false;
}
cancelarObjVinc(){
this.mostrarobjVinc = false;
}
cancelarEstraVinc(){
this.mostrarestraVinc = false;
}
cancelarFormularioCobertura(){
this.mostrarCober = false;
}
cancelarFormularioObjEstraInst(){
this.mostrarInstObj = false;
}
cancelarFormularioPLNBV(){
this.mostrarPLNBV = false;
}
......
<div class="container">
<div class="area-busqueda">
<mat-radio-group [(ngModel)]="selectedOption" (ngModelChange)="resetForm()">
<mat-radio-button value="Nacional">Nacional</mat-radio-button>
<!--<mat-radio-button value="Nacional">Nacional</mat-radio-button>-->
<mat-radio-button value="Provincial">Provincial</mat-radio-button>
<mat-radio-button value="Cantonal">Cantonal</mat-radio-button>
<mat-radio-button value="Parroquial">Parroquial</mat-radio-button>
......
......@@ -107,6 +107,8 @@ export class CoberturaComponent implements OnInit {
).subscribe(responses => {
console.log('Datos Enviados');
this.zonaS.parametrosActualizados.next();
this.myForm.reset();
this.mostrarFormulario = false;
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.zonaM);
......@@ -132,6 +134,8 @@ export class CoberturaComponent implements OnInit {
console.log('Datos Enviados');
this.zonaS.parametrosActualizados.next();
this.openModal();
this.myForm.reset();
this.mostrarFormulario = false;
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.zonaM);
});
......@@ -158,6 +162,8 @@ export class CoberturaComponent implements OnInit {
this.zonaS.parametrosActualizados.next();
this.openModal();
this.myForm.reset();
this.mostrarFormulario = false;
this.myForm.reset();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.zonaM);
});
......
......@@ -14,6 +14,7 @@
<mat-form-field>
<mat-label>Nombre</mat-label>
<input matInput placeholder="Nombre de la Entidad" formControlName="nombreE">
<mat-error *ngIf="myForm.get('nombreE').hasError('required')">Debe ingrear el nombre de la Institución</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width">
......@@ -23,28 +24,37 @@
{{ provincia.uzytprovincia_nombre }}
</mat-option>
</mat-select>
<mat-error *ngIf="myForm.get('provincia').hasError('required')">Debe seleccionar una provincia</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Ciudad</mat-label>
<input matInput formControlName="ciudadE">
<mat-error *ngIf="myForm.get('ciudadE').hasError('required')">La ciudad es requerida</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Dirección</mat-label>
<input matInput formControlName="direccionE">
<mat-error *ngIf="myForm.get('direccionE').hasError('required')">La dirección es requerida</mat-error>
<mat-error *ngIf="myForm.get('direccionE').hasError('maxLengthExceeded')">La dirección no debe exceder de los 300 caracteres</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Teléfono</mat-label>
<input matInput placeholder="Duración" formControlName="telefonoE">
<input matInput placeholder="Número de teléfono" formControlName="telefonoE">
<mat-error *ngIf="myForm.get('telefonoE').hasError('required')">El teléfono es requerido</mat-error>
<mat-error *ngIf="myForm.get('telefonoE').hasError('pattern')">Ingresa un número de teléfono válido de Ecuador (comienza con 09 y tiene 10 dígitos)</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Página Web</mat-label>
<input matInput placeholder="Duración" formControlName="paginaE">
<input matInput placeholder="Página Web" formControlName="paginaE">
<mat-error *ngIf="myForm.get('paginaE').hasError('required')">La página web es requerida</mat-error>
<mat-error *ngIf="myForm.get('paginaE').hasError('pattern')">Ingresa una URL válida (puede comenzar con www)</mat-error>
</mat-form-field>
</div>
</div>
</mat-card-content>
......
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { Provincia } from 'src/app/modules/main/Models/Ubicaciones/provincia';
import { opcionInst } from 'src/app/modules/main/Models/opcion_inst';
......@@ -35,9 +35,9 @@ export class EntidadComponent implements OnInit {
this.myForm = this.formBuilder.group({
nombreE: ['', Validators.required],
ciudadE: ['', Validators.required],
direccionE: ['', Validators.required],
telefonoE: ['', Validators.required],
paginaE: ['', Validators.required],
direccionE: ['',[Validators.required, this.validateDireccion]],
telefonoE: ['', [Validators.required, Validators.pattern('^09[0-9]{8}$')]],
paginaE: ['', [Validators.required, Validators.pattern('^(www\\.|http://www\\.|https://www\\.)[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}(?:/[^\\s]*)?$')]],
provincia: ['', Validators.required]
});
}
......@@ -61,12 +61,10 @@ export class EntidadComponent implements OnInit {
this.opcionM.uzytavopcion_institucionciudad = this.myForm.value.ciudadE;
this.opcionM.uzytprovincia_id = this.myForm.value.provincia.toString();
this.opcionM.uzytavprograma_v_id = this.idCompartido.getIdGuardado();
console.log('El id para la opcion Institucion ha sido agregado', this.opcionM.uzytavprograma_v_id = this.idCompartido.getIdGuardado());
this.opcionM.uzytavopcion_institucionpaguina_web = this.myForm.value.paginaE;
this.opcionM.uzytavopcion_instituciontelefono = this.myForm.value.telefonoE;
this.opcionS.guardarParametros(this.opcionM).subscribe(response => {
console.log('Datos Enviados');
this.opcionS.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
......@@ -95,4 +93,15 @@ export class EntidadComponent implements OnInit {
this.formularioEnviado = true;
});
}
validateDireccion(control: FormControl) {
const direccion = control.value;
const byteLength = new Blob([direccion]).size;
if (byteLength > 100) {
return { maxLengthExceeded: true };
}
return null;
}
}
<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" *ngIf="!cambio"
(click)="cambiar()">Editar</button>
<button mat-raised-button color="primary" *ngIf="cambio"
(click)="onSubmit()">Guardar</button>
<span class="separator"></span>
<button mat-raised-button color="warn" *ngIf="cambio"
(click)="cancelado()">Cancelar</button>
</div>
</mat-card-header>
<mat-card-content>
<div>
<label class="label-negrita"> Ubicación geográfica o área de intervención del programa:</label>
<angular-editor formControlName="ubicacion" [config]="editorConfig"></angular-editor>
</div>
<div>
<label class="label-negrita"> Identificación, descripción y diagnóstico del problema que requiere solución:</label>
<angular-editor formControlName="problema" [config]="editorConfig"></angular-editor>
</div>
<div>
<label class="label-negrita"> Línea base del programa:</label>
<angular-editor formControlName="base" [config]="editorConfig"></angular-editor>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DiagnosticoComponent } from './diagnostico.component';
describe('DiagnosticoComponent', () => {
let component: DiagnosticoComponent;
let fixture: ComponentFixture<DiagnosticoComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DiagnosticoComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(DiagnosticoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { Programa } from 'src/app/modules/main/Models/programa-v';
import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
import { ProgramaService } from 'src/app/modules/main/services/programa/programa.service';
import { EnvioFormularioComponent } from '../../envio-formulario/envio-formulario.component';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'vex-diagnostico',
templateUrl: './diagnostico.component.html',
styleUrls: ['./diagnostico.component.css']
})
export class DiagnosticoComponent implements OnInit {
htmlContent: string = '';
myForm: FormGroup;
cambio: boolean;
formularioEnviado: boolean;
private programa: Programa = new Programa();
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',
},
]
};
constructor(private formBuilder: FormBuilder,
private programaService: ProgramaService,
private compartiId: Compartir_idService,
private dialog: MatDialog) { }
cambiar() {
this.cambio = true;
this.editorConfig.editable = true;
}
cancelado() {
this.cambio = false;
this.editorConfig.editable = false;
}
ngOnInit(): void {
this.programa = new Programa();
this.obtenerRegistros();
this.myForm = this.formBuilder.group({
ubicacion: [this.programa.uzytavprograma_vubicacion],
problema: [this.programa.uzytavprograma_vdiagnostico],
base: [this.programa.uzytavprograma_vlinea_base]
});
}
onSubmit() {
if (this.myForm.valid) {
try {
const id_recuperado = this.compartiId.getIdGuardado();
this.programa.uzytavprograma_vubicacion = this.myForm.get('ubicacion').value;
this.programa.uzytavprograma_vdiagnostico = this.myForm.get('problema').value;
this.programa.uzytavprograma_vlinea_base = this.myForm.get('base').value;
this.programaService.modificarParametros(id_recuperado, this.programa).subscribe(response => {
this.editorConfig.editable = false;
this.cambio = false;
this.openModal();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
obtenerRegistros() {
const id_recuperado = this.compartiId.getIdGuardado();
if (typeof id_recuperado !== 'undefined') {
this.programaService.obtenerParametrosId(id_recuperado).subscribe(data => {
this.programa = data;
this.myForm.patchValue({
resumen: this.programa.uzytavprograma_vresumen,
problema: this.programa.uzytavprograma_vdiagnostico,
base: this.programa.uzytavprograma_vlinea_base
});
});
} else {
console.log('Este ingreso es un proyecto nuevo.');
}
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
<div class="modal">
<div class="modal-content">
<p>El formulario ha sido enviado</p>
<p>Su información ha sido enviada con éxito. Agradecemos su colaboración</p>
<button mat-button (click)="closeModal()">Cerrar</button>
</div>
</div>
<p>estra-e works!</p>
<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" *ngIf="!cambio"
(click)="cambiar()">Editar</button>
<button mat-raised-button color="primary" *ngIf="cambio"
(click)="onSubmit()">Guardar</button>
<span class="separator"></span>
<button mat-raised-button color="warn" *ngIf="cambio"
(click)="cancelado()">Cancelar</button>
</div>
</mat-card-header>
<mat-card-content>
<div>
<label class="label-negrita"> Metas del Programa:</label>
<angular-editor formControlName="metas" [config]="editorConfig"></angular-editor>
</div>
<div>
<label class="label-negrita"> Políticas del Programa para la ejecución de Proyectos:</label>
<angular-editor formControlName="politica" [config]="editorConfig"></angular-editor>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { Programa } from 'src/app/modules/main/Models/programa-v';
import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
import { ProgramaService } from 'src/app/modules/main/services/programa/programa.service';
import { MatDialog } from '@angular/material/dialog';
import { EnvioFormularioComponent } from '../envio-formulario/envio-formulario.component';
@Component({
selector: 'vex-estra-e',
......@@ -6,10 +14,110 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./estra-e.component.css']
})
export class EstraEComponent implements OnInit {
htmlContent: string = '';
myForm: FormGroup;
cambio: boolean;
formularioEnviado: boolean;
private programa: Programa = new Programa();
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',
},
]
};
constructor(private formBuilder: FormBuilder,
private programaService: ProgramaService,
private compartiId: Compartir_idService,
private dialog: MatDialog) { }
constructor() { }
cambiar() {
this.cambio = true;
this.editorConfig.editable = true;
}
cancelado() {
this.cambio = false;
this.editorConfig.editable = false;
}
ngOnInit(): void {
this.programa = new Programa();
this.obtenerRegistros();
this.myForm = this.formBuilder.group({
metas: [this.programa.uzytavprograma_vmetas],
politica: [this.programa.uzytavprograma_vpoliticas],
});
}
onSubmit() {
if (this.myForm.valid) {
try {
const id_recuperado = this.compartiId.getIdGuardado();
this.programa.uzytavprograma_vmetas = this.myForm.get('metas').value;
this.programa.uzytavprograma_vpoliticas = this.myForm.get('politica').value;
this.programaService.modificarParametros(id_recuperado, this.programa).subscribe(response => {
this.editorConfig.editable = false;
this.cambio = false;
this.openModal();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
obtenerRegistros() {
const id_recuperado = this.compartiId.getIdGuardado();
if (typeof id_recuperado !== 'undefined') {
this.programaService.obtenerParametrosId(id_recuperado).subscribe(data => {
this.programa = data;
this.myForm.patchValue({
metas: this.programa.uzytavprograma_vmetas,
politica: this.programa.uzytavprograma_vpoliticas
});
});
} else {
console.log('Este ingreso es un proyecto nuevo.');
}
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
.area-busqueda {
padding: 20px;
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contenedorP {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin: 5px auto;
border-radius: 10px;
text-align: center;
margin-top: 2%;
background-color: white;
}
.mat-mdc-radio-button ~ .mat-mdc-radio-button {
margin-left: 16px;
}
.mat-radio-button{
margin-right: 10px;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
.formulario {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 96%;
margin: 0 auto;
background-color: white;
padding: 10px;
border-radius: 10px;
}
.contenedor-dos {
margin-top: 30px;
padding: 0.9375rem 20px;
position: relative;
}
.form-field {
width: 100%;
margin-bottom: 20px;
}
<div class="container">
<div class="contenedor-dos">
<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>
<mat-label><strong>Seleccione la Estrategia del Plan de Vinculación a agregar</strong></mat-label>
<mat-form-field class="form-field">
<mat-label>Seleccione la Estrategia del Plan de Vinculación a agregar</mat-label>
<mat-select formControlName="estrategia">
<mat-option *ngFor="let item of estraVincu"
[value]="item.uzytavestrategias_v_plan_id">
{{ item.uzytavestrategias_v_plan_orden +'.'+item.uzytavestrategias_v_plan_descripcion}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddEstraVincuComponent } from './add-estra-vincu.component';
describe('AddEstraVincuComponent', () => {
let component: AddEstraVincuComponent;
let fixture: ComponentFixture<AddEstraVincuComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddEstraVincuComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AddEstraVincuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { estrategiasvplan } from 'src/app/modules/main/Models/estrategiasvplan';
import { programaeplanv } from 'src/app/modules/main/Models/programaeplanv';
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 { EstrategiasvplanService } from 'src/app/modules/main/services/estrategias vinculacion/estrategiasvplan.service';
import { ProgramaeplanvService } from 'src/app/modules/main/services/estrategiasVinculación/programaeplanv.service';
import { EnvioFormularioComponent } from '../../../envio-formulario/envio-formulario.component';
@Component({
selector: 'vex-add-estra-vincu',
templateUrl: './add-estra-vincu.component.html',
styleUrls: ['./add-estra-vincu.component.css']
})
export class AddEstraVincuComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
myForm: FormGroup;
estraVincu: estrategiasvplan[] = [];
formularioEnviado: boolean = false;
constructor(
private formBuilder: FormBuilder,
private idCompartido: Compartir_idService,
private dialog: MatDialog,
private datosCompartidos: Actualiza_datosService,
private modeloEstra: programaeplanv,
private servicioEstra: ProgramaeplanvService,
private estraService: EstrategiasvplanService
) {
this.myForm = this.formBuilder.group({
// Define los campos y validaciones para el formulario 1
estrategia: ['', Validators.required]
});
}
ngOnInit(): void {
this.obtenerRegistros();
}
obtenerRegistros(){
this.estraService.obtenerParametros().subscribe(data => {
this.estraVincu = data;
this.estraVincu.sort((a, b) => a.uzytavestrategias_v_plan_orden - b.uzytavestrategias_v_plan_orden);
});
}
onSubmit() {
if (this.myForm.valid) {
try {
this.modeloEstra.uzytavprograma_v_id = this.idCompartido.getIdGuardado();
this.modeloEstra.uzytavestrategias_v_plan_id = this.myForm.get("estrategia").value;
this.servicioEstra.guardarParametros(this.modeloEstra).subscribe(response => {
console.log('Datos Enviados');
this.servicioEstra.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.modeloEstra);
this.myForm.reset();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
.principal {
text-align: center;
margin-bottom: 2%;
}
.grid-container {
display: grid;
grid-template-columns: 5% 10% 45% 10% 5% 10% 15%;
border: 1px solid #ccc;
}
#cabecera {
background: linear-gradient(135deg,
var(--background-base) 22px,
var(--background-hover) 22px,
var(--background-hover) 24px,
transparent 24px,
transparent 67px,
var(--background-hover) 67px,
var(--background-hover) 69px,
transparent 69px),
linear-gradient(225deg,
var(--background-base) 22px,
var(--background-hover) 22px,
var(--background-hover) 24px,
transparent 24px,
transparent 67px,
var(--background-hover) 67px,
var(--background-hover) 69px,
transparent 69px) 0 64px;
background-color: var(--background-base);
background-size: 64px 128px;
}
.Column {
padding-left: 0px;
padding-right: 0px;
width: 100px;
white-space: inherit;
/* overflow: visible;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}
.Column1 {
padding-left: 0px;
padding-right: 0px;
width: 10px;
white-space: normal;
overflow: visible;
}
.Column2 {
width: 25px;
padding-left: 0px;
padding-right: 0px;
}
.volver{
position: absolute;
top: 50%;
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;
}
.grid-item {
font-weight: bold;
}
.grid-opciones {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.titulo {
display: flex;
align-items: center;
justify-content: center;
}
.titulo-texto {
font-weight: bold;
font-size: 18px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-right: 10px;
}
.componente {
justify-content: center;
align-items: center;
}
.card {
background-color: rgb(252, 252, 251)
}
.colorEditar {
color: blue;
}
.colorEditar svg {
fill: blue;
}
.contenedorP {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin: 10px auto;
border-radius: 10px;
text-align: center;
margin-top: 10%;
background-color: white;
}
.contenedor:not(:last-child) {
margin-bottom: 2px;
}
.separador{
margin-top: 5%;
}
.contenedor {
width: 96%;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 2%;
border-radius: 10px;
background-color: white;
position: relative;
z-index: 1;
}
.sobremontado {
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 96%;
top: -20px;
left: 2%;
background-color: rgb(71, 127, 75);
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);
}
.sobremontado span {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.sobremontado mat-icon {
margin-right: 5px;
}
.icono-instituciones {
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
font-size: 20px;
cursor: pointer;
}
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;
}
.area-busqueda {
padding: 20px;
margin-top: 30px;
text-align: right;
}
@media (max-width: 600px) {
table {
font-size: 14px;
}
table th,
table td {
padding: 8px;
}
}
.btn-observar {
border-radius: 50%;
width: 36px;
height: 36px;
}
.colorsito{
background-color: rgb(248, 249, 250);
}
.rounder{
border-radius: 50%;
background-color: rgb(71, 127, 75);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 15%;
height: 40px;
border: none;
outline: none;
cursor: pointer;
}
.rounder mat-icon {
font-size: 24px;
color: #fff;
}
@media (max-width: 768px) {
.rounder {
width: 30%;
}
}
@media (max-width: 480px) {
.rounder {
width: 40%;
}
}
.margen{
margin: 10px;
padding: 10px;
margin-bottom: 10px;
}
.bordes {
border-collapse: collapse;
width: 100%;
}
.bordes th,
.bordes td {
border: 1px solid black;
padding: 8px;
}
.bordes th {
background-color: #f5f5f5;
font-weight: bold;
}
.bordes td {
background-color: #ffffff;
}
.bordes tr:nth-child(even) {
background-color: #f9f9f9;
}
.bordes tr:hover {
background-color: #eaeaea;
}
.bordes th:last-child,
.bordes td:last-child {
border-bottom: none;
}
.rounder-nuevo {
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;
margin-left: 5px;
}
.white-icon {
color: white;
}
.btn{
padding: 0 2% 0 2%;
}
.azul {
color: blue;
}
.institution {
display: flex;
align-items: center;
}
.institution-name {
font-size: 20px;
/* Tamaño de fuente deseado */
font-weight: bold;
/* Opcional, para hacerlo más destacado */
margin-right: 30px;
/* Espacio entre el icono y el nombre */
}
.add-icon {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
/* Ancho del círculo */
height: 25px;
/* Altura del círculo */
border-radius: 50%;
/* Para crear la forma de círculo */
background-color: white;
/* Color de fondo del círculo */
color: black;
/* Color del signo "+" en el círculo */
font-size: 25px;
/* Tamaño del signo "+" */
}
<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>
<!-- Nombre Institución Column -->
<ng-container matColumnDef="NombreObj" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Estrategia del Plan de Vinculación </th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ obtenerNombre(dato.uzytavestrategias_v_plan_id) }}
</td>
</ng-container>
<ng-container matColumnDef="Acciones" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Eliminar</th>
<td class="Column" mat-cell *matCellDef="let dato">
<button>
<mat-icon color="warn"
(click)="eliminar(dato.uzytavprograma_eplanv_id)">delete</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>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListEstraVincuComponent } from './list-estra-vincu.component';
describe('ListEstraVincuComponent', () => {
let component: ListEstraVincuComponent;
let fixture: ComponentFixture<ListEstraVincuComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ListEstraVincuComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ListEstraVincuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { estrategiasvplan } from 'src/app/modules/main/Models/estrategiasvplan';
import { programaeplanv } from 'src/app/modules/main/Models/programaeplanv';
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 { EstrategiasvplanService } from 'src/app/modules/main/services/estrategias vinculacion/estrategiasvplan.service';
import { ProgramaeplanvService } from 'src/app/modules/main/services/estrategiasVinculación/programaeplanv.service';
@Component({
selector: 'vex-list-estra-vincu',
templateUrl: './list-estra-vincu.component.html',
styleUrls: ['./list-estra-vincu.component.css']
})
export class ListEstraVincuComponent implements OnInit {
displayedColumns: string[] = [
'Nro',
'NombreObj',
'Acciones'
];
idRecuperado: number;
dataSource: MatTableDataSource<programaeplanv>;
datos: programaeplanv[]=[];
almacenamiento: estrategiasvplan[]=[];
constructor(
private id_compartido: Compartir_idService,
private datosCompartidos: Actualiza_datosService,
private modeloEstra: programaeplanv,
private servicioEstra: ProgramaeplanvService,
private estraService: EstrategiasvplanService
) {this.dataSource = new MatTableDataSource<programaeplanv>([]); }
ngOnInit(): void {
this.obtenerDatos();
this.datosCompartidos.datos$.subscribe(() => {
this.obtenerRegistros();
});
this.servicioEstra.parametrosActualizados.subscribe(() => {
this.obtenerRegistros();
});
}
obtenerRegistros(){
this.idRecuperado = this.id_compartido.getIdGuardado();
if(this.idRecuperado !== undefined){
this.servicioEstra.obtenerParametros().subscribe(data => {
this.datos = data.filter(item => item.uzytavprograma_v_id === this.idRecuperado);
this.dataSource.data = this.datos;
});
}
}
obtenerDatos(){
this.estraService.obtenerParametros().subscribe(data => {
if(data !== undefined){
this.almacenamiento = data;
}
});
}
obtenerNombre(id: number){
const objetivo = this.almacenamiento.find(obj => obj.uzytavestrategias_v_plan_id === id);
return objetivo ? objetivo.uzytavestrategias_v_plan_descripcion || '' : '';
}
eliminar(id: number){
const confirmacion = confirm('¿Desea eliminar el registro?');
if (confirmacion) {
this.servicioEstra.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');
}
);
}
}
}
.principal {
text-align: center;
margin-bottom: 2%;
}
.grid-container {
display: grid;
grid-template-columns: 5% 10% 45% 10% 5% 10% 15%;
border: 1px solid #ccc;
}
#cabecera {
background: linear-gradient(135deg,
var(--background-base) 22px,
var(--background-hover) 22px,
var(--background-hover) 24px,
transparent 24px,
transparent 67px,
var(--background-hover) 67px,
var(--background-hover) 69px,
transparent 69px),
linear-gradient(225deg,
var(--background-base) 22px,
var(--background-hover) 22px,
var(--background-hover) 24px,
transparent 24px,
transparent 67px,
var(--background-hover) 67px,
var(--background-hover) 69px,
transparent 69px) 0 64px;
background-color: var(--background-base);
background-size: 64px 128px;
}
.Column {
padding-left: 0px;
padding-right: 0px;
width: 100px;
white-space: inherit;
/* overflow: visible;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}
.Column1 {
padding-left: 0px;
padding-right: 0px;
width: 10px;
white-space: normal;
overflow: visible;
}
.Column2 {
width: 25px;
padding-left: 0px;
padding-right: 0px;
}
.volver{
position: absolute;
top: 50%;
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;
}
.grid-item {
font-weight: bold;
}
.grid-opciones {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.titulo {
display: flex;
align-items: center;
justify-content: center;
}
.titulo-texto {
font-weight: bold;
font-size: 18px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-right: 10px;
}
.componente {
justify-content: center;
align-items: center;
}
.card {
background-color: rgb(252, 252, 251)
}
.colorEditar {
color: blue;
}
.colorEditar svg {
fill: blue;
}
.contenedorP {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin: 10px auto;
border-radius: 10px;
text-align: center;
margin-top: 10%;
background-color: white;
}
.contenedor:not(:last-child) {
margin-bottom: 2px;
}
.separador{
margin-top: 5%;
}
.contenedor {
width: 96%;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 2%;
border-radius: 10px;
background-color: white;
position: relative;
z-index: 1;
}
.sobremontado {
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 96%;
top: -20px;
left: 2%;
background-color: rgb(71, 127, 75);
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);
}
.sobremontado span {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.sobremontado mat-icon {
margin-right: 5px;
}
.icono-instituciones {
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
font-size: 20px;
cursor: pointer;
}
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;
}
.area-busqueda {
padding: 20px;
margin-top: 30px;
text-align: right;
}
@media (max-width: 600px) {
table {
font-size: 14px;
}
table th,
table td {
padding: 8px;
}
}
.btn-observar {
border-radius: 50%;
width: 36px;
height: 36px;
}
.colorsito{
background-color: rgb(248, 249, 250);
}
.rounder{
border-radius: 50%;
background-color: rgb(71, 127, 75);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 15%;
height: 40px;
border: none;
outline: none;
cursor: pointer;
}
.rounder mat-icon {
font-size: 24px;
color: #fff;
}
@media (max-width: 768px) {
.rounder {
width: 30%;
}
}
@media (max-width: 480px) {
.rounder {
width: 40%;
}
}
.margen{
margin: 10px;
padding: 10px;
margin-bottom: 10px;
}
.bordes {
border-collapse: collapse;
width: 100%;
}
.bordes th,
.bordes td {
border: 1px solid black;
padding: 8px;
}
.bordes th {
background-color: #f5f5f5;
font-weight: bold;
}
.bordes td {
background-color: #ffffff;
}
.bordes tr:nth-child(even) {
background-color: #f9f9f9;
}
.bordes tr:hover {
background-color: #eaeaea;
}
.bordes th:last-child,
.bordes td:last-child {
border-bottom: none;
}
.rounder-nuevo {
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;
margin-left: 5px;
}
.white-icon {
color: white;
}
.btn{
padding: 0 2% 0 2%;
}
.azul {
color: blue;
}
.institution {
display: flex;
align-items: center;
}
.institution-name {
font-size: 20px;
/* Tamaño de fuente deseado */
font-weight: bold;
/* Opcional, para hacerlo más destacado */
margin-right: 30px;
/* Espacio entre el icono y el nombre */
}
.add-icon {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
/* Ancho del círculo */
height: 25px;
/* Altura del círculo */
border-radius: 50%;
/* Para crear la forma de círculo */
background-color: white;
/* Color de fondo del círculo */
color: black;
/* Color del signo "+" en el círculo */
font-size: 25px;
/* Tamaño del signo "+" */
}
<p>obj-ei-list works!</p>
<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>
<!-- Nombre Institución Column -->
<ng-container matColumnDef="perspectica" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Perspectica </th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ obtenerDescripcionPerspectiva(dato.uzytavobjetivos_ESTRA_INSTI_ID)}}
</td>
</ng-container>
<ng-container matColumnDef="objetivo" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Objetivo </th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ obtenerDescripcionObjetivo(dato.uzytavobjetivos_ESTRA_INSTI_ID)}}
</td>
</ng-container>
<ng-container matColumnDef="estrategia" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Estrategia </th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ obtenerDescripcionEstrategia(dato.uzytavobjetivos_ESTRA_INSTI_ID) }}
</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 color="warn"
(click)="eliminarParametros(dato.uzytavprog_OBJ_ESTARTEGICOS_ID)">delete</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>
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { objetivosEstraInst } from 'src/app/modules/main/Models/objetivoEstraInst';
import { proObjeEstra } from 'src/app/modules/main/Models/proObjEstr';
import { prograObj } from 'src/app/modules/main/Models/prograObj';
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 { Obj_estra_agService } from 'src/app/modules/main/services/obj_estra_agre/obj_estra_ag.service';
import { ObjetivosPLNBVService } from 'src/app/modules/main/services/objetivosPLNBV/objetivos-plnbv.service';
import { ObjetivosEstraSService } from 'src/app/modules/main/services/objetivos_estra_inst/objetivosEstraS.service';
@Component({
selector: 'vex-obj-ei-list',
......@@ -6,10 +15,104 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./obj-ei-list.component.css']
})
export class ObjEiListComponent implements OnInit {
displayedColumns: string[] = [
'Nro',
'perspectica',
'objetivo',
'estrategia',
'Acciones'
];
constructor() { }
//recuperar el id
idRecuperado: number;
//mostrar la información
datasource: MatTableDataSource<proObjeEstra>;
proObjM: proObjeEstra[] = [];
//para almacenar los campos
objet: objetivosEstraInst[] = [];
perspectiva: objetivosEstraInst[] = [];
objetivo: objetivosEstraInst[] = [];
estrategia: objetivosEstraInst[] = [];
constructor(
private proObS: Obj_estra_agService,
private id_compartido: Compartir_idService,
private datosCompartidos: Actualiza_datosService,
private objEstraInS: ObjetivosEstraSService,
) { this.datasource = new MatTableDataSource<proObjeEstra>([]); }
ngOnInit(): void {
this.obtenerDatos();
this.datosCompartidos.datos$.subscribe(() => {
this.obtenerRegistros();
});
this.proObS.parametrosActualizados.subscribe(() => {
this.obtenerRegistros();
});
}
obtenerRegistros() {
this.idRecuperado = this.id_compartido.getIdGuardado();
if (this.idRecuperado !== undefined) {
this.proObS.obtenerParametros().subscribe(data => {
this.proObjM = data.filter(item => item.uzytavprograma_V_ID === this.idRecuperado);
this.datasource.data = this.proObjM;
});
}
}
obtenerDatos() {
this.objEstraInS.obtenerParametros().subscribe(data => {
if (data !== undefined) {
this.objet = data;
}
});
}
obtenerDescripcionEstrategia(id: number): string {
const objetivo = this.objet.find(obj => obj.uzytavobjetivos_ESTRA_INSTI_ID === id);
return objetivo ? objetivo.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION || '' : '';
}
obtenerDescripcionObjetivo(id: number): string {
if (id !== undefined && this.objet && this.objet.length > 0) {
const objetivo = this.objet.find(item => item.uzytavobjetivos_ESTRA_INSTI_ID === id);
return objetivo && objetivo.uzyTavObjetivosEstraInstiPadre
? objetivo.uzyTavObjetivosEstraInstiPadre.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION
: 'N/A';
}
return 'N/A';
}
obtenerDescripcionPerspectiva(id: number): string {
if (id !== undefined && this.objet && this.objet.length > 0) {
const objetivo = this.objet.find(item => item.uzytavobjetivos_ESTRA_INSTI_ID === id);
if (objetivo && objetivo.uzyTavObjetivosEstraInstiPadre) {
return objetivo.uzyTavObjetivosEstraInstiPadre.uzyTavObjetivosEstraInstiPadre
? objetivo.uzyTavObjetivosEstraInstiPadre.uzyTavObjetivosEstraInstiPadre.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION
: 'N/A';
}
}
return 'N/A';
}
eliminarParametros(id: number) {
const confirmacion = confirm('¿Desea eliminar el registro?');
if (confirmacion) {
this.proObS.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');
}
);
}
}
}
.area-busqueda {
padding: 20px;
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contenedorP {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin: 10px auto;
border-radius: 10px;
text-align: center;
margin-top: 10%;
background-color: white;
}
.mat-mdc-radio-button ~ .mat-mdc-radio-button {
margin-left: 16px;
}
.mat-radio-button{
margin-right: 10px;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
.formulario {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 96%;
margin: 0 auto;
background-color: white;
border-radius: 10px;
}
.contenedor-dos {
margin-top: 30px;
padding: 0.9375rem 20px;
position: relative;
}
.form-field {
width: 100%;
margin-bottom: 20px;
}
.save-button {
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
}
<p>obj-ei works!</p>
<div class="container">
<div class="contenedor-dos">
<!-- Formulario 1 -->
<form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
<!-- Botón para guardar -->
<div class="save-button">
<button mat-raised-button color="primary" [disabled]="myForm.invalid">Guardar</button>
</div>
<mat-form-field class="form-field">
<mat-label>Perspectiva:</mat-label>
<mat-select formControlName="perspectiva" (selectionChange)="obtenerHijos1($event.value)">
<mat-option *ngFor="let estrategia of padre" [value]="estrategia.uzytavobjetivos_ESTRA_INSTI_ID" >
{{ estrategia.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Objetivo:</mat-label>
<mat-select formControlName="objetivo" (selectionChange)="obtenerHijo2($event.value)">
<mat-option *ngFor="let estrategia of hijo1" [value]="estrategia.uzytavobjetivos_ESTRA_INSTI_ID">
{{ estrategia.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Estrategia:</mat-label>
<mat-select formControlName="estrategia">
<mat-option *ngFor="let estrategia of estra" [value]="estrategia.uzytavobjetivos_ESTRA_INSTI_ID">
{{ estrategia.uzytavobjetivos_ESTRA_INSTI_DESCRIPCION }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Component,EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { objetivosEstraInst } from 'src/app/modules/main/Models/objetivoEstraInst';
import { proObjeEstra } from 'src/app/modules/main/Models/proObjEstr';
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 { Obj_estra_agService } from 'src/app/modules/main/services/obj_estra_agre/obj_estra_ag.service';
import { ObjetivosEstraSService } from 'src/app/modules/main/services/objetivos_estra_inst/objetivosEstraS.service';
import { EnvioFormularioComponent } from '../../../envio-formulario/envio-formulario.component';
@Component({
selector: 'vex-obj-ei',
......@@ -6,10 +15,87 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./obj-ei.component.css']
})
export class ObjEiComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
selectedOption: string;
myForm: FormGroup;
constructor() { }
objEstraInst: objetivosEstraInst[] = [];
padre: objetivosEstraInst[] = [];
hijo1: objetivosEstraInst[] = [];
estra: objetivosEstraInst[] = [];
formularioEnviado: boolean;
constructor(
private formBuilder: FormBuilder,
private objEstraInS: ObjetivosEstraSService,
private estraS: Obj_estra_agService,
private estraM: proObjeEstra,
private id_compartido: Compartir_idService,
private dialog: MatDialog,
private datosCompartidos: Actualiza_datosService
) {
this.myForm = this.formBuilder.group({
perspectiva: ['',Validators.required],
objetivo: ['',Validators.required],
estrategia: ['', Validators.required],
});
}
ngOnInit(): void {
this.obtenerPadres();
}
obtenerPadres() {
this.objEstraInS.obtenerPadres().subscribe(data => {
this.padre = data;
});
}
obtenerHijos1(id: number) {
this.objEstraInS.obtenerHijo(id).subscribe(data => {
this.hijo1 = data;
});
}
obtenerHijo2(id: number){
this.objEstraInS.obtenerHijo(id).subscribe( data =>{
this.estra = data;
});
}
onSubmit() {
if (this.myForm.valid) {
try {
this.estraM.uzytavprograma_V_ID = this.id_compartido.getIdGuardado();
//Modelo
this.estraM.uzytavobjetivos_ESTRA_INSTI_ID = this.myForm.value.estrategia;
this.estraS.guardarParametros(this.estraM).subscribe(response => {
console.log('Datos Enviados');
this.estraS.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.estraM);
this.myForm.reset();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
.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;
}
}
<p>obj-pc-p-list works!</p>
<div class="container" >
<app-objetivos-zona *ngIf="idCompartido.mostrar"></app-objetivos-zona>
<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="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>
<!-- Dirección Column -->
<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>
<!-- Representante Column -->
<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>
<ng-container matColumnDef="Objetivos" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Objetivos </th>
<td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavzona_objetivos}} </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)="mostrarObjetivosPorZona(dato.uzytavzona_detalle_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>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
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 { ZonaDetalle } from 'src/app/modules/main/Models/zona_detalle';
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 { MostrarOcultarService } from 'src/app/modules/main/services/mostrar-ocultar.service';
import { Zona_detalleService } from 'src/app/modules/main/services/zona_detalle/zona_detalle.service';
@Component({
selector: 'vex-obj-pc-p-list',
......@@ -6,10 +17,124 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./obj-pc-p-list.component.css']
})
export class ObjPcPListComponent implements OnInit {
enviarSolicitud = false;
constructor() { }
idRecuperado: number;
dataSource: MatTableDataSource<ZonaDetalle>;
zonaDM: ZonaDetalle[] = [];
provincias: Provincia[] = [];
cantones: Canton[] = [];
parroquias: Parroquia[] = [];
displayedColumns: string[] = ['Nro', 'Provincia', 'Canton', 'Parroquia', 'Objetivos', 'Acciones'];
constructor(
public idCompartido: Compartir_idService,
private zonaS: Zona_detalleService,
private datosCompar: Actualiza_datosService,
private ubicacionesS: UbicacionesService,
private mostrarOcultarService: MostrarOcultarService
) {this.dataSource = new MatTableDataSource<ZonaDetalle>([]); }
ngOnInit(): void {
this.datosCompar.datos$.subscribe(() => {
this.obtenerRegistros();
this.obtenerProvincias();
this.obtenerParroquias();
this.obtenerCantones();
});
this.zonaS.parametrosActualizados.subscribe(() => {
this.obtenerRegistros();
this.obtenerProvincias();
this.obtenerParroquias();
this.obtenerCantones();
});
}
mostrarObjetivosPorZona(id: number) {
this.idCompartido.mostrarFormulario();
const registroSeleccionado = this.zonaDM.find(
zona => zona.uzytavzona_detalle_id === id);
this.idCompartido.setIdZonaDetalle(id);
this.mostrarOcultarService.coberturaEdit = registroSeleccionado;
}
obtenerRegistros() {
this.idRecuperado = this.idCompartido.getIdGuardado();
if (this.idRecuperado !== undefined) {
this.zonaS.obtenerRegistrosRelacionados(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');
}
);
}
}
}
<div class="container">
<div class="mat-elevation-z8">
<table mat-table matSort>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Nro Column -->
<ng-container matColumnDef="Nro" class="Column1">
......@@ -11,10 +11,29 @@
</ng-container>
<!-- Nombre Institución Column -->
<ng-container matColumnDef="Nombre" class="Column">
<ng-container matColumnDef="NombreObj" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Objetivos del Plan Nacional del Buen Vivir </th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ ObtenerNombrePadre(dato.uzytavobjetivo_b_vivir_id) }}
</td>
</ng-container>
<ng-container matColumnDef="NombrePoli" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Politica</th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ ObtenerNombreHijo(dato.uzytavobjetivo_b_vivir_id) }}
</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 color="warn"
(click)="eliminarParametros(dato.uzytavprog_obj_code)">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
......
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { objetivosBV } from 'src/app/modules/main/Models/objetivoPLNBV';
import { prograObj } from 'src/app/modules/main/Models/prograObj';
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 { ObjetivosPLNBVService } from 'src/app/modules/main/services/objetivosPLNBV/objetivos-plnbv.service';
import { PrograObjService } from 'src/app/modules/main/services/prograObj/prograObj.service';
@Component({
selector: 'vex-obj-p-list',
templateUrl: './obj-p-list.component.html',
styleUrls: ['./obj-p-list.component.css']
})
export class ObjPListComponent implements OnInit {
idRecuperado: number;
dataSource: MatTableDataSource<prograObj>;
objetiP: prograObj[] = [];
politicas: any[] = [];
objetivos: any[] = [];
obj!: objetivosBV[];
displayedColumns: string[] = [
'Nro',
'Nombre'
'NombreObj',
'NombrePoli',
'Acciones'
];
constructor() { }
constructor(
private objS: ObjetivosPLNBVService,
private objPM: prograObj,
private objPS: PrograObjService,
private id_Compartido: Compartir_idService,
private dialog: MatDialog,
private datosCompartidos: Actualiza_datosService
) {
this.dataSource = new MatTableDataSource<prograObj>([]);
}
ngOnInit(): void {
this.datosCompartidos.datos$.subscribe(() => {
this.obtenerRegistros();
this.obtenerObjetivos();
});
this.objPS.parametrosActualizados.subscribe(() => {
this.obtenerRegistros();
this.obtenerObjetivos();
});
}
obtenerRegistros(){
this.idRecuperado = this.id_Compartido.getIdGuardado();
if (this.idRecuperado !== undefined) {
this.objPS.obtenerRegistrosRelacionadosPrograma(this.idRecuperado).subscribe(data => {
if (data !== undefined) {
this.objetiP = data;
this.dataSource.data = this.objetiP;
}
});
}
}
ObtenerNombreHijo(id: number): string {
if (id !== undefined && this.obj && this.obj.length > 0) {
const objetivo = this.obj.find(item => item.uzytavobjetivo_b_vivir_id === id);
return objetivo ? objetivo.uzytavobjetivo_b_vivirdescripcion : 'N/A';
} else {
return 'N/A';
}
}
ObtenerNombrePadre(id: number): string {
if (id !== undefined && this.obj && this.obj.length > 0) {
const objetivo = this.obj.find(item => item.uzytavobjetivo_b_vivir_id === id);
return objetivo && objetivo.objetivo_b_vivirPadre
? objetivo.objetivo_b_vivirPadre.uzytavobjetivo_b_vivirdescripcion
: 'N/A';
}
return 'N/A';
}
obtenerObjetivos(){
this.objS.obtenerParametros().subscribe(data =>{
if(data !== undefined){
this.obj = data;
}
});
}
eliminarParametros(id: number) {
const confirmacion = confirm('¿Desea eliminar el registro?');
if (confirmacion) {
this.objPS.eliminarParametros(id).subscribe(
() => {
console.log('El registro se ha eliminado');
this.obtenerRegistros();
this.obtenerObjetivos();
},
(error) => {
// No mostrar el error en la consola
console.log('Error durante el tratamiento al registro');
}
);
}
}
}
<div class="container">
<div class="contenedor-dos">
<div class="form-container">
<form class="formulario" [formGroup]="myForm">
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<mat-card *ngIf="mostrarFormulario">
<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>
<mat-label><strong>Seleccione el Objetivo del Plan Nacional del Buen
Vivir</strong></mat-label>
<mat-form-field class="form-field">
<mat-label>Seleccione un Item</mat-label>
<mat-select formControlName="objetivo">
<mat-option *ngFor="let item of obj" [value]="item">
{{ getobj(item) }}
<mat-select formControlName="objetivo"
(selectionChange)="obtenerHijos($event.value)">
<mat-option *ngFor="let item of obj"
[value]="item.uzytavobjetivo_b_vivir_id">
{{ item.uzytavobjetivo_b_vivirdescripcion }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-label><strong>Seleccione la Política a Agregar</strong></mat-label>
<mat-form-field class="form-field">
<mat-label>Seleccione un Item</mat-label>
<mat-select formControlName="politica">
<mat-option *ngFor="let item of obj" [value]="item">
{{ getpo(item) }}
<mat-option *ngFor="let item of politicas"
[value]="item.uzytavobjetivo_b_vivir_id">
{{ item.uzytavobjetivo_b_vivirdescripcion }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
......
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { objetivosBV } from 'src/app/modules/main/Models/objetivoPLNBV';
import { prograObj } from 'src/app/modules/main/Models/prograObj';
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 { ObjetivosPLNBVService } from 'src/app/modules/main/services/objetivosPLNBV/objetivos-plnbv.service';
import { PrograObjService } from 'src/app/modules/main/services/prograObj/prograObj.service';
import { EnvioFormularioComponent } from '../../../envio-formulario/envio-formulario.component';
@Component({
selector: 'vex-obj-p',
......@@ -10,51 +17,75 @@ import { ObjetivosPLNBVService } from 'src/app/modules/main/services/objetivosPL
styleUrls: ['./obj-p.component.css']
})
export class ObjPComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
mostrarFormulario: boolean = true;
obj!: objetivosBV[];
politicas: any[] = [];
objetivos: any[] = [];
myForm: FormGroup;
selectedObjetivo: string;
formularioEnviado: boolean;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private objM: objetivosBV,
private objS: ObjetivosPLNBVService
private objS: ObjetivosPLNBVService,
private objPM: prograObj,
private idCompartido: Compartir_idService,
private dialog: MatDialog,
private datosCompartidos: Actualiza_datosService,
private objPS: PrograObjService
) {
this.myForm = this.formBuilder.group({
// Define los campos y validaciones para el formulario 1
objetivo: [''],
politica: ['']
objetivo: ['', Validators.required],
politica: ['', Validators.required]
});
this.obj = [];
}
ngOnInit(): void {
this.obtenerRegistros();
}
obtenerRegistros() {
this.objS.obtenerParametros().subscribe(data => {
this.obj = this.filterObjetivos(data);
});
}
onSubmit() {
if (this.myForm.valid) {
try {
this.objPM.uzytavprograma_v_id = this.idCompartido.getIdGuardado();
this.objPM.uzytavobjetivo_b_vivir_id = this.myForm.value.politica;
filterObjetivos(objetivos: objetivosBV[]): objetivosBV[] {
const filteredObjetivos: objetivosBV[] = [];
for (const objetivo of objetivos) {
if (!objetivo.objetivo_b_vivirPadre) {
filteredObjetivos.push(objetivo);
this.objPS.guardarParametros(this.objPM).subscribe(response => {
this.objPS.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.objPM);
this.myForm.reset();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
return filteredObjetivos;
}
getobj(item: objetivosBV): string {
return item.uzytavobjetivo_b_vivirdescripcion || '';
obtenerRegistros() {
this.objS.obtenerParametros().subscribe(data => {
this.obj = data.filter(item => !item.uzytavobjetivo_b_vivirid_padre);
});
}
getpo(item: objetivosBV): string {
if (item.objetivo_b_vivirPadre && !item.objetivo_b_vivirPadre.objetivo_b_vivirPadre) {
return item.uzytavobjetivo_b_vivirdescripcion || '';
}
return '';
obtenerHijos(id: number) {
this.objS.obtenerHijos(id).subscribe(data => {
this.politicas = data.filter(item => item.uzytavobjetivo_b_vivirid_padre);
});
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
.area-busqueda {
padding: 20px;
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contenedorP {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin: 5px auto;
border-radius: 10px;
text-align: center;
margin-top: 2%;
background-color: white;
}
.mat-mdc-radio-button ~ .mat-mdc-radio-button {
margin-left: 16px;
}
.mat-radio-button{
margin-right: 10px;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
.formulario {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 96%;
margin: 0 auto;
background-color: white;
padding: 10px;
border-radius: 10px;
}
.contenedor-dos {
margin-top: 30px;
padding: 0.9375rem 20px;
position: relative;
}
.form-field {
width: 100%;
margin-bottom: 20px;
}
<div class="container">
<div class="contenedor-dos">
<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>
<mat-label><strong>>Seleccione el objetivo del Plan de Vinculación a agregar</strong></mat-label>
<mat-form-field class="form-field">
<mat-label>Seleccione el objetivo del Plan de Vinculación a agregar</mat-label>
<mat-select formControlName="objetivo">
<mat-option *ngFor="let item of objetiVinc"
[value]="item.uzytavobj_plan_vinvula_id">
{{ item.uzytavobj_plan_vinvula_orden +'.'+item.uzytavobj_plan_vinvula_descripcion}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddObjeVincuComponent } from './add-obje-vincu.component';
describe('AddObjeVincuComponent', () => {
let component: AddObjeVincuComponent;
let fixture: ComponentFixture<AddObjeVincuComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddObjeVincuComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AddObjeVincuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { objetivo_planVincu } from 'src/app/modules/main/Models/objetivo_planVincu';
import { planvprograma } from 'src/app/modules/main/Models/planvprograma';
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_VincuService } from 'src/app/modules/main/services/objetivo_Vincu/objetivo_Vincu.service';
import { PlanvprogramaService } from 'src/app/modules/main/services/planvprograma/planvprograma.service';
import { EnvioFormularioComponent } from '../../../envio-formulario/envio-formulario.component';
@Component({
selector: 'vex-add-obje-vincu',
templateUrl: './add-obje-vincu.component.html',
styleUrls: ['./add-obje-vincu.component.css']
})
export class AddObjeVincuComponent implements OnInit {
@Output() formularioGuardado = new EventEmitter<void>();
myForm: FormGroup;
objetiVinc: objetivo_planVincu[] = [];
formularioEnviado: boolean = false;
constructor(
private formBuilder: FormBuilder,
private idCompartido: Compartir_idService,
private dialog: MatDialog,
private datosCompartidos: Actualiza_datosService,
private objVS: Objetivo_VincuService,
private proObjVincuS: PlanvprogramaService,
private proObjVincuM: planvprograma
) {
this.myForm = this.formBuilder.group({
// Define los campos y validaciones para el formulario 1
objetivo: ['', Validators.required]
});
}
ngOnInit(): void {
this.obtenerRegistros();
}
obtenerRegistros(){
this.objVS.obtenerParametros().subscribe(data => {
this.objetiVinc = data
this.objetiVinc.sort((a, b) => a.uzytavobj_plan_vinvula_orden - b.uzytavobj_plan_vinvula_orden);
});
}
onSubmit() {
if (this.myForm.valid) {
try {
this.proObjVincuM.uzytavprograma_v_id = this.idCompartido.getIdGuardado();
this.proObjVincuM.uzytavobj_plan_vinvula_id = this.myForm.get("objetivo").value;
this.proObjVincuS.guardarParametros(this.proObjVincuM).subscribe(response => {
console.log('Datos Enviados');
this.proObjVincuS.parametrosActualizados.next();
this.openModal();
this.formularioGuardado.emit();
this.datosCompartidos.actualizarDatos(this.proObjVincuM);
this.myForm.reset();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
.principal {
text-align: center;
margin-bottom: 2%;
}
.grid-container {
display: grid;
grid-template-columns: 5% 10% 45% 10% 5% 10% 15%;
border: 1px solid #ccc;
}
#cabecera {
background: linear-gradient(135deg,
var(--background-base) 22px,
var(--background-hover) 22px,
var(--background-hover) 24px,
transparent 24px,
transparent 67px,
var(--background-hover) 67px,
var(--background-hover) 69px,
transparent 69px),
linear-gradient(225deg,
var(--background-base) 22px,
var(--background-hover) 22px,
var(--background-hover) 24px,
transparent 24px,
transparent 67px,
var(--background-hover) 67px,
var(--background-hover) 69px,
transparent 69px) 0 64px;
background-color: var(--background-base);
background-size: 64px 128px;
}
.Column {
padding-left: 0px;
padding-right: 0px;
width: 100px;
white-space: inherit;
/* overflow: visible;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}
.Column1 {
padding-left: 0px;
padding-right: 0px;
width: 10px;
white-space: normal;
overflow: visible;
}
.Column2 {
width: 25px;
padding-left: 0px;
padding-right: 0px;
}
.volver{
position: absolute;
top: 50%;
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;
}
.grid-item {
font-weight: bold;
}
.grid-opciones {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.titulo {
display: flex;
align-items: center;
justify-content: center;
}
.titulo-texto {
font-weight: bold;
font-size: 18px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-right: 10px;
}
.componente {
justify-content: center;
align-items: center;
}
.card {
background-color: rgb(252, 252, 251)
}
.colorEditar {
color: blue;
}
.colorEditar svg {
fill: blue;
}
.contenedorP {
width: 96%;
margin-left: 2%;
margin-right: 2%;
margin: 10px auto;
border-radius: 10px;
text-align: center;
margin-top: 10%;
background-color: white;
}
.contenedor:not(:last-child) {
margin-bottom: 2px;
}
.separador{
margin-top: 5%;
}
.contenedor {
width: 96%;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 2%;
border-radius: 10px;
background-color: white;
position: relative;
z-index: 1;
}
.sobremontado {
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 96%;
top: -20px;
left: 2%;
background-color: rgb(71, 127, 75);
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);
}
.sobremontado span {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.sobremontado mat-icon {
margin-right: 5px;
}
.icono-instituciones {
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
font-size: 20px;
cursor: pointer;
}
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;
}
.area-busqueda {
padding: 20px;
margin-top: 30px;
text-align: right;
}
@media (max-width: 600px) {
table {
font-size: 14px;
}
table th,
table td {
padding: 8px;
}
}
.btn-observar {
border-radius: 50%;
width: 36px;
height: 36px;
}
.colorsito{
background-color: rgb(248, 249, 250);
}
.rounder{
border-radius: 50%;
background-color: rgb(71, 127, 75);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 15%;
height: 40px;
border: none;
outline: none;
cursor: pointer;
}
.rounder mat-icon {
font-size: 24px;
color: #fff;
}
@media (max-width: 768px) {
.rounder {
width: 30%;
}
}
@media (max-width: 480px) {
.rounder {
width: 40%;
}
}
.margen{
margin: 10px;
padding: 10px;
margin-bottom: 10px;
}
.bordes {
border-collapse: collapse;
width: 100%;
}
.bordes th,
.bordes td {
border: 1px solid black;
padding: 8px;
}
.bordes th {
background-color: #f5f5f5;
font-weight: bold;
}
.bordes td {
background-color: #ffffff;
}
.bordes tr:nth-child(even) {
background-color: #f9f9f9;
}
.bordes tr:hover {
background-color: #eaeaea;
}
.bordes th:last-child,
.bordes td:last-child {
border-bottom: none;
}
.rounder-nuevo {
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;
margin-left: 5px;
}
.white-icon {
color: white;
}
.btn{
padding: 0 2% 0 2%;
}
.azul {
color: blue;
}
.institution {
display: flex;
align-items: center;
}
.institution-name {
font-size: 20px;
/* Tamaño de fuente deseado */
font-weight: bold;
/* Opcional, para hacerlo más destacado */
margin-right: 30px;
/* Espacio entre el icono y el nombre */
}
.add-icon {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
/* Ancho del círculo */
height: 25px;
/* Altura del círculo */
border-radius: 50%;
/* Para crear la forma de círculo */
background-color: white;
/* Color de fondo del círculo */
color: black;
/* Color del signo "+" en el círculo */
font-size: 25px;
/* Tamaño del signo "+" */
}
<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>
<!-- Nombre Institución Column -->
<ng-container matColumnDef="NombreObj" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Objetivo del Plan de Vinculación </th>
<td class="Column" mat-cell *matCellDef="let dato">
{{ obtenerNombre(dato.uzytavobj_plan_vinvula_id) }}
</td>
</ng-container>
<ng-container matColumnDef="Acciones" class="Column">
<th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
Eliminar</th>
<td class="Column" mat-cell *matCellDef="let dato">
<button>
<mat-icon color="warn"
(click)="eliminar(dato.uzytavplan_v_programa_id)">delete</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>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListObjeVincuComponent } from './list-obje-vincu.component';
describe('ListObjeVincuComponent', () => {
let component: ListObjeVincuComponent;
let fixture: ComponentFixture<ListObjeVincuComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ListObjeVincuComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ListObjeVincuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { objetivo_planVincu } from 'src/app/modules/main/Models/objetivo_planVincu';
import { planvprograma } from 'src/app/modules/main/Models/planvprograma';
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_VincuService } from 'src/app/modules/main/services/objetivo_Vincu/objetivo_Vincu.service';
import { PlanvprogramaService } from 'src/app/modules/main/services/planvprograma/planvprograma.service';
@Component({
selector: 'vex-list-obje-vincu',
templateUrl: './list-obje-vincu.component.html',
styleUrls: ['./list-obje-vincu.component.css']
})
export class ListObjeVincuComponent implements OnInit {
displayedColumns: string[] = [
'Nro',
'NombreObj',
'Acciones'
];
//recuperar el id
idRecuperado: number;
dataSource: MatTableDataSource<planvprograma>;
datos: planvprograma[] = [];
almacenamiento: objetivo_planVincu[] = [];
constructor(
private planS: PlanvprogramaService,
private id_compartido: Compartir_idService,
private datosCompartidos: Actualiza_datosService,
private objetivoPVS: Objetivo_VincuService
) { this.dataSource = new MatTableDataSource<planvprograma>([]);}
ngOnInit(): void {
this.obtenerDatos();
this.datosCompartidos.datos$.subscribe(() => {
this.obtenerRegistros();
});
this.planS.parametrosActualizados.subscribe(() => {
this.obtenerRegistros();
});
}
obtenerRegistros(){
this.idRecuperado = this.id_compartido.getIdGuardado();
if(this.idRecuperado !== undefined){
this.planS.obtenerParametros().subscribe(data => {
this.datos = data.filter(item => item.uzytavprograma_v_id === this.idRecuperado);
this.dataSource.data = this.datos;
});
}
}
obtenerDatos(){
this.objetivoPVS.obtenerParametros().subscribe(data => {
if(data !== undefined){
this.almacenamiento = data;
}
});
}
obtenerNombre(id: number){
const objetivo = this.almacenamiento.find(obj => obj.uzytavobj_plan_vinvula_id === id);
return objetivo ? objetivo.uzytavobj_plan_vinvula_descripcion || '' : '';
}
eliminar(id: number){
const confirmacion = confirm('¿Desea eliminar el registro?');
if (confirmacion) {
this.planS.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');
}
);
}
}
}
<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" *ngIf="!cambio"
(click)="cambiar()">Editar</button>
<button mat-raised-button color="primary" *ngIf="cambio"
(click)="onSubmit()">Guardar</button>
<span class="separator"></span>
<button mat-raised-button color="warn" *ngIf="cambio"
(click)="cancelado()">Cancelar</button>
</div>
</mat-card-header>
<mat-card-content>
<div>
<label class="label-negrita"> Resumen del Programa:</label>
<angular-editor formControlName="resumen" [config]="editorConfig"></angular-editor>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResumenPrograComponent } from './resumen-progra.component';
describe('ResumenPrograComponent', () => {
let component: ResumenPrograComponent;
let fixture: ComponentFixture<ResumenPrograComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ResumenPrograComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ResumenPrograComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { Programa } from 'src/app/modules/main/Models/programa-v';
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 { ProgramaService } from 'src/app/modules/main/services/programa/programa.service';
import { EnvioFormularioComponent } from '../../../envio-formulario/envio-formulario.component';
@Component({
selector: 'vex-resumen-progra',
templateUrl: './resumen-progra.component.html',
styleUrls: ['./resumen-progra.component.css']
})
export class ResumenPrograComponent implements OnInit {
htmlContent: string = '';
myForm: FormGroup;
cambio: boolean;
formularioEnviado: boolean;
private programa: Programa = new Programa();
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',
},
]
};
constructor(
private formBuilder: FormBuilder,
private programaService: ProgramaService,
private compartiId: Compartir_idService,
private dialog: MatDialog,
) { }
cambiar() {
this.cambio = true;
this.editorConfig.editable = true;
}
cancelado() {
this.cambio = false;
this.editorConfig.editable = false;
}
ngOnInit(): void {
this.programa = new Programa();
this.obtenerRegistros();
this.myForm = this.formBuilder.group({
resumen: [this.programa.uzytavprograma_vresumen]
});
}
onSubmit() {
if (this.myForm.valid) {
try {
const id_recuperado = this.compartiId.getIdGuardado();
this.programa.uzytavprograma_vresumen = this.myForm.get('resumen').value;
this.programaService.modificarParametros(id_recuperado, this.programa).subscribe(response => {
this.editorConfig.editable = false;
this.cambio = false;
this.openModal();
});
} catch (error) {
console.error('Error al enviar los datos:', error);
}
}
}
obtenerRegistros() {
const id_recuperado = this.compartiId.getIdGuardado();
if (typeof id_recuperado !== 'undefined') {
this.programaService.obtenerParametrosId(id_recuperado).subscribe(data => {
this.programa = data;
this.myForm.patchValue({
resumen: this.programa.uzytavprograma_vresumen
});
});
} else {
console.log('Este ingreso es un proyecto nuevo.');
}
}
openModal() {
const dialogRef = this.dialog.open(EnvioFormularioComponent, {
width: '400px',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('La ventana modal se ha cerrado');
this.formularioEnviado = true;
});
}
}
/* tslint:disable:no-unused-variable */
import { TestBed, async, inject } from '@angular/core/testing';
import { EstrategiasvplanService } from './estrategiasvplan.service';
describe('Service: Estrategiasvplan', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [EstrategiasvplanService]
});
});
it('should ...', inject([EstrategiasvplanService], (service: EstrategiasvplanService) => {
expect(service).toBeTruthy();
}));
});
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment