new component of kind search :)

package-lock.json

@@ -1684,9 +1684,9 @@
       }
     },
     "@poweredsoft/ngx-data": {
-      "version": "0.0.13",
+      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data/-/ngx-data-0.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data/-/ngx-data-0.0.16.tgz",
-      "integrity": "sha512-qfLMQuWRnHOcM5eupC5Mt7XacjGXcu9bYTLwpTlZ2Yx63iF6yH8CxF2rB5xAGxgjnKIOjYk9XL+qvijDL3dTPw==",
+      "integrity": "sha512-hk5eNvzGkotTfu0GfksOK9KtLGVUtwc/9JSSKWRIejF04oaXeBZ6PZ6s62YRnZ/EEG5JA0bQdZSHiPlaEapeeQ==",
       "requires": {
         "tslib": "^1.9.0"
       }

package.json

@@ -25,7 +25,7 @@
     "@angular/router": "~9.1.4",
     "@ng-select/ng-select": "^4.0.1",
     "@poweredsoft/data": "0.0.30",
-    "@poweredsoft/ngx-data": "0.0.13",
+    "@poweredsoft/ngx-data": "0.0.16",
     "@poweredsoft/ngx-data-apollo": "0.0.10",
     "apollo-angular": "^1.8.0",
     "apollo-angular-link-http": "^1.9.0",

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.html

@@ -0,0 +1,7 @@
+<form (submit)="applySearch()">
+    <div [ngClass]="classes">
+        <input type="search" (onSearch)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
+            [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
+        <button type="submit" [ngClass]="submitButtonClasses">{{ finalSearchText }}</button>
+    </div>
+</form>

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FilterType, ICompositeFilter, IDataSource, ISimpleFilter } from '@poweredsoft/data';
+
+@Component({
+  selector: 'ps-ds-search',
+  templateUrl: './ds-search.component.html',
+  styleUrls: ['./ds-search.component.scss']
+})
+export class DsSearchComponent implements OnInit {
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() filterType: string;
+  @Input() filterPaths: string[];
+  @Input() searchText: string;
+  @Input() submitButtonClasses: any;
+  @Input() searchClasses: any;
+  @Input() classes: any;
+
+  filterValue: string = null;
+  lastUsedFilter: any;
+
+  constructor() { }
+
+  get finalSearchText() {
+    return this.searchText ?? "Search";
+  }
+
+  get finalFilterType() {
+    return this.filterType ?? FilterType.CONTAINS;
+  }
+
+  onSearch() {
+      this.applySearch();
+  }
+
+  applySearch() {
+
+    const existingFilters = this.dataSource.filters;
+
+
+    // adapt current filters to remove the previous one if exist
+    // and replace with new one.
+    const finalNewFilters = existingFilters
+      .filter(t => t != this.lastUsedFilter);
+
+    if (this.filterValue) {
+      const newFilter: ICompositeFilter = {
+        and: true,
+        type: FilterType.COMPOSITE,
+        filters: this.filterPaths.map(filterPath => (<ISimpleFilter>{
+          path: filterPath,
+          type: this.finalFilterType,
+          value: this.filterValue,
+          and: false
+        }))
+      }
+
+      finalNewFilters.push(newFilter);
+
+      // update last used filter to replace it if changed.
+      this.lastUsedFilter = newFilter;
+    } else {
+      this.lastUsedFilter = null;
+    }
+
+    // execute search.
+    this.dataSource.query({
+      page: 1,
+      filters: finalNewFilters
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsSearchComponent } from './ds-search.component';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [DsSearchComponent],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [DsSearchComponent]
+})
+export class DsSearchModule { }

projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html

@@ -1,17 +1,17 @@
-
 <ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
-<ng-container *ngIf= "!noData else noResultTemplate">
+<ng-container *ngIf="!noData else noResultTemplate">
-    <ng-container *ngFor="let item of latestResult.data">
+    <div [ngClass]="listViewClasses">
-        <ng-container [ngTemplateOutlet]="getViewItemTemplate()"
+        <ng-container *ngFor="let item of latestResult.data">
-        [ngTemplateOutletContext]="{
+            <ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
-            $implicit: item
+                $implicit: item
-          }">
+              }">
+            </ng-container>
         </ng-container>
-    </ng-container>
+    </div>
 </ng-container>
 <ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
 
 
 <ng-template #noResultTemplate>
-          <p>{{noRecords}}</p>
+    <div class="noRecordClasses">{{noRecords}}</div>
 </ng-template>

projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts

@@ -14,6 +14,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
   @Input() dataSource: IDataSource<any>;
   @Input() noRecordsText: string;
+  @Input() noRecordClasses: any;
+  @Input() listViewClasses: any;
 
   latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
   loading:boolean;
