opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #731. Added exception UX

oggui/calendar
Manuel Aranda Rosales 2024-10-02 10:24:47 +02:00
parent 50fe2d830d
commit 18f28f1f39
5 changed files with 51 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ogWebconsole/src/app/components/calendar/calendar.component.html
View File

@ -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>

26
ogWebconsole/src/app/components/calendar/calendar.component.ts
View File

@ -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 {

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

@ -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>

3
ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
View File

@ -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">

12
ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.ts
View File

@ -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();
}