Merge remote-tracking branch 'upstream/mealie-next' into server-side-…

…oidc

.github/workflows/codeql.yml

@@ -45,7 +45,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/e2e.yml

@@ -11,8 +11,8 @@ jobs:
       run:
         working-directory: ./tests/e2e
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 18
         cache: 'yarn'

.github/workflows/partial-backend.yml

@@ -36,7 +36,7 @@ jobs:
     # Steps
     steps:
       - name: Install Task
-        uses: arduino/setup-task@v1
+        uses: arduino/setup-task@v2
         with:
           version: 3.x
           repo-token: ${{ secrets.GITHUB_TOKEN }}
@@ -45,7 +45,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Set up python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.10"
 
@@ -57,7 +57,7 @@ jobs:
 
       - name: Load cached venv
         id: cached-poetry-dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: .venv
           key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}

.github/workflows/partial-frontend.yml

@@ -22,7 +22,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v3.3.2
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -60,7 +60,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v3.3.2
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

.github/workflows/partial-trivy-container-scanning.yml

@@ -26,6 +26,6 @@ jobs:
           output: "trivy-results.sarif"
 
       - name: Upload Trivy scan results to GitHub Security tab
-        uses: github/codeql-action/upload-sarif@v2
+        uses: github/codeql-action/upload-sarif@v3
         with:
           sarif_file: "trivy-results.sarif"

docs/docs/contributors/developers-guide/migration-guide.md

@@ -15,6 +15,7 @@ We have renamed the `updateAt` field to `updatedAt`. While the API will still ac
 ### Backend Endpoint Changes
 
 These endpoints have moved, but are otherwise unchanged:
+
 - `/recipes/create-url` -> `/recipes/create/url`
 - `/recipes/create-url/bulk` -> `/recipes/create/url/bulk`
 - `/recipes/create-from-zip` -> `/recipes/create/zip`
@@ -38,6 +39,7 @@ These endpoints have moved, but are otherwise unchanged:
 `/groups/members` previously returned a `UserOut` object, but now returns a `UserSummary`. Should you need the full user information (username, email, etc.), rather than just the summary, see `/households/members` instead for the household members.
 
 These endpoints have been completely removed:
+
 - `/admin/analytics` (no longer used)
 - `/groups/permissions` (see household permissions)
 - `/groups/statistics` (see household statistics)
@@ -49,6 +51,7 @@ These endpoints have been completely removed:
 ### Frontend Links
 
 These frontend pages have moved:
+
 - `/group/mealplan/...` -> `/household/mealplan/...`
 - `/group/members` -> `/household/members`
 - `/group/notifiers` -> `/household/notifiers`

docs/docs/documentation/getting-started/faq.md

@@ -33,8 +33,6 @@ Do the following for each recipe you want to intelligently handle ingredients.
 
 Scaling up this recipe or adding it to a Shopping List will now smartly take care of ingredient amounts and duplicate combinations.
 
-Note: Each recipe must have a servings count set for recipe scaling to work.
-
 ## Is it safe to upgrade Mealie?
 
 Yes. If you are using the v1 branches (including beta), you can upgrade to the latest version of Mealie without performing a site Export/Restore. This process was required in previous versions of Mealie, however we've automated the database migration process to make it easier to upgrade. Note that if you were using the v0.5.x version, you CANNOT upgrade to the latest version automatically. You must follow the migration instructions in the documentation.

docs/docs/documentation/getting-started/updating.md

@@ -17,7 +17,7 @@ If you are upgrading from pre-v1.0.0 to v1.0.0 or later (v2.0.0, etc.), make sur
 [See Backups and Restore Section](../getting-started/usage/backups-and-restoring.md) for details on backing up your data
 
 ## Docker
-For all setups using Docker the updating process looks something like this
+For all setups using Docker, the updating process looks something like this:
 
 - Stop the container using `docker compose down`
 - If you are not using the latest tag, change the version (image tag) in your docker-compose file

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

@@ -1,13 +1,13 @@
 <template>
   <div class="d-flex justify-space-between align-center pt-2 pb-3">
