refs #731. Added exception UX

ogWebconsole/src/app/components/calendar/calendar.component.html

@@ -23,12 +23,6 @@
         </mat-icon>
       </ng-container>
 
-      <ng-container *ngIf="column.columnDef === 'downloadUrl'">
-      <span matTooltip="{{ image.downloadUrl }}">
-        {{ image.downloadUrl ? image.downloadUrl.substring(0, 20) + '...' : '' }}
-      </span>
-      </ng-container>
-
       <ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
         {{ column.cell(image) }}
       </ng-container>
@@ -40,7 +34,8 @@
     <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
     <td mat-cell *matCellDef="let calendar" style="text-align: center;">
       <button mat-icon-button color="primary" (click)="editCalendar(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="primary" (click)="sync(calendar)"><mat-icon>sync</mat-icon></button>
+      <button *ngIf="!syncUds" mat-icon-button color="primary" (click)="sync(calendar)"><mat-icon>sync</mat-icon></button>
+      <button *ngIf="syncUds" mat-icon-button color="primary"><mat-spinner diameter="24"></mat-spinner></button>
       <button mat-icon-button color="warn" (click)="deleteCalendar(calendar)" i18n="@@buttonDelete"><mat-icon>delete</mat-icon></button>
     </td>
   </ng-container>

ogWebconsole/src/app/components/calendar/calendar.component.ts

