fix(topping): 🐛 fix missing topping after saved

Ensure topping data in slots with padding if only use in some slots.

Topping saving

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

@@ -41,26 +41,28 @@
         </div>
 
         <!-- File Change Status -->
-        <button onclick="patch_merge_modal.showModal()" *ngIf="isCommitLoaded | async">
+        <div *ngIf="isCommitLoaded | async">
+          <button onclick="patch_merge_modal.showModal()" >
 
-          <h1 class="text-center font-extrabold text-2xl text-red-500 animate-pulse">Detect Changes! Click</h1>
+            <h1 class="text-center font-extrabold text-2xl text-red-500 animate-pulse">Detect Changes! Click</h1>
 
-        </button>
+          </button>
-        <dialog id="patch_merge_modal" class="modal">
+          <dialog id="patch_merge_modal" class="modal">
 
-          <div class="modal-box max-w-screen-2xl">
+            <div class="modal-box max-w-screen-2xl">
-            <app-merge
+              <app-merge
-              [commit]="changesCommit"
+                [commit]="changesCommit"
-            ></app-merge>
+              ></app-merge>
-            <div class="modal-action sticky bottom-0 right-0">
+              <div class="modal-action sticky bottom-0 right-0">
-          <form method="dialog">
+            <form method="dialog">
-            <button class="btn btn-warning">Close</button>
+              <button class="btn btn-warning">Close</button>
-          </form>
+            </form>
-        </div>
           </div>
+            </div>
 
 
-        </dialog>
+          </dialog>
+        </div>
 
         <div class="flex items-center">
           <div class="flex items-center ml-3">

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { CommonModule, DatePipe, NgFor, NgIf, NgOptimizedImage } from '@angular/common';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
@@ -32,7 +32,7 @@ interface MenuItem {
         MergeComponent
     ]
 })
-export class LayoutComponent implements OnInit, OnDestroy {
+export class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
   current_department = this._router.snapshot.paramMap.get('department')!;
 
   menuItems: MenuItem[] = [
@@ -70,6 +70,40 @@ export class LayoutComponent implements OnInit, OnDestroy {
     private _recipeService: RecipeService
   ) {}
 
+  // acticvate after ngOnInit
+  async ngAfterViewInit(): Promise<void> {
+        // check if saves existed
+        this._recipeService.getSavedTmp(
+          await this._recipeService.getCurrentCountry(),
+          this._recipeService.getCurrentFile()
+        ).subscribe({
+          next: async (data: any) => {
+            console.log("get saved tmp", data);
+
+            if(data != null && data != undefined){
+              this.isCommitLoaded = Promise.resolve(true);
+            }
+
+            // TODO: optimize
+            if(data != undefined && typeof data === 'object'){
+              // check if attr exists
+              if(data.files != null && data.files != undefined){
+                this.showDetectChanges = true;
+                await AsyncStorage.setItem("detectChanges", "true");
+                this.changesCommit = data.files;
+                console.log("get commits", this.changesCommit);
+              } else {
+                this.showDetectChanges = false;
+                await AsyncStorage.setItem("detectChanges", "false");
+              }
+            } else {
+              this.showDetectChanges = false;
+              await AsyncStorage.setItem("detectChanges", "false");
+            }
+          }
+        });
+  }
+
   async ngOnInit(): Promise<void> {
     this._userService.currentUser
       .pipe(takeUntil(this.exit$))
@@ -89,35 +123,35 @@ export class LayoutComponent implements OnInit, OnDestroy {
     });
 
     // check if saves existed
-    this._recipeService.getSavedTmp(
+    // this._recipeService.getSavedTmp(
-      await this._recipeService.getCurrentCountry(),
+    //   await this._recipeService.getCurrentCountry(),
-      this._recipeService.getCurrentFile()
+    //   this._recipeService.getCurrentFile()
-    ).subscribe({
+    // ).subscribe({
-      next: async (data: any) => {
+    //   next: async (data: any) => {
-        console.log("get saved tmp", data);
+    //     console.log("get saved tmp", data);
 
-        if(data != null && data != undefined){
+    //     if(data != null && data != undefined){
-          this.isCommitLoaded = Promise.resolve(true);
+    //       this.isCommitLoaded = Promise.resolve(true);
-        }
+    //     }
 
-        // TODO: optimize
+    //     // TODO: optimize
-        if(data != undefined && typeof data === 'object'){
+    //     if(data != undefined && typeof data === 'object'){
-          // check if attr exists
+    //       // check if attr exists
-          if(data.files != null && data.files != undefined){
+    //       if(data.files != null && data.files != undefined){
-            this.showDetectChanges = true;
+    //         this.showDetectChanges = true;
-            await AsyncStorage.setItem("detectChanges", "true");
+    //         await AsyncStorage.setItem("detectChanges", "true");
-            this.changesCommit = data.files;
+    //         this.changesCommit = data.files;
-            console.log("get commits", this.changesCommit);
+    //         console.log("get commits", this.changesCommit);
-          } else {
+    //       } else {
-            this.showDetectChanges = false;
+    //         this.showDetectChanges = false;
-            await AsyncStorage.setItem("detectChanges", "false");
+    //         await AsyncStorage.setItem("detectChanges", "false");
-          }
+    //       }
-        } else {
+    //     } else {
-          this.showDetectChanges = false;
+    //       this.showDetectChanges = false;
-          await AsyncStorage.setItem("detectChanges", "false");
+    //       await AsyncStorage.setItem("detectChanges", "false");
-        }
+    //     }
-      }
+    //   }
-    });
+    // });
   }
 
   ngOnDestroy() {

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

@@ -142,24 +142,26 @@ export class RecipeToppingComponent implements OnInit, OnChanges {
               })
             );
           }
-
+        } else {
           // padding
+          // TODO: move padding to recipelist then insert padding between original last index and this index
           if (this.index! > data.length) {
-            for (
+            // for (
-              let init = this.toppingList.length - 1;
+            //   let init = this.toppingList.length - 1;
-              this.toppingList.at(this.index!) == undefined &&
+            //   this.toppingList.at(this.index!) == undefined &&
-              init < this.index!;
+            //   init < this.index!;
-              init++
+            //   init++
-            ) {
+            // ) {
-              this.toppingList.push(
+
-                this._formBuilder.group({
+            // }
-                  isUse: false,
+            this.toppingList.push(
-                  groupID: "0",
+              this._formBuilder.group({
-                  defaultIDSelect: 0,
+                isUse: false,
-                  ListGroupID: [0, 0, 0, 0],
+                groupID: "0",
-                })
+                defaultIDSelect: 0,
-              );
+                ListGroupID: [0, 0, 0, 0],
-            }
+              })
+            );
           }
 
           console.log(
@@ -208,7 +210,7 @@ export class RecipeToppingComponent implements OnInit, OnChanges {
 
   // apply on read mode
   ngOnChanges(changes: SimpleChanges): void {
-    console.log('changes on topping', changes);
+    // console.log('changes on topping', changes);
 
     if (changes['preFetchedData']) {
       let toppingSet = changes['preFetchedData'].currentValue as Array<any>;