feat: Structured Yields (#4489)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
2025-08-02 20:15:24 +02:00 · 2024-11-20 08:46:27 -06:00 · 2024-11-20 08:46:27 -06:00 · 327da02fc8
commit 327da02fc8
parent c8cd68b4f0
39 changed files with 1018 additions and 551 deletions
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
@ -1,46 +1,7 @@
 <template>
  <div>
-    <div class="d-flex justify-end flex-wrap align-stretch">
-      <v-card v-if="!landscape" width="50%" flat class="d-flex flex-column justify-center align-center">
-        <v-card-text>
-          <v-card-title class="headline pa-0 flex-column align-center">
-            {{ recipe.name }}
-            <RecipeRating :key="recipe.slug" :value="recipe.rating" :recipe-id="recipe.id" :slug="recipe.slug" />
-          </v-card-title>
-          <v-divider class="my-2"></v-divider>
-          <SafeMarkdown :source="recipe.description" />
-          <v-divider></v-divider>
-          <div v-if="isOwnGroup" class="d-flex justify-center mt-5">
-            <RecipeLastMade
-              v-model="recipe.lastMade"
-              :recipe="recipe"
-              class="d-flex justify-center flex-wrap"
-              :class="true ? undefined : 'force-bottom'"
-            />
-          </div>
-          <div class="d-flex justify-center mt-5">
-            <RecipeTimeCard
-              class="d-flex justify-center flex-wrap"
-              :class="true ? undefined : 'force-bottom'"
-              :prep-time="recipe.prepTime"
-              :total-time="recipe.totalTime"
-              :perform-time="recipe.performTime"
-            />
-          </div>
-        </v-card-text>
-      </v-card>
-      <v-img
-        :key="imageKey"
-        :max-width="landscape ? null : '50%'"
-        min-height="50"
-        :height="hideImage ? undefined : imageHeight"
-        :src="recipeImageUrl"
-        class="d-print-none"
-        @error="hideImage = true"
-      >
-      </v-img>
-    </div>
-    <v-divider></v-divider>
+    <RecipePageInfoCard :recipe="recipe" :recipe-scale="recipeScale" :landscape="landscape" />
+    <v-divider />
    <RecipeActionMenu
      :recipe="recipe"
      :slug="recipe.slug"
@ -65,10 +26,8 @@
 import { defineComponent, useContext, computed, ref, watch } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useRecipePermissions } from "~/composables/recipes";
-import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
-import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
+import RecipePageInfoCard from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
-import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
 import { useStaticRoutes, useUserApi  } from "~/composables/api";
 import { HouseholdSummary } from "~/lib/api/types/household";
 import { Recipe } from "~/lib/api/types/recipe";