@@ -40,7 +42,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   get noData(){
-    return !this.latestResult;
+    if (!this.latestResult)
+      return true;
+
+    return this.latestResult.data.length == 0;
   }
 
   get noRecords(){

src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html

@@ -1,11 +1,49 @@
 <h1>list view demo</h1>
 
-<ps-list-view [dataSource]="merchantDataSource" >
+<ps-list-view [dataSource]="merchantDataSource" listViewClasses="row">
-    <div *psListViewHeader>Some Header ..</div>
+    <div *psListViewHeader>
-    <div *psListViewItem="let item">
+        <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant" commandText="Add"
-        <div>Name: {{item.name}} </div>
+            [dataSource]="merchantDataSource" command="addMerchant" (formCreate)="onFormCreate($event)"
-        <div>Address: {{item.address}} </div>
+            [template]="theModal">Create New Records</button>
+
+        <div class="mt-2">
+            <ps-ds-search 
+                classes="d-flex flex-row" 
+                [dataSource]="merchantDataSource"
+                submitButtonClasses="btn btn-light btn-sm" 
+                searchClasses="form-control form-control-sm d-inlineblock"
+                [filterPaths]="['name', 'address']">
+            </ps-ds-search>
+
+        </div>
+    </div>
+    <div *psListViewItem="let item" class="col-lg-4 col-md-6 col-sm-12">
+        <div class="card mt-2">
+            <div class="card-body">
+                <div class="card-title">
+                    {{ item.name }}
+                </div>
+                <pre>{{ item | json }}</pre>
+            </div>
+        </div>
+    </div>
+    <div *psListViewFooter class="mt-2">
+        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
     </div>
-    <div *psListViewFooter>Some Footer ..</div>
 </ps-list-view>
 
+<ng-template #theModal let-form let-loading="loading">
+    <form [formGroup]="form">
+        <div class="form-group">
+            <label for="name" class="col-sm-2 control-label">Name</label>
+            <div class="col-sm-8">
+                <input id="name" type="text" class="form-control" formControlName="name">
+            </div>
+
+            <label for="address" class="col-sm-2 control-label">Address</label>
+            <div class="col-sm-8">
+                <input id="address" type="text" class="form-control" formControlName="address">
+            </div>
+        </div>
+    </form>
+</ng-template>

src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts

@@ -3,6 +3,15 @@ import { IMerchant } from 'src/app/data/services/IMerchant';
 import { IDataSource } from '@poweredsoft/data';
 import { MerchantService } from 'src/app/data/services/merchant.service';
 import { Subscription } from 'rxjs';
+import { HttpDataSourceService } from '@poweredsoft/ngx-data';
+import { IModelFormCreateEvent } from '@poweredsoft/ngx-bootstrap';
+import { FormBuilder, Validators } from '@angular/forms';
+
+
+interface ISchool {
+  id: string,
+  name: string
+}
 
 @Component({
   selector: 'ps-list-view-demo-home',
@@ -12,16 +21,34 @@ import { Subscription } from 'rxjs';
 export class ListViewDemoHomeComponent implements OnInit {
 
 
-  merchantDataSource: IDataSource<IMerchant>;
+  merchantDataSource: IDataSource<ISchool>;
 
 
-  constructor(private merchantService: MerchantService) {
+  constructor(merchantService: MerchantService, private fb: FormBuilder) {
+    // this.dataSource = hdss.builder<ISchool, string>()
+    //   .defaultCriteria({
+    //     page: 1,
+    //     pageSize: 6
+    //   })
+    //   .queryUrl('https://localhost:5001/api/query/schools')
+    //   .keyResolver(m => m.id)
+    //   .createDataSource();
+
     this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
    }
 
   ngOnInit(): void {
 
-    this.merchantDataSource.refresh();
+    this.merchantDataSource.query({
+      pageSize: 6
+    })
   }
 
+  onFormCreate(event: IModelFormCreateEvent) {    
+    event.shouldSetCommandModel = false;
+    event.formGroup = this.fb.group({
+      'name': [event.commandModel.name, Validators.required],
+      'address': [event.commandModel.address, Validators.required]
+    });
+  }
 }

src/app/list-view-demo/list-view-demo.module.ts

@@ -4,6 +4,9 @@ import { CommonModule } from '@angular/common';
 import { ListViewDemoRoutingModule } from './list-view-demo-routing.module';
 import { ListViewDemoHomeComponent } from './list-view-demo-home/list-view-demo-home.component';
 import { ListViewModule } from '@poweredsoft/ngx-cdk-ui';
+import { FormGroupCommandModalModule, PaginationModule } from '@poweredsoft/ngx-bootstrap';
+import { ReactiveFormsModule } from '@angular/forms';
+import { DsSearchModule } from 'projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module';
 
 
 
@@ -12,7 +15,11 @@ import { ListViewModule } from '@poweredsoft/ngx-cdk-ui';
   imports: [
     CommonModule,
     ListViewDemoRoutingModule,
-    ListViewModule
+    ListViewModule,
+    PaginationModule,
+    ReactiveFormsModule,
+    FormGroupCommandModalModule,
+    DsSearchModule
   ]
 })
 export class ListViewDemoModule { }