Migrate filter field components to Angular signals and fix filter-line layout

Migrate BaseFilterFieldComponent and all 22 concrete filter components
from legacy @input()/@output() to Angular signals (input(), output(),
computed()). Update all template bindings to use signal calls. Fix
custom filter layout so column name and dynamic component render on
the same line in both filter dialogs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: gugu

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

@@ -19,6 +19,21 @@
 
 .filter-line {
 	grid-column: 1 / span 4;
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+}
+
+.filter-line > div,
+.filter-line > ng-template,
+.filter-line > ndc-dynamic {
+	flex: 1;
+	min-width: 0;
+}
+
+.filter-line > .column-name {
+	flex: 0 0 auto;
+	white-space: nowrap;
 }
 
 ::ng-deep .mat-dialog-container > .ng-star-inserted {

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

@@ -19,6 +19,22 @@
 
 .filter-line {
 	grid-column: 2 / span 4;
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+}
+
+.filter-line > div,
+.filter-line > ng-template,
+.filter-line > ndc-dynamic {
+	flex: 1;
+	min-width: 0;
+}
+
+.filter-line > .column-name {
+	flex: 0 0 auto;
+	white-space: nowrap;
+	margin-top: 18px;
 }
 
 .empty-conditions-container {

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

@@ -15,6 +15,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import JsonURL from '@jsonurl/jsonurl';
 import { Angulartics2OnModule } from 'angulartics2';
 import { DynamicModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
 import posthog from 'posthog-js';
 import { PlaceholderSavedFiltersComponent } from 'src/app/components/skeletons/placeholder-saved-filters/placeholder-saved-filters.component';
 import { UIwidgets as FilterUIwidgets, filterTypes } from 'src/app/consts/filter-types';
@@ -32,6 +33,7 @@ import { SavedFiltersDialogComponent } from './saved-filters-dialog/saved-filter
 		CommonModule,
 		FormsModule,
 		DynamicModule,
+		SignalComponentIoModule,
 		MatButtonModule,
 		MatIconModule,
 		MatChipsModule,

frontend/src/app/components/ui-components/filter-fields/base-filter-field/base-filter-field.component.ts

@@ -1,6 +1,5 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, computed, input, OnInit, output } from '@angular/core';
 import { TableField, TableForeignKey, WidgetStructure } from 'src/app/models/table';
-
 import { normalizeFieldName } from '../../../../lib/normalize';
 
 @Component({
@@ -9,22 +8,20 @@ import { normalizeFieldName } from '../../../../lib/normalize';
 	styleUrl: './base-filter-field.component.css',
 })
 export class BaseFilterFieldComponent implements OnInit {
-	@Input() key: string;
-	@Input() label: string;
-	@Input() required: boolean;
-	@Input() readonly: boolean;
-	@Input() structure: TableField;
-	@Input() disabled: boolean;
-	@Input() widgetStructure: WidgetStructure;
-	@Input() relations: TableForeignKey;
-	@Input() autofocus: boolean = false;
+	readonly key = input<string>();
+	readonly label = input<string>();
+	readonly required = input<boolean>(false);
+	readonly readonly = input<boolean>(false);
+	readonly structure = input<TableField>();
+	readonly disabled = input<boolean>(false);
+	readonly widgetStructure = input<WidgetStructure>();
+	readonly relations = input<TableForeignKey>();
+	readonly autofocus = input<boolean>(false);
 
-	@Output() onFieldChange = new EventEmitter<any>();
-	@Output() onComparatorChange = new EventEmitter<string>();
+	readonly onFieldChange = output<any>();
+	readonly onComparatorChange = output<string>();
 
-	public normalizedLabel: string;
+	readonly normalizedLabel = computed(() => normalizeFieldName(this.label() || ''));
 
-	ngOnInit(): void {
-		this.normalizedLabel = normalizeFieldName(this.label);
-	}
+	ngOnInit(): void {}
 }

frontend/src/app/components/ui-components/filter-fields/binary-data-caption/binary-data-caption.component.html

@@ -1,7 +1,7 @@
 <div class="static-text">
-    <span>{{normalizedLabel}}</span>
+    <span>{{normalizedLabel()}}</span>
     <span class="static-text__value"
-        attr.data-testid="record-{{label}}-binary-data-caption">
+        attr.data-testid="record-{{label()}}-binary-data-caption">
         binary data
     </span>
-</div>
+</div>

frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.html

@@ -1,8 +1,8 @@
 <div *ngIf="isRadiogroup; else checkboxElement" class="radio-line">
-    <label id="">{{normalizedLabel}}</label>
-    <mat-button-toggle-group name="{{label}}-{{key}}" attr.data-testid="record-{{label}}-boolean-radio-group"
-        [hideSingleSelectionIndicator]="true"    
-        [disabled]="disabled"
+    <label id="">{{normalizedLabel()}}</label>
+    <mat-button-toggle-group name="{{label()}}-{{key()}}" attr.data-testid="record-{{label()}}-boolean-radio-group"
+        [hideSingleSelectionIndicator]="true"
+        [disabled]="disabled()"
         [(ngModel)]="booleanValue" (ngModelChange)="onBooleanChange()">
         <mat-button-toggle [value]=true>Yes</mat-button-toggle>
         <mat-button-toggle [value]=false>No</mat-button-toggle>
@@ -12,10 +12,10 @@
 
 <ng-template #checkboxElement>
     <div class="radio-line">
-        <label id="">{{normalizedLabel}}</label>
-        <mat-button-toggle-group name="{{label}}-{{key}}" attr.data-testid="record-{{label}}-boolean-radio-group"
+        <label id="">{{normalizedLabel()}}</label>
+        <mat-button-toggle-group name="{{label()}}-{{key()}}" attr.data-testid="record-{{label()}}-boolean-radio-group"
             [hideSingleSelectionIndicator]="true"
-            [disabled]="disabled"
+            [disabled]="disabled()"
             [(ngModel)]="booleanValue" (ngModelChange)="onBooleanChange()">
             <mat-button-toggle [value]=true>Yes</mat-button-toggle>
             <mat-button-toggle [value]=false>No</mat-button-toggle>

frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.spec.ts

@@ -38,31 +38,31 @@ describe('BooleanFilterComponent', () => {
 
 	it('should set booleanValue in false when input value is 0', () => {
 		component.value = 0;
-		component.structure = fakeStructure;
+		fixture.componentRef.setInput('structure', fakeStructure);
 		component.ngOnInit();
 
 		expect(component.booleanValue).toEqual(false);
 	});
 
 	it('should set booleanValue in unknown when input value is null', () => {
 		component.value = null;
-		component.structure = fakeStructure;
+		fixture.componentRef.setInput('structure', fakeStructure);
 		component.ngOnInit();
 
 		expect(component.booleanValue).toEqual('unknown');
 	});
 
 	it('should set isRadiogroup in false if allow_null is false', () => {
 		component.value = undefined;
-		component.structure = fakeStructure;
+		fixture.componentRef.setInput('structure', fakeStructure);
 		component.ngOnInit();
 
 		expect(component.isRadiogroup).toEqual(false);
 	});
 
 	it('should set isRadiogroup in true if allow_null is true', () => {
 		component.value = undefined;
-		component.structure = {
+		fixture.componentRef.setInput('structure', {
 			column_name: 'banned',
 			column_default: '0',
 			data_type: 'tinyint',
@@ -71,7 +71,7 @@ describe('BooleanFilterComponent', () => {
 			auto_increment: false,
 			allow_null: true,
 			character_maximum_length: 1,
-		};
+		});
 		component.ngOnInit();
 
 		expect(component.isRadiogroup).toEqual(true);

frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts

@@ -24,21 +24,16 @@ export class BooleanFilterComponent extends BaseFilterFieldComponent {
 	}
 
 	ngOnInit(): void {
-		super.ngOnInit();
 		this.connectionType = this._connections.currentConnection.type;
 		this.setBooleanValue();
 
-		// Parse widget parameters if available
 		let parsedParams = null;
-		if (this.widgetStructure?.widget_params) {
-			parsedParams =
-				typeof this.widgetStructure.widget_params === 'string'
-					? JSON.parse(this.widgetStructure.widget_params)
-					: this.widgetStructure.widget_params;
+		const ws = this.widgetStructure();
+		if (ws?.widget_params) {
+			parsedParams = typeof ws.widget_params === 'string' ? JSON.parse(ws.widget_params) : ws.widget_params;
 		}
 
-		// Check allow_null from either structure or widget params
-		this.isRadiogroup = this.structure?.allow_null || !!parsedParams?.allow_null;
+		this.isRadiogroup = this.structure()?.allow_null || !!parsedParams?.allow_null;
 	}
 
 	setBooleanValue() {

frontend/src/app/components/ui-components/filter-fields/country/country.component.html

@@ -1,8 +1,8 @@
 <mat-form-field class="country-form-field" appearance="outline">
-    <mat-label>{{normalizedLabel}}</mat-label>
+    <mat-label>{{normalizedLabel()}}</mat-label>
     <input type="text" matInput
-        [required]="required" [disabled]="disabled" [readonly]="readonly"
-        attr.data-testid="record-{{label}}-country"
+        [required]="required()" [disabled]="disabled()" [readonly]="readonly()"
+        attr.data-testid="record-{{label()}}-country"
         [formControl]="countryControl"
         [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
@@ -14,4 +14,4 @@
             <span *ngIf="country.value" class="country-code">({{country.value}})</span>
         </mat-option>
     </mat-autocomplete>
-</mat-form-field>
+</mat-form-field>

frontend/src/app/components/ui-components/filter-fields/country/country.component.ts

@@ -42,9 +42,9 @@ export class CountryFilterComponent extends BaseFilterFieldComponent {
 	getCountryFlag = getCountryFlag;
 
 	ngOnInit(): void {
-		super.ngOnInit();
-
-		if (this.widgetStructure?.widget_params?.allow_null || this.structure?.allow_null) {
+		const ws = this.widgetStructure();
+		const struct = this.structure();
+		if (ws?.widget_params?.allow_null || struct?.allow_null) {
 			this.countries = [{ value: null, label: '', flag: '' }, ...BASE_COUNTRIES];
 		} else {
 			this.countries = BASE_COUNTRIES;