Recipe Ingredients and Tools

This commit is contained in:
Kuchenpirat 2025-07-30 09:07:42 +00:00
commit 28c4b41570

View file

@ -36,7 +36,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state"; import { useLoggedInState } from "~/composables/use-logged-in-state";
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import { useToolStore } from "~/composables/store"; import { useToolStore } from "~/composables/store";
@ -48,71 +48,52 @@ interface RecipeToolWithOnHand extends RecipeTool {
onHand: boolean; onHand: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { recipe: NoUndefinedField<Recipe>;
RecipeIngredients, scale: number;
}, isCookMode?: boolean;
props: { }
recipe: { const props = withDefaults(defineProps<Props>(), {
type: Object as () => NoUndefinedField<Recipe>, isCookMode: false,
required: true, });
},
scale: {
type: Number,
required: true,
},
isCookMode: {
type: Boolean,
default: false,
},
},
setup(props) {
const { isOwnGroup } = useLoggedInState();
const toolStore = isOwnGroup.value ? useToolStore() : null; const { isOwnGroup } = useLoggedInState();
const { user } = usePageUser();
const { isEditMode } = usePageState(props.recipe.slug);
const recipeTools = computed(() => { const toolStore = isOwnGroup.value ? useToolStore() : null;
if (!(user.householdSlug && toolStore)) { const { user } = usePageUser();
return props.recipe.tools.map(tool => ({ ...tool, onHand: false }) as RecipeToolWithOnHand); const { isEditMode } = usePageState(props.recipe.slug);
}
else { const recipeTools = computed(() => {
return props.recipe.tools.map((tool) => { if (!(user.householdSlug && toolStore)) {
const onHand = tool.householdsWithTool?.includes(user.householdSlug) || false; return props.recipe.tools.map(tool => ({ ...tool, onHand: false }) as RecipeToolWithOnHand);
return { ...tool, onHand } 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) { function updateTool(index: number) {
if (user.id && user.householdSlug && toolStore) { if (user.id && user.householdSlug && toolStore) {
const tool = recipeTools.value[index]; const tool = recipeTools.value[index];
if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) { if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) {
if (!tool.householdsWithTool) { if (!tool.householdsWithTool) {
tool.householdsWithTool = [user.householdSlug]; 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 { else {
console.log("no user, skipping server update"); tool.householdsWithTool.push(user.householdSlug);
} }
} }
else if (!tool.onHand && tool.householdsWithTool?.includes(user.householdSlug)) {
tool.householdsWithTool = tool.householdsWithTool.filter(household => household !== user.householdSlug);
}
return { toolStore.actions.updateOne(tool);
toolStore, }
recipeTools, else {
isEditMode, console.log("no user, skipping server update");
updateTool, }
}; }
},
});
</script> </script>