agregado control para la asignación de comision

src/app/app.component.ts

@@ -163,8 +163,8 @@ export class AppComponent implements OnInit {
           },
           {
             type: 'link',
-            label: 'Calificación Comisión',
-            route: 'main/calificación',
+            label: 'Asignación Comisión',
+            route: 'main/Asignar-Comision',
             icon: 'mat:fact_check'
           },
           {
@@ -225,7 +225,7 @@ export class AppComponent implements OnInit {
   login(): void {
     this.authService.obtainAccessToken();
   }
- 
+
 
   // verifiedToken() {
   //   let timeExpired = sessionStorage.getItem('expires_at');

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

@@ -94,6 +94,8 @@ import { EditProgramaComponent } from './pages/programa/edit-programa/edit-progr
 import { EditProyectoComponent } from './pages/Proyectos/Proyectos/edit-proyecto/edit-proyecto.component';
 import { AddPresupDetComponent } from './pages/Proyectos/Presupuesto Detallado/add-presup-det/add-presup-det.component';
 import { InicialProyectoComponent } from './pages/Proyectos/Proyectos/inicial-proyecto/inicial-proyecto.component';
+import { ListProyectoAsignaComponent } from './pages/asignar comision/list-proyecto-asigna/list-proyecto-asigna.component';
+import { ProyectoAsigComponent } from './pages/asignar comision/proyecto-asig/proyecto-asig.component';
 
 
 const routes: Routes = [
@@ -292,7 +294,11 @@ const routes: Routes = [
   { path: 'CatalogoGeneral', component: CatalogoGeneralComponent },
 
 
-  { path: 'presupuesto', component: AddPresupDetComponent }
+  { path: 'presupuesto', component: AddPresupDetComponent },
+
+  //----------------asignar comisión------------------------------------//
+  { path: 'Asignar-Comision', component: ListProyectoAsignaComponent},
+  { path: 'AsinarC-proyecto/:id', component: ProyectoAsigComponent},
 
 ];
 

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

@@ -187,6 +187,8 @@ 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';
+import { ListProyectoAsignaComponent } from './pages/asignar comision/list-proyecto-asigna/list-proyecto-asigna.component';
+import { ProyectoAsigComponent } from './pages/asignar comision/proyecto-asig/proyecto-asig.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -329,7 +331,9 @@ import { AddIdentificacionPoblacionComponent } from './pages/Proyectos/Diagnosti
     ListEstraVincuComponent,
     EditEntidadComponent,
     DiagnosticoComponent,
-    AddIdentificacionPoblacionComponent
+    AddIdentificacionPoblacionComponent,
+    ListProyectoAsignaComponent,
+    ProyectoAsigComponent
     ],
   imports: [
     FullCalendarModule,

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

+.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-right: 20px;
+  margin-top: 50px;
+  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 "+" */
+
+}

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

+<!-- Importaciones necesarias -->
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+
+
+<div class="contenedorP">
+  <div class="sobremontado">
+    <div>
+        <span class="institution">
+          <span><mat-icon>groups</mat-icon> </span>
+          <span class="institution-name">Asignación Comisión de Evaluación</span>
+        </span>
+    </div>
+  </div>
+
+
+  <div class="area-busqueda">
+    <input type="text" matInput (keyup)="applyFilter($event)" placeholder="Buscar..." #input style="
+    padding: 8px;" />
+  </div>
+
+  <div class="mat-elevation-z8">
+    <table mat-table matSort [dataSource]="dataSource" matSort>
+
+      <!-- Nro Column -->
+      <ng-container matColumnDef="Nro" class="Column1">
+        <th class="Column1 negrita" mat-header-cell *matHeaderCellDef mat-sort-header> Nro </th>
+        <td class="Column1" mat-cell *matCellDef="let i = index"> {{ i+1 }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Codigo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Codigo </th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          {{ dato.uzytavproyec_codigo }}
+        </td>
+      </ng-container>
+
+      <!-- Nombre Institución Column -->
+      <ng-container matColumnDef="Nombre" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
+          Nombre </th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          {{ dato.uzytavproyec_nombre }}
+        </td>
+      </ng-container>
+
+
+
+      <ng-container matColumnDef="Director" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Campus</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          {{dato.nombres$ | async }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Campus" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Campus</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          {{dato.campus$ | async }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Departamento" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Departamento</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          {{ dato.departamento$ | async }}
+        </td>
+      </ng-container>
+
+      <!-- Tipo Column -->
+      <ng-container matColumnDef="Tipo" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Tipo </th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <ng-container [ngSwitch]="dato.uzytavproyec_tipo_proy">
+            <span *ngSwitchCase="'C'">Permanente</span>
+            <span *ngSwitchCase="'I'">No Permanente</span>
+          </ng-container>
+        </td>
+      </ng-container>
+      <!-- Representante Column -->
+      <ng-container matColumnDef="Seleccione" class="Column">
+        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>Seleccione</th>
+        <td class="Column" mat-cell *matCellDef="let dato">
+          <button mat-icon-button color="primary" (click)="editar(dato.uzytavproyec_id)">
+            <mat-icon>check_circle</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[10, 20, 40, 60]"></mat-paginator>
+  </div>
+</div>

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

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

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

+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { Proyectos } from '../../../Models/proyectos';
+import { ProyectosService } from '../../../services/proyectos/proyectos.service';
+import { MostrarOcultarService } from '../../../services/mostrar-ocultar.service';
+import { Compartir_idService } from '../../../services/compartir_id/compartir_id.service';
+import { Usuario } from '../../../Models/usuario';
+import { UsuariosService } from '../../../services/usuarios/usuarios.service';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { DatosEspeService } from '../../../services/APIs Externas/Datos espe/datos-espe.service';
+
+
+@Component({
+  selector: 'vex-list-proyecto-asigna',
+  templateUrl: './list-proyecto-asigna.component.html',
+  styleUrls: ['./list-proyecto-asigna.component.css']
+})
+export class ListProyectoAsignaComponent implements OnInit {
+  usuario!: Usuario[];
+  proyecto: Proyectos;
+  proyectos!: Proyectos[];
+  enviarIdUsuario: Proyectos;
+  director: string;
+  displayedColumns: string[] = [
+    'Nro',
+    'Codigo',
+    'Nombre',
+    //'Estado',
+    'Director',
+    'Campus',
+    'Departamento',
+    'Tipo',
+    'Seleccione'
+  ];
+  dataSource: MatTableDataSource<Proyectos>;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  filtroGeneral: string = '';
+
+  constructor(
+    private router: Router,
+    private proyectosService: ProyectosService,
+    private datosUsuarioService: UsuariosService,
+    private mostrarOcultarService: MostrarOcultarService,
+    private compartirID: Compartir_idService,
+    private datosEspeService: DatosEspeService
+  ) {
+    this.proyecto = new Proyectos();
+    this.dataSource = new MatTableDataSource<Proyectos>([]);
+    this.enviarIdUsuario = new Proyectos()
+   }
+
+  ngOnInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.obtenerRegistros();
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  obtenerRegistros() {
+    this.proyectosService.obtenerParametros().subscribe(data => {
+      this.proyectos = data.map(proyecto => {
+        return {
+          ...proyecto,
+          departamento$: this.obtenerDatosDepartamento(proyecto.stvsubj_code),
+          campus$: this.obtenerDatosCampus(proyecto.stvcamp_code),
+          nombres$: this.obtenerDatosUsuario(proyecto.uzytusuario_id)
+
+        };
+      });
+      this.dataSource.data = this.proyectos.filter(item => !item.uzytavconvoca_id);
+    });
+  }
+
+  obtenerDatosCampus(codigo: string): Observable<string> {
+    return this.datosEspeService.obtenerCampus().pipe(
+      map(campus => {
+        const campusEncontrado = campus.find(c => c.codigo === codigo);
+        return campusEncontrado ? campusEncontrado.descripcion : 'No encontrado';
+      })
+    );
+  }
+
+  obtenerDatosDepartamento(codigo: string): Observable<string> {
+    return this.datosEspeService.obtenerDepartamentos().pipe(
+      map(departamentos => {
+        const departamentoEncontrado = departamentos.find(c => c.subj === codigo);
+        return departamentoEncontrado ? departamentoEncontrado.descripcion : 'No encontrado';
+      })
+    );
+  }
+
+  obtenerDatosUsuario(id: number): Observable<string> {
+    return this.datosUsuarioService.getAll().pipe(
+      map(data => {
+        const usuarioEncontrado = data.find(c => c.uzytusuario_id === id);
+        return usuarioEncontrado ? usuarioEncontrado.uzytusuario_telefono_celular + " - "
+        + usuarioEncontrado.uzytusuario_nombres + " " +
+        usuarioEncontrado.uzytusuario_apellidos : 'No encontrado';
+      })
+    );
+  }
+
+  editar(id: number) {
+    const registroSeleccionado = this.proyectos.find(
+      proyectoFind => proyectoFind.uzytavproyec_id === id
+    );
+    this.compartirID.setIdGuardad(id);
+    this.mostrarOcultarService.editProyecto = registroSeleccionado;
+    this.router.navigate(['main/AsinarC-proyecto/', id],
+      { queryParams: { idUsuarioTipo: "1" } }
+    );
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim();
+    this.filtroGeneral = filterValue.trim();
+
+    this.dataSource.filterPredicate = (data: Proyectos) => {
+      const Codigo = data.uzytavproyec_codigo ? data.uzytavproyec_codigo.toLowerCase() : '';
+      const Nombre = data.uzytavproyec_nombre ? data.uzytavproyec_nombre.toLowerCase() : '';
+
+
+      // Filtrar por todos los campos (nombre de institución, dirección, representante y parroquia)
+      return (
+        Codigo.includes(this.filtroGeneral.toLowerCase()) ||
+        Nombre.includes(this.filtroGeneral.toLowerCase())
+      );
+    };
+  }
+}

src/app/modules/main/pages/asignar comision/proyecto-asig/proyecto-asig.component.css

+/* Estilos para el formulario */
+.formulario {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 96%;
+  margin: 0 auto;
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+/* Estilos para la columna izquierda */
+.columna-izquierda {
+  width: 48%;
+  box-sizing: border-box;
+  padding-right: 2%;
+}
+
+/* Estilos para la columna derecha */
+.columna-derecha {
+  width: 48%;
+  box-sizing: border-box;
+  padding-left: 2%;
+}
+
+/* Estilos para los labels */
+label {
+  display: block;
+  margin-bottom: 8px;
+
+}
+
+h2 {
+  font-weight: bold;
+}
+
+
+/* Estilos para los inputs y selects */
+input[type="text"],
+select {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  background-color: transparent;
+  font-size: 16px;
+  margin-bottom: 16px;
+  transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus,
+select:focus {
+  outline: none;
+  border-color: #4caf50;
+}
+
+/* Estilos para los mensajes de error */
+.error-message {
+  color: red;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+/* Estilos para el botón */
+button[type="submit"] {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  background-color: #45a049;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: #45a049;
+}
+
+/* Estilos para el contenedor principal */
+.contenedor {
+  width: 96%;
+  margin-left: 2%;
+  margin-right: 2%;
+  margin-top: 10%;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  background-color: #ffffff;
+  position: relative;
+  z-index: 1;
+}
+
+/* Estilos para el contenedor del formulario */
+.contenedor-dos {
+  margin-top: 30px;
+  padding: 0.9375rem 20px;
+  position: relative;
+}
+
+/* Estilos para el título sobremontado */
+.sobremontado {
+  position: relative;
+  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;
+}
+
+.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 "+" */
+
+}
+
+/* Estilos para el icono de instituciones */
+.icono-instituciones {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 5px;
+  font-size: 20px;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+.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;
+
+}
+
+
+.mat-mdc-form-field+.mat-mdc-form-field {
+  margin-left: 8px;
+}
+
+.expanded {
+  transform: rotate(90deg);
+}
+
+.collapsed {
+  transform: rotate(0deg);
+}

src/app/modules/main/pages/asignar comision/proyecto-asig/proyecto-asig.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
+
+@Component({
+  selector: 'vex-proyecto-asig',
+  templateUrl: './proyecto-asig.component.html',
+  styleUrls: ['./proyecto-asig.component.css']
+})
+export class ProyectoAsigComponent implements OnInit {
+  contraccion = false;
+  mostraContraccion = false;
+  mostrarFormulario: boolean = false;
+  mostrarCober: boolean = false;
+  mostrarPLNBV: boolean = false;
+  mostrarPCP:boolean = false;
+  mostrarLineas: boolean = false;
+  mostrarPresupuestoDetallado: boolean = false;
+  mostrarEstra: boolean = false;
+
+
+  constructor(private router: Router,
+    private idCompartid: Compartir_idService) {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+
+  toggleContraccion() {
+    this.contraccion = !this.contraccion;
+    console.log('Valor de contraccion:', this.contraccion);
+  }
+
+  volver(){
+    this.router.navigate(['main/Asignar-Comision']);
+  }
+
+  cancelarFormulario() {
+    this.mostrarFormulario = false;
+  }
+  cancelarFormularioCobertura(){
+    this.mostrarCober = false;
+  }
+
+  cancelarLineasInvestigacion(){
+    this.mostrarLineas = false;
+  }
+
+  cancelarFormularioPLNBV(){
+    this.mostrarPLNBV = false;
+  }
+
+  cancelarFormularioPCP(){
+    this.mostrarPCP = false;
+  }
+
+  cancelarPresupuestoDetallado() {
+    this.mostrarPresupuestoDetallado = false;
+  }
+
+  cancelarEstrategia(){
+    this.mostrarEstra = false;
+  }
+}