Enhance ModalCirculares: Add multi-select for 'audiencia', implement URL management, and update form layout

Front/src/app/modules/Administrador/components/button-dialog/ModalCirculares.component.html

@@ -22,8 +22,12 @@
 
       <mat-form-field class="item">
         <mat-label>Audiencia</mat-label>
-        <mat-select name="audiencia" formControlName="audiencia" (selectionChange)="onAudienciaChange($event.value)">
-          <mat-option *ngFor="let option of audiencia" [value]="option.value">{{option.audiencia}}</mat-option>
+        <mat-select name="audiencia" formControlName="audiencia" (selectionChange)="onAudienciaChange($event.value)"
+          multiple>
+          <mat-option *ngFor="let option of audiencia" [value]="option.value"
+            [disabled]="selectedAudiencia.includes('TD') && option.value !== 'TD'">
+            {{option.audiencia}}
+          </mat-option>
         </mat-select>
         <mat-hint *ngIf="isValidField('audiencia', 'required')" style="color: red;">El campo es obligatorio</mat-hint>
       </mat-form-field>
@@ -55,7 +59,7 @@
         <div class="responsive">
           <div class="flex-col">
             <label for="fechaInicio">Fecha Inicio</label>
-            <div>
+            <div style="display: flex;">
               <mat-form-field class="w-responsive">
                 <mat-label>Desde</mat-label>
                 <input matInput [matDatepicker]="pickerStart" [min]="todayDate" name="fechaInicio" id="fechaInicio"
@@ -82,9 +86,17 @@
               </mat-form-field>
             </div>
           </div>
+
+        </div>
+
+      </div>
+
+      <!-- Campo Fecha fin -->
+      <div class="item">
+        <div class="responsive">
           <div class="flex-col ml-20">
             <label for="fechaInicio">Fecha Final</label>
-            <div>
+            <div style="display: flex;">
               <mat-form-field class="w-responsive">
                 <mat-label>Desde</mat-label>
                 <input matInput [matDatepicker]="pickerStart1" [min]="todayDate" name="fechaCaducidad"
@@ -113,13 +125,12 @@
 
           </div>
         </div>
-
       </div>
 
 
       <!-- Sección de file uploader -->
 
-      <div class="item flex-col">
+      <div class="item flex-col two-columns">
 
         <input type="file" class="file-input" (change)="onFilesSelected($event)" #fileUpload multiple>
 
@@ -162,6 +173,43 @@
         </div>
       </div>
 
+      <div class="item two-columns"
+        style="display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
+        <!-- Input y botón en la misma fila -->
+        <div style="display: flex; align-items: center; width: 100%; gap: 10px; padding: 0 20px;">
+          <mat-form-field style="flex: 1;">
+            <mat-label>Link</mat-label>
+            <input matInput name="link" formControlName="link" placeholder="URL">
+            <mat-icon matSuffix>link</mat-icon>
+          </mat-form-field>
+
+          <button (click)="addUrl()" type="button"
+            style="background-color: #3f51b5; border-radius: 50%; border: none; color: white; font-size: 24px; height: 40px; width: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
+            +
+          </button>
+        </div>
+
+        <!-- Listado de urls -->
+        <div *ngIf="urls.length > 0"
+          style="margin-top: 10px; padding-top: 10px; width: 100%; padding-left: 20px; max-height: 150px; overflow-y: auto; border: 1px solid #ccc; border-radius: 8px; padding-right: 10px;">
+          <span style="margin-bottom: 10px;">Listado de archivos:</span>
+          <ul style="margin: 0; padding: 0;">
+            <li *ngFor="let url of urls; let i = index"
+              style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
+              <a [href]="url" target="_blank" style="word-break: break-word; flex: 1;">{{ url }}</a>
+              <button class="btnDelete" type="button" (click)="deleteUrl(i)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </li>
+          </ul>
+        </div>
+
+
+      </div>
+
+
+
+
 
     </div>
     <div class="NgxEditor__Wrapper" style="min-height: 200px; height: auto;">

