Merge branches 'main' and 'main' of https://github.com/Poomipat-Ch/taobin_recipe_manager

client/src/app/core/layout/layout.component.html

@@ -143,11 +143,9 @@
   </div>
 </aside>
 
-<div class="px-4 pt-16 sm:ml-64">
-  <div
-    class="p-4 border-2 border-gray-200 border-dashed rounded-lg sm:mt-5 md:mt-14"
-  >
-    <div class="grid grid-cols-1 gap-4 mb-4">
+<div class="pt-10 sm:ml-64">
+  <div class="p-4 sm:mt-5 md:mt-12">
+    <div class="grid grid-cols-1 gap-2 mb-2">
       <router-outlet></router-outlet>
     </div>
   </div>

client/src/app/core/services/recipe.service.ts

@@ -4,16 +4,19 @@ import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
 import { Recipe } from '../models/recipe.model';
 import { environment } from 'src/environments/environment';
 
-interface Pagination {
+interface RecipeParams {
   offset: number;
   take: number;
+  search: string;
 }
 
 @Injectable({ providedIn: 'root' })
 export class RecipeService {
   constructor(private _httpClient: HttpClient) {}
 
-  getRecipes(paginate: Pagination = { take: 10, offset: 0 }): Observable<{
+  getRecipes(
+    params: RecipeParams = { take: 10, offset: 0, search: '' }
+  ): Observable<{
     recipes: Recipe;
     hasMore: boolean;
   }> {
@@ -22,10 +25,12 @@ export class RecipeService {
       hasMore: boolean;
     }>(environment.api + '/recipes', {
       params: {
-        offset: String(paginate.offset),
-        take: String(paginate.take),
+        offset: params.offset,
+        take: params.take,
+        search: params.search,
       },
       withCredentials: true,
+      responseType: 'json',
     });
   }
 }

client/src/app/features/dashboard/dashboard.component.html

@@ -28,11 +28,17 @@
                 <input
                   class="input input-bordered join-item w-[300px]"
                   placeholder="Product Code, Name or Other Name"
+                  (input)="setSearch($event)"
+                  (keydown.enter)="search($event)"
                 />
-                <button class="btn join-item">Search</button>
+                <button class="btn join-item" (click)="search($event)">
+                  Search
+                </button>
               </div>
               <div class="flex gap-2">
-                <button class="btn rounded-lg">View JSON</button>
+                <button class="btn rounded-lg" (click)="openJsonTab()">
+                  View JSON
+                </button>
                 <button class="btn rounded-lg">
                   <svg
                     class="w-6 h-6 text-gray-800 dark:text-white"

client/src/app/features/dashboard/dashboard.component.ts

@@ -14,6 +14,7 @@ import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { BehaviorSubject } from 'rxjs';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-dashboard',
@@ -40,6 +41,9 @@ export class DashboardComponent implements OnInit {
   isLoadMore: boolean = false;
   isHasMore: boolean = true;
 
+  private searchStr = '';
+  private oldSearchStr = '';
+
   @ViewChild('table', { static: false }) set content(table: ElementRef) {
     table.nativeElement.addEventListener(
       'scroll',
@@ -56,6 +60,7 @@ export class DashboardComponent implements OnInit {
             .getRecipes({
               offset: this.offset,
               take: this.take,
+              search: this.oldSearchStr,
             })
             .subscribe(({ recipes, hasMore }) => {
               const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -92,6 +97,7 @@ export class DashboardComponent implements OnInit {
       .getRecipes({
         offset: this.offset,
         take: this.take,
+        search: this.oldSearchStr,
       })
       .subscribe(({ recipes, hasMore }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -109,4 +115,35 @@ export class DashboardComponent implements OnInit {
         this.isHasMore = hasMore;
       });
   }
+
+  setSearch(event: Event) {
+    this.searchStr = (event.target as HTMLInputElement).value;
+  }
+
+  search(event: Event) {
+    this.offset = 0;
+    this.oldSearchStr = this.searchStr;
+    this._recipeService
+      .getRecipes({
+        offset: this.offset,
+        take: this.take,
+        search: this.searchStr,
+      })
+      .subscribe(({ recipes, hasMore }) => {
+        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
+        this.recipes01 = Recipe01;
+
+        this.recipes = {
+          ...recipesWithoutRecipe01,
+          Recipe01: [],
+        };
+        this.offset += 10;
+        this.isLoaded = true;
+        this.isHasMore = hasMore;
+      });
+  }
+
+  openJsonTab() {
+    window.open(environment.api + '/recipes/json', '_blank');
+  }
 }