fix: pass filter from listbox and allow applying external filter as w…

…ell as inserting elements below list
primefaces · Jan 23, 2025 · 83fbdfe · 83fbdfe
1 parent 248249e
commit 83fbdfe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/packages/primeng/src/api/filterservice.ts b/packages/primeng/src/api/filterservice.ts
@@ -253,6 +253,13 @@ export class FilterService {
             value.setHours(0, 0, 0, 0);
 
             return value.getTime() > filter.getTime();
+        },
+
+        /**
+         * can be used to bypass the filter to apply filter externally
+         */
+        bypass: (): boolean => {
+            return true;
         }
     };
 

diff --git a/packages/primeng/src/listbox/listbox.ts b/packages/primeng/src/listbox/listbox.ts
@@ -421,7 +421,7 @@ export class Listbox extends BaseComponent implements AfterContentInit, OnInit,
      * Defines how the items are filtered.
      * @group Props
      */
-    @Input() filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' = 'contains';
+    @Input() filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'bypass' = 'contains';
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      * @group Props

diff --git a/packages/primeng/src/picklist/picklist.ts b/packages/primeng/src/picklist/picklist.ts
@@ -26,7 +26,7 @@ import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ButtonDirective, ButtonProps } from 'primeng/button';
 import { AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, SearchIcon } from 'primeng/icons';
-import { Listbox } from 'primeng/listbox';
+import { Listbox, ListboxFilterEvent } from 'primeng/listbox';
 import { Ripple } from 'primeng/ripple';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import {
@@ -131,6 +131,7 @@ import { PickListStyle } from './style/pickliststyle';
                     (onBlur)="onListBlur($event, SOURCE_LIST)"
                     (keydown)="onItemKeyDown($event, selectedItemsSource, onSourceSelect, SOURCE_LIST)"
                     (onDblClick)="onSourceItemDblClick()"
+                    (onFilter)="sourceFilter($event)"
                     [disabled]="disabled"
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
@@ -161,6 +162,7 @@ import { PickListStyle } from './style/pickliststyle';
                         <ng-container *ngTemplateOutlet="emptyFilterMessageSourceTemplate || _emptyFilterMessageSourceTemplate || emptyMessageSourceTemplate || _emptyMessageSourceTemplate"></ng-container>
                     </ng-container>
                 </p-listbox>
+                <ng-content select="below-source-list"></ng-content>
             </div>
             <div class="p-picklist-controls p-picklist-transfer-controls" [attr.data-pc-section]="'buttons'" [attr.data-pc-group-section]="'controls'">
                 <button
@@ -251,6 +253,7 @@ import { PickListStyle } from './style/pickliststyle';
                     (onBlur)="onListBlur($event, TARGET_LIST)"
                     (keydown)="onItemKeyDown($event, selectedItemsTarget, onTargetSelect, TARGET_LIST)"
                     (onDblClick)="onTargetItemDblClick()"
+                    (onFilter)="targetFilter($event)"
                     [disabled]="disabled"
                     [metaKeySelection]="metaKeySelection"
                     [scrollHeight]="scrollHeight"
@@ -281,6 +284,7 @@ import { PickListStyle } from './style/pickliststyle';
                         <ng-container *ngTemplateOutlet="emptyFilterMessageTargetTemplate || _emptyFilterMessageTargetTemplate || emptyMessageTargetTemplate || _emptyMessageTargetTemplate"></ng-container>
                     </ng-container>
                 </p-listbox>
+                <ng-content select="below-target-list"></ng-content>
             </div>
             <div class="p-picklist-controls p-picklist-target-controls" *ngIf="showTargetControls" [attr.data-pc-section]="'targetControls'" [attr.data-pc-group-section]="'controls'">
                 <button
@@ -525,7 +529,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
      * Defines how the items are filtered.
      * @group Props
      */
-    @Input() filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' = 'contains';
+    @Input() filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'bypass' = 'contains';
     /**
      * Whether to displays rows with alternating colors.
      * @group Props
@@ -1847,6 +1851,22 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
         this.destroyMedia();
         super.ngOnDestroy();
     }
+
+    sourceFilter($event: ListboxFilterEvent) {
+        const query = $event.filter as string;
+        this.onSourceFilter.emit({
+            query,
+            value: []
+        })
+    }
+
+    targetFilter($event: ListboxFilterEvent) {
+        const query = $event.filter as string;
+        this.onTargetFilter.emit({
+            query,
+            value: []
+        })
+    }
 }
 
 @NgModule({