Search form working with city and query

Author: jbarcia2019

angular/wallypop/.idea/workspace.xml

@@ -16,21 +16,43 @@ export class CommercialComponent implements OnInit {
     categories: Category[];
     category: Category;
     idCategory: number;
+    filtered: boolean;
+    query: string;
+    city: string;
+    noArticles = false;
+    // tslint:disable-next-line:max-line-length
     constructor(private articleService: ArticleService, private categoryService: CategoryService, private loginService: LoginService, private routing: ActivatedRoute) {
         this.idCategory = -1;
+        this.filtered = false;
     }
 
     ngOnInit(): void {
         this.getCategories();
-
         this.idCategory = this.routing.snapshot.params.id;
         if (this.idCategory !== undefined) {
             this.getArticlesFromCategory(this.idCategory);
         } else {
-            this.getAllArticles();
+            this.queryParams();
+            if (this.filtered) {
+                this.getFilteredArticles(this.query, this.city);
+            } else {
+                this.getAllArticles();
+            }
         }
     }
 
+    queryParams(): void {
+        this.routing.queryParams.subscribe(params => {
+            if (params.query !== undefined && params.city !== undefined) {
+                this.filtered = true;
+                this.query = params.query;
+                this.city = params.city;
+            } else {
+                this.filtered = false;
+            }
+        });
+    }
+
     getCategories(): void {
         this.categoryService.getCategories().subscribe(
             category => this.categories = category,
@@ -52,4 +74,11 @@ export class CommercialComponent implements OnInit {
         );
     }
 
+    getFilteredArticles(query: string, city: string): void {
+        this.articleService.getFilteredArticles(query, city).subscribe(
+            article => this.articles = article,
+            error => console.log(error)
+        );
+    }
+
 }

angular/wallypop/src/app/components/articles/commercial.component.ts

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col-xs-12">
-      <form action="/search" class="form-inline text-center" enctype="text/plain" method="GET">
+      <form ngNoForm action="/commercial" class="form-inline text-center" enctype="text/plain" method="GET">
         <div class="form-group">
           <input class="form-control input-lg" name="query" placeholder="Estoy buscando..." type="text">
           <input class="form-control input-lg" name="city" placeholder="Ciudad, Provincia..." type="text"/>

angular/wallypop/src/app/components/search/search.component.html

@@ -86,4 +86,9 @@ export class ArticleService {
         return throwError('Server error (' + error.status + '): ' + error.text());
     }
 
+    getFilteredArticles(query: string, city: string): Observable<Article[]> {
+        return this.httpClient.get(BASE_URL + 'articles/search?query=' + query + '&city=' + city).pipe(
+            catchError(error => this.handleError(error))
+        ) as Observable<Article[]>;
+    }
 }