new component of kind search :)

2021-02-08 23:06:22 -05:00
parent caefd41b09
commit 4e1affea5d
11 changed files with 200 additions and 24 deletions
@@ -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>
@@ -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 {
+  }
+
+}
@@ -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 { }
@@ -1,17 +1,17 @@
-
 <ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
-<ng-container *ngIf= "!noData else noResultTemplate">
-    <ng-container *ngFor="let item of latestResult.data">
-        <ng-container [ngTemplateOutlet]="getViewItemTemplate()"
-        [ngTemplateOutletContext]="{
-            $implicit: item
-          }">
+<ng-container *ngIf="!noData else noResultTemplate">
+    <div [ngClass]="listViewClasses">
+        <ng-container *ngFor="let item of latestResult.data">
+            <ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
+                $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>
@@ -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(){