Ajustes na listagem de produtos
Com todas as etapas já desenvolvidas, precisamos agora adicionar um botão na tela de listagem de produtos para que o usuário possa adicionar um novo produto. Para isso, vamos adicionar um botão no cabeçalho da página de listagem de produtos.
Inicialmente, vamos editar o arquivo src/components/ProductList.vue
e adicionar o botão de adicionar produto. Subtitua o código para o seguinte conteúdo:
<script setup>
import { onMounted, watch } from 'vue';
import { useProductStore } from '@/stores/product';
import HeartOutline from 'vue-material-design-icons/HeartOutline.vue';
import Star from 'vue-material-design-icons/Star.vue';
import { formatDescription, formatPrice, formatTitle } from '@/helpers/format';
const props = defineProps(['category_id']);
const productStore = useProductStore();
async function getProducts() {
if (props.category_id) {
await productStore.getProductsByCategory(props.category_id);
} else {
await productStore.getProducts();
}
}
watch(
() => props.category_id,
async () => {
await getProducts();
},
);
onMounted(async () => {
await getProducts();
});
</script>
<template>
<div class="product-list">
<router-link :to="{ name: 'ProductAdd' }">
<button class="icon ">
<i class="mdi mdi-plus" />
</button>
</router-link>
<div v-if="productStore.products.length === 0">
<p>Produtos não encontrados!!!</p>
</div>
<div
v-for="product in productStore.products"
:key="product.id"
class="product-card"
>
<div class="product-img-wrapper">
<img :src="product.image?.url" alt="product.name" />
<heart-outline />
</div>
<div class="product-title-price">
<p></p>
<p></p>
</div>
<div class="product-description-stars">
<p></p>
<div class="stars">
<star size="20" />
<star size="20" />
<star size="20" />
<star size="20" />
<star size="20" />
</div>
</div>
</div>
</div>
</template>
<style scoped>
.icon {
background-color: #0a2668;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
position: fixed;
bottom: 12rem;
right: 20px;
}
.icon:hover {
background-color: #bac9e8;
color: #0a2668;
}
.icon i {
font-size: 2rem;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1rem;
}
.product-card {
width: 225px;
font-family: 'Belleza', sans-serif;
}
.product-img-wrapper {
display: flex;
justify-content: center;
align-items: top;
gap: 0.5rem;
padding-top: 20px;
margin-bottom: 1rem;
background-color: #eeeeee;
height: 201px;
}
.product-img-wrapper img {
width: 153px;
height: 170px;
object-fit: cover;
}
.product-title-price {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.product-title-price p {
font-weight: bold;
font-size: 16px;
color: #010101;
}
.product-description-stars {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.product-description-stars p {
font-size: 12px;
color: #535050;
}
</style>
Note que fizemos poucas alterações. Apenas adicionamos um RouterLink
para a rota de adicionar produtos e um botão com o ícone de adição. Além disso, ajustamos o estilo do botão e do ícone, para que fiquem posicionados no canto inferior direito da tela.
Ajustes na rota
Para finalizar, precisamos adicionar a rota para a tela de adição de produtos. Para isso, edite o arquivo src/router/index.js
e adicione a rota para a tela de adição de produtos. Substitua o código para o seguinte conteúdo:
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import LayoutLarge from '@/layouts/LayoutLarge.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: '',
component: LayoutLarge,
children: [
{
path: '',
name: 'Home',
component: HomeView,
},
{
path: '/produtos/adicionar',
name: 'ProductAdd',
component: () => import('@/views/ProductAdd.vue'),
},
{
path: '/produtos/categoria/:category_id',
name: 'Category',
component: () => import('@/views/CategoryView.vue'),
props: true,
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/LoginView.vue'),
},
],
},
],
});
export default router;
Note que apenas adicionamos a rota com nome ProductAdd
. Agora, ao clicar no botão de adicionar produto, o usuário será redirecionado para a tela de adição de produtos.