Added saved filters modal

ogWebconsole/src/app/app.module.ts

@@ -69,6 +69,7 @@ import {
 import { LegendComponent } from './components/groups/legend/legend.component';
 import { ClassroomViewDialogComponent } from './components/groups/classroom-view/classroom-view-modal';
 import {MatPaginator} from "@angular/material/paginator";
+import { SaveFiltersDialogComponent } from './components/groups/save-filters-dialog/save-filters-dialog.component';
 
 @NgModule({
   declarations: [
@@ -100,7 +101,8 @@ import {MatPaginator} from "@angular/material/paginator";
     ShowOrganizationalUnitComponent,
     TreeViewComponent,
     LegendComponent,
-    ClassroomViewDialogComponent
+    ClassroomViewDialogComponent,
+    SaveFiltersDialogComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/groups/data.service.ts

@@ -156,4 +156,23 @@ export class DataService {
     );
   }
 
+  getFilter(id: string): Observable<any> {
+    return this.http.get<any>('http://127.0.0.1:8080/views/' + id).pipe(
+      map(response => {
+        
+  
+        if (response.name && response.filters) {
+          return response;
+        } else {
+          throw new Error('Unexpected response format');
+        }
+      }),
+      catchError(error => {
+        console.error('Error fetching filters', error);
+        return throwError(error);
+      })
+    );
+  }
+  
+  
 }

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

@@ -160,7 +160,7 @@
           <mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
           <mat-select (selectionChange)="loadSelectedFilter($event.value)">
             <mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
-              {{ savedFilter }}
+              {{ savedFilter[0] }}
             </mat-option>
           </mat-select>
         </mat-form-field>        
@@ -168,13 +168,6 @@
       <mat-divider class="divider"></mat-divider>
       <div class="main-content">
         <div class="filters">
-          <mat-form-field>
-            <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
-            <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
-              <mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
-              <mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
-            </mat-select>
-          </mat-form-field>
           <mat-form-field class="example-full-width">
             <mat-label i18n="@@nameLabel">Nombre</mat-label>
             <input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
@@ -188,6 +181,13 @@
               <mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
             </mat-select>
           </mat-form-field>
+          <mat-form-field>
+            <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
+            <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
+              <mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
+              <mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
+            </mat-select>
+          </mat-form-field>
           <mat-form-field>
             <mat-label i18n="@@selectAnotherOptionLabel">Selecciona otra opción</mat-label>
             <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">

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

@@ -18,6 +18,7 @@ import { ClassroomViewDialogComponent } from './classroom-view/classroom-view-mo
 import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {PageEvent} from "@angular/material/paginator";
+import { SaveFiltersDialogComponent } from './save-filters-dialog/save-filters-dialog.component';
 
 @Component({
   selector: 'app-groups',
@@ -61,9 +62,7 @@ export class GroupsComponent implements OnInit {
   getFilters(): void {
     this.dataService.getFilters().subscribe(
       data => {
-        this.savedFilterNames = data.map((filter: any) => filter.name);
+        this.savedFilterNames = data.map((filter: any) => [filter.name, filter.uuid]);
-        console.log('data:', data);
-        console.log('Saved filters:', this.savedFilterNames);
       },
       error => {
         console.error('Error fetching filters:', error);
@@ -315,11 +314,18 @@ export class GroupsComponent implements OnInit {
     this.itemsPerPage = event.pageSize;
     this.applyFilter();
   }
+
+
   saveFilters() {
+    const dialogRef = this.dialog.open(SaveFiltersDialogComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
         const filters = {
-      name: this.filterName || `Filter ${new Date().toISOString()}`,
+          name: result,
           favourite: true,
           filters: {
+            filter0: this.filterName,
             filter1: this.selectedFilter1,
             filter2: this.selectedFilter2
           }
@@ -333,8 +339,25 @@ export class GroupsComponent implements OnInit {
           console.error('Error:', error);
         });
       }
+    });
+  }
 
   loadSelectedFilter(savedFilter: any) {
+    const url = 'http://127.0.0.1:8080/views/' + savedFilter[1];
+    console.log('llamando a:', url);
+
+    this.dataService.getFilter(savedFilter[1]).subscribe(response => {
+      console.log('Response from server:', response.filters);
+      if (response) {
+        console.log('Filter1:', response.filters);
+        this.filterName = response.filters.filter0 || '';
+        this.selectedFilter1 = response.filters.filter1 || null;
+        this.selectedFilter2 = response.filters.filter2 || '';
+      }
+    }, error => {
+      console.error('Error:', error);
+    });
 
   }
+  
 }