Skip to content

Alba María Álvarez / front_recipes

Go to a project
Commit 22f445df by Alba María Álvarez
Options

feat(CreateRecipe): creada la vista para crear recetas

parent 76dbfa66
Inline Side-by-side
Showing with 166 additions and 0 deletions
src/views/CreateRecipe.vue 0 → 100644
<template>
<Header></Header>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<div class="recipe-form-card p-4 rounded shadow-sm">
<h2 class="text-center mb-4 text-primary-custom fw-bold">Nueva Receta</h2>
<div class="mb-4">
<label for="inputName" class="form-label fw-bold">Nombre de la receta</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="mb-4">
<label for="inputDescription" class="form-label fw-bold">Descripción de la receta</label>
<textarea class="form-control" id="inputDescription" rows="5"></textarea>
</div>
<div class="mb-4">
<label for="formFile" class="form-label fw-bold">Imagen de la receta</label>
<input class="form-control" type="file" id="formFile" accept=".jpg, .jpeg, .png, .gif">
</div>
<div class="mt-5 mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label fw-bold">Ingredientes</label>
<button @click="addIngredient" class="btn btn-outline btn-sm">
<i class="bi bi-plus"></i> Añadir
</button>
</div>
<div class="ingredient-table-container p-4 border rounded">
<div class="row header-row fw-bold mb-2 text-center">
<div class="col-3">Cantidad</div>
<div class="col-3">Unidad</div>
<div class="col-4">Ingrediente</div>
<div class="col-2"></div>
</div>
<div v-for="ingredient in ingredients" :key="ingredient.id" class="row align-items-center mb-2">
<div class="col-3">
<input type="number" class="form-control" v-model="ingredient.quantity" placeholder="Ej: 2">
</div>
<div class="col-3">
<input type="text" class="form-control" v-model="ingredient.unit" placeholder="Ej: tazas">
</div>
<div class="col-4">
<input type="text" class="form-control" v-model="ingredient.ingredient" placeholder="Ej: harina de trigo">
</div>
<div class="col-2 d-flex justify-content-center">
<button @click="removeIngredient(ingredient.id)" class="btn btn-outline-danger btn-sm">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
</div>
</div>
<div class="mt-5 mb-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label fw-bold">Pasos de preparación</label>
<button @click="addStep" class="btn btn-outline btn-sm">
<i class="bi bi-plus"></i> Añadir
</button>
</div>
<div class="steps-table-container p-4 border rounded">
<div class="row header-row fw-bold mb-2 text-center">
<div class="col-1">#</div>
<div class="col-9">Descripción</div>
<div class="col-2"></div>
</div>
<div v-for="(step, index) in steps" :key="index" class="row align-items-center mb-2">
<div class="col-1 text-center">
<span>{{ index + 1 }}</span>
</div>
<div class="col-9">
<textarea class="form-control" v-model="step.description" rows="1"></textarea>
</div>
<div class="col-2 d-flex justify-content-center">
<button @click="removeStep(step.number)" class="btn btn-outline-danger btn-sm">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end mt-4">
<button type="submit" class="btn btn-primary-custom px-4">Crear Receta</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Header from '@/components/Header.vue';
const ingredients = ref([
{ id: 1, quantity: '', unit: '', ingredient: '' }
]);
const nextId = ref(2);
const addIngredient = () => {
ingredients.value.push({
id: nextId.value++,
quantity: '',
unit: '',
ingredient: ''
});
};
const removeIngredient = (id) => {
ingredients.value = ingredients.value.filter(item => item.id !== id);
};
const steps = ref([
{ description: '' }
]);
const addStep = () => {
steps.value.push({
description: ''
});
};
const removeStep = (index) => {
steps.value.splice(index, 1);
};
</script>
<style scoped>
.recipe-form-card {
background-color: #fff;
border: 1px solid #793E6C;
}
.form-control:focus {
border-color: #793E6C;
box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25);
}
.text-primary-custom {
color: #2C0C21;
}
.btn-primary-custom {
background-color: #793E6C;
border-color: #793E6C;
color: white;
}
.btn-primary-custom:hover {
background-color: #5e3054;
border-color: #5e3054;
color: white;
}
.btn-outline {
color: #793E6C;
border-color: #793E6C;
}
.btn-outline:hover {
background-color: #793E6C;
color: white;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment