feat: Move "on hand" and "last made" to household (#4616)

Co-authored-by: Kuchenpirat <[email protected]>
mealie-recipes · Jan 13, 2025 · e9892ab · e9892ab
1 parent e565b91
commit e9892ab
Show file tree

Hide file tree

Showing 53 changed files with 1,617 additions and 399 deletions.
diff --git a/docs/docs/overrides/api.html b/docs/docs/overrides/api.html
diff --git a/frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue b/frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue
@@ -204,6 +204,10 @@ export default defineComponent({
       shoppingListShowAllToggled: false,
     });
 
+    const userHousehold = computed(() => {
+      return $auth.user?.householdSlug || "";
+    });
+
     const shoppingListChoices = computed(() => {
       return props.shoppingLists.filter((list) => preferences.value.viewAllLists || list.userId === $auth.user?.id);
     });
@@ -248,8 +252,9 @@ export default defineComponent({
         }
 
         const shoppingListIngredients: ShoppingListIngredient[] = recipe.recipeIngredient.map((ing) => {
+          const householdsWithFood = (ing.food?.householdsWithIngredientFood || []);
           return {
-            checked: !ing.food?.onHand,
+            checked: !householdsWithFood.includes(userHousehold.value),
             ingredient: ing,
             disableAmount: recipe.settings?.disableAmount || false,
           }
@@ -276,7 +281,8 @@ export default defineComponent({
           }
 
           // Store the on-hand ingredients for later
-          if (ing.ingredient.food?.onHand) {
+          const householdsWithFood = (ing.ingredient.food?.householdsWithIngredientFood || []);
+          if (householdsWithFood.includes(userHousehold.value)) {
             onHandIngs.push(ing);
             return sections;
           }

diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -96,7 +96,12 @@
           <v-icon left>
             {{ $globals.icons.calendar }}
           </v-icon>
-            {{ $t('recipe.last-made-date', { date: value ? new Date(value).toLocaleDateString($i18n.locale) : $t("general.never") } ) }}
+            <div v-if="lastMadeReady">
+              {{ $t('recipe.last-made-date', { date: lastMade ? new Date(lastMade).toLocaleDateString($i18n.locale) : $t("general.never") } ) }}
+            </div>
+            <div v-else>
+              <AppLoader tiny />
+            </div>
         </v-chip>
       </div>
       <div class="d-flex justify-center flex-wrap mt-1">
@@ -110,7 +115,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, onMounted, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import { VForm } from "~/types/vuetify";
 import { useUserApi } from "~/composables/api";
@@ -119,10 +124,6 @@ import { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {
-    value: {
-      type: String,
-      default: null,
-    },
     recipe: {
       type: Object as () => Recipe,
       required: true,
@@ -146,6 +147,20 @@ export default defineComponent({
     const newTimelineEventImagePreviewUrl = ref<string>();
     const newTimelineEventTimestamp = ref<string>();
 
+    const lastMade = ref(props.recipe.lastMade);
+    const lastMadeReady = ref(false);
+    onMounted(async () => {
+      if (!$auth.user?.householdSlug) {
+        lastMade.value = props.recipe.lastMade;
+      } else {
+        const { data } = await userApi.households.getCurrentUserHouseholdRecipe(props.recipe.slug || "");
+        lastMade.value = data?.lastMade;
+      }
+
+      lastMadeReady.value = true;
+    });
+
+
     whenever(
       () => madeThisDialog.value,
       () => {
@@ -195,11 +210,9 @@ export default defineComponent({
       const newEvent = eventResponse.data;
 
       // we also update the recipe's last made value
-      if (!props.value || newTimelineEvent.value.timestamp > props.value) {
+      if (!lastMade.value || newTimelineEvent.value.timestamp > lastMade.value) {
+        lastMade.value = newTimelineEvent.value.timestamp;
         await userApi.recipes.updateLastMade(props.recipe.slug,  newTimelineEvent.value.timestamp);
-
-        // update recipe in parent so the user can see it
-        context.emit("input", newTimelineEvent.value.timestamp);
       }
 
       // update the image, if provided
@@ -234,6 +247,8 @@ export default defineComponent({
       newTimelineEventImage,
       newTimelineEventImagePreviewUrl,
       newTimelineEventTimestamp,
+      lastMade,
+      lastMadeReady,
       createTimelineEvent,
       clearImage,
       uploadImage,

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@@ -30,7 +30,6 @@
                 <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'"
                   />

diff --git a/...end/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue b/...end/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
@@ -10,7 +10,7 @@
       <h2 class="mb-2 mt-4">{{ $t('tool.required-tools') }}</h2>
       <v-list-item v-for="(tool, index) in recipe.tools" :key="index" dense>
         <v-checkbox
-          v-model="recipe.tools[index].onHand"
+          v-model="recipeTools[index].onHand"
           hide-details
           class="pt-0 my-auto py-auto"
           color="secondary"
@@ -26,14 +26,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
-import { Recipe } from "~/lib/api/types/recipe";
+import { Recipe, RecipeTool } from "~/lib/api/types/recipe";
 import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
 
+interface RecipeToolWithOnHand extends RecipeTool {
+  onHand: boolean;
+}
+
 export default defineComponent({
   components: {
     RecipeIngredients,
@@ -59,16 +63,39 @@ export default defineComponent({
     const { user } = usePageUser();
     const { isEditMode } = usePageState(props.recipe.slug);
 
+    const recipeTools = computed(() => {
+      if (!(user.householdSlug && toolStore)) {
+        return props.recipe.tools.map((tool) => ({ ...tool, onHand: false }) as RecipeToolWithOnHand);
+      } else {
+        return props.recipe.tools.map((tool) => {
+          const onHand = tool.householdsWithTool?.includes(user.householdSlug) || false;
+          return { ...tool, onHand } as RecipeToolWithOnHand;
+        });
+      }
+    })
+
     function updateTool(index: number) {
-      if (user.id && toolStore) {
-        toolStore.actions.updateOne(props.recipe.tools[index]);
+      if (user.id && user.householdSlug && toolStore) {
+        const tool = recipeTools.value[index];
+        if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) {
+          if (!tool.householdsWithTool) {
+            tool.householdsWithTool = [user.householdSlug];
+          } else {
+            tool.householdsWithTool.push(user.householdSlug);
+          }
+        } else if (!tool.onHand && tool.householdsWithTool?.includes(user.householdSlug)) {
+          tool.householdsWithTool = tool.householdsWithTool.filter((household) => household !== user.householdSlug);
+        }
+
+        toolStore.actions.updateOne(tool);
       } else {
         console.log("no user, skipping server update");
       }
     }
 
     return {
       toolStore,
+      recipeTools,
       isEditMode,
       updateTool,
     };

diff --git a/frontend/components/global/AppLoader.vue b/frontend/components/global/AppLoader.vue
@@ -8,14 +8,14 @@
           </v-icon>
           <div v-if="large" class="text-small">
             <slot>
-              {{ small ? "" : waitingText }}
+              {{ (small || tiny) ? "" : waitingText }}
             </slot>
           </div>
         </div>
       </v-progress-circular>
       <div v-if="!large" class="text-small">
         <slot>
-          {{ small ? "" : waitingTextCalculated }}
+          {{ (small || tiny) ? "" : waitingTextCalculated }}
         </slot>
       </div>
     </div>
@@ -31,6 +31,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    tiny: {
+      type: Boolean,
+      default: false,
+    },
     small: {
       type: Boolean,
       default: false,
@@ -50,6 +54,13 @@ export default defineComponent({
   },
   setup(props) {
     const size = computed(() => {
+      if (props.tiny) {
+        return {
+          width: 2,
+          icon: 0,
+          size: 25,
+        };
+      }
       if (props.small) {
         return {
           width: 2,

diff --git a/frontend/composables/recipes/use-recipe-tools.ts b/frontend/composables/recipes/use-recipe-tools.ts
@@ -9,7 +9,6 @@ export const useTools = function (eager = true) {
     id: "",
     name: "",
     slug: "",
-    onHand: false,
   });
 
   const api = useUserApi();

diff --git a/frontend/composables/store/use-food-store.ts b/frontend/composables/store/use-food-store.ts
@@ -13,7 +13,6 @@ export const useFoodData = function () {
     name: "",
     description: "",
     labelId: undefined,
-    onHand: false,
   });
 }
 

diff --git a/frontend/composables/store/use-tool-store.ts b/frontend/composables/store/use-tool-store.ts
@@ -3,16 +3,21 @@ import { useData, useReadOnlyStore, useStore } from "../partials/use-store-facto
 import { RecipeTool } from "~/lib/api/types/recipe";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
+interface RecipeToolWithOnHand extends RecipeTool {
+  onHand: boolean;
+}
+
 const store: Ref<RecipeTool[]> = ref([]);
 const loading = ref(false);
 const publicLoading = ref(false);
 
 export const useToolData = function () {
-  return useData<RecipeTool>({
+  return useData<RecipeToolWithOnHand>({
     id: "",
     name: "",
     slug: "",
     onHand: false,
+    householdsWithTool: [],
   });
 }
 

diff --git a/frontend/lib/api/types/admin.ts b/frontend/lib/api/types/admin.ts
@@ -161,7 +161,7 @@ export interface RecipeTool {
   id: string;
   name: string;
   slug: string;
-  onHand?: boolean;
+  householdsWithTool?: string[];
   [k: string]: unknown;
 }
 export interface CustomPageImport {

diff --git a/frontend/lib/api/types/cookbook.ts b/frontend/lib/api/types/cookbook.ts
@@ -97,7 +97,7 @@ export interface RecipeTool {
   id: string;
   name: string;
   slug: string;
-  onHand?: boolean;
+  householdsWithTool?: string[];
   [k: string]: unknown;
 }
 export interface SaveCookBook {

diff --git a/frontend/lib/api/types/household.ts b/frontend/lib/api/types/household.ts
@@ -208,6 +208,27 @@ export interface ReadWebhook {
   householdId: string;
   id: string;
 }
+export interface HouseholdRecipeBase {
+  lastMade?: string | null;
+}
+export interface HouseholdRecipeCreate {
+  lastMade?: string | null;
+  householdId: string;
+  recipeId: string;
+}
+export interface HouseholdRecipeOut {
+  lastMade?: string | null;
+  householdId: string;
+  recipeId: string;
+  id: string;
+}
+export interface HouseholdRecipeSummary {
+  lastMade?: string | null;
+  recipeId: string;
+}
+export interface HouseholdRecipeUpdate {
+  lastMade?: string | null;
+}
 export interface HouseholdSave {
   groupId: string;
   name: string;
@@ -297,7 +318,6 @@ export interface IngredientUnit {
   extras?: {
     [k: string]: unknown;
   } | null;
-  onHand?: boolean;
   fraction?: boolean;
   abbreviation?: string;
   pluralAbbreviation?: string | null;
@@ -318,7 +338,6 @@ export interface CreateIngredientUnit {
   extras?: {
     [k: string]: unknown;
   } | null;
-  onHand?: boolean;
   fraction?: boolean;
   abbreviation?: string;
   pluralAbbreviation?: string | null;
@@ -338,9 +357,9 @@ export interface IngredientFood {
   extras?: {
     [k: string]: unknown;
   } | null;
-  onHand?: boolean;
   labelId?: string | null;
   aliases?: IngredientFoodAlias[];
+  householdsWithIngredientFood?: string[];
   label?: MultiPurposeLabelSummary | null;
   createdAt?: string | null;
   updatedAt?: string | null;
@@ -363,9 +382,9 @@ export interface CreateIngredientFood {
   extras?: {
     [k: string]: unknown;
   } | null;
-  onHand?: boolean;
   labelId?: string | null;
   aliases?: CreateIngredientFoodAlias[];
+  householdsWithIngredientFood?: string[];
   [k: string]: unknown;
 }
 export interface CreateIngredientFoodAlias {
@@ -592,7 +611,7 @@ export interface RecipeTool {
   id: string;
   name: string;
   slug: string;
-  onHand?: boolean;
+  householdsWithTool?: string[];
   [k: string]: unknown;
 }
 export interface ShoppingListRemoveRecipeParams {

diff --git a/frontend/lib/api/types/meal-plan.ts b/frontend/lib/api/types/meal-plan.ts
@@ -117,7 +117,7 @@ export interface RecipeTool {
   id: string;
   name: string;
   slug: string;
-  onHand?: boolean;
+  householdsWithTool?: string[];
   [k: string]: unknown;
 }
 export interface SavePlanEntry {