Fix widget filter component loading and add comparator selectors

gugu · claude · gugu · commit 45c4514b5cdf · 2026-04-02T16:48:12.000Z
- Fix dynamic component loading for widget-type filters in all three
  filter contexts (main dialog, saved-filters dialog, saved-filters
  panel). Widget data was passed as an object but guards checked
  .length which is undefined on objects, so setWidgets() was never
  called and widget filter components never loaded.
- Add built-in comparator selectors to Email and Phone filter
  components (domain equal, equal, contains, starts with, etc.)
  so each component manages its own filter logic independently.
- Move comparator emission from ngOnInit to ngAfterViewInit so it
  fires after ndc-dynamic subscribes to outputs.
- Show field name label for nonComparable filter fields.
- Add Email to widget defaultParams so it can be configured.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
@@ -26,6 +26,7 @@ <h1 mat-dialog-title class="filters-header">
 
             <ng-container *ngFor="let value of tableRowFieldsShown | keyvalue; trackBy:trackByFn">
                 <div *ngIf="getComparatorType(getInputType(value.key)) === 'nonComparable'; else comparableFilter" class="filter-line">
+                    <span class='mat-body-1 column-name'>{{value.key}}</span>
 
                     <div *ngIf="isWidget(value.key); else defaultTableField">
                         <ndc-dynamic [ndcDynamicComponent]="tableWidgets[value.key].widget_type ? UIwidgets[tableWidgets[value.key].widget_type] : inputs[tableTypes[value.key]]"
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.spec.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.spec.ts
@@ -179,4 +179,46 @@ describe('DbTableFiltersDialogComponent', () => {
 		const comparatorType = component.getComparatorType(undefined);
 		expect(comparatorType).toEqual('nonComparable');
 	});
+
+	it('should receive comparator from EmailFilterComponent after it renders', async () => {
+		component.setWidgets([
+			{
+				field_name: 'FirstName',
+				widget_type: 'Email',
+				widget_params: '// No settings required',
+				name: '',
+				description: '',
+			},
+		]);
+
+		component.addFilter({ option: { value: 'FirstName' } });
+
+		// Default comparator is 'eq' from addFilter
+		expect(component.tableRowFieldsComparator['FirstName']).toEqual('eq');
+
+		// Trigger change detection so ndc-dynamic renders EmailFilterComponent
+		fixture.detectChanges();
+		await fixture.whenStable();
+
+		// EmailFilterComponent emits 'eq' (default mode) in ngAfterViewInit,
+		// which updateComparatorFromComponent receives
+		expect(component.tableRowFieldsComparator['FirstName']).toEqual('eq');
+	});
+
+	it('should recognize widgets when passed as object (real app format)', () => {
+		const widgetsObject = {
+			FirstName: {
+				field_name: 'FirstName',
+				widget_type: 'Email',
+				widget_params: {},
+				name: '',
+				description: '',
+			},
+		};
+
+		component.data.structure.widgets = widgetsObject;
+		component.ngOnInit();
+
+		expect(component.isWidget('FirstName')).toBe(true);
+	});
 });
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
@@ -140,8 +140,10 @@ export class DbTableFiltersDialogComponent implements OnInit, AfterViewInit {
 			}
 		}
 
