fix delay material fetching

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

@@ -94,11 +94,11 @@ export class RecipeDetailsComponent implements OnInit {
   toppingSet: ToppingSet[] | null = null;
   submenus: Recipe01[] | null = null;
 
-  ngOnInit() {
+  async ngOnInit() {
     this.productCode = this._route.snapshot.params['productCode'];
 
-    this.recipeDetail$ = this._recipeService
-      .getRecipeDetail(this.productCode)
+    this.recipeDetail$ = (await this._recipeService
+      .getRecipeDetail(this.productCode))
       .pipe(first());
     this.recipeDetail$.subscribe((detail) => {
 
@@ -109,7 +109,7 @@ export class RecipeDetailsComponent implements OnInit {
       this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
     });
 
-    this._recipeService.getSubMenus(this._recipeService.getCurrentCountry(this.department), this._recipeService.getCurrentFile(), this.productCode).subscribe((data) => {
+    this._recipeService.getSubMenus(await this._recipeService.getCurrentCountry(this.department), this._recipeService.getCurrentFile(), this.productCode).subscribe((data) => {
       console.log('Submenus', data);
       this.submenus = data;
     });
@@ -143,7 +143,7 @@ export class RecipeDetailsComponent implements OnInit {
   confirmSave = {
     title: 'The changes detected!',
     message: 'Do you want to save changes?',
-    confirmCallBack: () => {
+    confirmCallBack: async () => {
       console.log('confirm save');
 
       // get username
@@ -177,7 +177,7 @@ export class RecipeDetailsComponent implements OnInit {
       // TODO: update value in targeted recipe
       console.log('to_send', to_send);
       this._recipeService.editChanges(
-        this._recipeService.getCurrentCountry(this.department),
+        await this._recipeService.getCurrentCountry(this.department),
         this._recipeService.getCurrentFile(),
         {
           ...to_send,

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

@@ -96,9 +96,9 @@ export class RecipeListComponent implements OnInit {
 
   private _recipeListOriginalArray!: RecipeDetailMat[];
 
-  ngOnInit(): void {
-    this._recipeService
-      .getRecipeDetailMat(this.productCode)
+  async ngOnInit(): Promise<void> {
+    (await this._recipeService
+      .getRecipeDetailMat(this.productCode))
       .pipe(first())
       .subscribe(({ result }) => {
         this._recipeListOriginalArray = result;
@@ -287,11 +287,13 @@ export class RecipeListComponent implements OnInit {
     });
 
     // TODO: embed this to recipelist
-    this._materialService.getMaterialCodes().subscribe((materials) => {
+    (await
+      // TODO: embed this to recipelist
+      this._materialService.getMaterialCodes()).subscribe((materials) => {
       this.materialList = materials;
     });
 
-    this._materialService.getFullMaterialDetail().subscribe((materials) => {
+    (await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
       this.fullMaterialList = materials;
       this.categoriedMaterial = this.ListCategory();
       console.log(this.categoriedMaterial);

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

@@ -32,10 +32,10 @@ export class RecipeToppingComponent implements OnInit {
     private _recipeService: RecipeService,
     private _toppingService: ToppingService
   ) {}
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this._toppingService
       .getToppings(
-        this._recipeService.getCurrentCountry(),
+        await this._recipeService.getCurrentCountry(),
         this._recipeService.getCurrentFile()
       )
       .subscribe((data) => {

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

@@ -64,10 +64,10 @@ export class RecipeToppingsetComponent implements OnInit {
     return this.toppingForm.get('toppingList') as FormArray;
   }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this._toppingService
       .getToppingsOfRecipe(
-        this._recipeService.getCurrentCountry(),
+        await this._recipeService.getCurrentCountry(),
         this._recipeService.getCurrentFile(),
         this.productCode
       )
@@ -94,7 +94,7 @@ export class RecipeToppingsetComponent implements OnInit {
     // fetch all toppings : group and list
     this._toppingService
       .getToppings(
-        this._recipeService.getCurrentCountry(),
+        await this._recipeService.getCurrentCountry(),
         this._recipeService.getCurrentFile()
       )
       .subscribe((data) => {