feat: ✨ support for lockable recipes (#876)

* feat: ✨ support for lockable recipes

* feat(backend): ✨ check user can update before updating recipe

* test(backend): ✅ add recipe lock tests

* feat(frontend): ✨ disabled lock action when not owner

* test(backend): ✅ test non-owner can't lock recipe

* hide quantity on zero value

* fix(backend): 🐛 temp/partial fix for recipes with same name. WIP

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -22,10 +22,9 @@
     <v-spacer></v-spacer>
     <div v-if="!value" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="slug" show-always />
-      <v-tooltip bottom color="info">
+      <v-tooltip v-if="!locked" bottom color="info">
         <template #activator="{ on, attrs }">
           <v-btn
-            v-if="loggedIn"
             fab
             small
             class="mx-1"
@@ -39,6 +38,22 @@
         </template>
         <span>{{ $t("general.edit") }}</span>
       </v-tooltip>
+      <v-tooltip v-else bottom color="info">
+        <template #activator="{ on, attrs }">
+          <v-btn
+            fab
+            small
+            class="mx-1"
+            color="info"
+            v-bind="attrs"
+            v-on="on"
+          >
+            <v-icon> {{ $globals.icons.lock }} </v-icon>
+          </v-btn>
+        </template>
+        <span> Locked by Owner </span>
+      </v-tooltip>
+
       <RecipeContextMenu
         show-print
         :menu-top="false"
@@ -109,6 +124,10 @@ export default {
       required: true,
       type: Number,
     },
+    locked: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

frontend/components/Domain/Recipe/RecipeSettingsMenu.vue

@@ -23,6 +23,7 @@
             v-model="value[key]"
             xs
             dense
+            :disabled="key == 'locked' && !isOwner"
             class="my-1"
             :label="labels[key]"
             hide-details
@@ -41,6 +42,10 @@ export default {
       type: Object,
       required: true,
     },
+    isOwner: {
+      type: Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -52,6 +57,7 @@ export default {
         landscapeView: this.$t("recipe.landscape-view-coming-soon"),
         disableComments: this.$t("recipe.disable-comments"),
         disableAmount: this.$t("recipe.disable-amount"),
+        locked: "Locked",
       };
     },
   },

frontend/composables/recipes/use-recipe-ingredients.ts

@@ -10,6 +10,8 @@ export function parseIngredientText(ingredient: RecipeIngredient, disableAmount:
 
   const { quantity, food, unit, note } = ingredient;
 
+  const validQuantity = quantity !== null && quantity !== undefined && quantity !== 0;
+
   let returnQty = "";
   if (unit?.fraction) {
     const fraction = frac(quantity * scale, 10, true);
@@ -20,8 +22,10 @@ export function parseIngredientText(ingredient: RecipeIngredient, disableAmount:
     if (fraction[1] > 0) {
       returnQty += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
     }
-  } else {
+  } else if (validQuantity) {
     returnQty = (quantity * scale).toString();
+  } else {
+    returnQty = "";
   }
 
   return `${returnQty} ${unit?.name || " "}  ${food?.name || " "} ${note}`.replace(/ {2,}/g, " ");

frontend/pages/recipe/_slug/index.vue

@@ -51,6 +51,7 @@
       <RecipeActionMenu
         v-model="form"
         :slug="recipe.slug"
+        :locked="$auth.user.id !== recipe.userId && recipe.settings.locked"
         :name="recipe.name"
         :logged-in="$auth.loggedIn"
         :open="form"
@@ -77,7 +78,7 @@
         >
           <div v-if="form" class="d-flex justify-start align-center">
             <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
-            <RecipeSettingsMenu class="my-1 mx-1" :value="recipe.settings" @upload="uploadImage" />
+            <RecipeSettingsMenu class="my-1 mx-1" :value="recipe.settings" :is-owner="recipe.userId == $auth.user.id" @upload="uploadImage" />
           </div>
           <!-- Recipe Title Section -->
           <template v-if="!form && enableLandscape">