Saved filters 2

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.spec.ts

@@ -8,6 +8,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { SavedFiltersDialogComponent } from './saved-filters-dialog.component';
 import { TablesService } from 'src/app/services/tables.service';
 import { of } from 'rxjs';
+import { Angulartics2Module } from 'angulartics2';
 
 describe('SavedFiltersDialogComponent', () => {
   let component: SavedFiltersDialogComponent;
@@ -26,7 +27,8 @@ describe('SavedFiltersDialogComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         SavedFiltersDialogComponent,
-        RouterTestingModule
+        RouterTestingModule,
+        Angulartics2Module.forRoot(),
       ],
       providers: [
         { provide: TablesService, useValue: tableSpy },

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts

@@ -22,6 +22,7 @@ import { UIwidgets } from 'src/app/consts/record-edit-types';
 import { TableField, TableForeignKey } from 'src/app/models/table';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
 import { omitBy } from 'lodash';
+import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
 
 @Component({
   selector: 'app-saved-filters-dialog',
@@ -40,7 +41,8 @@ import { omitBy } from 'lodash';
     RouterModule,
     MatDialogModule,
     MatSnackBarModule,
-    ContentLoaderComponent
+    ContentLoaderComponent,
+    Angulartics2OnModule
   ],
   templateUrl: './saved-filters-dialog.component.html',
   styleUrl: './saved-filters-dialog.component.css'
@@ -73,7 +75,8 @@ export class SavedFiltersDialogComponent implements OnInit {
     private _tables: TablesService,
     private _connections: ConnectionsService,
     private dialogRef: MatDialogRef<SavedFiltersDialogComponent>,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private angulartics2: Angulartics2,
   ) {}
 
   ngOnInit(): void {
@@ -279,8 +282,14 @@ export class SavedFiltersDialogComponent implements OnInit {
       } else {
         this._tables.createSavedFilter(this.data.connectionID, this.data.tableName, payload)
         .subscribe(() => {
+          this.angulartics2.eventTrack.next({
+            action: 'Saved filters: saved filter is created successfully',
+          });
           this.dialogRef.close(true);
         }, (error) => {
+          this.angulartics2.eventTrack.next({
+            action: 'Saved filters: error creating saved filter',
+          });
           console.error('Error saving filter:', error);
           this.snackBar.open('Error saving filter', 'Close', { duration: 3000 });
         });

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    margin: 20px 0 4px;
 }
 
 .saved-filters-list {

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html

@@ -1,15 +1,20 @@
 <div class="saved-filters-container">
-    <div class="saved-filters-list">
+    <app-placeholder-saved-filters *ngIf="savedFilterData === null"></app-placeholder-saved-filters>
+    <div *ngIf="savedFilterData" class="saved-filters-list">
         <button *ngIf="accessLevel === 'edit' && savedFilterData?.length === 0"
             mat-button type="button"
+            angulartics2On="click"
+            angularticsAction="Saved filters: first time setup is clicked"
             (click)="handleOpenSavedFiltersDialog()">
             <mat-icon>tune</mat-icon>
             Setup custom filters
         </button>
 
         <button *ngIf="accessLevel === 'edit' && savedFilterData.length !== 0"
             mat-icon-button type="button"
-            [matMenuTriggerFor]="menu">
+            [matMenuTriggerFor]="menu"
+            angulartics2On="click"
+            angularticsAction="Saved filters: open menu is clicked">
             <mat-icon>tune</mat-icon>
         </button>
         <mat-menu #menu="matMenu">

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.spec.ts

@@ -1,6 +1,7 @@
 import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { Angulartics2Module } from 'angulartics2';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MatDialog } from '@angular/material/dialog';
@@ -14,7 +15,7 @@ class JsonURLMock {
   static stringify(obj: any): string {
     return JSON.stringify(obj);
   }
-  
+
   static parse(str: string): any {
     try {
       return JSON.parse(str);
@@ -77,7 +78,8 @@ describe('SavedFiltersPanelComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         SavedFiltersPanelComponent,
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        Angulartics2Module.forRoot(),
       ],
       providers: [
         { provide: TablesService, useValue: tablesServiceMock },
@@ -99,10 +101,10 @@ describe('SavedFiltersPanelComponent', () => {
     component.tableTypes = {};
     component.selectedTableDisplayName = 'Users';
     component.tableForeignKeys = [];
-    
+
     // Mock filterSelected event emitter
     spyOn(component.filterSelected, 'emit');
-    
+
     fixture.detectChanges();
   });
 
@@ -164,21 +166,21 @@ describe('SavedFiltersPanelComponent', () => {
         filters: { city: { eq: 'New York' } }
       }
     };
-    
+
     // Spy on applyDynamicColumnChanges to prevent it from executing
     spyOn(component, 'applyDynamicColumnChanges');
-    
+
     // Replace setTimeout with a function that executes immediately
     spyOn<any>(window, 'setTimeout').and.callFake((fn) => {
       // Execute function immediately instead of waiting
       fn();
       // Return a fake timer ID
       return 999;
     });
-    
+
     // Call the method under test
     component.updateDynamicColumnValue('Chicago');
-    
+
     // Verify the value was updated
     expect(component.savedFilterMap.filter1.dynamicColumn.value).toBe('Chicago');
     expect(component.applyDynamicColumnChanges).toHaveBeenCalled();

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts

@@ -3,6 +3,7 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angu
 import { TableField, TableForeignKey } from 'src/app/models/table';
 
 import { AccessLevel } from 'src/app/models/user';
+import { Angulartics2OnModule } from 'angulartics2';
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DynamicModule } from 'ng-dynamic-component';
@@ -18,6 +19,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { PlaceholderSavedFiltersComponent } from 'src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component';
 import { SavedFiltersDialogComponent } from './saved-filters-dialog/saved-filters-dialog.component';
 import { TablesService } from 'src/app/services/tables.service';
 import { UIwidgets } from 'src/app/consts/record-edit-types';
@@ -38,7 +40,9 @@ import { normalizeTableName } from 'src/app/lib/normalize';
     MatSelectModule,
     MatTabsModule,
     MatTooltipModule,
-    MatMenuModule
+    MatMenuModule,
+    PlaceholderSavedFiltersComponent,
+    Angulartics2OnModule
   ],
   templateUrl: './saved-filters-panel.component.html',
   styleUrl: './saved-filters-panel.component.css'
@@ -59,7 +63,7 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
 
   private dynamicColumnValueDebounceTimer: any = null;
 
-  public savedFilterData: any[] = [];
+  public savedFilterData = null;
   public savedFilterMap: { [key: string]: any } = {};
 
   public selectedFilterSetId: string | null = null;
@@ -96,6 +100,9 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
     this.route.paramMap.subscribe(params => {
       const tableNameFromUrl = params.get('table-name');
       if (tableNameFromUrl) {
+        this.savedFilterData = null;
+        this.selectedFilterSetId = null;
+        this.selectedFilter = null;
         this.selectedTableName = tableNameFromUrl;
         this.loadSavedFilters();
       }

frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.css

@@ -0,0 +1,31 @@
+.box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.edit-button {
+    height: 36px;
+    width: 36px;
+    border-radius: 50%;
+    margin-right: 8px;
+    /* mix-blend-mode: normal !important; */
+}
+
+.saved-filter {
+    height: 32px;
+    border-radius: 4px;
+}
+
+.saved-filter_1 {
+    width: 100px;
+}
+
+.saved-filter_2 {
+    width: 150px;
+}
+
+.saved-filter_3 {
+    width: 200px;
+}

frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.html

@@ -0,0 +1,6 @@
+<div class="box skeleton">
+    <div class="bone edit-button"></div>
+    <div class="bone saved-filter saved-filter_1"></div>
+    <div class="bone saved-filter saved-filter_2"></div>
+    <div class="bone saved-filter saved-filter_3"></div>
+</div>

frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlaceholderSavedFiltersComponent } from './placeholder-saved-filters.component';
+
+describe('PlaceholderSavedFiltersComponent', () => {
+  let component: PlaceholderSavedFiltersComponent;
+  let fixture: ComponentFixture<PlaceholderSavedFiltersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [PlaceholderSavedFiltersComponent]
+})
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlaceholderSavedFiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-placeholder-saved-filters',
+  templateUrl: './placeholder-saved-filters.component.html',
+  styleUrls: ['./placeholder-saved-filters.component.css']
+})
+export class PlaceholderSavedFiltersComponent {
+
+}