update recipe now can select recipe file

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

@@ -145,7 +145,7 @@
 
 <div class="pt-10 sm:ml-64">
   <div class="p-2 sm:mt-5 md:mt-12">
-    <div class="grid grid-cols-1 gap-2 mb-2">
+    <div class="mb-2">
       <router-outlet></router-outlet>
     </div>
   </div>

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

@@ -5,6 +5,7 @@ import { Recipe, Recipe01 } from '../models/recipe.model';
 import { environment } from 'src/environments/environment';
 
 interface RecipeParams {
+  version: string;
   offset: number;
   take: number;
   search: string;
@@ -15,12 +16,19 @@ export class RecipeService {
   constructor(private _httpClient: HttpClient) {}
 
   getRecipes(
-    params: RecipeParams = { take: 10, offset: 0, search: '' }
+    params: RecipeParams = {
+      take: 10,
+      offset: 0,
+      search: '',
+      version: 'coffeethai02_580.json',
+    }
   ): Observable<{
+    fileName: string;
     recipes: Recipe;
     hasMore: boolean;
   }> {
     return this._httpClient.get<{
+      fileName: string;
       recipes: Recipe;
       hasMore: boolean;
     }>(environment.api + '/recipes', {
@@ -28,6 +36,7 @@ export class RecipeService {
         offset: params.offset,
         take: params.take,
         search: params.search,
+        version: params.version,
       },
       withCredentials: true,
       responseType: 'json',
@@ -40,4 +49,11 @@ export class RecipeService {
       responseType: 'json',
     });
   }
+
+  getRecipeVersions(): Observable<string[]> {
+    return this._httpClient.get<string[]>(
+      environment.api + '/recipes/versions',
+      { withCredentials: true, responseType: 'json' }
+    );
+  }
 }

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

@@ -11,34 +11,28 @@ import { WebsocketService } from 'src/app/shared/services/websocket.service';
   standalone: true,
   templateUrl: './changelog.component.html',
   styleUrls: ['./changelog.component.css'],
-  imports: [CommonModule,MergeComponent]
+  imports: [CommonModule, MergeComponent],
 })
 export class ChangelogComponent {
-
   public displayableLogs: string[] = [];
   public displayableMergeJson: string[] = [];
-  showLogModal:boolean = false;
-  showMergeModal:boolean = false;
+  showLogModal: boolean = false;
+  showMergeModal: boolean = false;
 
-  constructor(
-    private httpClient: HttpClient,
-    private wss: WebsocketService
-  ){
+  constructor(private httpClient: HttpClient, private wss: WebsocketService) {
     this.fetchLoglist();
-  //   this.translateLogDirToString();
+    //   this.translateLogDirToString();
   }
 
-
-  public fetchLoglist(): string[]{
+  public fetchLoglist(): string[] {
     // TODO: Fetch changelog.html
     // fetch("/changelog")
-    let dirlist: any[] = []
+    let dirlist: any[] = [];
 
-
-    this.wss.connect(environment.wsapi+"/listFileInDir");
+    this.wss.connect(environment.wsapi + '/listFileInDir');
     this.wss.send({
-      "topic": "changelog",
-    })
+      topic: 'changelog',
+    });
 
     let response = this.wss.data;
     console.log(response);
@@ -83,10 +77,9 @@ export class ChangelogComponent {
     return dirlist;
   }
 
-
-  public translateLogDirToString(){
-    console.log("LogDirList: ", this.displayableLogs)
-    let dirSelector = document.getElementById("log-dir-list")
+  public translateLogDirToString() {
+    console.log('LogDirList: ', this.displayableLogs);
+    let dirSelector = document.getElementById('log-dir-list');
     // for(let dir of this.displayableLogs){
     //   console.log(dir)
     //   const p = document.createElement('p');
@@ -96,27 +89,27 @@ export class ChangelogComponent {
     // }
   }
 
-  refreshLogList(){
+  refreshLogList() {
     this.fetchLoglist();
     this.translateLogDirToString();
   }
 
-  viewLog(name:string){
+  viewLog(name: string) {
     let cli = new FetchLogService(this.httpClient);
     this.showLogModal = !this.showLogModal;
-    cli.fetchLogsToDisplay("changelog", true, false, name);
-    cli.fetchLogsToDisplay("changelog", false, false, name);
+    cli.fetchLogsToDisplay('changelog', true, false, name);
+    cli.fetchLogsToDisplay('changelog', false, false, name);
   }
 
-  viewJson(name:string){
+  viewJson(name: string) {
     let cli = new FetchLogService(this.httpClient);
     this.showMergeModal = !this.showMergeModal;
-    cli.fetchLogsToDisplay("merge", false, true, name);
+    cli.fetchLogsToDisplay('merge', false, true, name);
     // cli.fetchLogsToDisplay("", false, false, name);
   }
 
-  toggleLogModal(target:string){
-    if(target == "merge"){
+  toggleLogModal(target: string) {
+    if (target == 'merge') {
       this.showMergeModal = !this.showMergeModal;
     } else {
       this.showLogModal = !this.showLogModal;

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

@@ -5,13 +5,37 @@
   <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">
+        <div class="flex flex-row py-3 justify-between">
           <div class="flex flex-col">
             <span
               >Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
-              {{"{{File name}}"}}</span
+              {{ fileName }}</span
             >
           </div>
+          <div class="flex flex-col ml-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-[1] 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 class="flex flex-col ml-auto">
             <span class=""
               >Last Updated:

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

@@ -6,6 +6,8 @@ import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { environment } from 'src/environments/environment';
 import { RecipeModalComponent } from 'src/app/shared/modal/recipe-modal.component';
+import { BehaviorSubject } from 'rxjs';
+import * as lodash from 'lodash';
 
 @Component({
   selector: 'app-dashboard',
@@ -17,6 +19,8 @@ export class DashboardComponent implements OnInit {
   userInfo: User | null = null;
   recipes: Recipe | null = null;
   recipes01: Recipe01[] | null = null;
+  recipeVersions: string[] = [];
+  fileName: string = '';
 
   tableHeads: string[] = [
     'Product Code',
@@ -27,6 +31,11 @@ export class DashboardComponent implements OnInit {
   ];
   private offset = 0;
   private take = 10;
+  private recipeVersionData: string[] = [];
+  private currentRecipeVersion: string = 'coffeethai02_580.json';
+
+  recipeVersion: BehaviorSubject<string> = new BehaviorSubject<string>('');
+  recipeVersion$ = this.recipeVersion.asObservable();
 
   isLoaded: boolean = false;
   isLoadMore: boolean = false;
@@ -52,8 +61,9 @@ export class DashboardComponent implements OnInit {
               offset: this.offset,
               take: this.take,
               search: this.oldSearchStr,
+              version: this.currentRecipeVersion,
             })
-            .subscribe(({ recipes, hasMore }) => {
+            .subscribe(({ recipes, hasMore, fileName }) => {
               const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
               if (this.recipes01 && this.isHasMore) {
                 this.recipes01 = [...this.recipes01, ...Recipe01];
@@ -64,6 +74,7 @@ export class DashboardComponent implements OnInit {
                 ...recipesWithoutRecipe01,
                 Recipe01: [],
               };
+              this.fileName = fileName;
               this.offset += 10;
               this.isLoadMore = false;
               this.isHasMore = hasMore;
@@ -89,8 +100,9 @@ export class DashboardComponent implements OnInit {
         offset: this.offset,
         take: this.take,
         search: this.oldSearchStr,
+        version: this.currentRecipeVersion,
       })
-      .subscribe(({ recipes, hasMore }) => {
+      .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
         if (this.recipes01 && this.isHasMore) {
           this.recipes01 = [...this.recipes01, ...Recipe01];
@@ -101,10 +113,18 @@ export class DashboardComponent implements OnInit {
           ...recipesWithoutRecipe01,
           Recipe01: [],
         };
+        this.fileName = fileName;
         this.offset += 10;
         this.isLoaded = true;
         this.isHasMore = hasMore;
       });
+
+    this.recipeVersion$.subscribe((version) => {
+      if (version)
+        this.recipeVersions = lodash.filter(this.recipeVersionData, (v) =>
+          v.includes(version)
+        );
+    });
   }
 
   setSearch(event: Event) {
@@ -119,8 +139,9 @@ export class DashboardComponent implements OnInit {
         offset: this.offset,
         take: this.take,
         search: this.searchStr,
+        version: this.currentRecipeVersion,
       })
-      .subscribe(({ recipes, hasMore }) => {
+      .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
         this.recipes01 = Recipe01;
 
@@ -128,13 +149,65 @@ export class DashboardComponent implements OnInit {
           ...recipesWithoutRecipe01,
           Recipe01: [],
         };
+        this.fileName = fileName;
         this.offset += 10;
         this.isLoaded = true;
         this.isHasMore = hasMore;
       });
   }
 
+  loadRecipe(recipeVersion: string) {
+    // clear all recipes
+    this.recipes = null;
+    this.recipes01 = null;
+    this.offset = 0;
+    this.isLoaded = false;
+    this.isHasMore = true;
+    this.isLoadMore = false;
+    this.oldSearchStr = '';
+    this.currentRecipeVersion = recipeVersion;
+
+    this._recipeService
+      .getRecipes({
+        offset: this.offset,
+        take: this.take,
+        search: this.oldSearchStr,
+        version: recipeVersion,
+      })
+      .subscribe(({ recipes, hasMore, fileName }) => {
+        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
+        if (this.recipes01 && this.isHasMore) {
+          this.recipes01 = [...this.recipes01, ...Recipe01];
+        } else {
+          this.recipes01 = Recipe01;
+        }
+        this.recipes = {
+          ...recipesWithoutRecipe01,
+          Recipe01: [],
+        };
+        this.fileName = fileName;
+        this.offset += 10;
+        this.isLoaded = true;
+        this.isHasMore = hasMore;
+      });
+  }
+
+  setRecipeVersion(event: Event) {
+    this.recipeVersion.next((event.target as HTMLInputElement).value);
+  }
+
+  getRecipeVersions() {
+    if (this.recipeVersionData.length > 0) return;
+    this._recipeService.getRecipeVersions().subscribe((versions) => {
+      this.recipeVersionData = versions;
+      this.recipeVersions = versions;
+    });
+  }
+
   openJsonTab() {
-    window.open(environment.api + '/recipes/json', '_blank');
+    window.open(
+      environment.api + `/recipes/${this.currentRecipeVersion}/json`,
+      '_blank'
+    );
   }
 }