Merge branch 'mealie-next' into fix/warn-on-edit-nav

frontend/components/Domain/Cookbook/CookbookEditor.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <v-card-text v-if="cookbook">
+      <v-text-field v-model="cookbook.name" :label="$t('cookbook.cookbook-name')"></v-text-field>
+      <v-textarea v-model="cookbook.description" auto-grow :rows="2" :label="$t('recipe.description')"></v-textarea>
+      <RecipeOrganizerSelector v-model="cookbook.categories" selector-type="categories" />
+      <RecipeOrganizerSelector v-model="cookbook.tags" selector-type="tags" />
+      <RecipeOrganizerSelector v-model="cookbook.tools" selector-type="tools" />
+      <v-switch v-model="cookbook.public" hide-details single-line>
+        <template #label>
+          {{ $t('cookbook.public-cookbook') }}
+          <HelpIcon small right class="ml-2">
+            {{ $t('cookbook.public-cookbook-description') }}
+          </HelpIcon>
+        </template>
+      </v-switch>
+      <div class="mt-4">
+        <h3 class="text-subtitle-1 d-flex align-center mb-0 pb-0">
+          {{ $t('cookbook.filter-options') }}
+          <HelpIcon right small class="ml-2">
+            {{ $t('cookbook.filter-options-description') }}
+          </HelpIcon>
+        </h3>
+        <v-switch v-model="cookbook.requireAllCategories" class="mt-0" hide-details single-line>
+          <template #label> {{ $t('cookbook.require-all-categories') }} </template>
+        </v-switch>
+        <v-switch v-model="cookbook.requireAllTags" hide-details single-line>
+          <template #label> {{ $t('cookbook.require-all-tags') }} </template>
+        </v-switch>
+        <v-switch v-model="cookbook.requireAllTools" hide-details single-line>
+          <template #label> {{ $t('cookbook.require-all-tools') }} </template>
+        </v-switch>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { ReadCookBook } from "~/lib/api/types/cookbook";
+import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
+export default defineComponent({
+  components: { RecipeOrganizerSelector },
+  props: {
+    cookbook: {
+      type: Object as () => ReadCookBook,
+      required: true,
+    },
+    actions: {
+      type: Object as () => any,
+      required: true,
+    },
+  },
+});
+</script>

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -139,7 +139,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props, context) {
+  setup(_, context) {
     const deleteDialog = ref(false);
 
     const { i18n, $globals } = useContext();

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -26,54 +26,69 @@
     >
       <div style="max-height: 70vh;  overflow-y: auto">
         <v-card
-          v-for="(section, sectionIndex) in recipeIngredientSections" :key="section.recipeId + sectionIndex"
+          v-for="(recipeSection, recipeSectionIndex) in recipeIngredientSections" :key="recipeSection.recipeId + recipeSectionIndex"
           elevation="0"
           height="fit-content"
           width="100%"
         >
-          <v-divider v-if="sectionIndex > 0" class="mt-3" />
+          <v-divider v-if="recipeSectionIndex > 0" class="mt-3" />
           <v-card-title
             v-if="recipeIngredientSections.length > 1"
-            class="justify-center"
+            class="justify-center text-h5"
             width="100%"
           >
             <v-container style="width: 100%;">
               <v-row no-gutters class="ma-0 pa-0">
                 <v-col cols="12" align-self="center" class="text-center">
-                  {{ section.recipeName }}
+                  {{ recipeSection.recipeName }}
                 </v-col>
               </v-row>
-              <v-row v-if="section.recipeScale > 1" no-gutters class="ma-0 pa-0">
+              <v-row v-if="recipeSection.recipeScale > 1" no-gutters class="ma-0 pa-0">
                 <!-- TODO: make this editable in the dialog and visible on single-recipe lists -->
                 <v-col cols="12" align-self="center" class="text-center">
-                  ({{ $tc("recipe.quantity") }}: {{ section.recipeScale }})
+                  ({{ $tc("recipe.quantity") }}: {{ recipeSection.recipeScale }})
                 </v-col>
               </v-row>
             </v-container>
           </v-card-title>
-          <div
-            :class="$vuetify.breakpoint.smAndDown ? '' : 'ingredient-grid'"
-            :style="$vuetify.breakpoint.smAndDown ? '' : { gridTemplateRows: `repeat(${Math.ceil(section.ingredients.length / 2)}, min-content)` }"
-          >
-            <v-list-item
-              v-for="(ingredientData, i) in section.ingredients"
-              :key="'ingredient' + i"
-              dense
-              @click="recipeIngredientSections[sectionIndex].ingredients[i].checked = !recipeIngredientSections[sectionIndex].ingredients[i].checked"
+          <div>
+            <div
+              v-for="(ingredientSection, ingredientSectionIndex) in recipeSection.ingredientSections"
+              :key="recipeSection.recipeId + recipeSectionIndex + ingredientSectionIndex"
             >
-              <v-checkbox
-                hide-details
-                :input-value="ingredientData.checked"
-                class="pt-0 my-auto py-auto"
-                color="secondary"
-              />
-              <v-list-item-content :key="ingredientData.ingredient.quantity">
-                <RecipeIngredientListItem
-                  :ingredient="ingredientData.ingredient"
-                  :disable-amount="ingredientData.disableAmount"
-                  :scale="section.recipeScale" />
-              </v-list-item-content>
-            </v-list-item>
+              <v-card-title v-if="ingredientSection.sectionName" class="ingredient-title mt-2 pb-0 text-h6">
+                {{ ingredientSection.sectionName }}
+              </v-card-title>
+              <div
+                :class="$vuetify.breakpoint.smAndDown ? '' : 'ingredient-grid'"
+                :style="$vuetify.breakpoint.smAndDown ? '' : { gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
+              >
+                <v-list-item
+                  v-for="(ingredientData, i) in ingredientSection.ingredients"
+                  :key="recipeSection.recipeId + recipeSectionIndex + ingredientSectionIndex + i"
+                  dense
+                  @click="recipeIngredientSections[recipeSectionIndex]
+                    .ingredientSections[ingredientSectionIndex]
+                    .ingredients[i].checked = !recipeIngredientSections[recipeSectionIndex]
+                    .ingredientSections[ingredientSectionIndex]
+                    .ingredients[i]
+                    .checked"
+                >
+                  <v-checkbox
+                    hide-details
+                    :input-value="ingredientData.checked"
+                    class="pt-0 my-auto py-auto"
+                    color="secondary"
+                  />
+                  <v-list-item-content :key="ingredientData.ingredient.quantity">
+                    <RecipeIngredientListItem
+                      :ingredient="ingredientData.ingredient"
+                      :disable-amount="ingredientData.disableAmount"
+                      :scale="recipeSection.recipeScale" />
+                  </v-list-item-content>
+                </v-list-item>
+              </div>
+            </div>
           </div>
         </v-card>
       </div>
@@ -112,17 +127,22 @@ export interface RecipeWithScale extends Recipe {
   scale: number;
 }
 
-export interface ShoppingListRecipeIngredient {
+export interface ShoppingListIngredient {
   checked: boolean;
   ingredient: RecipeIngredient;
   disableAmount: boolean;
 }
 
+export interface ShoppingListIngredientSection {
+  sectionName: string;
+  ingredients: ShoppingListIngredient[];
+}
+
 export interface ShoppingListRecipeIngredientSection {
   recipeId: string;
   recipeName: string;
   recipeScale: number;
-  ingredients: ShoppingListRecipeIngredient[];
+  ingredientSections: ShoppingListIngredientSection[];
 }
 
 export default defineComponent({
@@ -191,7 +211,7 @@ export default defineComponent({
           continue;
         }
 
-        const shoppingListIngredients: ShoppingListRecipeIngredient[] = recipe.recipeIngredient.map((ing) => {
+        const shoppingListIngredients: ShoppingListIngredient[] = recipe.recipeIngredient.map((ing) => {
           return {
             checked: true,
             ingredient: ing,
@@ -199,11 +219,35 @@ export default defineComponent({
           }
         });
 
+        const shoppingListIngredientSections = shoppingListIngredients.reduce((sections, ing) => {
+          // if title append new section to the end of the array
+          if (ing.ingredient.title) {
+            sections.push({
+              sectionName: ing.ingredient.title,
+              ingredients: [ing],
+            });
+            return sections;
+          }
+
+          // append new section if first
+          if (sections.length === 0) {
+            sections.push({
+              sectionName: "",
+              ingredients: [ing],
+            });
+            return sections;
+          }
+
+          // otherwise add ingredient to last section in the array
+          sections[sections.length - 1].ingredients.push(ing);
+          return sections;
+        }, [] as ShoppingListIngredientSection[]);
+
         recipeSectionMap.set(recipe.slug, {
           recipeId: recipe.id,
           recipeName: recipe.name,
           recipeScale: recipe.scale,
-          ingredients: shoppingListIngredients,
+          ingredientSections: shoppingListIngredientSections,
         })
       }
 
@@ -231,9 +275,11 @@ export default defineComponent({
     }
 
     function bulkCheckIngredients(value = true) {
-      recipeIngredientSections.value.forEach((section) => {
-        section.ingredients.forEach((ing) => {
-          ing.checked = value;
+      recipeIngredientSections.value.forEach((recipeSection) => {
+        recipeSection.ingredientSections.forEach((ingSection) => {
+          ingSection.ingredients.forEach((ing) => {
+            ing.checked = value;
+          });
         });
       });
     }
@@ -246,10 +292,12 @@ export default defineComponent({
         }
 
         const ingredients: RecipeIngredient[] = [];
-        section.ingredients.forEach((ing) => {
-          if (ing.checked) {
-            ingredients.push(ing.ingredient);
-          }
+        section.ingredientSections.forEach((ingSection) => {
+          ingSection.ingredients.forEach((ing) => {
+            if (ing.checked) {
+              ingredients.push(ing.ingredient);
+            }
+          });
         });
 
         if (!ingredients.length) {
@@ -272,7 +320,11 @@ export default defineComponent({
         }
       })
 
-      success ? alert.success(i18n.t("recipe.recipes-added-to-list") as string)
+      const successMessage = promises.length === 1
+        ? i18n.t("recipe.successfully-added-to-list") as string
+        : i18n.t("recipe.failed-to-add-to-list") as string;
+
+      success ? alert.success(successMessage)
       : alert.error(i18n.t("failed-to-add-recipes-to-list") as string)
 
       state.shoppingListDialog = false;

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -52,11 +52,20 @@ export default defineComponent({
     });
 
     const ingredientCopyText = computed(() => {
-      return props.value
-        .map((ingredient) => {
-          return `${parseIngredientText(ingredient, props.disableAmount, props.scale, false)}`;
-        })
-        .join("\n");
+      const components: string[] = [];
+      props.value.forEach((ingredient) => {
+        if (ingredient.title) {
+          if (components.length) {
+            components.push("");
+          }
+
+          components.push(`[${ingredient.title}]`);
+        }
+
+        components.push(parseIngredientText(ingredient, props.disableAmount, props.scale, false));
+      });
+
+      return components.join("\n");
     });
 
     function toggleChecked(index: number) {

frontend/components/Domain/Recipe/RecipeNotes.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="value.length > 0 || edit" class="mt-8">
     <h2 class="my-4">{{ $t("recipe.note") }}</h2>
-    <div v-for="(note, index) in value" :key="'note' + index" class="mt-1">
+    <div v-for="(note, index) in value" :id="'note' + index" :key="'note' + index" class="mt-1">
       <v-card v-if="edit">
         <v-card-text>
           <div class="d-flex align-center">

frontend/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -5,17 +5,20 @@
     <BaseDialog
       v-if="deleteTarget"
       v-model="dialogs.delete"
-      :title="$t('general.delete-with-name', { name: deleteTarget.name })"
+      :title="$t('general.delete-with-name', { name: $t(translationKey) })"
       color="error"
       :icon="$globals.icons.alertCircle"
       @confirm="deleteOne()"
     >
-      <v-card-text> {{ $t("general.confirm-delete-generic-with-name", { name: deleteTarget.name }) }} </v-card-text>
+      <v-card-text>
+<p>{{ $t("general.confirm-delete-generic-with-name", { name: $t(translationKey) }) }}</p>
+        <p class="mt-4 mb-0 ml-4">{{ deleteTarget.name }}</p>
+      </v-card-text>
     </BaseDialog>
 
     <BaseDialog v-if="updateTarget" v-model="dialogs.update" :title="$t('general.update')" @confirm="updateOne()">
       <v-card-text>
-        <v-text-field v-model="updateTarget.name" label="$t('general.name')"> </v-text-field>
+        <v-text-field v-model="updateTarget.name" :label="$t('general.name')"> </v-text-field>
         <v-checkbox v-if="itemType === Organizer.Tool" v-model="updateTarget.onHand" :label="$t('tool.on-hand')"></v-checkbox>
       </v-card-text>
     </BaseDialog>
@@ -136,6 +139,15 @@ export default defineComponent({
 
     const presets = useContextPresets();
 
+    const translationKey = computed<string>(() => {
+      const typeMap = {
+        "categories": "category.category",
+        "tags": "tag.tag",
+        "tools": "tool.tool"
+      };
+      return typeMap[props.itemType] || "";
+    });
+
     const deleteTarget = ref<GenericItem | null>(null);
     const updateTarget = ref<GenericItem | null>(null);
 
@@ -223,6 +235,7 @@ export default defineComponent({
       presets,
       itemsSorted,
       searchString,
+      translationKey,
     };
   },
   // Needed for useMeta

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -1,7 +1,7 @@
 <template>
   <section @keyup.ctrl.90="undoMerge">
     <!-- Ingredient Link Editor -->
-    <v-dialog v-model="dialog" width="600">
+    <v-dialog v-if="dialog" v-model="dialog" width="600">
       <v-card :ripple="false">
         <v-app-bar dark color="primary" class="mt-n1 mb-3">
           <v-icon large left>
@@ -50,11 +50,15 @@
           <BaseButton cancel @click="dialog = false"> </BaseButton>
           <v-spacer></v-spacer>
           <div class="d-flex flex-wrap justify-end">
-            <BaseButton color="info" @click="autoSetReferences">
+            <BaseButton class="my-1" color="info" @click="autoSetReferences">
               <template #icon> {{ $globals.icons.robot }}</template>
               {{ $t("recipe.auto") }}
             </BaseButton>
-            <BaseButton class="ml-2" save @click="setIngredientIds"> </BaseButton>
+            <BaseButton class="ml-2 my-1" save @click="setIngredientIds"> </BaseButton>
+            <BaseButton v-if="availableNextStep" class="ml-2 my-1" @click="saveAndOpenNextLinkIngredients">
+              <template #icon> {{ $globals.icons.forward }}</template>
+              {{ $t("recipe.nextStep") }}
+            </BaseButton>
           </div>
         </v-card-actions>
       </v-card>
@@ -236,6 +240,7 @@ import {
   onMounted,
   useContext,
   computed,
+  nextTick,
 } from "@nuxtjs/composition-api";
 import RecipeIngredientHtml from "../../RecipeIngredientHtml.vue";
 import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset, Recipe } from "~/lib/api/types/recipe";
@@ -399,6 +404,8 @@ export default defineComponent({
       activeRefs.value = refs.map((ref) => ref.referenceId ?? "");
     }
 
+    const availableNextStep = computed(() => activeIndex.value < props.value.length - 1);
+
     function setIngredientIds() {
       const instruction = props.value[activeIndex.value];
       instruction.ingredientReferences = activeRefs.value.map((ref) => {
@@ -417,6 +424,20 @@ export default defineComponent({
       state.dialog = false;
     }
 
+    function saveAndOpenNextLinkIngredients() {
+      const currentStepIndex = activeIndex.value;
+
+      if(!availableNextStep.value) {
+        return; // no next step, the button calling this function should not be shown
+      }
+
+      setIngredientIds();
+      const nextStep = props.value[currentStepIndex + 1];
+      // close dialog before opening to reset the scroll position
+      nextTick(() => openDialog(currentStepIndex + 1, nextStep.text, nextStep.ingredientReferences));
+
+    }
+
     function setUsedIngredients() {
       const usedRefs: { [key: string]: boolean } = {};
 
@@ -627,6 +648,8 @@ export default defineComponent({
       mergeAbove,
       openDialog,
       setIngredientIds,
+      availableNextStep,
+      saveAndOpenNextLinkIngredients,
       undoMerge,
       toggleDisabled,
       isChecked,