add company search

Author: pqab

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.7'
 services:
   app:
-    image: registry.gitlab.com/dotterbear/service-jobad-reader
+    image: registry.gitlab.com/dotterbear/service-search-ui
     ports:
       - '8768:80' 
     expose:

src/app/app.component.css

@@ -122,12 +122,14 @@ mat-sidenav {
 }
 
 .form {
-  min-width: 100%;
-  max-width: 100%;
   padding: .5rem;
-  width: 100%;
 }
 
 .full-width {
   width: 100%;
+}
+
+.company-name:hover {
+  text-decoration: underline;
+  cursor: pointer;
 }

src/app/app.component.html

@@ -8,9 +8,14 @@
 </div>
 -->
 
-<form class="form">
-  <mat-form-field class="full-width">
-    <input matInput placeholder="Text" value="" (keyup.enter)="search($event.target.value)">
+<form class="form" [formGroup]="searchForm" (submit)="search()">
+  <mat-form-field class="full-width" appearance="outline">
+    <mat-label>Keyword</mat-label>
+    <input matInput id="query" placeholder="Keyword" value="" formControlName="query" (keyup.enter)="search()">
+  </mat-form-field>
+  <mat-form-field class="full-width" appearance="outline">
+    <mat-label>Company Name</mat-label>
+    <input matInput id="company-name" placeholder="Company Name" value="" formControlName="company-name" (keyup.enter)="search()">
   </mat-form-field>
 </form>
 
@@ -28,7 +33,7 @@
           <ng-container matColumnDef="summary">
             <td mat-cell *matCellDef="let item">
               <h1>{{item.title}}</h1>
-              <h3>{{item.companyName}}<span>{{item.location? ' - ' + item.location : ''}}</span></h3>
+              <h3 class="company-name" (click)="searchForm.controls['company-name'].setValue(item.companyName); search()">{{item.companyName}}<span>{{item.location? ' - ' + item.location : ''}}</span></h3>
               <h5>{{item.postedDate}}</h5>
             </td>
           </ng-container>

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { APIResponse } from '../entity/APIResponse';
 import { Item } from '../entity/Item';
 import { environment } from '../environments/environment';
 import { HttpParams } from "@angular/common/http";
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { getListeners } from '@angular/core/src/render3/discovery_utils';
 
@@ -17,6 +17,8 @@ import { getListeners } from '@angular/core/src/render3/discovery_utils';
 export class AppComponent {
   mode = 'determinate';
 
+  searchForm: FormGroup;
+
   // for search
   placeholder: string = 'New Items';
   allItems: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
@@ -58,10 +60,14 @@ export class AppComponent {
 
   private mobileQueryListener: () => void;
 
-  constructor(private httpService: HttpService, changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
+  constructor(private httpService: HttpService, changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, formBuilder: FormBuilder) {
     this.mobileQuery = media.matchMedia('(max-width: 768px)');
     this.mobileQueryListener = () => changeDetectorRef.detectChanges();
     this.mobileQuery.addListener(this.mobileQueryListener);
+    this.searchForm =  formBuilder.group({
+      query: '',
+      'company-name': ''
+    });
   }
 
   ngOnInit(): void {
@@ -88,14 +94,15 @@ export class AppComponent {
     this.mode = 'determinate';
   }
 
-  getList(page: any, size: any, orderBy?: string, order?: string, text?: string) {
+  getList(page: any, size: any, orderBy?: string, order?: string, formValue?: any) {
     this.startProgress();
     const params = new HttpParams()
         .set('page', page)
         .set('size', size)
         .set('orderBy', orderBy || this.defaultSoredColumn)
         .set('direction', order || this.sortedAsc)
-        .set('query', text || '');
+        .set('query', formValue && formValue.query || '')
+        .set('company-name', formValue && formValue['company-name']);
     this.httpService
       .get<APIResponse<Item>>(environment.getAll, params)
       .subscribe((response: any) => {
@@ -124,11 +131,11 @@ export class AppComponent {
     }
     this.sortedColumnKey = column.key;
     this.sortedColumn = column.value;
-    this.getList(1, this.pageSize, this.sortedColumn, this.sortedOrder);
+    this.getList(1, this.pageSize, this.sortedColumn, this.sortedOrder, this.searchForm.value);
   }
 
-  search(text: string) {
-    this.getList(1, this.pageSize, this.sortedColumn, this.sortedOrder, text);
+  search() {
+    this.getList(1, this.pageSize, this.sortedColumn, this.sortedOrder, this.searchForm.value);
   }
 
 }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  getAll: 'http://localhost:8767/rest/api/v1/jobad/list'
+  getAll: 'http://34.73.206.62:8767/rest/api/v1/jobad/list'
 };
 
 /*