update getting file recipe

client/src/app/features/recipes/recipe-details/recipe-details.component.ts

@@ -188,12 +188,13 @@ export class RecipeDetailsComponent implements OnInit {
       console.log('confirm save');
       // TODO: update value in targeted recipe
       this._recipeService.editChanges(
-        this._recipeService.getCurrentVersion(),
+        this._recipeService.getCurrentCountry(),
+        this._recipeService.getCurrentFile(),
         {
-          ...this.recipeDetail
+          ...this.recipeDetail,
         }
       );
-      console.log("Sending changes")
+      console.log('Sending changes');
       this._router.navigate(['/recipes']);
     },
   };

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

@@ -27,11 +27,12 @@
                 <div class="flex flex-row gap-5">
                   <div class="dropdown dropdown-end">
                     <input
-                      type="text"
-                      tabindex="0"
+                      #countryInput
+                      type="search"
+                      tabindex="1"
                       placeholder="Select Country"
                       class="input input-bordered input-sm w-full max-w-xs"
-                      [value]="currentCountryFilter.getValue()"
+                      [value]="selectedCountry"
                       (input)="setCountryFilter($event)"
                       (focus)="getRecipeCountries()"
                     />
@@ -39,7 +40,7 @@
                       class="dropdown-content z-[1000] min-w-[200px] max-h-[500px] overflow-y-auto"
                     >
                       <ul
-                        tabindex="0"
+                        tabindex="1"
                         class="menu p-2 shadow bg-base-100 rounded-box w-auto"
                       >
                         <li *ngFor="let country of recipeCountryFiltered">
@@ -52,12 +53,13 @@
                   </div>
                   <div *ngIf="isCountrySelected" class="dropdown dropdown-end">
                     <input
-                      type="text"
+                      #fileInput
+                      type="search"
                       tabindex="1"
                       placeholder="เลือก Recipe File"
                       class="input input-bordered input-sm w-full max-w-xs"
                       (input)="setFileFilter($event)"
-                      (focus)="getRecipeFileCountries()"
+                      (focus)="getRecipeFiles()"
                     />
                     <div
                       class="dropdown-content z-[1000] min-w-[200px] max-h-[500px] overflow-y-auto"

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

@@ -66,7 +66,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
               offset: this.offset,
               take: this.take,
               search: this.oldSearchStr,
-              version: this._recipeService.getCurrentVersion(),
+              filename: this._recipeService.getCurrentFile(),
+              country: this._recipeService.getCurrentCountry(),
             })
             .subscribe(({ recipes, hasMore, fileName }) => {
               const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -98,7 +99,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
         offset: this.offset,
         take: this.take,
         search: this.oldSearchStr,
-        version: this._recipeService.getCurrentVersion(),
+        filename: this._recipeService.getCurrentFile(),
+        country: this._recipeService.getCurrentCountry(),
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -132,7 +134,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
         offset: this.offset,
         take: this.take,
         search: this.searchStr,
-        version: this._recipeService.getCurrentVersion(),
+        filename: this._recipeService.getCurrentFile(),
+        country: this._recipeService.getCurrentCountry(),
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -163,6 +166,23 @@ export class DashboardComponent implements OnInit, OnDestroy {
   selectedCountry: string | null = null;
   isCountrySelected: boolean = false;
 
+  private countryInputEl?: ElementRef<HTMLInputElement>;
+  private fileInputEl?: ElementRef<HTMLInputElement>;
+
+  @ViewChild('countryInput', { static: false }) set countryInput(
+    countryInput: ElementRef<HTMLInputElement>
+  ) {
+    this.countryInputEl = countryInput;
+  }
+
+  @ViewChild('fileInput', { static: false }) set fileInput(
+    fileInput: ElementRef<HTMLInputElement>
+  ) {
+    this.fileInputEl = fileInput;
+  }
+
+  private firstTimeOpenModal = true;
+
   initRecipeSelection() {
     if (this._recipeService.getRecipeFileCountries().length == 0) {
       this._recipeService.getRecipeCountries().subscribe((countries) => {
@@ -180,27 +200,46 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   getRecipeCountries() {
+    if (this.firstTimeOpenModal) {
+      this.countryInputEl!.nativeElement.blur();
+      this.firstTimeOpenModal = false;
+    }
     this.currentCountryFilterSubScription = this.currentCountryFilter.subscribe(
       (c) => {
         const countries = this._recipeService.getRecipeFileCountries();
         if (countries.length > 0) {
-          this.recipeFileCountries = lodash.filter(countries, (country) =>
-            country.includes(c)
+          this.recipeCountryFiltered = lodash.filter(countries, (country) =>
+            country.toLowerCase().includes(c.toLowerCase())
           );
         }
       }
     );
   }
 
-  getRecipeFileCountries() {
+  getRecipeFiles() {
     this.currentFileFilterSubScription = this.currentFileFilter.subscribe(
       (c) => {
-        const countries = this._recipeService.getRecipeFileCountries();
-        if (countries.length > 0) {
-          this.recipeCountryFiltered = lodash.filter(countries, (country) =>
-            country.includes(c)
-          );
+        if (this.selectedCountry === null) {
+          return;
         }
+
+        const fileNames = this._recipeService.getRecipeFileNames(
+          this.selectedCountry
+        );
+        if (fileNames && fileNames.length > 0) {
+          this.recipeFileCountries = lodash.filter(fileNames, (file) =>
+            file.toLowerCase().includes(c.toLowerCase())
+          );
+        } else {
+          this._recipeService
+            .getRecipeFiles(this.selectedCountry)
+            .subscribe((files) => {
+              this.recipeFileCountries = lodash.filter(files, (file) =>
+                file.toLowerCase().includes(c.toLowerCase())
+              );
+            });
+        }
+        console.log(this.recipeFileCountries);
       }
     );
   }
@@ -208,6 +247,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   countrySelected(country: string) {
     this.selectedCountry = country;
     this.isCountrySelected = true;
+    localStorage.setItem('currentRecipeCountry', country);
   }
 
   loadRecipe(recipeFileName: string) {
@@ -219,13 +259,15 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.isHasMore = true;
     this.isLoadMore = false;
     this.oldSearchStr = '';
+    localStorage.setItem('currentRecipeFile', recipeFileName);
 
     this._recipeService
       .getRecipes({
         offset: this.offset,
         take: this.take,
         search: this.oldSearchStr,
-        version: recipeFileName,
+        filename: recipeFileName,
+        country: this.selectedCountry!,
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -249,8 +291,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   openJsonTab() {
     window.open(
-      environment.api +
-        `/recipes/${this._recipeService.getCurrentVersion()}/json`,
+      environment.api + `/recipes/${this._recipeService.getCurrentFile()}/json`,
       '_blank'
     );
   }