fix: handle various sharing possiblities in recipe details popover (#…

…1415)
julianpoy · Jul 17, 2024 · 4fcda36 · 4fcda36
2 parents 5dca81b + d0f3aad
commit 4fcda36
Show file tree

Hide file tree

Showing 5 changed files with 232 additions and 122 deletions.
diff --git a/...d/src/app/pages/recipe-components/recipe-details-popover/recipe-details-popover.page.html b/...d/src/app/pages/recipe-components/recipe-details-popover/recipe-details-popover.page.html
@@ -21,93 +21,170 @@
     {{ 'pages.recipeDetailsPopover.actions' | translate }}
   </ion-list-header>
 
-  <ion-button
-    (click)="closeWithAction('addToShoppingList')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="list" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.addToShoppingList' | translate }}
-  </ion-button>
-
-  <ion-button
-    (click)="closeWithAction('addToMealPlan')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="calendar" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.addToMealPlan' | translate }}
-  </ion-button>
-
-  <ion-button
-    (click)="closeWithAction('share')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="share" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.share' | translate }}
-  </ion-button>
-
-  <ion-button
-    (click)="closeWithAction('print')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="print" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.print' | translate }}
-  </ion-button>
-
-  <ion-button
-    (click)="cookingToolbarService.isPinned(recipeId) ? closeWithAction('unpin') : closeWithAction('pin')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="pin" slot="start"></ion-icon>
-    <span *ngIf="cookingToolbarService.isPinned(recipeId)">
-      {{ 'pages.recipeDetailsPopover.unPinRecipe' | translate }}
-    </span>
-    <span *ngIf="!cookingToolbarService.isPinned(recipeId)">
-      {{ 'pages.recipeDetailsPopover.pinRecipe' | translate }}
-    </span>
-  </ion-button>
-
-  <ion-button
-    (click)="closeWithAction('edit')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="create" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.edit' | translate }}
-  </ion-button>
-
-  <ion-button
-    (click)="closeWithAction('clone')"
-    expand="block"
-    size="small"
-    class="ion-margin"
-  >
-    <ion-icon name="copy" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.makeACopy' | translate }}
-  </ion-button>
+  <div *ngIf="recipe.userId === me?.id && recipe.folder === 'inbox'">
+    <ion-item lines="none">
+      <ion-label>
+        <p class="ion-text-wrap">
+          {{ 'pages.recipeDetails.inInbox' | translate }}
+        </p>
+      </ion-label>
+    </ion-item>
 
-  <ion-list-header>
-    {{ 'pages.recipeDetailsPopover.dangerZone' | translate }}
-  </ion-list-header>
+    <ion-button
+      (click)="closeWithAction('moveToMain')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="cloud-download" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.saveToMyRecipes' | translate }}
+    </ion-button>
+
+    <ion-list-header>
+      {{ 'pages.recipeDetailsPopover.dangerZone' | translate }}
+    </ion-list-header>
+
+    <ion-button
+      (click)="closeWithAction('delete')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+      color="danger"
+    >
+      <ion-icon name="trash" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.delete' | translate }}
+    </ion-button>
+  </div>
+
+  <div *ngIf="recipe.userId !== me?.id && isLoggedIn">
+    <ion-item lines="none">
+      <ion-label>
+        <p class="ion-text-wrap">
+          {{ 'pages.recipeDetails.doesNotBelongToYou' | translate }}
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <ion-button
+      (click)="closeWithAction('clone')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="cloud-download" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.saveToMyRecipes' | translate }}
+    </ion-button>
+  </div>
+
+  <div *ngIf="recipe.userId !== me?.id && !isLoggedIn">
+    <ion-item lines="none">
+      <ion-label>
+        <p class="ion-text-wrap">
+          {{ 'pages.recipeDetails.requiresAccountToSave' | translate }}
+        </p>
+      </ion-label>
+    </ion-item>
 
-  <ion-button
-    (click)="closeWithAction('delete')"
-    expand="block"
-    size="small"
-    color="danger"
-    class="ion-margin"
-  >
-    <ion-icon name="trash" slot="start"></ion-icon>
-    {{ 'pages.recipeDetailsPopover.delete' | translate }}
-  </ion-button>
+    <ion-button
+      (click)="closeWithAction('authAndClone')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="cloud-download" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.registerOrLoginToSave' | translate }}
+    </ion-button>
+  </div>
+
+  <div *ngIf="recipe.userId === me?.id && recipe.folder === 'main'">
+    <ion-button
+      (click)="closeWithAction('addToShoppingList')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="list" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.addToShoppingList' | translate }}
+    </ion-button>
+
+    <ion-button
+      (click)="closeWithAction('addToMealPlan')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="calendar" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.addToMealPlan' | translate }}
+    </ion-button>
+
+    <ion-button
+      (click)="closeWithAction('share')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="share" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.share' | translate }}
+    </ion-button>
+
+    <ion-button
+      (click)="closeWithAction('print')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="print" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.print' | translate }}
+    </ion-button>
+
+    <ion-button
+      (click)="cookingToolbarService.isPinned(recipe.id) ? closeWithAction('unpin') : closeWithAction('pin')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <span *ngIf="cookingToolbarService.isPinned(recipe.id)">
+        {{ 'pages.recipeDetailsPopover.unPinRecipe' | translate }}
+      </span>
+      <span *ngIf="!cookingToolbarService.isPinned(recipe.id)">
+        {{ 'pages.recipeDetailsPopover.pinRecipe' | translate }}
+      </span>
+    </ion-button>
+
+    <ion-button
+      (click)="closeWithAction('edit')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="create" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.edit' | translate }}
+    </ion-button>
+
+    <ion-button
+      (click)="closeWithAction('clone')"
+      expand="block"
+      size="small"
+      class="ion-margin"
+    >
+      <ion-icon name="copy" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.makeACopy' | translate }}
+    </ion-button>
+
+    <ion-list-header>
+      {{ 'pages.recipeDetailsPopover.dangerZone' | translate }}
+    </ion-list-header>
+
+    <ion-button
+      (click)="closeWithAction('delete')"
+      expand="block"
+      size="small"
+      color="danger"
+      class="ion-margin"
+    >
+      <ion-icon name="trash" slot="start"></ion-icon>
+      {{ 'pages.recipeDetailsPopover.delete' | translate }}
+    </ion-button>
+  </div>
 </ion-list>
