update for search & default sorted column

Author: pqab

src/app/app.component.css

@@ -119,4 +119,15 @@ mat-sidenav {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   top: calc(50% - .5rem);
+}
+
+.form {
+  min-width: 100%;
+  max-width: 100%;
+  padding: .5rem;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
 }

src/app/app.component.html

@@ -7,8 +7,14 @@
   <chips-autocomplete-component [allItems]=allItems [placeholder]=placeholder></chips-autocomplete-component>
 </div>
 -->
+
+<form class="form">
+  <mat-form-field class="full-width">
+    <input matInput placeholder="Text" value="" (keyup.enter)="search($event.target.value)">
+  </mat-form-field>
+</form>
+
 <div>
-  <h1>Sort</h1>
   <mat-button-toggle-group name="fontStyle" aria-label="Font Style" fxLayout="row">
     <mat-button-toggle fxLayout='column' fxFlex="33.3" *ngFor="let column of sortcolumns; let i = index" [class.asc]="sortedOrder == sortedAsc" [class.desc]="sortedOrder == sortedDesc" [value]="column.value" (click)="sort(column)">{{column.text}}</mat-button-toggle>
   </mat-button-toggle-group>

src/app/app.component.ts

@@ -22,9 +22,10 @@ export class AppComponent {
   allItems: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
 
   // for sort
+  defaultSoredColumn = 'ts';
   sortcolumns = [{
     key: 'default',
-    value: 'ts',
+    value: this.defaultSoredColumn,
     text: 'Default'
   }, {
     key: 'title',
@@ -87,13 +88,14 @@ export class AppComponent {
     this.mode = 'determinate';
   }
 
-  getList(page: any, size: any, orderBy?: string, order?: string) {
+  getList(page: any, size: any, orderBy?: string, order?: string, text?: string) {
     this.startProgress();
     const params = new HttpParams()
         .set('page', page)
         .set('size', size)
-        .set('orderBy', orderBy)
-        .set('direction', order ? order : this.sortedAsc);
+        .set('orderBy', orderBy || this.defaultSoredColumn)
+        .set('direction', order || this.sortedAsc)
+        .set('query', text || '');
     this.httpService
       .get<APIResponse<Item>>(environment.getAll, params)
       .subscribe((response: any) => {
@@ -125,4 +127,8 @@ export class AppComponent {
     this.getList(1, this.pageSize, this.sortedColumn, this.sortedOrder);
   }
 
+  search(text: string) {
+    this.getList(1, this.pageSize, this.sortedColumn, this.sortedOrder, text);
+  }
+
 }

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatProgressBarModule, MatAutocompleteModule, MatIconModule, MatChipsModule,
   MatFormFieldModule, MatPaginatorModule, MatTableModule, MatSortModule, MatSidenavModule,
-  MatButtonModule, MatButtonToggleModule } from '@angular/material';
+  MatButtonModule, MatButtonToggleModule, MatInputModule } from '@angular/material';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -39,7 +39,8 @@ import { HttpService } from '../service/http.service';
     MatSortModule,
     MatSidenavModule,
     MatButtonModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    MatInputModule
   ],
   providers: [HttpService],
   bootstrap: [AppComponent]