[ng-components] base list add debounce and minimum character search

.github/workflows/npm-publish.yml

@@ -26,9 +26,9 @@ jobs:
           node-version: '24'
           registry-url: https://registry.npmjs.org/
 
-      - name: npm install
+      - name: npm clean install
         run: |
-          npm install
+          npm ci
 
       - name: npm run build-auth
         run: |
@@ -44,6 +44,23 @@ jobs:
 
       - name: publish to npm registry
         run: |
-          npm run publish-auth
-          npm run publish-components
-          npm run publish-config
+          publish_if_new() {
+            local name=$1
+            local dir=$2
+            local version=$(node -p "require('./projects/${dir}/package.json').version")
+            local published=$(npm view "${name}@${version}" version 2>/dev/null || echo "")
+            if [ "$published" = "$version" ]; then
+              echo "⏭ ${name}@${version} already published, skipping."
+            else
+              echo "📦 Publishing ${name}@${version}..."
+              if echo "$version" | grep -q "-"; then
+                (cd dist/${dir} && npm publish --tag beta)
+              else
+                (cd dist/${dir} && npm publish)
+              fi
+            fi
+          }
+
+          publish_if_new "@indice/ng-auth" "ng-auth"
+          publish_if_new "@indice/ng-components" "ng-components"
+          publish_if_new "@indice/ng-config" "ng-config"

package.json

@@ -18,9 +18,7 @@
     "ts-node": "ts-node",
     "publish-components": "cd projects/ng-components && cd ../.. && ng build ng-components --configuration=production && cd dist/ng-components && npm publish",
     "publish-auth": "cd projects/ng-auth && cd ../.. && ng build ng-auth --configuration=production && cd dist/ng-auth && npm publish",
-    "publish-config": "cd projects/ng-config && cd ../.. && ng build ng-config --configuration=production && cd dist/ng-config && npm publish",
-    "publish-components-beta": "cd projects/ng-components && npm version prerelease --preid beta && cd ../.. && ng build ng-components --configuration=production && cd dist/ng-components && npm publish",
-    "publish-auth-beta": "cd projects/ng-auth && npm version prerelease --preid beta && cd ../.. && ng build ng-auth --configuration=production && cd dist/ng-auth && npm publish"
+    "publish-config": "cd projects/ng-config && cd ../.. && ng build ng-config --configuration=production && cd dist/ng-config && npm publish"
   },
   "private": false,
   "dependencies": {

projects/app/src/app/features/controls/controls-samples-list/controls-samples-list.component.html

@@ -1,4 +1,4 @@
-<lib-view-layout title="Shell layout samples" [busy]="!items" [actions]="actions" [meta-items]="metaItems">
+<lib-view-layout title="Shell layout samples" [busy]="!items" [actions]="actions" [meta-items]="metaItems" (onSearch)="searchChanged($event)">
   <lib-list-view 
     [items]="items" 
     [show-pager]="true" 

projects/app/src/app/features/controls/controls-samples-list/controls-samples-list.component.ts

@@ -3,7 +3,7 @@ import { Observable, of } from 'rxjs';
 import { SampleViewModel } from '../../../models/sample.vm';
 import { ActivatedRoute, Router } from '@angular/router';
 import { delay } from 'rxjs/operators';
-import { IResultSet, ListViewType, MenuOption, RouterViewAction, SwitchViewAction } from 'projects/ng-components/src/lib/types';
+import { IResultSet, ListViewType, MenuOption, RouterViewAction, SwitchViewAction, ViewAction } from 'projects/ng-components/src/lib/types';
 import { BaseListComponent, Icons } from 'projects/ng-components/src/public-api';
 
 export const ControlsSamples = [
@@ -54,12 +54,17 @@ export class ControlsSamplesListComponent extends BaseListComponent<SampleViewMo
 
   loadItems(): Observable<IResultSet<SampleViewModel> | null | undefined> {
     let items = ControlsSamples;
+    if (this.search) {
+      const term = this.search.toLowerCase();
+      items = items.filter(i => i.title?.toLowerCase().includes(term) || i.description?.toLowerCase().includes(term));
+    }
     return of({ count: items.length, items }).pipe(delay(1200));
   }
 
   ngOnInit(): void {
     super.ngOnInit();
     this.actions = [];
+    this.actions.push(new ViewAction('search', null, null, Icons.Search, 'search'));
     this.actions.push(new SwitchViewAction(ListViewType.Tiles, Icons.TilesView, 'switch to tiles view'));
     this.actions.push(new SwitchViewAction(ListViewType.Table, Icons.TableView, 'switch to table (grid) view'));
     this.actions.push(new SwitchViewAction(ListViewType.Gallery, Icons.ItemsCount, 'switch to gallery view'));

projects/ng-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indice/ng-components",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Indice common components for Angular v20",
   "repository": {
     "type": "git",

projects/ng-components/src/lib/helpers/base-list.component.ts

@@ -1,5 +1,6 @@
 import { FilterClause, QueryParameters, SearchOption } from './../controls/advanced-search/models';
-import { Observable, Subscription, of } from 'rxjs';
+import { Observable, Subject, Subscription, of } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 import { Component, OnInit, OnDestroy, Inject, Input } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { HeaderMetaItem, IResultSet, MenuOption, RouterViewAction, ViewAction, ListViewType } from '../types';
@@ -28,8 +29,12 @@ export abstract class BaseListComponent<T> implements OnInit, OnDestroy {
   public singularResult = 'result';
   public pluralResults = 'results';
   public abstract newItemLink: string | null;
+  public minimumSearchCharacters = 3;
+  public searchDebounceTime = 300;
   private routeSub$: Subscription | undefined;
   private loadSub$: Subscription | undefined;
+  private searchSub$: Subscription | undefined;
+  private searchSubject$ = new Subject<string | null>();
   @Input('auto-load') autoLoad: boolean = true;
 
   constructor(private route$: ActivatedRoute, private router$: Router) {
@@ -39,9 +44,12 @@ export abstract class BaseListComponent<T> implements OnInit, OnDestroy {
     if (this.routeSub$) {
       this.routeSub$.unsubscribe();
     }
-    if(this.loadSub$) {
+    if (this.loadSub$) {
       this.loadSub$.unsubscribe();
     }
+    if (this.searchSub$) {
+      this.searchSub$.unsubscribe();
+    }
   }
 
   public getViewActions(): Observable<ViewAction[]> {
@@ -64,6 +72,14 @@ export abstract class BaseListComponent<T> implements OnInit, OnDestroy {
       { key: 'count', icon: Icons.ItemsCount, text: 'please wait...' }
     ];
 
+    this.searchSub$ = this.searchSubject$.pipe(
+      filter(value => (value?.length ?? 0) >= this.minimumSearchCharacters || (value?.length ?? 0) === 0),
+      debounceTime(this.searchDebounceTime),
+      distinctUntilChanged()
+    ).subscribe(searchText => {
+      this.executeSearch(searchText);
+    });
+
     // disabled external route changes monitoring due to sync issues - which is bad :) - refresh from url will not work
     // until i come up with a solution...
 
@@ -251,6 +267,10 @@ export abstract class BaseListComponent<T> implements OnInit, OnDestroy {
   }
 
   public searchChanged(searchText: string | null): void {
+    this.searchSubject$.next(searchText);
+  }
+
+  private executeSearch(searchText: string | null): void {
     this.count = 0;
     this.page = 1;
     this.items = null;