Front/src/app/modules/Administrador/components/button-dialog/button-dialog.component.css

@@ -220,17 +220,21 @@
 }
 
 .form-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
+  gap: 10px; /* espacio entre columnas y filas */
 }
 
 .item {
-  flex: 1 0 25%;
   box-sizing: border-box;
   padding: 10px;
 }
 
+.item.two-columns {
+  grid-column: span 2;
+}
+
+
 .w-responsive {
   width: 160px;
 }

Front/src/app/modules/Administrador/components/button-dialog/button-dialog.component.ts

@@ -738,6 +738,7 @@ export class ModalCirculares {
     { value: 'PF', audiencia: 'Padre de Familia' },
     { value: 'AD', audiencia: 'Administradores' },
     { value: 'PR', audiencia: 'Profesores' },
+    { value: 'TD', audiencia: 'Todos los usuarios' },
   ]
 
   importancia = [
@@ -748,10 +749,22 @@ export class ModalCirculares {
   public opciones: any;
   public roles = ['Administradores', 'Padres'];
   public originales: any;
-  onAudienciaChange(value: string) {
+
+  public selectedAudiencia: string[] = [];
+
+  onAudienciaChange(value: string[]) {
     let extra = {};
 
-    switch (value) {
+    this.selectedAudiencia = value;
+    if (value.includes('TD')) {
+      // Si selecciona TD, solo deja TD seleccionado
+      this.form.get('audiencia')?.setValue(['TD']);
+      this.selectedAudiencia = ['TD'];
+    }
+
+    console.log('Valor seleccionado:', value);
+
+    switch (value[0]) {
       case 'AL':
         extra = {
           name: 'Alumnos',
@@ -847,7 +860,7 @@ export class ModalCirculares {
 
   public form = new FormGroup({
     titulo: new FormControl<string>('', Validators.required),
-    audiencia: new FormControl<string>('', Validators.required),
+    audiencia: new FormControl<string[]>([''], Validators.required),
     destinos: new FormControl<string>('', Validators.required),
     contenido: new FormControl<string>('', Validators.required),
     importancia: new FormControl<string>('', Validators.required),
@@ -855,6 +868,7 @@ export class ModalCirculares {
     horaInicio: new FormControl<any>(null, Validators.required),
     fechaCaducidad: new FormControl<any>(null, [Validators.required, this.validatefechaCaducidad.bind(this)]),
     horaCaducidad: new FormControl<any>(null, Validators.required),
+    link: new FormControl<string>('')
   });
 
   validateFechaInicio(control: AbstractControl): ValidationErrors | null {
@@ -896,6 +910,15 @@ export class ModalCirculares {
     return control?.hasError(errorType) && control?.touched;
   }
 
+  public urls: any = []
+
+  addUrl() {
+    const link = this.form.get('link')?.value;
+    this.urls.push(link);
+    this.form.get('link')?.setValue('');
+    console.log(this.urls);
+  }
+
 
   Evaluar(event: any) {
     this.valoresCombinados = {
@@ -945,8 +968,11 @@ export class ModalCirculares {
       fechaCreacion: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
       fechaPublicacion: fechaHoraInicio,
       fechaCaducidad: fechaHoraCaducidad,
-      idUsuario: this.userData[0]
+      idUsuario: this.userData[0],
+      urls: this.urls.join('||')
     };
+
+
     this.valoresCombinados = {
       Audiencia: this.form.get('audiencia')?.value,
       ...this.valoresCombinados
@@ -1042,6 +1068,12 @@ export class ModalCirculares {
     }
   }
 
+  deleteUrl(i: number) {
+    if (i !== -1) {
+      this.urls.splice(i, 1);
+    }
+  }
+
 
 
 
@@ -1068,6 +1100,8 @@ export class ModalCirculares {
     this.Evaluar(this.form.get('destinos')?.value)
     this.convertToDatetime()
 
+    console.log(this.info);
+
     Swal.fire({
       title: 'Cargando...',
       allowOutsideClick: false,