-    <v-tooltip v-if="!isEditMode && recipe.recipeYield" small top color="secondary darken-1">
+    <v-tooltip v-if="!isEditMode" small top color="secondary darken-1">
       <template #activator="{ on, attrs }">
         <RecipeScaleEditButton
           v-model.number="scaleValue"
           v-bind="attrs"
           :recipe-yield="recipe.recipeYield"
-          :basic-yield="basicYield"
           :scaled-yield="scaledYield"
+          :basic-yield-num="basicYieldNum"
           :edit-scale="!recipe.settings.disableAmount && !isEditMode"
           v-on="on"
         />
@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref } 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 } from "~/composables/recipe-page/use-extract-recipe-yield";
+import { useExtractRecipeYield, findMatch } from "~/composables/recipe-page/use-extract-recipe-yield";
 
 export default defineComponent({
   components: {
@@ -70,14 +70,13 @@ export default defineComponent({
       return useExtractRecipeYield(props.recipe.recipeYield, scaleValue.value);
     });
 
-    const basicYield = computed(() => {
-      return useExtractRecipeYield(props.recipe.recipeYield, 1);
-    });
+    const match = findMatch(props.recipe.recipeYield);
+    const basicYieldNum = ref<number |null>(match ? match[1] : null);
 
     return {
       scaleValue,
-      basicYield,
       scaledYield,
+      basicYieldNum,
       isEditMode,
     };
   },

frontend/components/Domain/Recipe/RecipeScaleEditButton.vue

@@ -5,17 +5,22 @@
         <v-menu v-model="menu" :disabled="!editScale" offset-y top nudge-top="6" :close-on-content-click="false">
           <template #activator="{ on, attrs }">
             <v-card class="pa-1 px-2" dark color="secondary darken-1" small v-bind="attrs" v-on="on">
-              <span v-if="recipeYield"> {{ scaledYield }} </span>
               <span v-if="!recipeYield"> x {{ scale }} </span>
+              <div v-else-if="!numberParsed && recipeYield">
+                <span v-if="numerator === 1"> {{ recipeYield }} </span>
+                <span v-else> {{ numerator }}x {{ scaledYield }} </span>
+              </div>
+              <span v-else> {{ scaledYield }} </span>
+
             </v-card>
           </template>
           <v-card min-width="300px">
             <v-card-title class="mb-0">
-              {{ $t("recipe.edit-scale") }}
+              {{ $t("recipe.servings") }}
             </v-card-title>
             <v-card-text class="mt-n5">
               <div class="mt-4 d-flex align-center">
-                <v-text-field v-model.number="scale" type="number" :min="0" :label="$t('recipe.edit-scale')" />
+                <v-text-field v-model="numerator" type="number" :min="0" hide-spin-buttons />
                 <v-tooltip right color="secondary darken-1">
                   <template #activator="{ on, attrs }">
                     <v-btn v-bind="attrs" icon class="mx-1" small v-on="on" @click="scale = 1">
@@ -24,7 +29,7 @@
                       </v-icon>
                     </v-btn>
                   </template>
-                  <span> {{ $t("recipe.reset-scale") }} </span>
+                  <span> {{ $t("recipe.reset-servings-count") }} </span>
                 </v-tooltip>
               </div>
             </v-card-text>
@@ -38,37 +43,38 @@
         :buttons="[
           {
             icon: $globals.icons.minus,
-            text: $t('recipe.decrease-scale-label'),
+            text: $tc('recipe.decrease-scale-label'),
             event: 'decrement',
+            disabled: disableDecrement,
           },
           {
             icon: $globals.icons.createAlt,
-            text: $t('recipe.increase-scale-label'),
+            text: $tc('recipe.increase-scale-label'),
             event: 'increment',
           },
         ]"
-        @decrement="scale > 1 ? scale-- : null"
-        @increment="scale++"
+        @decrement="numerator--"
+        @increment="numerator++"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, computed } from "@nuxtjs/composition-api";
+import { defineComponent, ref, computed, watch  } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   props: {
     recipeYield: {
       type: String,
       default: null,
     },
-    basicYield: {
+    scaledYield: {
       type: String,
       default: null,
     },
-    scaledYield: {
-      type: String,
+    basicYieldNum: {
+      type: Number,
       default: null,
     },
     editScale: {
@@ -81,10 +87,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const state = reactive({
-      tempScale: 1,
-      menu: false,
-    });
+    const menu = ref<boolean>(false);
 
     const scale = computed({
       get: () => props.value,
@@ -94,9 +97,24 @@ export default defineComponent({
       },
     });
 
+    const numerator = ref<number>(parseFloat(props.basicYieldNum.toFixed(3)) ?? 1);
+    const denominator = parseFloat(props.basicYieldNum.toFixed(32)) ?? 1;
+    const numberParsed = !!props.basicYieldNum;
+
+    watch(() => numerator.value, () => {
+      scale.value = parseFloat((numerator.value / denominator).toFixed(3));
+    });
+    const disableDecrement = computed(() => {
+      return numerator.value <= 1;
+    });
+
+
     return {
+      menu,
       scale,
-      ...toRefs(state),
+      numerator,
+      disableDecrement,
+      numberParsed,
     };
   },
 });

frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue

@@ -8,8 +8,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from "@nuxtjs/composition-api";
-// @ts-ignore missing color types
-import Color from "@sphinxxxx/color-conversion";
+import { getTextColor } from "~/composables/use-text-color";
 import { MultiPurposeLabelSummary } from "~/lib/api/types/recipe";
 
 
@@ -21,44 +20,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const textColor = computed(() => {
-      if (!props.label.color) {
-        return "black";
-      }
-
-      return pickTextColorBasedOnBgColorAdvanced(props.label.color, "white", "black");
-    });
-
-    /*
-    Function to pick the text color based on the background color.
-
-    Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
-    */
-    const ACCESSIBILITY_THRESHOLD = 0.179;
-
-    function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
-      try {
-        const color = new Color(bgColor);
-
-        // if opacity is less than 0.3 always return dark color
-        if (color._rgba[3] < 0.3) {
-          return darkColor;
-        }
-
-        const uicolors = [color._rgba[0] / 255, color._rgba[1] / 255, color._rgba[2] / 255];
-        const c = uicolors.map((col) => {
-          if (col <= 0.03928) {
-            return col / 12.92;
-          }
-          return Math.pow((col + 0.055) / 1.055, 2.4);
-        });
-        const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-        return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
-      } catch (error) {
-        console.warn(error);
-        return "black";
-      }
-    }
+    const textColor = computed(() => getTextColor(props.label.color));
 
     return {
       textColor,

frontend/composables/recipe-page/use-extract-recipe-yield.ts

@@ -39,7 +39,7 @@ function extractServingsFromFraction(fractionString: string): number | undefined
 
 
 
-function findMatch(yieldString: string): [matchString: string, servings: number, isFraction: boolean] | null {
+export function findMatch(yieldString: string): [matchString: string, servings: number, isFraction: boolean] | null {
     if (!yieldString) {
         return null;
     }

frontend/composables/use-text-color.ts

@@ -0,0 +1,39 @@
+// @ts-ignore missing color types
+import Color from "@sphinxxxx/color-conversion";
+
+const LIGHT_COLOR = "white";
+const DARK_COLOR = "black";
+const ACCESSIBILITY_THRESHOLD = 0.179;
+
+/*
+Function to pick the text color based on the background color.
+
+Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+*/
+export function getTextColor(bgColor: string | undefined): string {
+  if (!bgColor) {
+    return DARK_COLOR;
+  }
+
+  try {
+    const color = new Color(bgColor);
+
+    // if opacity is less than 0.3 always return dark color
+    if (color._rgba[3] < 0.3) {
+      return DARK_COLOR;
+    }
+
+    const uicolors = [color._rgba[0] / 255, color._rgba[1] / 255, color._rgba[2] / 255];
+    const c = uicolors.map((col) => {
+      if (col <= 0.03928) {
+        return col / 12.92;
+      }
+      return Math.pow((col + 0.055) / 1.055, 2.4);
+    });
+    const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+    return L > ACCESSIBILITY_THRESHOLD ? DARK_COLOR : LIGHT_COLOR;
+  } catch (error) {
+    console.warn(error);
+    return DARK_COLOR;
+  }
+}