@ -76,10 +35,8 @@ import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageState, usePageUser, PageMode, EditorMode } from "~/composables/recipe-page/shared-state";
 export default defineComponent({
  components: {
-    RecipeTimeCard,
+    RecipePageInfoCard,
    RecipeActionMenu,
-    RecipeRating,
-    RecipeLastMade,
  },
  props: {
    recipe: {
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="d-flex justify-end flex-wrap align-stretch">
+      <RecipePageInfoCardImage v-if="landscape" :recipe="recipe" />
+      <v-card
+        :width="landscape ? '100%' : '50%'"
+        flat
+        class="d-flex flex-column justify-center align-center"
+      >
+        <v-card-text>
+          <v-card-title class="headline pa-0 flex-column align-center">
+            {{ recipe.name }}
+            <RecipeRating :key="recipe.slug" :value="recipe.rating" :recipe-id="recipe.id" :slug="recipe.slug" />
+          </v-card-title>
+          <v-divider class="my-2" />
+          <SafeMarkdown :source="recipe.description" />
+          <v-divider />
+          <v-container class="d-flex flex-row flex-wrap justify-center align-center">
+            <div class="mx-5">
+              <v-row no-gutters class="mb-1">
+                <v-col v-if="recipe.recipeYieldQuantity || recipe.recipeYield" cols="12" class="d-flex flex-wrap justify-center">
+                  <RecipeYield
+                    :yield-quantity="recipe.recipeYieldQuantity"
+                    :yield="recipe.recipeYield"
+                    :scale="recipeScale"
+                  />
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col cols="12" class="d-flex flex-wrap justify-center">
+                  <RecipeLastMade
+                    v-if="isOwnGroup"
+                    :value="recipe.lastMade"
+                    :recipe="recipe"
+                    :class="true ? undefined : 'force-bottom'"
+                  />
+                </v-col>
+              </v-row>
+            </div>
+            <div class="mx-5">
+              <RecipeTimeCard
+                stacked
+                container-class="d-flex flex-wrap justify-center"
+                :prep-time="recipe.prepTime"
+                :total-time="recipe.totalTime"
+                :perform-time="recipe.performTime"
+              />
+            </div>
+          </v-container>
+        </v-card-text>
+      </v-card>
+      <RecipePageInfoCardImage v-if="!landscape" :recipe="recipe" max-width="50%" class="my-auto" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
+import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
+import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
+import RecipeYield from "~/components/Domain/Recipe/RecipeYield.vue";
+import RecipePageInfoCardImage from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue";
+import { Recipe } from "~/lib/api/types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+export default defineComponent({
+  components: {
+    RecipeRating,
+    RecipeLastMade,
+    RecipeTimeCard,
+    RecipeYield,
+    RecipePageInfoCardImage,
+  },
+  props: {
+    recipe: {
+      type: Object as () => NoUndefinedField<Recipe>,
+      required: true,
+    },
+    recipeScale: {
+      type: Number,
+      default: 1,
+    },
+    landscape: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup() {
+    const { $vuetify } = useContext();
+    const useMobile = computed(() => $vuetify.breakpoint.smAndDown);
+
+    const { isOwnGroup } = useLoggedInState();
+
+    return {
+      isOwnGroup,
+      useMobile,
+    };
+  }
+});
+</script>
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
@ -0,0 +1,69 @@
+<template>
+  <v-img
+    :key="imageKey"
+    :max-width="maxWidth"
+    min-height="50"
+    :height="hideImage ? undefined : imageHeight"
+    :src="recipeImageUrl"
+    class="d-print-none"
+    @error="hideImage = true"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext, watch } from "@nuxtjs/composition-api";
+import { useStaticRoutes, useUserApi  } from "~/composables/api";
+import { HouseholdSummary } from "~/lib/api/types/household";
+import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
+import { Recipe } from "~/lib/api/types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+export default defineComponent({
+  props: {
+    recipe: {
+      type: Object as () => NoUndefinedField<Recipe>,
+      required: true,
+    },
+    maxWidth: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const { $vuetify } = useContext();
+    const { recipeImage } = useStaticRoutes();
+    const { imageKey } = usePageState(props.recipe.slug);
+    const { user } = usePageUser();
+
+    const recipeHousehold = ref<HouseholdSummary>();
+    if (user) {
+      const userApi = useUserApi();
+      userApi.households.getOne(props.recipe.householdId).then(({ data }) => {
+        recipeHousehold.value = data || undefined;
+      });
+    }
+
+    const hideImage = ref(false);
+    const imageHeight = computed(() => {
+      return $vuetify.breakpoint.xs ? "200" : "400";
+    });
+
+    const recipeImageUrl = computed(() => {
+      return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
+    });
+
+    watch(
+      () => recipeImageUrl.value,
+      () => {
+        hideImage.value = false;
+      }
+    );
+
+    return {
+      recipeImageUrl,
+      imageKey,
+      hideImage,
+      imageHeight,
+    };
+  }
+});
+</script>
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue
@ -0,0 +1,107 @@
+<template>
+  <div>
+    <v-text-field
+      v-model="recipe.name"
+      class="my-3"
+      :label="$t('recipe.recipe-name')"
+      :rules="[validators.required]"
+    />
+    <v-container class="ma-0 pa-0">
+      <v-row>
+        <v-col cols="3">
+          <v-text-field
+            v-model="recipeServings"
+            type="number"
+            :min="0"
+            hide-spin-buttons
+            dense
+            :label="$t('recipe.servings')"
+            @input="validateInput($event, 'recipeServings')"
+          />
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            v-model="recipeYieldQuantity"
+            type="number"
+            :min="0"
+            hide-spin-buttons
+            dense
+            :label="$t('recipe.yield')"
+            @input="validateInput($event, 'recipeYieldQuantity')"
+          />
+        </v-col>
+        <v-col cols="6">
+          <v-text-field
+          v-model="recipe.recipeYield"
+          dense
+          :label="$t('recipe.yield-text')"
+        />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <div class="d-flex flex-wrap" style="gap: 1rem">
+      <v-text-field v-model="recipe.totalTime" :label="$t('recipe.total-time')" />
+      <v-text-field v-model="recipe.prepTime" :label="$t('recipe.prep-time')" />
+      <v-text-field v-model="recipe.performTime" :label="$t('recipe.perform-time')" />
+    </div>
+    <v-textarea v-model="recipe.description" auto-grow min-height="100" :label="$t('recipe.description')" />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { Recipe } from "~/lib/api/types/recipe";
+
+export default defineComponent({
+  props: {
+    recipe: {
+      type: Object as () => NoUndefinedField<Recipe>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const recipeServings = computed<number>({
+      get() {
+        return props.recipe.recipeServings;
+      },
+      set(val) {
+        validateInput(val.toString(), "recipeServings");
+      },
+    });
+
+    const recipeYieldQuantity = computed<number>({
+      get() {
+        return props.recipe.recipeYieldQuantity;
+      },
+      set(val) {
+        validateInput(val.toString(), "recipeYieldQuantity");
+      },
+    });
+
+    function validateInput(value: string | null, property: "recipeServings" | "recipeYieldQuantity") {
+      if (!value) {
+        props.recipe[property] = 0;
+        return;
+      }
+
+      const number = parseFloat(value.replace(/[^0-9.]/g, ""));
+      if (isNaN(number) || number <= 0) {
+        props.recipe[property] = 0;
+        return;
+      }
+
+      props.recipe[property] = number;
+    }
+
+    return {
+      validators,
+      recipeServings,
+      recipeYieldQuantity,
+      validateInput,
+    };
+  },
+});
+</script>
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
@ -5,50 +5,32 @@
        <RecipeScaleEditButton
          v-model.number="scaleValue"
          v-bind="attrs"
-          :recipe-yield="recipe.recipeYield"
-          :scaled-yield="scaledYield"
-          :basic-yield-num="basicYieldNum"
+          :recipe-servings="recipeServings"
          :edit-scale="!recipe.settings.disableAmount && !isEditMode"
          v-on="on"
        />
      </template>
      <span> {{ $t("recipe.edit-scale") }} </span>
    </v-tooltip>
-    <v-spacer></v-spacer>
-
-    <RecipeRating
-      v-if="landscape && $vuetify.breakpoint.smAndUp"
-      :key="recipe.slug"
-      v-model="recipe.rating"
-      :recipe-id="recipe.id"
-      :slug="recipe.slug"
-    />
  </div>
 </template>

 <script lang="ts">
-import { computed, defineComponent, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
-import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
 import { usePageState } from "~/composables/recipe-page/shared-state";
-import { useExtractRecipeYield, findMatch } from "~/composables/recipe-page/use-extract-recipe-yield";

 export default defineComponent({
  components: {
    RecipeScaleEditButton,
-    RecipeRating,
  },
  props: {
    recipe: {
      type: Object as () => NoUndefinedField<Recipe>,
      required: true,
    },
-    landscape: {
-      type: Boolean,
-      default: false,
-    },
    scale: {
      type: Number,
      default: 1,
@ -57,6 +39,10 @@ export default defineComponent({
  setup(props, { emit }) {
    const { isEditMode } = usePageState(props.recipe.slug);

+    const recipeServings = computed<number>(() => {
+      return props.recipe.recipeServings || props.recipe.recipeYieldQuantity || 1;
+    });
+
    const scaleValue = computed<number>({
      get() {
        return props.scale;
@ -66,17 +52,9 @@ export default defineComponent({
      },
    });

-    const scaledYield = computed(() => {
-      return useExtractRecipeYield(props.recipe.recipeYield, scaleValue.value);
-    });
-
-    const match = findMatch(props.recipe.recipeYield);
-    const basicYieldNum = ref<number |null>(match ? match[1] : null);
-
    return {
+      recipeServings,
      scaleValue,
-      scaledYield,
-      basicYieldNum,
      isEditMode,
    };
  },
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageTitleContent.vue
@ -1,92 +0,0 @@
-<template>
-  <div>
-    <template v-if="!isEditMode && landscape">
-      <v-card-title class="px-0 py-2 ma-0 headline">
-        {{ recipe.name }}
-      </v-card-title>
-      <SafeMarkdown :source="recipe.description" />
-      <div v-if="isOwnGroup" class="pb-2 d-flex justify-center flex-wrap">
-        <RecipeLastMade
-          v-model="recipe.lastMade"
-          :recipe="recipe"
-          class="d-flex justify-center flex-wrap"
-          :class="true ? undefined : 'force-bottom'"
-        />
-      </div>
-      <div class="pb-2 d-flex justify-center flex-wrap">
-        <RecipeTimeCard
-          class="d-flex justify-center flex-wrap"
-          :prep-time="recipe.prepTime"
-          :total-time="recipe.totalTime"
-          :perform-time="recipe.performTime"
-        />
-        <RecipeRating
-          v-if="$vuetify.breakpoint.smAndDown"
-          :key="recipe.slug"
-          v-model="recipe.rating"
-          :recipe-id="recipe.id"
-          :slug="recipe.slug"
-        />
-      </div>
-      <v-divider></v-divider>
-    </template>
-    <template v-else-if="isEditMode">
-      <v-text-field
-        v-model="recipe.name"
-        class="my-3"
-        :label="$t('recipe.recipe-name')"
-        :rules="[validators.required]"
-      />
-      <v-text-field v-model="recipe.recipeYield" dense :label="$t('recipe.servings')" />
-      <div class="d-flex flex-wrap" style="gap: 1rem">
-        <v-text-field v-model="recipe.totalTime" :label="$t('recipe.total-time')" />
-        <v-text-field v-model="recipe.prepTime" :label="$t('recipe.prep-time')" />
-        <v-text-field v-model="recipe.performTime" :label="$t('recipe.perform-time')" />
-      </div>
-      <v-textarea v-model="recipe.description" auto-grow min-height="100" :label="$t('recipe.description')" />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-import { useLoggedInState } from "~/composables/use-logged-in-state";
-import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
-import { validators } from "~/composables/use-validators";
-import { NoUndefinedField } from "~/lib/api/types/non-generated";
-import { Recipe } from "~/lib/api/types/recipe";
-import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
-import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
-import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
-
-export default defineComponent({
-  components: {
-    RecipeRating,
-    RecipeTimeCard,
-    RecipeLastMade,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-    landscape: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const { user } = usePageUser();
-    const { imageKey, isEditMode } = usePageState(props.recipe.slug);
-    const { isOwnGroup } = useLoggedInState();
-
-    return {
-      user,
-      imageKey,
-      validators,
-      isEditMode,
-      isOwnGroup,
-    };
-  },
-});
-</script>