diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 38baf5c5fadd4d2ed71f3bfc9eac864d8dc393e9..803dd3a6b8f5109bcdadabb2dcd09d732ff7aa88 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -16,7 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useEffect, useState } from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+//Material ui componets
+import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -24,10 +25,20 @@ import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
import IconButton from '@material-ui/core/IconButton';
import VisibilityIcon from '@material-ui/icons/Visibility';
-import { apiUrl } from '../../../../env';
+import { Button } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import AddRoundedIcon from '@material-ui/icons/AddRounded';
+//Local files
import DataCard from '../../../Components/Components/DataCard';
-import TableData from '../../../Components/Components/Table';
+import TableData from '../../../Components/Components/Table';
import NoteVarInputs from '../../../Components/Components/Inputs/NoteVarInputs';
+import SnackBar from '../../../../Components/SnackbarComponent';
+//Services
+import { WithoutFilter } from '../../../Filters';
+import { GetFullList } from '../../../Services';
+
+let currPage = 0; //var that controlls the current page that we are
+let transformListToAsc = false;
const StyledTableCell = withStyles((theme) => ({
head: {
@@ -47,53 +58,86 @@ const StyledTableRow = withStyles((theme) => ({
},
}))(TableRow);
-//Function that returns an object with the content of the api
-function createData(id, name, code, weight, active, scoreType, createdAt, updateAt) {
- return { id, name, code, weight, active, scoreType, createdAt, updateAt };
-}
-
const NoteVariables = () => {
+ let api = WithoutFilter('scores', `${currPage}`)
+ const AddOneLenght = [''];
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
const [items, setItems] = useState([]); //Necessary to consult the API, data
- const [itemsSecondPage, setItemSecondPage] = useState([]); //Necessary to consult the API, data
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [data, setData] = useState([]); // Data that will be used to display the content of the row in full screen, when its clicked
const [editInfo, setEditInfo] = useState({}); //Informations to be displayed in the edit section
- const [viewData, setViewData] = useState(false); //Controlls the state, if someone wants to see the data
+ const [viewData, setViewData] = useState(false); //Controlls the state, if someone wants to see the data
- const productionRoute = 'scores?filter=%7B%7D&page=0&range=%5B0%2C9%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
- const productinRouteSecondPage = 'scores?filter=%7B%7D&page=1&range=%5B10%2C19%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
+ const [snackInfo, setSnackInfo] = useState({
+ message: '',
+ icon: '',
+ open: false,
+ color: '',
+ })
- useEffect(() => {
- fetch(apiUrl + '/' + productionRoute)
- .then(res => res.json())
- .then(
- (result) => {
- setIsLoaded(true);
- setItems(result);
- },
- (error) => {
- setIsLoaded(true);
- setError(error);
+ // Handle snack infos
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color
+ })
+ }
+
+ const LoadMoreItens = (page) => {
+ setIsLoadingMoreItems(true)
+ console.log(page)
+ api = WithoutFilter('scores', `${page}`)
+ console.log(api)
+ GetFullList(api).then(res => {
+ if (res.state) {
+ const arrData = [...res.data]
+ if (arrData.length === 0) {
+ HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+ } else {
+ const arrItems = [...items]
+ arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
+ const arrResult = arrItems.concat(arrData)
+ setItems(arrResult.concat(AddOneLenght))
}
- )
- }, []);
+
+ } else {
+ setError(error);
+ }
+ setIsLoadingMoreItems(false)
+ })
+ }
+
+ const InvertList = () => {
+ transformListToAsc = !transformListToAsc
+ const arr = [...items]
+ if (transformListToAsc) {
+ arr.reverse()
+ setItems(arr)
+ } else{
+ arr.reverse()
+ setItems(arr)
+ }
+ }
useEffect(() => {
- fetch(apiUrl + '/' + productinRouteSecondPage)
+ fetch(api)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
- setItemSecondPage(result);
+ setItems(result.concat(AddOneLenght));
},
(error) => {
setIsLoaded(true);
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
setError(error);
}
)
- }, [])
+ }, []);
if (error) {
@@ -102,55 +146,42 @@ const NoteVariables = () => {
return <div>Loading...</div>;
} else {
- // Begin of the processing data
- const rows = []; // Rows of the table
- for (var i = 0; i < items.length; i++) {
- const item = { ...items[i] };
- rows.push(createData(item.id, item.name, item.code, item.weight, item.active, item.score_type[0], item.created_at, item.updated_at))
- }
-
- for (i = 0; i < itemsSecondPage.length; i++) {
- const item = { ...itemsSecondPage[i] };
- rows.push(createData(item.id, item.name, item.code, item.weight, item.active, item.score_type[0], item.created_at, item.updated_at))
- }
- // End of processing data
-
// i = index of the array of the table
const viewDataHandler = (i) => {
- const item = { ...rows[i] };
-
+ const item = { ...items[i] };
+
const infoArr = [
- {
- subTitle: "ID",
- prop: item.id,
- },
- {
- subTitle: "Nome",
- prop: item.name,
- },
- {
- subTitle: "Código",
- prop: item.code,
- },
- {
- subTitle: "Peso",
- prop: item.weight,
- },
- {
- subTitle: "Criação",
- prop: item.createdAt,
- },
- {
- subTitle: "Atualizado",
- prop: item.updateAt,
- },
- ]
+ {
+ subTitle: "ID",
+ prop: item.id,
+ },
+ {
+ subTitle: "Nome",
+ prop: item.name,
+ },
+ {
+ subTitle: "Código",
+ prop: item.code,
+ },
+ {
+ subTitle: "Peso",
+ prop: item.weight,
+ },
+ {
+ subTitle: "Criação",
+ prop: item.createdAt,
+ },
+ {
+ subTitle: "Atualizado",
+ prop: item.updateAt,
+ },
+ ]
const editObj = {
- id : item.id,
- name : item.name,
- code : item.code,
- weight : item.weight
- }
+ id: item.id,
+ name: item.name,
+ code: item.code,
+ weight: item.weight
+ }
setData(infoArr);
setEditInfo(editObj);
@@ -162,36 +193,72 @@ const NoteVariables = () => {
return (
!viewData ?
- <TableData top={topTable}>
+ <TableData
+ top={topTable}
+ onIconPressed={InvertList}
+ >
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
<TableBody>
- {rows.map((row, index) => (
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">{row.weight}</StyledTableCell>
- <StyledTableCell align="right">
- {
- row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
- }
- </StyledTableCell>
- <StyledTableCell align="right">{row.scoreType}</StyledTableCell>
- <StyledTableCell align="right">
- <IconButton onClick={() => viewDataHandler(index)}>
- <VisibilityIcon style={{ fill: '#8A2BE2' }} />
- </IconButton>
- </StyledTableCell>
- </StyledTableRow>
- ))}
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <div style={{ padding: '1em' }}>
+ {/* Button to load more data */}
+ <Button
+ color='primary'
+ variant='text'
+ disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ currPage++
+ LoadMoreItens(currPage)
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
+ }
+ </Button>
+ </div>
+
+ :
+
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.code}</StyledTableCell>
+ <StyledTableCell align="right">{row.weight}</StyledTableCell>
+ <StyledTableCell align="right">
+ {
+ row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">{row['score_type'][0]}</StyledTableCell>
+ <StyledTableCell align="right">
+ <IconButton onClick={() => viewDataHandler(index)}>
+ <VisibilityIcon style={{ fill: '#8A2BE2' }} />
+ </IconButton>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
</TableBody>
</TableData>
:
// When the user wanna see the data of a row in full screen
- <DataCard
- data={data}
+ <DataCard
+ data={data}
// editArr={editInfo}
- component={<NoteVarInputs editInfo={editInfo}/>}
+ component={<NoteVarInputs editInfo={editInfo} />}
viewData={() => setViewData(!viewData)}
/>
)