add pop up if save existed

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

@@ -107,11 +107,23 @@
             </div> -->
           </div>
 
-          <button class="btn bg-primary btn-md border-2" *ngIf="savedTmpfiles.length > 0">
+          <!-- <button class="btn bg-primary btn-md border-2" *ngIf="savedTmpfiles.length > 0">
             <span class="text-base text-gray-700" onclick="select_savefile_modal.showModal()">โหลดเซฟ</span>
-          </button>
+          </button> -->
           <!-- todo: add modal -->
-          <dialog id="select_savefile_modal" class="modal">
+          <!-- <dialog id="select_savefile_modal" class="modal">
+
+
+
+            <form method="dialog" class="modal-backdrop">
+              <button>close</button>
+            </form>
+          </dialog> -->
+
+
+          <label for="select_savefile_modal" class="btn bg-primary btn-md border-2 text-base text-gray-700">โหลดเซฟ</label>
+          <input type="checkbox" id="select_savefile_modal" class="modal-toggle" #checkBox="ngModel" [(ngModel)]="saveTab">
+          <label for="select_savefile_modal" class="modal">
             <div class="modal-box max-w-[1000px] overflow-visible">
               <p class="font-bold text-lg m-2">Saved Files</p>
               <table class="table">
@@ -131,12 +143,35 @@
               </table>
 
             </div>
+          </label>
 
+          <!-- <button class="" *ngIf="savedTmpfiles.length > 0">
+            <span class="text-base text-gray-700" onloadstart="detect_save_noti.showModal()">;</span>
+          </button>
+          <dialog class="modal" id="detect_save_noti">
+
+            <div class="modal-box max-w-[400px] overflow-visible">
+              <p class="font-bold text-xl m-2"> พบการบันทึกไฟล์ก่อนหน้านี้ ต้องการแก้ไขต่อจากไฟล์บันทึกหรือไม่ </p>
+            </div>
 
             <form method="dialog" class="modal-backdrop">
               <button>close</button>
             </form>
-          </dialog>
+          </dialog> -->
+
+
+          <input type="checkbox" id="detect_save_noti" class="modal-toggle" #checkBox="ngModel" [(ngModel)]="showSaveNoti">
+          <label for="detect_save_noti" class="modal">
+            <div class="modal-box max-w-[580px] overflow-visible">
+              <p class="font-semibold text-lg m-2"> Found saved file(s). Want to continue editing saved file? </p>
+              <p class="font-medium text-sm m-2"> พบการบันทึกไฟล์ก่อนหน้านี้ ต้องการแก้ไขต่อจากไฟล์บันทึกหรือไม่ </p>
+              <div class="flex float-right justify-between m-2">
+                <button class="btn btn-secondary btn-square m-2" (click)="showSaveNoti=false">No</button>
+                <button class="btn btn-primary btn-square m-2" (click)="openLoadSaves()">Yes</button>
+              </div>
+            </div>
+          </label>
+
 
 
           <div class="flex flex-col ml-auto">

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

@@ -66,6 +66,8 @@ export class RecipesComponent implements OnInit, OnDestroy {
   private oldSearchStr = '';
 
   savedTmpfiles: any[] = [];
+  saveTab: boolean = false;
+  showSaveNoti: boolean = true;
 
   tableCtx?: ElementRef;
 
@@ -150,11 +152,15 @@ export class RecipesComponent implements OnInit, OnDestroy {
           if(files != undefined && typeof files === 'object'){
             // console.log("Obtain saves object: ", files.files[0], typeof files);
             this.savedTmpfiles = files.files;
+            // let svf = (document.getElementById('select_savefile_modal') as HTMLInputElement)!.checked;
+            // console.log("isSavedModalOpened",svf)
           }
 
           },
         })
 
+
+
     this._materialService
       .getMaterialCodes()
       .pipe(
@@ -340,6 +346,11 @@ export class RecipesComponent implements OnInit, OnDestroy {
     // TODO: get tmp files to display or
   }
 
+  openLoadSaves(){
+    this.showSaveNoti = false;
+    this.saveTab = true;
+  }
+
   scrollToTop() {
     const table = this.tableCtx!.nativeElement;
     table.scrollTo({ top: 0, behavior: 'smooth' });