fix: hide meal plan edit for non-owner and scale modal not saveable o…

…n mobile (#1459)

package.json

@@ -24,7 +24,7 @@
     "@fanoutio/grip": "^3.3.1",
     "@fanoutio/serve-grip": "^1.3.1",
     "@google-cloud/vision": "^4.1.0",
-    "@ionic/angular": "^7.8.2",
+    "@ionic/angular": "^8.3.2",
     "@julianpoy/recipe-clipper": "^3.1.0",
     "@ngx-loading-bar/core": "^6.0.2",
     "@ngx-translate/core": "^15.0.0",

packages/frontend/angular.json

@@ -34,10 +34,10 @@
             ],
             "styles": [
               {
-                "input": "src/theme/variables.scss"
+                "input": "src/global.scss"
               },
               {
-                "input": "src/global.scss"
+                "input": "src/theme/variables.scss"
               },
               {
                 "input": "src/app/app.scss"

packages/frontend/src/app/app.scss

@@ -235,3 +235,8 @@ ion-button.button-outline {
   margin-right: auto !important;
   color-scheme: light;
 }
+
+.scaleRecipeModal {
+  --max-width: 300px;
+  --max-height: 300px;
+}

packages/frontend/src/app/components/select-ingredients/select-ingredients.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
-import { PopoverController } from "@ionic/angular";
+import { ModalController } from "@ionic/angular";
 import { RecipeService, ParsedIngredient } from "../../services/recipe.service";
 
 import { ScaleRecipeComponent } from "~/modals/scale-recipe/scale-recipe.component";
@@ -45,21 +45,22 @@ export class SelectIngredientsComponent {
   }
 
   constructor(
-    private popoverCtrl: PopoverController,
+    private modalCtrl: ModalController,
     private recipeService: RecipeService,
     private preferencesService: PreferencesService,
   ) {}
 
   async changeScale() {
-    const popover = await this.popoverCtrl.create({
+    const modal = await this.modalCtrl.create({
       component: ScaleRecipeComponent,
       componentProps: {
         scale: this.scale.toString(),
       },
+      cssClass: "scaleRecipeModal",
     });
 
-    await popover.present();
-    const { data } = await popover.onDidDismiss();
+    await modal.present();
+    const { data } = await modal.onDidDismiss();
 
     if (data?.scale) {
       this.scale = data.scale;

packages/frontend/src/app/modals/scale-recipe/scale-recipe.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { PopoverController } from "@ionic/angular";
+import { ModalController } from "@ionic/angular";
 import fractionjs from "fraction.js";
 
 @Component({
@@ -10,7 +10,7 @@ import fractionjs from "fraction.js";
 export class ScaleRecipeComponent {
   @Input() scale: string = "1";
 
-  constructor(private popoverCtrl: PopoverController) {}
+  constructor(private modalCtrl: ModalController) {}
 
   format(input: string) {
     // Support fractions
@@ -26,11 +26,11 @@ export class ScaleRecipeComponent {
   }
 
   close() {
-    this.popoverCtrl.dismiss();
+    this.modalCtrl.dismiss();
   }
 
   apply() {
-    this.popoverCtrl.dismiss({
+    this.modalCtrl.dismiss({
       scale: this.format(this.scale),
     });
   }

packages/frontend/src/app/pages/meal-plan-components/meal-plan-popover/meal-plan-popover.page.html

@@ -1,4 +1,4 @@
-<ion-list no-border>
+<ion-list no-border *ngIf="!loading">
   <ion-list-header>
     {{ 'pages.mealPlanPopover.options.title' | translate }}
   </ion-list-header>
@@ -96,6 +96,7 @@
 
   <ion-button
     (click)="updateMealPlan()"
+    *ngIf="isOwner"
     expand="block"
     size="small"
     class="ion-margin"

packages/frontend/src/app/pages/meal-plan-components/meal-plan-popover/meal-plan-popover.page.ts

@@ -16,6 +16,7 @@ import { MealPlanPreferenceKey } from "@recipesage/util/shared";
 import { ShareMealPlanModalPage } from "../share-meal-plan-modal/share-meal-plan-modal.page";
 import { TRPCService } from "../../../services/trpc.service";
 import { UpdateMealPlanModalPage } from "../update-meal-plan-modal/update-meal-plan-modal.page";
+import { UserService } from "../../../services/user.service";
 
 @Component({
   selector: "page-meal-plan-popover",
@@ -25,6 +26,8 @@ import { UpdateMealPlanModalPage } from "../update-meal-plan-modal/update-meal-p
 export class MealPlanPopoverPage {
   preferences = this.preferencesService.preferences;
   preferenceKeys = MealPlanPreferenceKey;
+  isOwner: boolean = false;
+  loading: boolean = true;
 
   mealPlanId: any; // From nav params
   mealPlan: any; // From nav params
@@ -35,11 +38,28 @@ export class MealPlanPopoverPage {
     private translate: TranslateService,
     private navCtrl: NavController,
     private preferencesService: PreferencesService,
+    private userService: UserService,
     private loadingService: LoadingService,
     private trpcService: TRPCService,
     private alertCtrl: AlertController,
   ) {}
 
+  ngAfterViewInit() {
+    this.loading = true;
+    this.loadUser().finally(() => {
+      this.loading = false;
+    });
+  }
+
+  async loadUser() {
+    const response = await this.userService.getMyProfile({
+      401: () => {},
+    });
+    if (!response.success) return;
+
+    this.isOwner = response.data.id === this.mealPlan.userId;
+  }
+
   savePreferences() {
     this.preferencesService.save();
 

packages/frontend/src/app/pages/recipe-components/recipe/recipe.page.ts

@@ -317,15 +317,16 @@ export class RecipePage {
   }
 
   async changeScale() {
-    const popover = await this.popoverCtrl.create({
+    const modal = await this.modalCtrl.create({
       component: ScaleRecipeComponent,
       componentProps: {
         scale: this.scale.toString(),
       },
+      cssClass: "scaleRecipeModal",
     });
 
-    await popover.present();
-    const { data } = await popover.onDidDismiss();
+    await modal.present();
+    const { data } = await modal.onDidDismiss();
 
     if (data?.scale) {
       this.scale = data.scale;