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

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -133,7 +133,7 @@ export default defineComponent({
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
       // @ts-expect-error - TS doesn't like the $auth global user attribute
-      subject: i18n.t("recipe.user-made-this", { user: $auth.user.fullName } as string),
+      subject: i18n.tc("recipe.user-made-this", { user: $auth.user.fullName }),
       eventType: "comment",
       eventMessage: "",
       timestamp: undefined,

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -19,11 +19,11 @@
         </div>
       </v-card-text>
       <v-list v-if="showViewer" dense class="mt-0 pt-0">
-        <v-list-item v-for="(item, key, index) in labels" :key="index" style="min-height: 25px" dense>
+        <v-list-item v-for="(item, key, index) in renderedList" :key="index" style="min-height: 25px" dense>
           <v-list-item-content>
             <v-list-item-title class="pl-4 caption flex row">
               <div>{{ item.label }}</div>
-              <div class="ml-auto mr-1">{{ value[key] }}</div>
+              <div class="ml-auto mr-1">{{ item.value }}</div>
               <div>{{ item.suffix }}</div>
             </v-list-item-title>
           </v-list-item-content>
@@ -37,6 +37,14 @@
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 import { Nutrition } from "~/lib/api/types/recipe";
 
+type NutritionLabelType = {
+  [key: string]: {
+    label: string;
+    suffix: string;
+    value?: string;
+  };
+};
+
 export default defineComponent({
   props: {
     value: {
@@ -50,34 +58,34 @@ export default defineComponent({
   },
   setup(props, context) {
     const { i18n } = useContext();
-    const labels = {
+    const labels = <NutritionLabelType>{
       calories: {
-        label: i18n.t("recipe.calories"),
-        suffix: i18n.t("recipe.calories-suffix"),
+        label: i18n.tc("recipe.calories"),
+        suffix: i18n.tc("recipe.calories-suffix"),
       },
       fatContent: {
-        label: i18n.t("recipe.fat-content"),
-        suffix: i18n.t("recipe.grams"),
+        label: i18n.tc("recipe.fat-content"),
+        suffix: i18n.tc("recipe.grams"),
       },
       fiberContent: {
-        label: i18n.t("recipe.fiber-content"),
-        suffix: i18n.t("recipe.grams"),
+        label: i18n.tc("recipe.fiber-content"),
+        suffix: i18n.tc("recipe.grams"),
       },
       proteinContent: {
-        label: i18n.t("recipe.protein-content"),
-        suffix: i18n.t("recipe.grams"),
+        label: i18n.tc("recipe.protein-content"),
+        suffix: i18n.tc("recipe.grams"),
       },
       sodiumContent: {
-        label: i18n.t("recipe.sodium-content"),
-        suffix: i18n.t("recipe.milligrams"),
+        label: i18n.tc("recipe.sodium-content"),
+        suffix: i18n.tc("recipe.milligrams"),
       },
       sugarContent: {
-        label: i18n.t("recipe.sugar-content"),
-        suffix: i18n.t("recipe.grams"),
+        label: i18n.tc("recipe.sugar-content"),
+        suffix: i18n.tc("recipe.grams"),
       },
       carbohydrateContent: {
-        label: i18n.t("recipe.carbohydrate-content"),
-        suffix: i18n.t("recipe.grams"),
+        label: i18n.tc("recipe.carbohydrate-content"),
+        suffix: i18n.tc("recipe.grams"),
       },
     };
     const valueNotNull = computed(() => {
@@ -96,11 +104,25 @@ export default defineComponent({
       context.emit("input", { ...props.value, [key]: event });
     }
 
+    // Build a new list that only contains nutritional information that has a value
+    const renderedList = computed(() => {
+      return Object.entries(labels).reduce((item: NutritionLabelType, [key, label]) => {
+        if (props.value[key]?.trim()) {
+          item[key] = {
+            ...label,
+            value: props.value[key],
+          };
+        }
+        return item;
+      }, {});
+    });
+
     return {
       labels,
       valueNotNull,
       showViewer,
       updateValue,
+      renderedList,
     };
   },
 });

frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue

@@ -25,6 +25,7 @@
             :label="$t('shopping-list.note')"
             rows="1"
             auto-grow
+            @keypress="handleNoteKeyPress"
           ></v-textarea>
         </div>
         <div class="d-flex align-end" style="gap: 20px">
@@ -95,7 +96,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "@nuxtjs/composition-api";
+import { defineComponent, computed, watch } from "@nuxtjs/composition-api";
 import { ShoppingListItemCreate, ShoppingListItemOut } from "~/lib/api/types/group";
 import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
@@ -128,9 +129,28 @@ export default defineComponent({
         context.emit("input", val);
       },
     });
+
+    watch(
+      () => props.value.food,
+      (newFood) => {
+        // @ts-ignore our logic already assumes there's a label attribute, even if TS doesn't think there is
+        listItem.value.label = newFood?.label || null;
+        listItem.value.labelId = listItem.value.label?.id || null;
+      }
+    );
+
     return {
       listItem,
     };
   },
+  methods: {
+    handleNoteKeyPress(event) {
+      // Save on Enter
+      if (!event.shiftKey && event.key === "Enter") {
+        event.preventDefault();
+        this.$emit("save");
+      }
+    },
+  }
 });
 </script>