diff --git a/...end/src/app/pages/recipe-components/recipe-details-popover/recipe-details-popover.page.ts b/...end/src/app/pages/recipe-components/recipe-details-popover/recipe-details-popover.page.ts
@@ -4,6 +4,21 @@ import { PreferencesService } from "~/services/preferences.service";
 import { RecipeDetailsPreferenceKey } from "@recipesage/util/shared";
 import { WakeLockService } from "~/services/wakelock.service";
 import { CookingToolbarService } from "~/services/cooking-toolbar.service";
+import type { RecipeSummary, UserPublic } from "@recipesage/prisma";
+
+export type RecipeDetailsPopoverActionTypes =
+  | "delete"
+  | "clone"
+  | "authAndClone"
+  | "addToShoppingList"
+  | "addToMealPlan"
+  | "moveToMain"
+  | "share"
+  | "print"
+  | "pin"
+  | "unpin"
+  | "edit"
+  | "updateWakeLock";
 
 @Component({
   selector: "page-recipe-details-popover",
@@ -14,7 +29,15 @@ export class RecipeDetailsPopoverPage {
   @Input({
     required: true,
   })
-  recipeId!: string;
+  recipe!: RecipeSummary;
+  @Input({
+    required: true,
+  })
+  me: UserPublic | null = null;
+  @Input({
+    required: true,
+  })
+  isLoggedIn!: boolean;
 
   preferences = this.preferencesService.preferences;
   preferenceKeys = RecipeDetailsPreferenceKey;
@@ -34,7 +57,7 @@ export class RecipeDetailsPopoverPage {
     this.preferencesService.save();
   }
 
-  closeWithAction(name: string) {
+  closeWithAction(name: RecipeDetailsPopoverActionTypes) {
     this.popoverCtrl.dismiss({
       action: name,
     });

diff --git a/packages/frontend/src/app/pages/recipe-components/recipe/recipe.page.html b/packages/frontend/src/app/pages/recipe-components/recipe/recipe.page.html
@@ -307,7 +307,17 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
       <br />
     </div>
 
-    <div *ngIf="recipe.folder === 'inbox'" class="ion-padding">
+    <div
+      *ngIf="recipe.userId === me?.id && recipe.folder === 'inbox'"
+      class="ion-padding"
+    >
+      <ion-item lines="none" class="ion-no-padding">
+        <ion-label>
+          <p class="ion-text-wrap">
+            {{ 'pages.recipeDetails.inInbox' | translate }}
+          </p>
+        </ion-label>
+      </ion-item>
       <ion-grid>
         <ion-row>
           <ion-col col-12 col-md-12 col-lg-6 col-xl-6>
@@ -326,10 +336,7 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
       </ion-grid>
     </div>
 
-    <div
-      *ngIf="recipe && recipe.id && recipe.userId !== me?.id && isLoggedIn"
-      class="ion-padding"
-    >
+    <div *ngIf="recipe.userId !== me?.id && isLoggedIn" class="ion-padding">
       <ion-item lines="none" class="ion-no-padding">
         <ion-label>
           <p class="ion-text-wrap">
@@ -343,10 +350,7 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
       </ion-button>
     </div>
 
-    <div
-      *ngIf="recipe && recipe.id && recipe.userId !== me?.id && !isLoggedIn"
-      class="ion-padding"
-    >
+    <div *ngIf="recipe.userId !== me?.id && !isLoggedIn" class="ion-padding">
       <ion-item lines="none" class="ion-no-padding">
         <ion-label>
           <p class="ion-text-wrap">
@@ -376,7 +380,7 @@ <h2 class="recipeTitle ion-text-wrap">{{ recipe.title }}</h2>
     <br />
 
     <ion-row
-      *ngIf="recipe.folder === 'main' && recipe.userId === me?.id"
+      *ngIf="recipe.userId === me?.id && recipe.folder === 'main'"
       class="action-buttons ion-justify-content-around"
     >
       <ion-col class="ion-text-center" size="auto">