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>
        <editable-ingredients-panel 
            :ingredients="recipe.ingredients" 
            :edit-only="true"
            @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" 
            />

        <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;
}

</style>

<script>

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

export default {
    props: {
        id: { type: Number, optional: true }
    },
    components: { EditableIngredientsPanel },
    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 updateIngredient(ingredient, newIngredient) {
            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 = [{ line: '', product: null }, ...this.recipe.ingredients];
        },
        async deleteRecipe() {
            if (confirm('Are you sure you want to delete this recipe?')) {
                await data.deleteRecipe(this.recipe.id);
                this.$router.push('/recipes');
            }
        }
    },
}
</script>