feat: Add the ability to flag a food as "on hand", to exclude from shopping list (#3777)

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -231,7 +231,7 @@ export default defineComponent({
 
         const shoppingListIngredients: ShoppingListIngredient[] = recipe.recipeIngredient.map((ing) => {
           return {
-            checked: true,
+            checked: !ing.food?.onHand,
             ingredient: ing,
             disableAmount: recipe.settings?.disableAmount || false,
           }

frontend/composables/store/use-food-store.ts

@@ -19,6 +19,7 @@ export const useFoodData = function () {
     name: "",
     description: "",
     labelId: undefined,
+    onHand: false,
   });
 
   function reset() {
@@ -26,6 +27,7 @@ export const useFoodData = function () {
     data.name = "";
     data.description = "";
     data.labelId = undefined;
+    data.onHand = false;
   }
 
   return {

frontend/lang/messages/en-US.json

@@ -988,7 +988,8 @@
       "food-data": "Food Data",
       "example-food-singular": "ex: Onion",
       "example-food-plural": "ex: Onions",
-      "label-overwrite-warning": "This will assign the chosen label to all selected foods and potentially overwrite your existing labels."
+      "label-overwrite-warning": "This will assign the chosen label to all selected foods and potentially overwrite your existing labels.",
+      "on-hand-checkbox-label": "Setting this flag will make this food unchecked by default when adding a recipe to a shopping list."
     },
     "units": {
       "seed-dialog-text": "Seed the database with common units based on your local language.",

frontend/lib/api/types/recipe.ts

@@ -63,6 +63,7 @@ export interface CreateIngredientFood {
   };
   labelId?: string;
   aliases?: CreateIngredientFoodAlias[];
+  onHand?: boolean;
 }
 export interface CreateIngredientFoodAlias {
   name: string;
@@ -135,6 +136,7 @@ export interface IngredientFood {
   label?: MultiPurposeLabelSummary;
   createdAt?: string;
   updateAt?: string;
+  onHand?: boolean;
 }
 export interface IngredientFoodAlias {
   name: string;
@@ -464,7 +466,7 @@ export interface ScrapeRecipe {
 export interface ScrapeRecipeTest {
   url: string;
 }
-export interface SlugResponse {}
+export interface SlugResponse { }
 export interface TagIn {
   name: string;
 }

frontend/pages/group/data/foods.vue

@@ -87,6 +87,14 @@
             :label="$t('data-pages.foods.food-label')"
           >
           </v-autocomplete>
+          <v-checkbox
+            v-model="createTarget.onHand"
+            hide-details
+            :label="$t('tool.on-hand')"
+          />
+          <p class="text-caption mt-1">
+            {{ $t("data-pages.foods.on-hand-checkbox-label") }}
+          </p>
         </v-form> </v-card-text
     ></BaseDialog>
 
@@ -134,6 +142,14 @@
             :label="$t('data-pages.foods.food-label')"
           >
           </v-autocomplete>
+          <v-checkbox
+            v-model="editTarget.onHand"
+            hide-details
+            :label="$t('tool.on-hand')"
+          />
+          <p class="text-caption mt-1">
+            {{ $t("data-pages.foods.on-hand-checkbox-label") }}
+          </p>
         </v-form>
       </v-card-text>
       <template #custom-card-action>
@@ -243,6 +259,11 @@
           {{ item.label.name }}
         </MultiPurposeLabel>
       </template>
+      <template #item.onHand="{ item }">
+        <v-icon :color="item.onHand ? 'success' : undefined">
+          {{ item.onHand ? $globals.icons.check : $globals.icons.close }}
+        </v-icon>
+      </template>
       <template #button-bottom>
         <BaseButton @click="seedDialog = true">
           <template #icon> {{ $globals.icons.database }} </template>
@@ -300,6 +321,11 @@ export default defineComponent({
         value: "label",
         show: true,
       },
+      {
+        text: i18n.tc("tool.on-hand"),
+        value: "onHand",
+        show: true,
+      },
     ];
 
     const foodStore = useFoodStore();