Merge branch 'main' into backend_ai_fixes

Artuomka · Artuomka · commit 79994b768447 · 2025-08-18T17:38:36.000Z
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -157,14 +157,12 @@ export class DbTableWidgetsComponent implements OnInit {
   "height": 100,
   "prefix": "https://example.com/images/"
 }
-}
 `,
     JSON: `// No settings required`,
     Money: `// Configure money widget settings
 // example:
 {
   "default_currency": "USD",
-  "show_currency_selector": false,
   "decimal_places": 2,
   "allow_negative": true
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.ts
@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { T } from '@angular/cdk/portal-directives.d-BoG39gYN';
 import { Widget } from 'src/app/models/table';
 
 @Component({
@@ -67,7 +68,16 @@ export class WidgetComponent implements OnInit, OnChanges {
     Code: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#code',
     Image: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#image',
     Foreign_key: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#foreign-key',
-    Phone: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#phone'
+    Phone: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#phone',
+    Color: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#color',
+    Money: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#money',
+    Country: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#country',
+    UUID: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#uuid',
+    Range: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#range',
+    Date: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#date-time-and-datetime',
+    DateTime: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#date-time-and-datetime',
+    Time: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#date-time-and-datetime',
+
   };
 
   ngOnInit(): void {
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.spec.ts b/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 },
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts b/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 });
         });
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/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 {
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/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">
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.spec.ts b/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();
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts b/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();
       }
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.css b/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;
+}
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.html b/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>
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.spec.ts b/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();
+  });
+});
diff --git a/frontend/src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component.ts b/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 {
+
+}

Original file line number	Diff line number	Diff line change
`@@ -157,14 +157,12 @@ export class DbTableWidgetsComponent implements OnInit {`
`157`	`157`	`"height": 100,`
`158`	`158`	`"prefix": "https://example.com/images/"`
`159`	`159`	`}`
`160`		`-}`
`161`	`160`	`,
`162`	`161`	JSON: `// No settings required`,
`163`	`162`	Money: `// Configure money widget settings
`164`	`163`	`// example:`
`165`	`164`	`{`
`166`	`165`	`"default_currency": "USD",`
`167`		`- "show_currency_selector": false,`
`168`	`166`	`"decimal_places": 2,`
`169`	`167`	`"allow_negative": true`
`170`	`168`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`gap: 8px;`
`5`		`- margin: 20px 0 4px;`
`6`	`5`	`}`
`7`	`6`
`8`	`7`	`.saved-filters-list {`