Table Operation Sumary
This commit is contained in:
Alex Santos
parent
30f016c60b
commit
bbf0080761
@ -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(
|
||||
<TableView>
|
||||
<Head>
|
||||
@ -17,6 +44,53 @@ export default function ResumoOperacao() {
|
||||
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
|
||||
|
||||
<h3>Seletor Mês</h3>
|
||||
<div className='select'>
|
||||
|
||||
<FormControl fullWidth >
|
||||
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={unidade}
|
||||
label="Unidade"
|
||||
onChange={handleChangeUnidade}
|
||||
>
|
||||
<MenuItem key={1} value={''}></MenuItem>
|
||||
{
|
||||
data.unidades.map((value) => {
|
||||
return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl fullWidth >
|
||||
|
||||
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={month}
|
||||
label="Month"
|
||||
onChange={handleChangeMonth}
|
||||
>
|
||||
<MenuItem value={15}>Janeiro</MenuItem>
|
||||
<MenuItem value={20}>Fevereiro</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Abril</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Maio</MenuItem>
|
||||
<MenuItem value={30}>Junho</MenuItem>
|
||||
<MenuItem value={30}>Julho</MenuItem>
|
||||
<MenuItem value={30}>Agosto</MenuItem>
|
||||
<MenuItem value={30}>Setembro</MenuItem>
|
||||
<MenuItem value={30}>Outubro</MenuItem>
|
||||
<MenuItem value={30}>Novembro</MenuItem>
|
||||
<MenuItem value={30}>Dezembro</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -29,15 +103,36 @@ export default function ResumoOperacao() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='tg-gceh'>Unidade - 9500130</td>
|
||||
<td className='tg-uulg'>Compra</td>
|
||||
<td className='tg-gceh'>122,269</td>
|
||||
<td className='tg-gceh'>COPEL COM I5</td>
|
||||
<td className='tg-uulg'>234,67</td>
|
||||
<td className='tg-gceh'>38.257,15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{
|
||||
data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
|
||||
if (index%2===0) {
|
||||
return <tr key={index}>
|
||||
<td key={index} className='tg-gceh'>{value.name}</td>
|
||||
<td key={index} className='tg-uulg'>{value.operacao}</td>
|
||||
<td key={index} className='tg-gceh'>{value.montante}</td>
|
||||
<td key={index} className='tg-gceh'>{value.contraparte}</td>
|
||||
<td key={index} className='tg-uulg'>{value.preco}</td>
|
||||
<td key={index} className='tg-gceh'>{value.valorNF}</td>
|
||||
</tr>
|
||||
} else {
|
||||
return <tr key={index}>
|
||||
<td key={index} className='tg-hq65'>{value.name}</td>
|
||||
<td key={index} className='tg-0tzy'>{value.operacao}</td>
|
||||
<td key={index} className='tg-hq65'>{value.montante}</td>
|
||||
<td key={index} className='tg-hq65'>{value.contraparte}</td>
|
||||
<td key={index} className='tg-0tzy'>{value.preco}</td>
|
||||
<td key={index} className='tg-hq65'>{value.valorNF}</td>
|
||||
</tr>
|
||||
}
|
||||
})
|
||||
}
|
||||
{/* <td className='tg-gceh'>{data.unidades.unidade1.name}</td>
|
||||
<td className='tg-uulg'>{data.unidades.unidade1.operacao}</td>
|
||||
<td className='tg-gceh'>{data.unidades.unidade1.montante}</td>
|
||||
<td className='tg-gceh'>{data.unidades.unidade1.contraparte}</td>
|
||||
<td className='tg-uulg'>{data.unidades.unidade1.preco}</td>
|
||||
<td className='tg-gceh'>{data.unidades.unidade1.valorNF}</td> */}
|
||||
{/* <tr>
|
||||
<td className='tg-hq65'>Unidade - 9500130</td>
|
||||
<td className='tg-0tzy'>Compra</td>
|
||||
<td className='tg-hq65'>110,348</td>
|
||||
@ -76,7 +171,7 @@ export default function ResumoOperacao() {
|
||||
<td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
|
||||
<td className='tg-0tzy'>300,36</td>
|
||||
<td className='tg-hq65'>5.965,95</td>
|
||||
</tr>
|
||||
</tr> */}
|
||||
</tbody>
|
||||
</table>
|
||||
<BasicButton title='Baixar PDF' />
|
||||
|
||||
16
src/services/DadosTabelaResumoOperacao.js
Normal file
16
src/services/DadosTabelaResumoOperacao.js
Normal file
@ -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' }
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
10
src/services/dados.json
Normal file
10
src/services/dados.json
Normal file
@ -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" }
|
||||
]
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user