feat(RecipesFavorites): creada vista para leer recetas favoritas con paginación

parent e814aeda
Showing with 76 additions and 0 deletions
<template>
<section class="bg-custom py-5 flex-grow-1">
<div class="container px-4 px-lg-5 mt-1">
<h2 class="fw-bolder mb-2 text-primary-custom text-center">Mis recetas favoritas</h2>
<p class="text-muted text-center">¡Vuelve a disfrutar de tus platos preferidos!</p>
<hr class="mb-4">
<div v-if="recipeStore.recipes.length" class="row g-4 d-flex justify-content-center">
<div v-for="recipe in recipeStore.recipes" :key="recipe.id" class="col-md-7 col-lg-6 d-flex">
<RecipeCard :recipe="recipe" />
</div>
</div>
<div v-else class="text-center text-muted">
No has guardado ninguna receta como favorita.
</div>
<div class="d-flex justify-content-center mt-5">
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm mb-0 pagination-custom">
<li class="page-item" :class="{ disabled: recipeStore.currentPage === 0 }">
<button class="page-link" @click="goToPage(recipeStore.currentPage - 1)">Anterior</button>
</li>
<li class="page-item" v-for="page in recipeStore.totalPages" :key="page" :class="{ active: page - 1 === recipeStore.currentPage }">
<button class="page-link" @click="goToPage(page - 1)">{{ page }}</button>
</li>
<li class="page-item" :class="{ disabled: recipeStore.currentPage === recipeStore.totalPages - 1 }">
<button class="page-link" @click="goToPage(recipeStore.currentPage + 1)">Siguiente</button>
</li>
</ul>
</nav>
</div>
</div>
</section>
</template>
<script setup>
import RecipeCard from '@/components/RecipeCard.vue';
import { useRecipeStore } from '@/stores/recipeStore';
import { onMounted } from 'vue';
const recipeStore = useRecipeStore();
onMounted(() => {
recipeStore.readFavorites(0, recipeStore.pageSize);
});
const goToPage = (page) => {
recipeStore.readFavorites(page, recipeStore.pageSize);
};
</script>
<style scoped>
.text-primary-custom {
color: #2C0C21;
}
/* Estilos para la paginación */
.pagination-custom .page-item .page-link {
border-radius: 5px;
margin: 0 2px;
border-color: #ccc;
color: #333;
font-weight: bold;
}
.pagination-custom .page-item.active .page-link {
background-color: #793E6C;
border-color: #793E6C;
color: white;
}
.pagination-custom .page-item.disabled .page-link {
color: #bbb;
}
</style>
\ No newline at end of file
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