new component of kind search :)

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" >
-    <div *psListViewHeader>Some Header ..</div>
-    <div *psListViewItem="let item">
-        <div>Name: {{item.name}} </div>
-        <div>Address: {{item.address}} </div>
+<ps-list-view [dataSource]="merchantDataSource" listViewClasses="row">
+    <div *psListViewHeader>
+        <button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" (formCreate)="onFormCreate($event)"
+            [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 { }