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>
      <label for="recipe-serves">Number of serves: </label>
      <input type="number" v-model="recipe.serves" />
      <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 alert from '@/alert.js'
import { getRecipe, parseRecipe, saveRecipe, deleteRecipe as deleteRecipeApi } from '@/api/recipes'
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 >= 0) {
        this.recipe = await getRecipe(this.id)
        this.link = this.recipe.link
        return
      } else if (this.link) {
        this.recipe = await 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 saveRecipe(this.recipe)
      if (recipe?.id >= 0) {
        alert.show({
          heading: 'Recipe saved',
          message: 'Your recipe has been saved',
          type: 'success',
        })
        this.$router.push(`/recipes/${recipe.id}`)
        return
      }

      alert.show({
        heading: 'Error saving recipe',
        message: 'There was an error saving your recipe',
        type: 'error',
      })
    },
    async createFromScratch() {
      this.recipe = {
        id: -1,
        name: 'My new recipe',
        created_by_id: -1,
        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 deleteRecipeApi(this.recipe.id)
        this.$router.push('/recipes')
      }
    },
  },
}
</script>