-		if (this.data.structure.widgets && this.data.structure.widgets.length) {
-			this.setWidgets(this.data.structure.widgets);
+		const widgets = this.data.structure.widgets;
+		const widgetsArray = Array.isArray(widgets) ? widgets : Object.values(widgets || {});
+		if (widgetsArray.length) {
+			this.setWidgets(widgetsArray);
 		}
 
 		// If autofocusField is provided, ensure it's in the filters list
@@ -231,8 +233,10 @@ export class DbTableFiltersDialogComponent implements OnInit, AfterViewInit {
 			{},
 			...widgets.map((widget: Widget) => {
 				let params;
-				if (widget.widget_params !== '// No settings required') {
+				if (typeof widget.widget_params === 'string' && widget.widget_params !== '// No settings required') {
 					params = JSON5.parse(widget.widget_params);
+				} else if (typeof widget.widget_params !== 'string') {
+					params = widget.widget_params;
 				} else {
 					params = '';
 				}
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
@@ -254,6 +254,7 @@ export class DbTableWidgetsComponent implements OnInit {
   "name": ""
 }
 `,
+		Email: `// No settings required`,
 		S3: `// Configure AWS S3 widget for file storage
 // bucket: S3 bucket name (required)
 // prefix: Optional path prefix for uploaded files
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html
@@ -90,6 +90,7 @@ <h1 mat-dialog-title class="filters-header">
                     <mat-icon>close</mat-icon>
                 </button>
                 <div *ngIf="getComparatorType(getInputType(value.key)) === 'nonComparable'; else comparableFilter" class="filter-line">
+                    <span class='mat-body-1 column-name'>{{value.key}}</span>
 
                     <div *ngIf="isWidget(value.key); else defaultTableField">
                         <ndc-dynamic [ndcDynamicComponent]="tableWidgets[value.key].widget_type ? UIwidgets[tableWidgets[value.key].widget_type] : inputs[tableTypes[value.key]]"
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
@@ -140,9 +140,11 @@ export class SavedFiltersDialogComponent implements OnInit, AfterViewInit {
 			}),
 		);
 
-		// Setup widgets if available
-		if (this.data.tableWidgets?.length) {
-			this.setWidgets(this.data.tableWidgets);
+		// Setup widgets - data comes pre-processed as object { field_name: { widget_type, widget_params, ... } }
+		const tableWidgets = this.data.tableWidgets;
+		if (tableWidgets && Object.keys(tableWidgets).length) {
+			this.tableWidgetsList = Object.keys(tableWidgets);
+			this.tableWidgets = tableWidgets;
 		}
 
 		this.foundFields = this.fieldSearchControl.valueChanges.pipe(
@@ -196,12 +198,14 @@ export class SavedFiltersDialogComponent implements OnInit, AfterViewInit {
 			{},
 			...widgets.map((widget: any) => {
 				let params;
-				if (widget.widget_params !== '// No settings required') {
+				if (typeof widget.widget_params === 'string' && widget.widget_params !== '// No settings required') {
 					try {
 						params = JSON.parse(widget.widget_params);
 					} catch (_e) {
 						params = '';
 					}
+				} else if (typeof widget.widget_params !== 'string') {
+					params = widget.widget_params;
 				} else {
 					params = '';
 				}
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
@@ -39,11 +39,11 @@
             </mat-chip-option>
         </mat-chip-listbox>
         <mat-menu #filterMenu="matMenu">
-            <button mat-menu-item (click)="handleEditFilter(currentFilterForMenu)">
+            <button mat-menu-item type="button" (click)="handleEditFilter(currentFilterForMenu)">
                 <mat-icon fontSet="material-symbols-outlined">create</mat-icon>
                 <span>Edit</span>
             </button>
-            <button mat-menu-item (click)="handleDeleteFilter(currentFilterForMenu)">
+            <button mat-menu-item type="button" (click)="handleDeleteFilter(currentFilterForMenu)">
                 <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
                 <span>Delete</span>
             </button>
@@ -58,7 +58,7 @@
         <form *ngIf="savedFilterMap[selectedFilterSetId]?.dynamicColumn"
             class="dynamic-column-editor"
             (ngSubmit)="applyDynamicColumnChanges()">
-            <span class="column-name mat-body-1" *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) !== 'nonComparable'">
+            <span class="column-name mat-body-1">
                 <strong>{{ savedFilterMap[selectedFilterSetId]?.dynamicColumn.column }}</strong>
                 <span *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) === 'text'" class="comparator-text">
                     {{ {startswith: 'starts with', endswith: 'ends with', eq: 'equal', contains: 'contains', icontains: 'not contains', empty: 'is empty'}[savedFilterMap[selectedFilterSetId].dynamicColumn.operator] }}
@@ -138,7 +138,8 @@
                             autofocus: shouldAutofocus
                         }"
                         [ndcDynamicOutputs]="{
-                            onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] }
+                            onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] },
+                            onComparatorChange: { handler: updateDynamicColumnComparator, args: ['$event'] }
                         }"
                     ></ndc-dynamic>
                 </div>
@@ -154,7 +155,8 @@
                             autofocus: shouldAutofocus
                         }"
                         [ndcDynamicOutputs]="{
-                            onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] }
+                            onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] },
+                            onComparatorChange: { handler: updateDynamicColumnComparator, args: ['$event'] }
                         }"
                     ></ndc-dynamic>
                 </ng-template>
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
@@ -17,8 +17,8 @@ import { Angulartics2OnModule } from 'angulartics2';
 import { DynamicModule } from 'ng-dynamic-component';
 import posthog from 'posthog-js';
 import { PlaceholderSavedFiltersComponent } from 'src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component';
-import { filterTypes } from 'src/app/consts/filter-types';
-import { UIwidgets } from 'src/app/consts/record-edit-types';
+import { UIwidgets as FilterUIwidgets, filterTypes } from 'src/app/consts/filter-types';
+import { UIwidgets as EditUIwidgets } from 'src/app/consts/record-edit-types';
 import { normalizeTableName } from 'src/app/lib/normalize';
 import { TableField, TableForeignKey } from 'src/app/models/table';
 import { AccessLevel } from 'src/app/models/user';
@@ -76,7 +76,7 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
 	public tableRowFieldsShown: { [key: string]: any } = {};
 	public tableRowStructure: { [key: string]: any } = {};
 	public tableWidgetsList: string[] = [];
-	public UIwidgets = UIwidgets;
+	public UIwidgets = { ...EditUIwidgets, ...FilterUIwidgets };
 
 	public displayedComparators = {
 		eq: '=',
@@ -244,6 +244,9 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
 		if (this.resetSelection) {
 			this.selectedFilterSetId = null;
 		}
+		if (this.tableWidgets) {
+			this.tableWidgetsList = Object.keys(this.tableWidgets);
+		}
 	}
 
 	ngOnDestroy() {
diff --git a/frontend/src/app/components/ui-components/filter-fields/email/email.component.css b/frontend/src/app/components/ui-components/filter-fields/email/email.component.css
@@ -1,3 +1,15 @@
-.email-form-field {
+.email-filter-row {
+	display: flex;
+	gap: 8px;
+	align-items: flex-start;
 	width: 100%;
 }
+
+.comparator-field {
+	flex: 0 0 auto;
+	min-width: 150px;
+}
+
+.value-field {
+	flex: 1;
+}
diff --git a/frontend/src/app/components/ui-components/filter-fields/email/email.component.html b/frontend/src/app/components/ui-components/filter-fields/email/email.component.html
@@ -1,9 +1,32 @@
-<mat-form-field class="email-form-field" appearance="outline">
-    <mat-label>{{normalizedLabel}} (domain)</mat-label>
-    <span matTextPrefix>@&nbsp;</span>
-    <input matInput type="text" name="{{label}}-{{key}}"
-        #inputElement
-        [required]="required" [disabled]="disabled" [readonly]="readonly"
-        placeholder="gmail.com"
-        [(ngModel)]="domainValue" (ngModelChange)="onDomainChange($event)">
-</mat-form-field>
+<div class="email-filter-row">
+    <mat-form-field class="comparator-field" appearance="outline">
+        <mat-select [(ngModel)]="filterMode" (ngModelChange)="onFilterModeChange($event)">
+            <mat-option value="eq">equal</mat-option>
+            <mat-option value="domain">domain equal</mat-option>
+            <mat-option value="contains">contains</mat-option>
+            <mat-option value="startswith">starts with</mat-option>
+            <mat-option value="endswith">ends with</mat-option>
+            <mat-option value="empty">is empty</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    @if (filterMode === 'domain') {
+        <mat-form-field class="value-field" appearance="outline">
+            <mat-label>{{normalizedLabel}} (domain)</mat-label>
+            <span matTextPrefix>@&nbsp;</span>
+            <input matInput type="text" name="{{label}}-{{key}}"
+                #inputElement
+                [required]="required" [disabled]="disabled" [readonly]="readonly"
+                placeholder="gmail.com"
+                [(ngModel)]="domainValue" (ngModelChange)="onDomainChange($event)">
+        </mat-form-field>
+    } @else if (filterMode !== 'empty') {
+        <mat-form-field class="value-field" appearance="outline">
+            <mat-label>{{normalizedLabel}}</mat-label>
+            <input matInput type="text" name="{{label}}-{{key}}"
+                #inputElement
+                [required]="required" [disabled]="disabled" [readonly]="readonly"
+                [(ngModel)]="textValue" (ngModelChange)="onTextChange($event)">
+        </mat-form-field>
+    }
+</div>
diff --git a/frontend/src/app/components/ui-components/filter-fields/email/email.component.spec.ts b/frontend/src/app/components/ui-components/filter-fields/email/email.component.spec.ts
@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { EmailFilterComponent } from './email.component';
+
+describe('EmailFilterComponent', () => {
+	let component: EmailFilterComponent;
+	let fixture: ComponentFixture<EmailFilterComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [EmailFilterComponent, BrowserAnimationsModule],
+		}).compileComponents();
+	});
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(EmailFilterComponent);
+		component = fixture.componentInstance;
+	});
+
+	it('should create', () => {
+		fixture.detectChanges();
+		expect(component).toBeTruthy();
+	});
+
+	it('should default to eq filter mode', () => {
+		fixture.detectChanges();
+		expect(component.filterMode).toBe('eq');
+	});
+
+	it('should emit eq comparator by default after view init', () => {
+		const emitted: string[] = [];
+		component.onComparatorChange.subscribe((v: string) => emitted.push(v));
+
+		component.ngOnInit();
+		const emittedDuringInit = [...emitted];
+
+		component.ngAfterViewInit();
+
+		expect(emittedDuringInit).toEqual([]);
+		expect(emitted).toEqual(['eq']);
+	});
+
+	it('should prefix domain value with @ on domain change', () => {
+		vi.spyOn(component.onFieldChange, 'emit');
+		vi.spyOn(component.onComparatorChange, 'emit');
+		fixture.detectChanges();
+
+		component.onDomainChange('gmail.com');
+
+		expect(component.value).toBe('@gmail.com');
+		expect(component.onFieldChange.emit).toHaveBeenCalledWith('@gmail.com');
+		expect(component.onComparatorChange.emit).toHaveBeenCalledWith('endswith');
+	});
+
+	it('should switch to eq mode and emit plain text', () => {
+		vi.spyOn(component.onFieldChange, 'emit');
+		vi.spyOn(component.onComparatorChange, 'emit');
+		fixture.detectChanges();
+
+		component.textValue = 'user@test.com';
+		component.onFilterModeChange('eq');
+
+		expect(component.onComparatorChange.emit).toHaveBeenCalledWith('eq');
+		expect(component.onFieldChange.emit).toHaveBeenCalledWith('user@test.com');
+	});
+
+	it('should switch to empty mode', () => {
+		vi.spyOn(component.onFieldChange, 'emit');
+		vi.spyOn(component.onComparatorChange, 'emit');
+		fixture.detectChanges();
+
+		component.onFilterModeChange('empty');
+
+		expect(component.value).toBe('');
+		expect(component.onComparatorChange.emit).toHaveBeenCalledWith('empty');
+	});
+
+	it('should parse existing @domain value on init', () => {
+		component.value = '@example.com';
+		fixture.detectChanges();
+
+		expect(component.filterMode).toBe('domain');
+		expect(component.domainValue).toBe('example.com');
+	});
+});
diff --git a/frontend/src/app/components/ui-components/filter-fields/email/email.component.ts b/frontend/src/app/components/ui-components/filter-fields/email/email.component.ts
diff --git a/frontend/src/app/components/ui-components/filter-fields/phone/phone.component.css b/frontend/src/app/components/ui-components/filter-fields/phone/phone.component.css
diff --git a/frontend/src/app/components/ui-components/filter-fields/phone/phone.component.html b/frontend/src/app/components/ui-components/filter-fields/phone/phone.component.html
diff --git a/frontend/src/app/components/ui-components/filter-fields/phone/phone.component.ts b/frontend/src/app/components/ui-components/filter-fields/phone/phone.component.ts

Original file line number	Diff line number	Diff line change
`@@ -140,8 +140,10 @@ export class DbTableFiltersDialogComponent implements OnInit, AfterViewInit {`
`140`	`140`	`}`
`141`	`141`	`}`
`142`	`142`
`143`		`- if (this.data.structure.widgets && this.data.structure.widgets.length) {`
`144`		`- this.setWidgets(this.data.structure.widgets);`
	`143`	`+ const widgets = this.data.structure.widgets;`
	`144`	`+ const widgetsArray = Array.isArray(widgets) ? widgets : Object.values(widgets \|\| {});`
	`145`	`+ if (widgetsArray.length) {`
	`146`	`+ this.setWidgets(widgetsArray);`
`145`	`147`	`}`
`146`	`148`
`147`	`149`	`// If autofocusField is provided, ensure it's in the filters list`
`@@ -231,8 +233,10 @@ export class DbTableFiltersDialogComponent implements OnInit, AfterViewInit {`
`231`	`233`	`{},`
`232`	`234`	`...widgets.map((widget: Widget) => {`
`233`	`235`	`let params;`
`234`		`- if (widget.widget_params !== '// No settings required') {`
	`236`	`+ if (typeof widget.widget_params === 'string' && widget.widget_params !== '// No settings required') {`
`235`	`237`	`params = JSON5.parse(widget.widget_params);`
	`238`	`+ } else if (typeof widget.widget_params !== 'string') {`
	`239`	`+ params = widget.widget_params;`
`236`	`240`	`} else {`
`237`	`241`	`params = '';`
`238`	`242`	`}`
Original file line number	Diff line number	Diff line change
`@@ -254,6 +254,7 @@ export class DbTableWidgetsComponent implements OnInit {`
`254`	`254`	`"name": ""`
`255`	`255`	`}`
`256`	`256`	`,
	`257`	+ Email: `// No settings required`,
`257`	`258`	S3: `// Configure AWS S3 widget for file storage
`258`	`259`	`// bucket: S3 bucket name (required)`
`259`	`260`	`// prefix: Optional path prefix for uploaded files`