You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
6.5 KiB
203 lines
6.5 KiB
import Search from 'antd/es/input/Search'
|
|
import styles from './produto.module.css';
|
|
import { Button, Popconfirm, Select, Space, Table } from 'antd'
|
|
import Column from 'antd/es/table/Column'
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { ParamsType } from '../../interfaces/ParamsType';
|
|
import { useEffect, useState } from 'react';
|
|
import { Produto } from '../../interfaces/Produto';
|
|
import {
|
|
DeleteOutlined,
|
|
EditOutlined,
|
|
ShoppingCartOutlined
|
|
} from '@ant-design/icons';
|
|
import {
|
|
getAllProdutos,
|
|
getAllCategoria,
|
|
deleteProduto
|
|
} from '../../slices/ProdutoSlice';
|
|
import {
|
|
addItem
|
|
} from '../../slices/CarrinhoSlice';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { ItemCart } from '../../interfaces/ItemCart';
|
|
|
|
function Produtos() {
|
|
|
|
const [nomeSearch, setNomeSearch] = useState('');
|
|
const [categoriaFilter, setCategoriaFilter] = useState('');
|
|
|
|
const dispatch = useDispatch<any>();
|
|
const navigate = useNavigate();
|
|
const { produtos, total, loading, categorias } = useSelector((state: any) => state.produto);
|
|
|
|
const handleSearch = () => {
|
|
const params: ParamsType = {
|
|
pagination: {
|
|
current: 1,
|
|
pageSize: 5
|
|
},
|
|
filter: {
|
|
nome: nomeSearch,
|
|
categoria: categoriaFilter
|
|
}
|
|
}
|
|
dispatch(getAllProdutos(params));
|
|
}
|
|
|
|
const handleDelete = (uid: string) => {
|
|
dispatch(deleteProduto(uid));
|
|
}
|
|
|
|
const onChangePage = (page: any, size: any) => {
|
|
|
|
const params: ParamsType = {
|
|
pagination: {
|
|
current: page,
|
|
pageSize: size
|
|
},
|
|
filter: {
|
|
nome: nomeSearch != '' ? nomeSearch : '',
|
|
categoria: categoriaFilter
|
|
}
|
|
}
|
|
|
|
dispatch(getAllProdutos(params));
|
|
}
|
|
|
|
const filterByCategoria = (categoriaUid: string) => {
|
|
setCategoriaFilter(categoriaUid);
|
|
|
|
const params: ParamsType = {
|
|
pagination: {
|
|
current: 1,
|
|
pageSize: 5
|
|
},
|
|
filter: {
|
|
nome: nomeSearch != '' ? nomeSearch : '',
|
|
categoria: categoriaUid
|
|
}
|
|
}
|
|
|
|
dispatch(getAllProdutos(params))
|
|
}
|
|
|
|
const addItemCart = (produto: any) => {
|
|
|
|
const item:ItemCart = {
|
|
|
|
produto:{
|
|
uid:produto.key,
|
|
nome:produto.name,
|
|
preco:produto.preco,
|
|
categoria:{
|
|
uid:""
|
|
}
|
|
},
|
|
quantidade:1
|
|
}
|
|
dispatch(addItem(item));
|
|
}
|
|
|
|
useEffect(() => {
|
|
dispatch(getAllProdutos(
|
|
{ pagination: { current: 1, pageSize: 5 } }
|
|
))
|
|
dispatch(getAllCategoria());
|
|
}, [])
|
|
|
|
return (
|
|
|
|
<div className={styles.container_table}>
|
|
<div className={styles.container_table__filter}>
|
|
<Select
|
|
style={{ width: 120 }}
|
|
defaultValue=''
|
|
options={
|
|
categorias.map((categoria: any) => (
|
|
{ value: categoria.uid, label: categoria.nome }
|
|
)).concat({ value: '', label: 'Todos' })
|
|
}
|
|
onChange={filterByCategoria}
|
|
/>
|
|
<Search
|
|
placeholder="Buscar por nome..."
|
|
enterButton
|
|
className={styles.container_table__search}
|
|
onSearch={handleSearch}
|
|
onChange={(value) => setNomeSearch(value.target.value)}
|
|
/>
|
|
</div>
|
|
<Table
|
|
dataSource={
|
|
produtos.map((produto: Produto) => (
|
|
{ key: produto.uid, name: produto.nome, preco: produto.preco, categoria: produto.categoria.nome }
|
|
))
|
|
}
|
|
pagination={{
|
|
position: ["bottomCenter"],
|
|
total: total,
|
|
defaultPageSize: 5,
|
|
onChange(page, pageSize) {
|
|
onChangePage(page, pageSize)
|
|
},
|
|
pageSizeOptions: [5, 10, 15],
|
|
showSizeChanger: true,
|
|
onShowSizeChange(current, size) {
|
|
onChangePage(current, size)
|
|
},
|
|
}}
|
|
loading={loading}
|
|
bordered={true}
|
|
>
|
|
<Column title="Nome" dataIndex="name" key="name" />
|
|
<Column title="Preço" dataIndex="preco" key="preco" />
|
|
<Column title="Categoria" dataIndex="categoria" key="categoria" />
|
|
|
|
<Column
|
|
title="Actions"
|
|
key="action"
|
|
render={(_: any, record: any) => (
|
|
<Space size="middle">
|
|
|
|
<Popconfirm
|
|
title="Atenção:"
|
|
description="Confirme a ação de delete!"
|
|
onConfirm={() => { handleDelete(record.key) }}
|
|
okText="Sim"
|
|
cancelText="Não"
|
|
>
|
|
<Button value="small"
|
|
type="primary"
|
|
danger icon={<DeleteOutlined />}
|
|
size="large"
|
|
title="Deletar"
|
|
/>
|
|
</Popconfirm>
|
|
|
|
<Button
|
|
value="small"
|
|
type="primary"
|
|
icon={<EditOutlined />} size="large"
|
|
title="Atualizar"
|
|
onClick={() => { navigate(`/cliente/new`) }}
|
|
/>
|
|
|
|
|
|
<Button
|
|
value="small"
|
|
type="primary"
|
|
icon={<ShoppingCartOutlined />} size="large"
|
|
title="AddCart"
|
|
onClick={() => { addItemCart(record) }}
|
|
/>
|
|
</Space>
|
|
)}
|
|
/>
|
|
|
|
</Table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Produtos;
|