add file select for multiple country

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

@@ -12,8 +12,15 @@ interface RecipeParams {
   search: string;
 }
 
+interface RecipeFiles {
+  [key: string]: string[];
+}
+
 @Injectable({ providedIn: 'root' })
 export class RecipeService {
+  private countries: string[] = [];
+  private recipeFiles: RecipeFiles = {};
+
   constructor(private _httpClient: HttpClient) {}
 
   getRecipes(
@@ -74,10 +81,29 @@ export class RecipeService {
     });
   }
 
-  getRecipeVersions(): Observable<string[]> {
-    return this._httpClient.get<string[]>(
-      environment.api + '/recipes/versions',
-      { withCredentials: true, responseType: 'json' }
-    );
+  getRecipeCountries(): Observable<string[]> {
+    return this._httpClient
+      .get<string[]>(environment.api + '/recipes/versions', {
+        withCredentials: true,
+        responseType: 'json',
+      })
+      .pipe(tap((countries) => (this.countries = countries)));
+  }
+
+  getRecipeFiles(country: string): Observable<string[]> {
+    return this._httpClient
+      .get<string[]>(environment.api + '/recipes/versions/' + country, {
+        withCredentials: true,
+        responseType: 'json',
+      })
+      .pipe(tap((files) => (this.recipeFiles[country] = files)));
+  }
+
+  getRecipeFileCountries(): string[] {
+    return this.countries;
+  }
+
+  getRecipeFileNames(country: string): string[] {
+    return this.recipeFiles[country];
   }
 }

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

@@ -109,6 +109,10 @@ export class RecipeDetailsComponent implements OnInit {
         (recipe) => recipe.materialPathId
       );
 
+      if (originalRecipeDetail.recipe.recipes != null) {
+        return;
+      }
+
       this._materialService.getMaterialCodes(ids).subscribe((data) => {
         this.originalRecipeDetail.next({
           ...originalRecipeDetail,

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

@@ -5,7 +5,7 @@
   <table *ngIf="isLoaded" class="table">
     <caption class="p-5 text-lg font-semibold text-left text-gray-900">
       <div class="divide-y divide-solid divide-gray-400">
-        <div class="flex flex-row py-3 justify-between">
+        <div class="flex flex-row py-3 justify-between items-center">
           <div class="flex flex-col">
             <span
               >Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
@@ -13,7 +13,73 @@
             >
           </div>
           <div class="flex flex-col ml-5">
-            <div class="dropdown dropdown-end">
+            <button
+              class="btn bg-primary btn-md"
+              onclick="select_file_modal.showModal()"
+            >
+              <span class="text-base text-gray-700">เลือก Recipe ไฟล์</span>
+            </button>
+            <dialog id="select_file_modal" class="modal">
+              <div
+                class="modal-box max-w-[600px] overflow-visible flex flex-col justify-center items-center gap-5"
+              >
+                <h3 class="font-bold text-lg">เลือก Recipe ไฟล์</h3>
+                <div class="flex flex-row gap-5">
+                  <div class="dropdown dropdown-end">
+                    <input
+                      type="text"
+                      tabindex="0"
+                      placeholder="เลือก Recipe File"
+                      class="input input-bordered input-sm w-full max-w-xs"
+                      (input)="setRecipeVersion($event)"
+                      (focus)="getRecipeVersions()"
+                    />
+                    <div
+                      class="dropdown-content z-[1000] min-w-[200px] max-h-[500px] overflow-y-auto"
+                    >
+                      <ul
+                        tabindex="0"
+                        class="menu p-2 shadow bg-base-100 rounded-box w-auto"
+                      >
+                        <li *ngFor="let recipeVersion of recipeVersions">
+                          <a (click)="loadRecipe(recipeVersion)">{{
+                            recipeVersion
+                          }}</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="dropdown dropdown-end">
+                    <input
+                      type="text"
+                      tabindex="0"
+                      placeholder="เลือก Recipe File"
+                      class="input input-bordered input-sm w-full max-w-xs"
+                      (input)="setRecipeVersion($event)"
+                      (focus)="getRecipeVersions()"
+                    />
+                    <div
+                      class="dropdown-content z-[1000] min-w-[200px] max-h-[500px] overflow-y-auto"
+                    >
+                      <ul
+                        tabindex="0"
+                        class="menu p-2 shadow bg-base-100 rounded-box w-auto"
+                      >
+                        <li *ngFor="let recipeVersion of recipeVersions">
+                          <a (click)="loadRecipe(recipeVersion)">{{
+                            recipeVersion
+                          }}</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <form method="dialog" class="modal-backdrop">
+                <button>close</button>
+              </form>
+            </dialog>
+            <!-- <div class="dropdown dropdown-end">
               <input
                 type="text"
                 tabindex="0"
@@ -34,7 +100,7 @@
                   </li>
                 </ul>
               </div>
-            </div>
+            </div> -->
           </div>
           <div class="flex flex-col ml-auto">
             <span class=""

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

@@ -10,6 +10,11 @@ import { BehaviorSubject } from 'rxjs';
 import * as lodash from 'lodash';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
+interface RecipeFileFilter {
+  country: string | null;
+  fileName: string | null;
+}
+
 @Component({
   selector: 'app-recipes',
   standalone: true,
@@ -19,7 +24,8 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 export class DashboardComponent implements OnInit {
   recipes: Recipe | null = null;
   recipes01: Recipe01[] | null = null;
-  recipeVersions: string[] = [];
+  recipeFileCountries: string[] = [];
+  recipeFileNames: string[] = [];
   fileName: string = '';
 
   tableHeads: string[] = [
@@ -31,10 +37,13 @@ export class DashboardComponent implements OnInit {
   ];
   private offset = 0;
   private take = 20;
-  private recipeVersionData: string[] = [];
 
-  recipeVersion: BehaviorSubject<string> = new BehaviorSubject<string>('');
-  recipeVersion$ = this.recipeVersion.asObservable();
+  recipeFileFilter: BehaviorSubject<RecipeFileFilter> =
+    new BehaviorSubject<RecipeFileFilter>({
+      country: null,
+      fileName: null,
+    });
+  recipeFileFilter$ = this.recipeFileFilter.asObservable();
 
   isLoaded: boolean = false;
   isLoadMore: boolean = false;
@@ -111,11 +120,16 @@ export class DashboardComponent implements OnInit {
         this.isHasMore = hasMore;
       });
 
-    this.recipeVersion$.subscribe((version) => {
-      if (version)
-        this.recipeVersions = lodash.filter(this.recipeVersionData, (v) =>
-          v.includes(version)
-        );
+    this.recipeFileFilter$.subscribe((version) => {
+      this.recipeFileCountries = lodash.filter(
+        this._recipeService.getRecipeFileCountries(),
+        (v) => {
+          if (version.country) {
+            return v.includes(version.country);
+          }
+          return true;
+        }
+      );
     });
   }
 
@@ -189,9 +203,9 @@ export class DashboardComponent implements OnInit {
 
   getRecipeVersions() {
     if (this.recipeVersionData.length > 0) return;
-    this._recipeService.getRecipeVersions().subscribe((versions) => {
+    this._recipeService.getRecipeCountries().subscribe((versions) => {
       this.recipeVersionData = versions;
-      this.recipeVersions = versions;
+      this.recipeFileCountries = versions;
     });
   }
 

client/src/environments/environment.development.ts

@@ -1,5 +1,4 @@
 export const environment = {
   production: false,
   api: 'http://localhost:8080',
-  wsapi: 'ws://localhost:8080'
 };