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

<template>
  <div>
    <div v-if="!id && !recipe">
      <input
        v-model="link"
        class="recipe-link"
        type="text"
        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
        v-if="image_styling"
        class="image-container"
        :style="image_styling"
      />
      <h1>
        <input
          v-model="recipe.name"
          class="recipe-name"
          type="text"
        >
      </h1>
      <label for="recipe-serves">Number of serves: </label>
      <input
        v-model="recipe.serves"
        type="number"
      >
      <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>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAlert } from '@/composables/useAlert'
import { getRecipe, parseRecipe, saveRecipe as saveRecipeApi, deleteRecipe as deleteRecipeApi } from '@/api/recipes'
import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'

const props = defineProps({
  id: { type: Number, required: false },
})

const router = useRouter()
const route = useRoute()
const { show: showAlert } = useAlert()

const link = ref(route.query.url ?? '')
const parse_failed = ref(false)
const recipe = ref(null)

const image_styling = computed(() => {
  if (recipe.value?.image_urls && recipe.value.image_urls[0]) {
    const image = recipe.value.image_urls[0]
    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
})

function parseLink() {
  router.push({ path: '/recipes/add', query: { url: link.value } })
  refreshRecipe()
}

async function refreshRecipe() {
  if (props.id >= 0) {
    recipe.value = await getRecipe(props.id)
    link.value = recipe.value.link
    return
  } else if (link.value) {
    recipe.value = await parseRecipe(link.value)
    parse_failed.value = !recipe.value
  } else {
    recipe.value = null
  }
}

async function updateIngredient(ingredient, newIngredient) {
  recipe.value.ingredients = recipe.value.ingredients.map((i) =>
    i == ingredient ? newIngredient : i
  )
}

function deleteIngredient(ingredient) {
  recipe.value.ingredients = recipe.value.ingredients.filter((i) => i != ingredient)
}

async function saveRecipe() {
  const saved = await saveRecipeApi(recipe.value)
  if (saved?.id >= 0) {
    showAlert({ heading: 'Recipe saved', message: 'Your recipe has been saved', type: 'success' })
    router.push(`/recipes/${saved.id}`)
    return
  }
  showAlert({ heading: 'Error saving recipe', message: 'There was an error saving your recipe', type: 'error' })
}

function createFromScratch() {
  recipe.value = {
    id: -1,
    name: 'My new recipe',
    created_by_id: -1,
    link: '',
    ingredients: [],
    image_urls: [],
  }
}

function addIngredient() {
  recipe.value.ingredients = [{ line: '', product: null }, ...recipe.value.ingredients]
}

async function deleteRecipe() {
  if (confirm('Are you sure you want to delete this recipe?')) {
    await deleteRecipeApi(recipe.value.id)
    router.push('/recipes')
  }
}

onMounted(() => {
  refreshRecipe()
})

// Keep recipe in sync if link query changes while on page
watch(
  () => route.query.url,
  (newUrl) => {
    if (typeof newUrl === 'string') {
      link.value = newUrl
      refreshRecipe()
    }
  }
)

// expose functions for template binding names (automatic in <script setup>)
</script>

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