Erefs #1963 nhance ClientTaskLogs component to include date range filtering in trace loading and reset functionality

ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.html

@@ -10,8 +10,8 @@
     </div>
 
     <div class="images-button-row">
-      <button class="action-button" (click)="resetFilters(commandSearchInput, commandStatusInput)" joyrideStep="resetFiltersStep"
+      <button class="action-button" (click)="resetFilters(commandSearchInput, commandStatusInput)"
-        text="{{ 'resetFiltersStepText' | translate }}">
+        joyrideStep="resetFiltersStep" text="{{ 'resetFiltersStepText' | translate }}">
         {{ 'resetFilters' | translate }}
       </button>
     </div>
@@ -47,6 +47,16 @@
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
+
+    <mat-form-field appearance="fill" class="date-range-picker">
+      <mat-label>{{ 'Filtrar por fecha' | translate }}</mat-label>
+      <mat-date-range-input [formControl]="dateRange" [rangePicker]="picker">
+        <input matStartDate placeholder="{{ 'Desde' | translate }}">
+        <input matEndDate placeholder="{{ 'Hasta' | translate }}">
+      </mat-date-range-input>
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
   </div>
 
   <app-loading [isLoading]="loading"></app-loading>

ogWebconsole/src/app/components/task-logs/client-task-logs/client-task-logs.component.ts

@@ -35,6 +35,7 @@ export class ClientTaskLogsComponent implements OnInit {
   mode: ProgressBarMode = 'buffer';
   progress = 0;
   bufferValue = 0;
+  dateRange = new FormControl();
 
   filteredCommands2 = Object.keys(COMMAND_TYPES).map(key => ({
     name: key,
@@ -197,6 +198,15 @@ export class ClientTaskLogsComponent implements OnInit {
       params = params.set('status', this.filters['status']);
     }
 
+    const range = this.dateRange?.value;
+    if (range?.start && range?.end) {
+      const fromDate = this.datePipe.transform(range.start, 'yyyy-MM-dd');
+      const toDate = this.datePipe.transform(range.end, 'yyyy-MM-dd');
+
+      params = params.set('executedAt[after]', fromDate!);
+      params = params.set('executedAt[before]', toDate!);
+    }
+
     const url = `${this.baseUrl}/traces`;
 
     this.http.get<any>(url, { params }).subscribe(
@@ -212,7 +222,6 @@ export class ClientTaskLogsComponent implements OnInit {
     );
   }
 
-
   loadCommands() {
     this.loading = true;
     this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
@@ -231,6 +240,7 @@ export class ClientTaskLogsComponent implements OnInit {
     this.loading = true;
     clientSearchCommandInput.value = null;
     clientSearchStatusInput.value = null;
+    this.dateRange.reset();
     this.filters = {};
     this.loadTraces();
   }