munch-ease-frontend/src/components/recipes/EditRecipePage.vue

<template>
<div>
    <div v-if="!id && !recipe">
        <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" /> <br />
        <button @click="parseLink">Parse</button>
        <button @click="createFromScratch">Create from Scratch</button>
    </div>

    <div v-if="parse_failed">
        <p>Recipe not found</p>
    </div>

    <div v-if="!parse_failed && recipe">
        <div class="image-container" v-if="image_styling" :style="image_styling" ></div>
        <h1><input class="recipe-name" type="text" v-model="recipe.name" /></h1>
        <h3 class="recipe-link"><a :href="recipe.link">View Recipe</a></h3>
        <h2>Ingredients</h2>
        <ul>
            <li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
                <p class="ingredient-line">
                    <ingredient-line 
                        :ingredient="ingredient"
                        @update-ingredient="updateIngredient"
                        @update-product-link="updateProduct"
                        @delete-item="deleteIngredient" />
                </p>
                <button @click="deleteIngredient(ingredient)">Delete</button>
            </li>
        </ul>

        <button @click="addIngredient">Add Ingredient</button>
        <div>
            <button v-if="recipe.id" class="delete-btn" @click="deleteRecipe">Delete</button>
            <button class="submit-btn" @click="saveRecipe">{{ recipe.id ? "Save" : "Create" }}</button>
        </div>
    </div>
</div>
</template>

<style scoped>
input {
    border: 0;
    border-bottom: 1px solid #ccc;
    font-size: large;
}

input.recipe-link {
    width: 80%;
}

.image-container {
    max-height: 20vh;
    min-height: 20vh;
    display: flex;
    flex-direction: column;
}

input.recipe-name {
    width: 100%;
    font-weight: bold;
    font-size: larger;
}

.recipe-link {
    color: #0000EE;
    text-decoration: none;
}

ul {
    padding: 0;
}

li {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

.ingredient-line {
    flex: 1;
    margin: 0;
    margin-right: 1em;
}

</style>

<script>

import data from '@/data.js'
import IngredientLine from '@/components/ingredients/IngredientLine.vue'

export default {
    props: {
        id: { type: Number, optional: true }
    },
    components: {
        IngredientLine
    },
    data() {
        return {
            link: this.$route.query.url ?? "",
            parse_failed: false,
            recipe: null,
            chefs: [],
        }
    },
    mounted() {
        this.refreshRecipe();
    },
    computed: {
        image_styling() {
            if (this.recipe?.image_urls && this.recipe.image_urls[0]) {
                const image = this.recipe.image_urls[0];
                    //  linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), url('https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2019/04/steamed-broccoli-4.jpg') center/cover no-repeat;
                return {background: `linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), url('${image}') center/cover no-repeat` }
            }
            return null;
        }
    },
    methods: {
        parseLink() {
            this.$router.push({ path: '/recipes/add', query: { url: this.link }})
            this.refreshRecipe();
        },
        async refreshRecipe() {
            if (this.id) {
                this.recipe = await data.getRecipe(this.id);
                this.link = this.recipe.link;
                return;
            }
            else if (this.link) {
                this.recipe = await data.parseRecipe(this.link);
                this.parse_failed = !this.recipe;
            }
            else {
                this.recipe = null;
            }
        },
        async updateProduct(ingredient, product_link) {
            const product = await data.parseProduct(ingredient, product_link);
            this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product, product_id: product.id } : i);
        },
        async updateIngredient(ingredient, line) {
            const newIngredients = await data.parseIngredients([line]);
            const newIngredient = newIngredients[0];
            if (!newIngredient?.product) {
                newIngredient.product = ingredient.product;
            }

            this.recipe.ingredients = this.recipe.ingredients.map(i => i == ingredient ? newIngredient : i);
        },
        deleteIngredient(ingredient) {
            this.recipe.ingredients = this.recipe.ingredients.filter(i => i != ingredient);
        },
        async saveRecipe() {
            const recipe = await data.saveRecipe(this.recipe);
            if (recipe?.id) {
                this.$router.push(`/recipes/${recipe.id}`);
                return;
            }

            alert('Failed to save recipe');
        },
        async createFromScratch() {
            this.recipe = {
                id: 0,
                name: 'My new recipe',
                link: '',
                ingredients: [],
                image_urls: []
            }
        },
        addIngredient() {
            this.recipe.ingredients.push({ line: '', product: null });
        },
        async deleteRecipe() {
            if (confirm('Are you sure you want to delete this recipe?')) {
                await data.deleteRecipe(this.recipe.id);
                this.$router.push('/recipes');
            }
        }
    },
}
</script>