diff --git a/first-app/package-lock.json b/first-app/package-lock.json index d54636a..0938ca3 100644 --- a/first-app/package-lock.json +++ b/first-app/package-lock.json @@ -12,6 +12,7 @@ "antd": "^5.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-highlight-words": "^0.20.0", "react-redux": "^8.1.1", "react-router-dom": "^6.13.0", "react-toastify": "^9.1.3" @@ -19,6 +20,7 @@ "devDependencies": { "@types/react": "^18.0.37", "@types/react-dom": "^18.0.11", + "@types/react-highlight-words": "^0.16.4", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", "@vitejs/plugin-react": "^4.0.0", @@ -1211,6 +1213,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-highlight-words": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/@types/react-highlight-words/-/react-highlight-words-0.16.4.tgz", + "integrity": "sha512-KITBX3xzheQLu2s3bUgLmRE7ekmhc52zRjRTwkKayQARh30L4fjEGzGm7ULK9TuX2LgxWWavZqyQGDGjAHbL3w==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -2398,6 +2409,11 @@ "node": ">=4" } }, + "node_modules/highlight-words-core": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz", + "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -2625,6 +2641,11 @@ "yallist": "^3.0.2" } }, + "node_modules/memoize-one": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", + "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==" + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -2701,6 +2722,14 @@ "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==", "dev": true }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -2860,6 +2889,16 @@ "node": ">= 0.8.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -3504,6 +3543,19 @@ "react": "^18.2.0" } }, + "node_modules/react-highlight-words": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/react-highlight-words/-/react-highlight-words-0.20.0.tgz", + "integrity": "sha512-asCxy+jCehDVhusNmCBoxDf2mm1AJ//D+EzDx1m5K7EqsMBIHdZ5G4LdwbSEXqZq1Ros0G0UySWmAtntSph7XA==", + "dependencies": { + "highlight-words-core": "^1.2.0", + "memoize-one": "^4.0.0", + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/first-app/package.json b/first-app/package.json index d815ce5..6423062 100644 --- a/first-app/package.json +++ b/first-app/package.json @@ -14,6 +14,7 @@ "antd": "^5.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-highlight-words": "^0.20.0", "react-redux": "^8.1.1", "react-router-dom": "^6.13.0", "react-toastify": "^9.1.3" @@ -21,6 +22,7 @@ "devDependencies": { "@types/react": "^18.0.37", "@types/react-dom": "^18.0.11", + "@types/react-highlight-words": "^0.16.4", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", "@vitejs/plugin-react": "^4.0.0", diff --git a/first-app/src/Routes.tsx b/first-app/src/Routes.tsx index 2205db5..afb57d4 100644 --- a/first-app/src/Routes.tsx +++ b/first-app/src/Routes.tsx @@ -4,6 +4,7 @@ import Clientes from "./pages/Cliente/Clientes"; import NewProduto from "./pages/Produto/NewProduto"; import Produtos from "./pages/Produto/Produtos"; import NewEncomenda from "./pages/Encomenda/NewEncomenda"; +import Encomendas from "./pages/Encomenda/Encomendas"; export const Routes = [ @@ -32,6 +33,10 @@ export const Routes = [ { path: "/encomenda/new", element: + }, + { + path:"/encomenda/list", + element: } ] } diff --git a/first-app/src/components/sideBar.tsx b/first-app/src/components/sideBar.tsx index a6ceeda..e0a0cb6 100644 --- a/first-app/src/components/sideBar.tsx +++ b/first-app/src/components/sideBar.tsx @@ -41,7 +41,7 @@ function SideBar () { ]), getItem('Encomendas', 'sub3', , [ getItem((Carrinho), '8'), - getItem('Bill', '9'), + getItem((Todas), '9'), getItem('Alex', '10'), ]), diff --git a/first-app/src/environments.ts b/first-app/src/environments.ts index 1c74aef..9b043a7 100644 --- a/first-app/src/environments.ts +++ b/first-app/src/environments.ts @@ -1,3 +1,3 @@ export const Environments = { - URLApi: "http://jailton.bootcamp.dev.netuno.org:20190/services/netunovendas" + URLApi: "https://jailton.bootcamp.dev.netuno.org:20193/services/netunovendas" } \ No newline at end of file diff --git a/first-app/src/interfaces/Encomenda.ts b/first-app/src/interfaces/Encomenda.ts new file mode 100644 index 0000000..39176fd --- /dev/null +++ b/first-app/src/interfaces/Encomenda.ts @@ -0,0 +1,5 @@ +export interface Encomenda { + cliente:string, + itens:[], + valor:number +} \ No newline at end of file diff --git a/first-app/src/pages/Encomenda/Encomendas.tsx b/first-app/src/pages/Encomenda/Encomendas.tsx new file mode 100644 index 0000000..debd7de --- /dev/null +++ b/first-app/src/pages/Encomenda/Encomendas.tsx @@ -0,0 +1,246 @@ +import styles from './encomenda.module.css'; +import { Button, Input, InputRef, Select, Space, Table } from 'antd'; +import Column from 'antd/es/table/Column'; +import { SearchOutlined } from '@ant-design/icons'; +import { useEffect, useRef, useState } from 'react'; +import { ColumnType } from 'antd/es/table'; +import Highlighter from 'react-highlight-words'; +import { useDispatch, useSelector } from 'react-redux'; +import { + getAllEncomenda +} from '../../slices/EncomendaSlice'; + +function Encomendas() { + + const dispatch = useDispatch(); + const { encomendas, loading } = useSelector((state: any) => state.encomenda); + + const [searchText, setSearchText] = useState(''); + const [estadoFilter, setEstadoFilter] = useState(''); + const [clienteFilter, setClienteFilter] = useState(''); + const [dataFilter, setDataFilter] = useState(''); + + const [searchedColumn, setSearchedColumn] = useState(''); + const searchInput = useRef(null); + + const handleSearch = ( + selectedKeys: string[], + + dataIndex: any, + ) => { + setSearchText(selectedKeys[0]); + setSearchedColumn(dataIndex); + + if (dataIndex == 'data') { + setDataFilter(selectedKeys[0]) + console.log(selectedKeys[0]) + } else if (dataIndex == 'cliente') { + setClienteFilter(selectedKeys[0]) + console.log(selectedKeys[0]) + } else if (dataIndex == 'status') { + setEstadoFilter(selectedKeys[0]); + console.log(selectedKeys[0]); + } + }; + + const handleReset = (clearFilters: () => void) => { + clearFilters(); + setSearchText(''); + }; + + useEffect(() => { + dispatch(getAllEncomenda( + { + pagination: { + current: 1, + pageSize: 5 + } + } + )) + }, []); + + // **Columns Filter** + const getColumnSearchProps = (dataIndex: any): ColumnType => ({ + filterDropdown: ({ setSelectedKeys, selectedKeys, clearFilters, close }) => ( +
e.stopPropagation()}> + + {dataIndex == 'status' ? ( + setSelectedKeys(e.target.value ? [e.target.value] : [])} + onPressEnter={() => handleSearch(selectedKeys as string[], dataIndex)} + style={{ marginBottom: 8, display: 'block' }} + /> + )} + + + + + +
+ ), + filterIcon: (filtered: boolean) => ( + + ), + onFilter: (value, record) => + record[dataIndex] + .toString() + .toLowerCase() + .includes((value as string).toLowerCase()), + onFilterDropdownOpenChange: (visible) => { + if (visible) { + setTimeout(() => searchInput.current?.select(), 100); + } + }, + render: (text) => + searchedColumn === dataIndex ? ( + + ) : ( + text + ), + }); + // **Columns Filter** + + return ( +
+ ( + { + key: encomenda.uid, + data_criacao: encomenda.data_criacao, + data_envio: encomenda.data_envio, + status: encomenda.status.nome, + valor: `R$ ${encomenda.valor}` + } + )) + } + // 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} + > + + + + + + + + + + + ( + + + {/* { handleDelete(record.key) }} + okText="Sim" + cancelText="Não" + > +
+
+ ) +} + +export default Encomendas; \ No newline at end of file diff --git a/first-app/src/pages/Encomenda/NewEncomenda.tsx b/first-app/src/pages/Encomenda/NewEncomenda.tsx index fcdc4ff..cdce57b 100644 --- a/first-app/src/pages/Encomenda/NewEncomenda.tsx +++ b/first-app/src/pages/Encomenda/NewEncomenda.tsx @@ -1,73 +1,139 @@ -import { Button, Collapse, Popconfirm, Space, Table } from 'antd'; +import { Button, Divider, Select, Space, Table } from 'antd'; import styles from './encomenda.module.css'; import Column from 'antd/es/table/Column'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { ItemCart } from '../../interfaces/ItemCart'; import { DeleteOutlined } from '@ant-design/icons'; +import { removeItem } from '../../slices/CarrinhoSlice'; +import { getAllClientes } from '../../slices/ClienteSlice'; +import { useState } from 'react'; +import { ParamsType } from '../../interfaces/ParamsType'; +import { Cliente } from '../../interfaces/Cliente'; +import { newEncomenda } from '../../slices/EncomendaSlice'; +import { notify } from '../../hooks/useToastfy'; +import Search from 'antd/es/input/Search'; +import { Encomenda } from '../../interfaces/Encomenda'; function NewEncomenda() { - const { itens } = useSelector((state: any) => state.cart); + const dispatch = useDispatch(); + const { itens, valorTotal } = useSelector((state: any) => state.cart); + const { clientes, loading:loadingCliente } = useSelector((state:any) => state.cliente); + const { loading:loadingEncomenda } = useSelector((state:any) => state.encomenda); - const handleDelete = () => { + const [clienteUid, setCliente] = useState(''); + const handleDelete = (uid: string) => { + dispatch(removeItem(uid)); + } + + const searchCliente = (nome:string) => { + const params: ParamsType = { + pagination: { + current: 1, + pageSize: 5 + }, + filter: { + nome: nome + } + } + dispatch(getAllClientes(params)) + } + + const handleFinalize = () => { + + if (clienteUid == '' || clienteUid == null) { + notify('Selecione o cliente!','error') + return; + } else if (itens.length == 0) { + notify('A lista está vazia!','error') + return; + } + + const encomenda:Encomenda = { + itens:itens, + cliente:clienteUid, + valor:valorTotal + } + dispatch(newEncomenda(encomenda)); + } return ( -
- - ( - { key: item.produto.uid, name: item.produto.nome, quantidade: item.quantidade, preco: item.produto.preco } - )) - } - pagination={false} - bordered={true} - scroll={{ x: 300, y: 300 }} - > - - - - - ( - - - { handleDelete() }} - okText="Sim" - cancelText="Não" - > -