Se agrega implementacion notificaciones

README.md

@@ -1,27 +1,61 @@
-# Zeta
+# Entrevistador Inteligente
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.4.
+Entrevistador Inteligente es una plataforma que utiliza inteligencia artificial para ayudar a los usuarios a prepararse para entrevistas laborales de manera efectiva. Los usuarios pueden cargar su currículum vitae y completar un formulario que incluye la descripción del trabajo y el nombre de la empresa a la que desean postularse.
 
-## Development server
+## Instalación
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Instrucciones sobre cómo instalar el proyecto y configurar el entorno de desarrollo.
 
-## Code scaffolding
+1. **Prerrequisitos**: 
+- Asegúrate de tener instalado Node.js versión 20 en adelante. Puedes descargarlo [aquí](https://nodejs.org/). 
+- Además, necesitarás tener Angular CLI instalado globalmente. Si aún no lo tienes, puedes instalarlo ejecutando el siguiente comando: 
+  `npm install -g @angular/cli`.
+2. Clona el repositorio: `git clone https://github.com/EntrevistadorInteligente/landing-entrevistador.git`
+3. Instala las dependencias: `npm install`
+4. Ejecuta el proyecto: `npm start`
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Contribución
 
-## Build
+Si deseas contribuir a este proyecto, sigue estos pasos:
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+1. Haz un fork del repositorio
+2. Crea una nueva rama con tu nombre ejemplo, frailejon: `git checkout -b feature/frailejon`
+3. Realiza tus cambios y haz commits: `git commit -m 'Añade una nueva característica'`
+4. Sube tus cambios: `git push origin feature/frailejon`
+5. Envía una solicitud de extracción (Pull Request)
 
-## Running unit tests
+Por favor, asegúrate de seguir nuestras pautas de contribución.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Estructura del Proyecto
 
-## Running end-to-end tests
+Este proyecto sigue una estructura organizativa específica para mantener una arquitectura limpia y modular. A continuación se detalla la organización de carpetas y los componentes principales en cada una:
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
-## Further help
+## Tecnologías Utilizadas
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+- Angular: Framework de desarrollo de aplicaciones web.
+- PrimeNG: Biblioteca de componentes de UI para Angular.
+- Bootstrap 5: Framework de diseño front-end para desarrollo web moderno.
+
+### Dependencias
+
+- Angular CLI: Herramienta de línea de comandos para Angular.
+- PrimeIcons: Iconos adicionales para PrimeNG.
+- ngx-bootstrap: Librería de componentes Bootstrap para Angular.
+- angular-oauth2-oidc: Librería para la autenticación y autorización utilizando OAuth 2.0 y OpenID Connect en aplicaciones Angular.
+
+## Estado del Proyecto
+
+Entrevistador Inteligente se encuentra en desarrollo activo y se están agregando nuevas funcionalidades y mejoras continuamente.
+
+## Contribución
+
+¡Apreciamos cualquier contribución al proyecto!
+
+## Licencia
+
+Este proyecto es de código abierto.
+
+## Contacto y Soporte
+
+Si tienes alguna pregunta o necesitas ayuda, no dudes en ponerte en contacto con nosotros a través de [Discord](https://discord.com/invite/AkR67b88YP)

karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/zeta'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

src/app/components/inicio/home/home-interview-preview/home-interview-preview.component.html

@@ -0,0 +1,119 @@
+<h1 class="title">Muestra de ejemplos de Entrevistas</h1>
+@if (stateEntrevista !== StateEnum.show) {
+  <div class="container text-center mb-3">
+    <p-dropdown
+      *ngIf="perfiles$ | async as perfiles"
+      [(ngModel)]="selectedPerfil"
+      optionLabel="perfilEmpresa"
+      [showClear]="true"
+      placeholder="Seleccionar Perfiles"
+      [options]="(perfiles$ | async)!"
+    ></p-dropdown>
+    <button
+      type="button"
+      class="btn mb-2 ms-3"
+      [class.disabled]="!selectedPerfil"
+      [attr.disabled]="!selectedPerfil ? true : null"
+      (click)="onCargarPreguntas($event)"
+    >
+      <span class="fw-bold" style="color: white">Empezar</span>
+    </button>
+  </div>
+}
+<div class="preguntas_preview">
+  @switch (iniciandoMuestra) {
+    @case (stateEntrevista === StateEnum.load) {
+      @if (stateEntrevista === StateEnum.load) {
+        <div class="carga_preguntas">
+          <p-progressSpinner ariaLabel="loading text-center" />
+        </div>
+      }
+    }
+    @case (stateEntrevista === StateEnum.show) {
+      <p-tabView class="preguntas_content">
+        <p-tabPanel
+          *ngFor="let pregunta of preguntasMuestra; let i = index"
+          [header]="'Pregunta ' + (i + 1)"
+        >
+          <p>
+            <strong style="color: #4b5563 !important">{{
+              pregunta.pregunta
+            }}</strong>
+          </p>
+          <p style="color: #4b5563 !important">Respuesta:</p>
+          <textarea
+            rows="5"
+            cols="30"
+            class="form-control mb-2"
+            pInputTextarea
+            placeholder="Respuesta"
+            [(ngModel)]="preguntasMuestra[i].respuesta"
+          >
+          </textarea>
+          <div class="alert info" role="alert">
+            <div></div>
+            <strong>Feedback: </strong>{{ pregunta.feedback }}
+          </div>
+        </p-tabPanel>
+      </p-tabView>
+      <button
+        type="button"
+        class="btn mb-2 ms-3"
+        label="Enviar"
+        (click)="submitAnswers()"
+      >
+        <span class="fw-bold" style="color: white">Enviar</span>
+      </button>
+
+      <p-dialog
+        [(visible)]="display"
+        [breakpoints]="{ '960px': '75vw', '640px': '100vw' }"
+        modal="true"
+        [style]="{ width: '50vw' }"
+      >
+        <ng-template pTemplate="header">
+          ¡Prueba el Servicio Gratis!
+        </ng-template>
+        <div>
+          <img
+            src="assets/img/Logo-EI.png"
+            style="display: block; margin: auto; width: 35%"
+            alt="Logo"
+          />
+        </div>
+        <div class="mt-2 d-flex justify-content-center">
+          <span class="fw-bold"
+            >Inicia sesión para obtener una entrevista y feedback
+            personalizado</span
+          >
+        </div>
+
+        <ng-template pTemplate="footer">
+          <button
+            type="button"
+            class="btn btn-success mb-2 ms-3"
+            label="Enviar"
+            (click)="login()"
+          >
+            <span class="fw-bold" style="color: white">
+              <i
+                class="bi bi-box-arrow-in-right mr-2"
+                style="font-size: 1.2rem"
+              ></i
+              >Iniciar Sesión</span
+            >
+          </button>
+        </ng-template>
+      </p-dialog>
+    }
+    @case (stateEntrevista === StateEnum.error) {
+      <div class="alert error" role="alert">
+        <div></div>
+        <strong
+          >No se encontro información en este perfil, intentelo más tarde
+        </strong>
+      </div>
+    }
+    @default {}
+  }
+</div>

src/app/components/inicio/home/home-interview-preview/home-interview-preview.component.scss

@@ -0,0 +1,38 @@
+
+.preguntas_preview {
+    display: block;
+    margin: auto;
+  }
+
+  .carga_preguntas{
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (min-width: 576px) and (max-width: 767.98px) {
+    .preguntas_preview {
+        width: 95vw;
+    }
+  }
+
+  /* Tabletas y teléfonos en modo horizontal */
+  @media (min-width: 768px) and (max-width: 991.98px) {
+    .preguntas_preview {
+      width: 90vw;
+    }
+  }
+
+  /* Tabletas grandes y pantallas pequeñas de laptops */
+  @media (min-width: 992px) and (max-width: 1199.98px) {
+    .preguntas_preview {
+      width: 70vw;
+    }
+  }
+
+  /* Laptops grandes y pantallas de escritorio */
+  @media (min-width: 1200px) {
+    .preguntas_preview {
+      width: 60vw;
+    }
+  }
+

src/app/components/inicio/home/home-interview-preview/home-interview-preview.component.spec.ts

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

src/app/components/inicio/home/home-interview-preview/home-interview-preview.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable, map, shareReplay } from 'rxjs';
+import { StatePreguntas } from 'src/app/shared/model/entrevista-muestra-enums';
+import { FeedbackComentarioDto } from 'src/app/shared/model/feedback-dto';
+import { AuthService } from 'src/app/shared/services/auth/auth.service';
+import { FeedbackService } from 'src/app/shared/services/domain/feedback.service';
+import { IntegradorService } from 'src/app/shared/services/domain/integrador.service';
+
+@Component({
+  selector: 'app-home-interview-preview',
+  templateUrl: './home-interview-preview.component.html',
+  styleUrls: [
+    './home-interview-preview.component.scss',
+    '../home/home.component.scss',
+  ],
+})
+export class HomeInterviewPreviewComponent implements OnInit {
+  public StateEnum = StatePreguntas;
+  stateEntrevista = StatePreguntas.off;
+  perfiles$!: Observable<any[]>;
+  preguntasMuestra: FeedbackComentarioDto[] = [];
+  display: boolean = false;
+  previoFeedback: FeedbackComentarioDto[] = [];
+  selectedPerfil?: any;
+  iniciandoMuestra: boolean = false;
+
+  constructor(
+    private integradorService: IntegradorService,
+    private feedbackService: FeedbackService,
+    private authService: AuthService,
+  ) {}
+
+  ngOnInit() {
+    this.cargarListaPerfiles();
+  }
+
+  cargarListaPerfiles(): void {
+    this.perfiles$ = this.integradorService.listPerfiles().pipe(
+      map((perfil) => perfil),
+      shareReplay(1),
+    );
+  }
+
+  onCargarPreguntas(event?: Event): void {
+    this.iniciandoMuestra = true;
+    this.stateEntrevista = StatePreguntas.load;
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (this.selectedPerfil) {
+      this.feedbackService
+        .obtenerMuestraPreguntas(this.selectedPerfil.perfilEmpresa)
+        .subscribe({
+          next: (response: FeedbackComentarioDto[]) => {
+            this.preguntasMuestra = response;
+            this.stateEntrevista =
+              response.length == 0 ? StatePreguntas.error : StatePreguntas.show;
+            this.previoFeedback = response.map((p) => {
+              return {
+                idPregunta: p.idPregunta,
+                pregunta: p.pregunta,
+                respuesta: '',
+                feedback: '',
+              };
+            });
+          },
+          error: (error) => {
+            console.error(error);
+            this.stateEntrevista = StatePreguntas.error;
+          },
+        });
+    }
+  }
+  submitAnswers(event?: Event): void {
+    this.display = true;
+  }
+  login(): void {
+    this.authService.login();
+  }
+}