Merge pull request #12056 from primefaces/issue-11931

Fixed #11931 - Table | ReferenceError: Cannot access 'ColumnFilter' before initialization
primefaces · Oct 18, 2022 · 38e36bc · 38e36bc
2 parents ee1a042 + 02ccfa2
commit 38e36bc
Showing 1 changed file with 90 additions and 88 deletions.
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -4272,94 +4272,6 @@ export class ReorderableRow implements AfterViewInit {
     }
 }
 
-@Component({
-    selector: 'p-columnFilterFormElement',
-    template: `
-        <ng-container *ngIf="filterTemplate; else builtInElement">
-            <ng-container *ngTemplateOutlet="filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}"></ng-container>
-        </ng-container>
-        <ng-template #builtInElement>
-            <ng-container [ngSwitch]="type">
-                <input *ngSwitchCase="'text'" type="text" pInputText [value]="filterConstraint?.value" (input)="onModelChange($event.target.value)"
-                    (keydown.enter)="onTextInputEnterKeyDown($event)" [attr.placeholder]="placeholder">
-                <p-inputNumber *ngSwitchCase="'numeric'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (onKeyDown)="onNumericInputKeyDown($event)" [showButtons]="showButtons"
-                    [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder"
-                    [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></p-inputNumber>
-                <p-triStateCheckbox *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-triStateCheckbox>
-                <p-calendar *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-calendar>
-            </ng-container>
-        </ng-template>
-    `,
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'class': 'p-element'
-    }
-})
-export class ColumnFilterFormElement implements OnInit {
-
-    @Input() field: string;
-
-    @Input() type: string;
-
-    @Input() filterConstraint: FilterMetadata;
-
-    @Input() filterTemplate: TemplateRef<any>;
-
-    @Input() placeholder: string;
-
-    @Input() minFractionDigits: number
-
-    @Input() maxFractionDigits: number;
-
-    @Input() prefix: string;
-
-    @Input() suffix: string;
-
-    @Input() locale: string;
-
-    @Input() localeMatcher: string;
-
-    @Input() currency: string;
-
-    @Input() currencyDisplay: string;
-
-    @Input() useGrouping: boolean = true;
-
-    get showButtons(): boolean {
-        return this.colFilter.showButtons;
-    }
-
-    filterCallback: Function;
-
-    constructor(public dt: Table, private colFilter: ColumnFilter) {}
-
-    ngOnInit() {
-        this.filterCallback = value => {
-            this.filterConstraint.value = value;
-            this.dt._filter();
-        };
-    }
-
-    onModelChange(value: any) {
-        this.filterConstraint.value = value;
-
-        if (this.type === 'boolean' || value === '') {
-            this.dt._filter();
-        }
-    }
-
-    onTextInputEnterKeyDown(event: KeyboardEvent) {
-        this.dt._filter();
-        event.preventDefault();
-    }
-
-    onNumericInputKeyDown(event: KeyboardEvent) {
-        if (event.key === 'Enter') {
-            this.dt._filter();
-            event.preventDefault();
-        }
-    }
-}
 
 @Component({
     selector: 'p-columnFilter',
@@ -4916,6 +4828,96 @@ export class ColumnFilter implements AfterContentInit {
     }
 }
 
+
+@Component({
+    selector: 'p-columnFilterFormElement',
+    template: `
+        <ng-container *ngIf="filterTemplate; else builtInElement">
+            <ng-container *ngTemplateOutlet="filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}"></ng-container>
+        </ng-container>
+        <ng-template #builtInElement>
+            <ng-container [ngSwitch]="type">
+                <input *ngSwitchCase="'text'" type="text" pInputText [value]="filterConstraint?.value" (input)="onModelChange($event.target.value)"
+                    (keydown.enter)="onTextInputEnterKeyDown($event)" [attr.placeholder]="placeholder">
+                <p-inputNumber *ngSwitchCase="'numeric'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)" (onKeyDown)="onNumericInputKeyDown($event)" [showButtons]="showButtons"
+                    [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits" [prefix]="prefix" [suffix]="suffix" [placeholder]="placeholder"
+                    [mode]="currency ? 'currency' : 'decimal'" [locale]="locale" [localeMatcher]="localeMatcher" [currency]="currency" [currencyDisplay]="currencyDisplay" [useGrouping]="useGrouping"></p-inputNumber>
+                <p-triStateCheckbox *ngSwitchCase="'boolean'" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-triStateCheckbox>
+                <p-calendar *ngSwitchCase="'date'" [placeholder]="placeholder" [ngModel]="filterConstraint?.value" (ngModelChange)="onModelChange($event)"></p-calendar>
+            </ng-container>
+        </ng-template>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'p-element'
+    }
+})
+export class ColumnFilterFormElement implements OnInit {
+
+    @Input() field: string;
+
+    @Input() type: string;
+
+    @Input() filterConstraint: FilterMetadata;
+
+    @Input() filterTemplate: TemplateRef<any>;
+
+    @Input() placeholder: string;
+
+    @Input() minFractionDigits: number
+
+    @Input() maxFractionDigits: number;
+
+    @Input() prefix: string;
+
+    @Input() suffix: string;
+
+    @Input() locale: string;
+
+    @Input() localeMatcher: string;
+
+    @Input() currency: string;
+
+    @Input() currencyDisplay: string;
+
+    @Input() useGrouping: boolean = true;
+
+    get showButtons(): boolean {
+        return this.colFilter.showButtons;
+    }
+
+    filterCallback: Function;
+
+    constructor(public dt: Table, private colFilter: ColumnFilter) {}
+
+    ngOnInit() {
+        this.filterCallback = value => {
+            this.filterConstraint.value = value;
+            this.dt._filter();
+        };
+    }
+
+    onModelChange(value: any) {
+        this.filterConstraint.value = value;
+
+        if (this.type === 'boolean' || value === '') {
+            this.dt._filter();
+        }
+    }
+
+    onTextInputEnterKeyDown(event: KeyboardEvent) {
+        this.dt._filter();
+        event.preventDefault();
+    }
+
+    onNumericInputKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Enter') {
+            this.dt._filter();
+            event.preventDefault();
+        }
+    }
+}
+
 @NgModule({
     imports: [CommonModule,PaginatorModule,InputTextModule,DropdownModule,FormsModule,ButtonModule,SelectButtonModule,CalendarModule,InputNumberModule,TriStateCheckboxModule,ScrollerModule],
     exports: [Table,SharedModule,SortableColumn,FrozenColumn,RowGroupHeader,SelectableRow,RowToggler,ContextMenuRow,ResizableColumn,ReorderableColumn,EditableColumn,CellEditor,SortIcon,