|
|
@@ -0,0 +1,318 @@
|
|
|
+import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
|
|
|
+import { FormControl } from '@angular/forms';
|
|
|
+import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
|
|
|
+import { MatTableDataSource } from '@angular/material/table';
|
|
|
+import { CircularService } from '../../../Administrador/services/circular.service';
|
|
|
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
|
|
|
+import { DomSanitizer } from '@angular/platform-browser';
|
|
|
+import { EnviarInfoService } from '../../../Administrador/services/enviar-info.service';
|
|
|
+import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogClose, MatDialogContent } from '@angular/material/dialog';
|
|
|
+import { ModalTarea } from '../../../Profesor/pages/tareas/tareas.component';
|
|
|
+
|
|
|
+import * as XLSX from 'xlsx';
|
|
|
+
|
|
|
+import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
|
|
|
+import Swal from 'sweetalert2';
|
|
|
+import { TareasService } from '../../../Alumno/services/tareas.service';
|
|
|
+
|
|
|
+@Component({
|
|
|
+ selector: 'app-tareas',
|
|
|
+ templateUrl: './tareas.component.html',
|
|
|
+ styleUrl: './tareas.component.css',
|
|
|
+ providers: [provideNativeDateAdapter(),
|
|
|
+ { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
|
+ ]
|
|
|
+})
|
|
|
+export class TareasComponent {
|
|
|
+ public checked = false;
|
|
|
+ public isLoading: boolean = true;
|
|
|
+ public searchInput = new FormControl('');
|
|
|
+ public color: string = '';
|
|
|
+ public textColor: string = '';
|
|
|
+ public columnas: string[] = ['titulo', 'materia', 'tipoTarea', 'fechaPub', 'fechaEntrega', 'enlaces', 'adjuntos', 'asignado_por', 'acciones'];
|
|
|
+ public dataSource = new MatTableDataSource<any>();
|
|
|
+ private userData = JSON.parse(localStorage.getItem('userData') || '[]');
|
|
|
+ private userDataS = JSON.parse(localStorage.getItem('userDataS') || '[]');
|
|
|
+ @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
|
|
|
+ @ViewChild('TABLE') table!: ElementRef;
|
|
|
+
|
|
|
+ constructor(
|
|
|
+ private circularService: CircularService,
|
|
|
+ private sanitizer: DomSanitizer,
|
|
|
+ private tareasService: TareasService,
|
|
|
+ private _MatIconRegister: MatIconRegistry,
|
|
|
+ private _DomSanitizer: DomSanitizer,
|
|
|
+ private paginatorIntl: MatPaginatorIntl,
|
|
|
+ private _enviarInfo: EnviarInfoService,
|
|
|
+ public dialog: MatDialog
|
|
|
+ ) {
|
|
|
+ this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));
|
|
|
+ //paginador de tabla a español
|
|
|
+ const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {
|
|
|
+ if (length === 0 || pageSize === 0) {
|
|
|
+ return `0 de ${length}`;
|
|
|
+ }
|
|
|
+ length = Math.max(length, 0);
|
|
|
+ const startIndex = page * pageSize;
|
|
|
+ const endIndex = startIndex < length ?
|
|
|
+ Math.min(startIndex + pageSize, length) :
|
|
|
+ startIndex + pageSize;
|
|
|
+ return `${startIndex + 1} - ${endIndex} de ${length}`;
|
|
|
+ };
|
|
|
+ this.paginatorIntl.nextPageLabel = "Siguiente";
|
|
|
+ this.paginatorIntl.previousPageLabel = "Anterior";
|
|
|
+ this.paginatorIntl.firstPageLabel = "Ir a la primer página";
|
|
|
+ this.paginatorIntl.lastPageLabel = "Ir a la última página";
|
|
|
+ this.paginatorIntl.itemsPerPageLabel = "Registros por página";
|
|
|
+ this.paginatorIntl.getRangeLabel = spanishRangeLabel;
|
|
|
+ }
|
|
|
+
|
|
|
+ ngOnInit(): void {
|
|
|
+ this._enviarInfo.currentTextColor.subscribe(textColor => {
|
|
|
+ this.textColor = textColor;
|
|
|
+ });
|
|
|
+ this._enviarInfo.currentColor.subscribe(color => {
|
|
|
+ this.color = color;
|
|
|
+ });
|
|
|
+
|
|
|
+ //suscribirse al subject que manda al servicio
|
|
|
+ this._enviarInfo.tabla$.subscribe(() => {
|
|
|
+ this.getTareas();
|
|
|
+ });
|
|
|
+
|
|
|
+ this.getTareas()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ openDialog(circular: any) {
|
|
|
+ this.dialog.open(TareaAlumComponent, {
|
|
|
+ data: { titulo: circular.tituloTarea, contenido: this.sanitizer.bypassSecurityTrustHtml(circular.descripcionTarea) }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ completarTarea(idTarea: any) {
|
|
|
+ const data = {
|
|
|
+ idTarea: idTarea,
|
|
|
+ idUsuario: this.userDataS[0] ? this.userDataS[0] : this.userData[0]
|
|
|
+ };
|
|
|
+
|
|
|
+ Swal.fire({
|
|
|
+ title: '¿Quieres cambiar el estado de la tarea?',
|
|
|
+ text: 'Se marcará o desmarcará como completada.',
|
|
|
+ icon: 'question',
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText: 'Sí, cambiar estado',
|
|
|
+ cancelButtonText: 'Cancelar',
|
|
|
+ confirmButtonColor: '#3085d6',
|
|
|
+ cancelButtonColor: '#d33'
|
|
|
+ }).then((result) => {
|
|
|
+ if (result.isConfirmed) {
|
|
|
+ this.tareasService.completarTarea(data).subscribe({
|
|
|
+ next: (response: any) => {
|
|
|
+ Swal.fire({
|
|
|
+ title: '¡Hecho!',
|
|
|
+ text: response.mensaje,
|
|
|
+ icon: 'success',
|
|
|
+ timer: 1500,
|
|
|
+ showConfirmButton: false
|
|
|
+ });
|
|
|
+ this.getTareas(); // Actualiza la lista
|
|
|
+ },
|
|
|
+ error: (err) => {
|
|
|
+ Swal.fire({
|
|
|
+ title: 'Error',
|
|
|
+ text: 'No se pudo cambiar el estado de la tarea.',
|
|
|
+ icon: 'error'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ public allInfo: any;
|
|
|
+ public files: any;
|
|
|
+ public urls: any = [];
|
|
|
+ //Traer la información y mostrarla en la tabla
|
|
|
+ getTareas() {
|
|
|
+ this.tareasService.getAllTareas().subscribe((response: any) => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ this.allInfo = response.map((tarea: any) => {
|
|
|
+ // separar los vinculos en un arreglo de objetos con nombre
|
|
|
+ if (tarea.vinculoTarea) {
|
|
|
+ tarea.vinculoTareaArray = tarea.vinculoTarea.split("||").map((url: string, index: number) => {
|
|
|
+ return { nombre: url, url: url };
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ tarea.vinculoTareaArray = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (tarea.adjuntoTarea) {
|
|
|
+ tarea.adjuntoTarea = JSON.parse(tarea.adjuntoTarea);
|
|
|
+ } else {
|
|
|
+ tarea.adjuntoTarea = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ return tarea;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ this.dataSource = new MatTableDataSource<any>(this.allInfo);
|
|
|
+ this.dataSource.paginator = this.paginator;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ buscarArchivo(ruta: string) {
|
|
|
+ // console.log("🚀 ~ TareasComponent ~ buscarArchivo ~ ruta:", ruta)
|
|
|
+ window.open(ruta, '_blank');
|
|
|
+ }
|
|
|
+
|
|
|
+ //filtro de búsqueda
|
|
|
+ applyFilter(event: Event) {
|
|
|
+ const filterValue = (event.target as HTMLInputElement).value;
|
|
|
+ this.dataSource.filter = filterValue.trim().toLowerCase();
|
|
|
+ }
|
|
|
+
|
|
|
+ filtroSeleccionado: string = '';
|
|
|
+ materias: any[] = [];
|
|
|
+ fechaSeleccionada: Date | null = null;
|
|
|
+ materiaSeleccionada: any = null;
|
|
|
+
|
|
|
+ onFiltroChange(valor: string): void {
|
|
|
+ // Actualiza el filtro seleccionado
|
|
|
+ this.filtroSeleccionado = valor;
|
|
|
+
|
|
|
+ // Limpia valores previos
|
|
|
+ this.fechaSeleccionada = null;
|
|
|
+ this.materiaSeleccionada = null;
|
|
|
+
|
|
|
+ // Limpia tabla (opcional)
|
|
|
+ this.dataSource.data = this.allInfo;
|
|
|
+
|
|
|
+ // Si se selecciona MAT, carga materias recientes
|
|
|
+ if (valor === 'MAT') {
|
|
|
+ this.cargarMaterias();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ cargarMaterias(): void {
|
|
|
+ const userId = this.userDataS[0] ? this.userDataS[0] : this.userData[0];
|
|
|
+
|
|
|
+ this.tareasService.getMaterias30Dias(userId).subscribe(
|
|
|
+ (response: any) => {
|
|
|
+ this.materias = response;
|
|
|
+ console.log('Materias de últimos 30 días:', this.materias);
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ console.error('Error al cargar materias:', error);
|
|
|
+ this.materias = []; // fallback
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ onFechaSeleccionada(event: any): void {
|
|
|
+
|
|
|
+ this.fechaSeleccionada = event.value;
|
|
|
+ if (!this.fechaSeleccionada) return;
|
|
|
+ const fechaFormateada = this.formatFecha(this.fechaSeleccionada);
|
|
|
+ console.log('📅 Fecha seleccionada:', fechaFormateada);
|
|
|
+
|
|
|
+ if (!this.filtroSeleccionado) return;
|
|
|
+
|
|
|
+ // Mostrar loader
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ // Llamar al servicio correspondiente
|
|
|
+ if (this.filtroSeleccionado === 'FE') {
|
|
|
+ // Fecha de entrega
|
|
|
+ this.tareasService.getByFechaEntrega(fechaFormateada, this.userDataS[0] ? this.userDataS[0] : this.userData[0]).subscribe((response: any) => {
|
|
|
+ this.actualizarTabla(response);
|
|
|
+ });
|
|
|
+ } else if (this.filtroSeleccionado === 'FA') {
|
|
|
+ // Fecha de asignación
|
|
|
+ this.tareasService.getByFechaAsignacion(fechaFormateada, this.userDataS[0] ? this.userDataS[0] : this.userData[0]).subscribe((response: any) => {
|
|
|
+ this.actualizarTabla(response);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMateriaSeleccionada(idMateria: any): void {
|
|
|
+ this.materiaSeleccionada = idMateria;
|
|
|
+ console.log('📘 Materia seleccionada:', idMateria);
|
|
|
+
|
|
|
+ if (!idMateria) return;
|
|
|
+
|
|
|
+ this.isLoading = true;
|
|
|
+ this.tareasService.getByMateria(idMateria).subscribe((response: any) => {
|
|
|
+ this.actualizarTabla(response);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ private actualizarTabla(response: any): void {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ this.dataSource = new MatTableDataSource<any>(
|
|
|
+ response.map((tarea: any) => {
|
|
|
+ tarea.vinculoTareaArray = tarea.vinculoTarea
|
|
|
+ ? tarea.vinculoTarea.split("||").map((url: string) => ({ nombre: url, url }))
|
|
|
+ : [];
|
|
|
+ tarea.adjuntoTarea = tarea.adjuntoTarea ? JSON.parse(tarea.adjuntoTarea) : [];
|
|
|
+ return tarea;
|
|
|
+ })
|
|
|
+ );
|
|
|
+ this.dataSource.paginator = this.paginator;
|
|
|
+ }
|
|
|
+
|
|
|
+ private formatFecha(fecha: Date): string {
|
|
|
+ // Devuelve formato YYYY-MM-DD
|
|
|
+ const year = fecha.getFullYear();
|
|
|
+ const month = String(fecha.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(fecha.getDate()).padStart(2, '0');
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // openDialog1(id: string) {
|
|
|
+ // const dialogRef = this.dialog.open(ModalCircular, {
|
|
|
+ // autoFocus: false
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+ // dialogRef.componentInstance.setData(id);
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // openDialogEdit(circular: any) {
|
|
|
+ // console.log("🚀 ~ CircularesComponent ~ openDialogEdit ~ circular:", circular)
|
|
|
+ // const dialogRef = this.dialog.open(ModalCircularesEdit, {
|
|
|
+ // autoFocus: false,
|
|
|
+ // data: circular
|
|
|
+ // });
|
|
|
+
|
|
|
+ // dialogRef.componentInstance.circularActualizada.subscribe(() => {
|
|
|
+ // this.getCirculares();
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@Component({
|
|
|
+ selector: 'App-circularAlumno-component',
|
|
|
+ templateUrl: './modalTarea.component.html',
|
|
|
+ styleUrls: ['./tareas.component.css'],
|
|
|
+ standalone: true,
|
|
|
+ imports: [MatIconModule, MatDialogContent, MatDialogActions, MatDialogClose]
|
|
|
+})
|
|
|
+export class TareaAlumComponent {
|
|
|
+ constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
|
|
|
+ }
|
|
|
+}
|
