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

<template>
<div>
    <div v-if="!id && !recipe">
        <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
        <button @click="parseLink">Parse</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" :value="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 class="submit-btn" @click="saveRecipe">Save</button>
    </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-right: 1em;
}

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

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

</style>

<script>

import data from '@/data.js'
import IngredientLine from './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();
        },
        refreshRecipe() {
            if (this.id) {
                data.getRecipe(this.id).then((response) => {
                    this.recipe = response;
                    this.link = response.link;
                });
                return;
            }
            else if (this.link) {
                data.parseRecipe(this.link).then((response) => {
                    if (!response)
                    {
                        this.parse_failed = true;
                        return;
                    }
    
                    this.parse_failed = false;
                    this.recipe = response;
                });
            }
            else {
                this.recipe = null;
            }
        },
        updateProduct(ingredient, product_link) {
            data.parseProduct(ingredient, product_link).then(product => {
                ingredient.product = product
            });
        },
        updateIngredient(ingredient, line) {
            data.parseIngredients([line]).then(function(newIngredients) {
                const newIngredient = newIngredients[0];
                ingredient.line = line;
                ingredient.name = newIngredient.name;
                ingredient.quantity = newIngredient.quantity;
                ingredient.unit = newIngredient.unit;
                ingredient.preparation = newIngredient.preparation;
                if (newIngredient.product) {
                    ingredient.product = newIngredient.product;
                }
            });
        },
        deleteIngredient(ingredient) {
            this.recipe.ingredients = this.recipe.ingredients.filter(i => i != ingredient);
        },
        saveRecipe() {
            data.saveRecipe(this.recipe).then((response) => {
                this.$router.push(`/recipes/${response.id}`)
            });
        }
    },
}
</script>