@@ -29,21 +29,27 @@ export class CalendarComponent implements OnInit {
   alertMessage: string | null = null;
   readonly panelOpenState = signal(false);
   datePipe: DatePipe = new DatePipe('es-ES');
+  syncUds: boolean = false;
   columns = [
     {
       columnDef: 'id',
       header: 'ID',
-      cell: (user: any) => `${user.id}`,
+      cell: (remoteCalendar: any) => `${remoteCalendar.id}`,
     },
     {
       columnDef: 'name',
       header: 'Nombre',
-      cell: (user: any) => `${user.name}`
+      cell: (remoteCalendar: any) => `${remoteCalendar.name}`
+    },
+    {
+      columnDef: 'rulesLength',
+      header: 'Nº de reglas',
+      cell: (remoteCalendar: any) => `${remoteCalendar.remoteCalendarRules.length}`
     },
     {
       columnDef: 'createdAt',
       header: 'Fecha de creación',
-      cell: (user: any) => `${this.datePipe.transform(user.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
+      cell: (remoteCalendar: any) => `${this.datePipe.transform(remoteCalendar.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
     }
   ];
   displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
@@ -88,6 +94,20 @@ export class CalendarComponent implements OnInit {
 
   sync(calendar: any): void {
     console.log('Syncing calendars');
+    this.syncUds = true;
+    this.http.post(`${this.apiUrl}/${calendar.uuid}/sync-uds`, {}).subscribe({
+      next: () => {
+        console.log('Calendars synced successfully');
+        this.toastService.success('Calendarios sincronizados correctamente');
+        this.search();
+        this.syncUds = false;
+      },
+      error: (error) => {
+        console.error('Error al sincronizar los calendarios:', error);
+        this.toastService.error(error.error['hydra:description']);
+        this.syncUds = false;
+      }
+    });
   }
 
   editCalendar(calendar: any): void {

ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html

@@ -17,16 +17,15 @@
       </div>
     </div>
 
-
     <div class="time-fields">
       <mat-form-field appearance="fill" class="time-field">
         <mat-label>Hora de inicio</mat-label>
-        <input matInput [(ngModel)]="busyFromHour" type="time" placeholder="Selecciona la hora de inicio">
+        <input matInput [(ngModel)]="busyFromHour" type="time" placeholder="Selecciona la hora de inicio" [required]="!isRemoteAvailable">
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="time-field">
         <mat-label>Hora de fin</mat-label>
-        <input matInput [(ngModel)]="busyToHour" type="time" placeholder="Selecciona la hora de fin">
+        <input matInput [(ngModel)]="busyToHour" type="time" placeholder="Selecciona la hora de fin" [required]="!isRemoteAvailable">
       </mat-form-field>
     </div>
   </div>
@@ -34,19 +33,19 @@
   <div *ngIf="isRemoteAvailable" class="form-group">
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Razón</mat-label>
-      <input matInput [(ngModel)]="availableReason" placeholder="Razon para la excepción">
+      <input matInput [(ngModel)]="availableReason" placeholder="Razon para la excepción" [required]="isRemoteAvailable">
     </mat-form-field>
     <div class="time-fields">
       <mat-form-field appearance="fill" class="full-width">
         <mat-label>Fecha de inicio</mat-label>
-        <input matInput [matDatepicker]="picker1" [(ngModel)]="availableFromDate">
+        <input matInput [matDatepicker]="picker1" [(ngModel)]="availableFromDate" [required]="isRemoteAvailable">
         <mat-hint>MM/DD/YYYY</mat-hint>
         <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
         <mat-datepicker #picker1></mat-datepicker>
       </mat-form-field>
       <mat-form-field appearance="fill" class="full-width">
         <mat-label>Fecha de fin</mat-label>
-        <input matInput [matDatepicker]="picker2" [(ngModel)]="availableToDate">
+        <input matInput [matDatepicker]="picker2" [(ngModel)]="availableToDate" [required]="isRemoteAvailable">
         <mat-hint>MM/DD/YYYY</mat-hint>
         <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
         <mat-datepicker #picker2></mat-datepicker>
@@ -57,5 +56,11 @@
 
 <mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()">Cancelar</button>
-  <button mat-button (click)="submitRule()" cdkFocusInitial>{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
+  <button
+    mat-button
+    (click)="submitRule()"
+    cdkFocusInitial
+    [disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">
+    {{ isEditMode ? 'Guardar' : 'Añadir' }}
+  </button>
 </mat-dialog-actions>

ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html

@@ -23,7 +23,8 @@
           <div class="text-content">
             <div matListItemTitle>{{ rule.isRemoteAvailable ? 'Disponible' : 'No disponible ( periodo presencial )' }}</div>
             <div matListItemLine *ngIf="!rule.isRemoteAvailable">{{ rule.busyFromHour }} - {{ rule.busyToHour }}</div>
-            <div matListItemLine *ngIf="rule.isRemoteAvailable">{{ rule.availableReason }} | {{ rule.busyFromHour }} - {{ rule.busyToHour }}</div>
+            <div matListItemLine *ngIf="!rule.isRemoteAvailable">{{ rule.busyWeekDaysMap }}</div>
+            <div matListItemLine *ngIf="rule.isRemoteAvailable">{{ rule.availableReason }} | {{ rule.availableFromDate | date }} - {{ rule.availableToDate | date }}</div>
           </div>
           <div class="icon-container">
             <button mat-icon-button color="primary" class="right-icon" (click)="createRule(rule)" i18n="@@editImage">

ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.ts

@@ -17,6 +17,7 @@ export class CreateCalendarComponent implements OnInit {
   remoteCalendarRules: any[] = [];
   isEditMode: boolean = false;
   calendarId: string | null = null;
+  busyWeekDaysMap: string[] = [];
 
   constructor(
     private toastService: ToastrService,
@@ -40,6 +41,9 @@ export class CreateCalendarComponent implements OnInit {
         this.name = response.name;
         this.remoteCalendarRules = response.remoteCalendarRules;
         this.calendarId = this.data;
+        this.remoteCalendarRules.forEach(rule => {
+          rule.busyWeekDaysMap = this.getBusyWeekDaysMap(rule.busyWeekDays);
+        });
       },
       error: (err) => {
         console.error('Error fetching remote calendar:', err);
@@ -47,6 +51,14 @@ export class CreateCalendarComponent implements OnInit {
     });
   }
 
+
+  getBusyWeekDaysMap(indices: number[]): string[] {
+    console.log(indices)
+    const weekDays = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
+    return indices.map(index => weekDays[index]);
+  }
+
+
   onNoClick(): void {
     this.dialogRef.close();
   }