From bbf008076165541232c10301443e61e8b799ac4a Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Fri, 20 May 2022 18:06:17 -0300 Subject: [PATCH] Table Operation Sumary --- src/pages/resumoOperacao.tsx | 117 ++++++++++++++++-- src/services/DadosTabelaResumoOperacao.js | 16 +++ src/services/dados.json | 10 ++ .../ResumoOperacao/ResumoOperacaoView.ts | 17 +++ 4 files changed, 149 insertions(+), 11 deletions(-) create mode 100644 src/services/DadosTabelaResumoOperacao.js create mode 100644 src/services/dados.json diff --git a/src/pages/resumoOperacao.tsx b/src/pages/resumoOperacao.tsx index 5f9038b..2990bf8 100644 --- a/src/pages/resumoOperacao.tsx +++ b/src/pages/resumoOperacao.tsx @@ -1,13 +1,40 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Header from '../components/header/Header'; import PageTitle from '../components/pageTitle/PageTitle'; import BasicButton from '../components/buttons/basicButton/BasicButton'; import Sidebar from '../components/sidebar/Sidebar'; +// import { dados } from '../services/DadosTabelaResumoOperacao'; +import data from '../services/dados.json' +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Box from '@mui/material/Box'; import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView'; import Head from 'next/head'; export default function ResumoOperacao() { + const [month, setMonth] = React.useState(''); + const [unidade, setUnidade] = React.useState(''); + + const handleChangeMonth = (event: SelectChangeEvent) => { + setMonth(event.target.value); + }; + const handleChangeUnidade = (event: SelectChangeEvent) => { + setUnidade(event.target.value); + }; + + useEffect(() => { + // console.log(data.unidades) + // data.unidades.map((value) => { + // console.log(`olha o valor ${value.name}`) + // }) + console.log(unidade) + console.log(data.unidades.filter((value, index)=> value.value.includes(unidade))) + }, [month, unidade]) + + return( @@ -17,6 +44,53 @@ export default function ResumoOperacao() {

Seletor Mês

+
+ + + Unidades + + + + + + + Mês + + +
@@ -29,15 +103,36 @@ export default function ResumoOperacao() { - - - - - - - - - + { + data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => { + if (index%2===0) { + return + + + + + + + + } else { + return + + + + + + + + } + }) + } + {/* + + + + + */} + {/* @@ -76,7 +171,7 @@ export default function ResumoOperacao() { - + */}
Unidade - 9500130Compra122,269COPEL COM I5234,6738.257,15
{value.name}{value.operacao}{value.montante}{value.contraparte}{value.preco}{value.valorNF}
{value.name}{value.operacao}{value.montante}{value.contraparte}{value.preco}{value.valorNF}
{data.unidades.unidade1.name}{data.unidades.unidade1.operacao}{data.unidades.unidade1.montante}{data.unidades.unidade1.contraparte}{data.unidades.unidade1.preco}{data.unidades.unidade1.valorNF}
Unidade - 9500130 Compra 110,348PACTO COMERCIALIZADORA I5 300,36 5.965,95
diff --git a/src/services/DadosTabelaResumoOperacao.js b/src/services/DadosTabelaResumoOperacao.js new file mode 100644 index 0000000..f2955ca --- /dev/null +++ b/src/services/DadosTabelaResumoOperacao.js @@ -0,0 +1,16 @@ +{} + unidades: { + unidade1: { name: 'Unidade-2555', operacao: 'Compra', montante: '130,00', contraparte: 'cOPEL COM I5', preco: '234,67', valorNF: '38.257,15' }, + unidade2: { name: 'Unidade-2', operacao: 'Compra', montante: '20,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' }, + unidade3: { name: 'Unidade-3', operacao: 'Compra', montante: '30,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' }, + unidade4: { name: 'Unidade-4', operacao: 'Compra', montante: '40,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' }, + unidade5: { name: 'Unidade-5', operacao: 'Compra', montante: '500,00',contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' }, + unidade6: { name: 'Unidade-6', operacao: 'Compra', montante: '300,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '.965,95' } + }, +] + + + + + + diff --git a/src/services/dados.json b/src/services/dados.json new file mode 100644 index 0000000..d0c3dcc --- /dev/null +++ b/src/services/dados.json @@ -0,0 +1,10 @@ +{ + "unidades": [ + { "value": "unidade1", "name": "Unidade-1", "operacao": "Compra", "montante": "130,00", "contraparte": "cOPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" }, + { "value": "unidade2", "name": "Unidade-2", "operacao": "Compra", "montante": "20,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15"}, + { "value": "unidade3", "name": "Unidade-3", "operacao": "Compra", "montante": "30,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15" }, + { "value": "unidade4", "name": "Unidade-4", "operacao": "Compra", "montante": "40,00", "contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" }, + { "value": "unidade5", "name": "Unidade-5", "operacao": "Compra", "montante": "500,00","contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" }, + { "value": "unidade6", "name": "Unidade-6", "operacao": "Compra", "montante": "300,00", "contraparte": "COPEL COM I5", "preco":"234,67", "valorNF": "965,95" } + ] +} diff --git a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts index 8649ee9..6e9d5ea 100644 --- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts +++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -10,6 +10,17 @@ export const TableView = styled.div` width: 100%; height: 100%; + .select{ + display: flex; + + + margin-bottom: 25px; + + width: 20rem; + } + .titleUnidade{ + + } .tg{ border-collapse:collapse; @@ -97,6 +108,10 @@ export const TableView = styled.div` color: #254F7F; } + + .teste { + width: 10rem; + } `; export const Pagination = styled.div` @@ -112,5 +127,7 @@ export const Pagination = styled.div` color: #ABAFB3; } + + `;