Skip to content
Snippets Groups Projects
Commit b8620a75 authored by lfr20's avatar lfr20
Browse files

Finish to build Educational Objects section

parent ca1090d7
Branches
Tags
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!40merge admin into develop,!37Merge sistema_admin into Update_Admin_System
Show whitespace changes
Inline Side-by-side
src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+ 67
− 52
View file @ b8620a75
......@@ -17,6 +17,7 @@ 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, { useState, useEffect } from "react";
import moment from 'moment';
// Maerial ui components
import Card from "@material-ui/core/Card";
import Paper from "@material-ui/core/Paper";
......@@ -33,6 +34,7 @@ import { GetAData } from "../../../Filters";
import { Link } from "react-router-dom";
import { GetSpecificData } from "../../../Services";
import { apiUrl, apiDomain } from "../../../../env";
import { Grid } from "@material-ui/core";
const CommunityQuestions = ({ match }) => {
console.log(match);
......@@ -42,6 +44,13 @@ const CommunityQuestions = ({ match }) => {
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
const [item, setItem] = useState({});//Necessary to consult the API, data
const DisplayDate = (date) => {
const convertedData = moment.utc(date);
return moment(convertedData)
.format("LLL")
.toString();
};
useEffect(() => {
GetSpecificData(GetAData("learning_objects", match.params.id)).then(
(res) => {
......@@ -94,15 +103,11 @@ const CommunityQuestions = ({ match }) => {
},
{
subTitle: "Criado em",
prop: item.created_at,
prop: DisplayDate(item.created_at),
},
{
subTitle: "Atualizado em",
prop: item.updated_at,
},
{
subTitle: "Criado em",
prop: item.created_at,
prop: DisplayDate(item.updated_at),
},
{
subTitle: "Visualizações",
......@@ -157,12 +162,22 @@ const CommunityQuestions = ({ match }) => {
];
return (
<Card className={classes.root} variant="outlined">
<Card variant="outlined">
<CardContent>
<div className={classes.displayRow}>
<Grid
container
xs={12}
display="row"
justify="space-between"
alignItems="center"
alignContent="space-between"
>
<Grid item>
<Typography className={classes.title} color="inherit" gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<ButtonGroup
color="primary"
aria-label="outlined primary button group"
......@@ -210,8 +225,8 @@ const CommunityQuestions = ({ match }) => {
</Button>
</Link>
</ButtonGroup>
</div>
</Grid>
</Grid>
{item.thumbnail ? (
<div style={{ marginTop: "1em", marginBottom: "1em" }}>
<a target="_blank" href={apiDomain + item.thumbnail}>
......
src/Admin/Components/Components/Inputs/EditEducationalObect.js
+ 124
− 58
View file @ b8620a75
......@@ -19,6 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from 'moment';
//imports material ui components
import { Typography, TextField, Button, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
......@@ -34,10 +35,11 @@ import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
import SaveIcon from "@material-ui/icons/Save";
import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
import MenuBookRoundedIcon from '@material-ui/icons/MenuBookRounded';
//imports local files
import SnackBar from "../../../../Components/SnackbarComponent";
//imports services
import { Edit, GetFullList } from "../../../Services";
import { Edit, GetFullList, GetSpecificData} from "../../../Services";
import { EditFilter, GetAData, Url } from "../../../Filters";
//routers
import { Link } from "react-router-dom";
......@@ -171,19 +173,25 @@ const EditEducationalObject = ({ match }) => {
setAuthor(e.target.value);
};
const onChangeObjectHandler = (e) => {
const onChangeObjectHandler = async (e) => {
currObjTypePage = 0;
currObjTypeFilter = e.target.value;
GetFullList(
Url("object_types", `"name" : "${currObjTypeFilter}"`, currObjTypePage, "DESC")
Url(
"object_types",
`"name" : "${currObjTypeFilter}"`,
currObjTypePage,
"DESC"
)
).then((res) => {
if (res.state) {
setListOfLanguages([...res.data]);
if(res.data.length === 0) HandleSnack("Não há nenhum tipo de objeto educacional com esse nome", true, "warning", "#FFC125");
setListOfObjectTypes([...res.data]);
} else {
HandleSnack("Erro ao pegar", true, "warning", "#FA8072");
HandleSnack("Erro ao pegar os dados", true, "warning", "#FA8072");
}
});
}
};
const OnChangeLanguageHandler = async (e) => {
currLanPage = 0;
......@@ -192,9 +200,10 @@ const EditEducationalObject = ({ match }) => {
Url("languages", `"name" : "${currLanFilter}"`, currLanPage, "DESC")
).then((res) => {
if (res.state) {
if(res.data.length === 0) HandleSnack("Não há nenhuma linguagem com esse nome", true, "warning", "#FFC125");
setListOfLanguages([...res.data]);
} else {
HandleSnack("Erro ao pegar", true, "warning", "#FA8072");
HandleSnack("Erro ao pegar os dados", true, "warning", "#FA8072");
}
});
};
......@@ -231,16 +240,52 @@ const EditEducationalObject = ({ match }) => {
}
};
const HandleObjectTypeScroll = async (e) => {
const bottom =
e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
if (bottom) {
currObjTypePage++;
GetFullList(
Url("languages", `"name" : "${currObjTypeFilter}"`, currObjTypePage, "DESC")
).then((res) => {
if (res.state) {
if (res.data.length >= 1) {
const currData = listOfLanguages.concat(res.data);
setListOfObjectTypes(currData);
} else {
HandleSnack(
"Não há mais objetos educacionais para serem carregadas",
true,
"warning",
"#FFC125"
);
}
} else {
HandleSnack(
"Erro ao carregar os objetos educacionais",
true,
"warning",
"#FA8072"
);
}
});
}
};
const HandleLanguagePressed = (id) => {
const currSelectedLanguages = [...languagesID];
if (currSelectedLanguages[id] === id)
currSelectedLanguages[id] = undefined
else
currSelectedLanguages[id] = id
if (currSelectedLanguages[id] === id) currSelectedLanguages[id] = undefined;
else currSelectedLanguages[id] = id;
setLanguagesID(currSelectedLanguages);
}
};
const HandleObjectTypePressed = (id, name) => {
setObjectTypeID(id);
setObjectTypeName(name);
};
//Verify if the string is empty
const isEmpty = (text) => {
......@@ -308,12 +353,20 @@ const EditEducationalObject = ({ match }) => {
setLikesCount(data.likes_count);
setViewsCount(data.views_count);
setScore(data.score);
setCreateAt(data.created_at);
setUpdateAt(data.updated_at);
setCreateAt(DisplayDate(data.created_at));
setUpdateAt(DisplayDate(data.updated_at));
setDescription(data.description);
setLanguagesID(languages);
};
const DisplayDate = (date) => {
const convertedData = moment.utc(date);
return moment(convertedData)
.format("LLL")
.toString();
};
//handle submit
const onSubmit = async () => {
console.log(languagesID);
......@@ -322,16 +375,17 @@ const EditEducationalObject = ({ match }) => {
!isEmpty(name) &&
!isEmpty(owner) &&
!isEmpty(author) &&
!isEmpty(languagesID)
!isEmpty(languagesID)&&
!isEmpty(objectTypeID)
) {
const api = EditFilter("learning_objects", id);
const body = {
"learning_object": {
"author": author,
"name": name,
"description": description,
"object_type_id": 3,
"language_ids": languagesID,
learning_object: {
author: author,
name: name,
description: description,
object_type_id: objectTypeID,
language_ids: languagesID,
},
};
Edit(api, body).then((res) => {
......@@ -444,18 +498,16 @@ const EditEducationalObject = ({ match }) => {
];
useEffect(() => {
fetch(GetAData("learning_objects", match.params.id))
.then((res) => res.json())
.then(
(result) => {
SaveData(result);
setIsLoaded(true);
},
(error) => {
GetSpecificData(GetAData("learning_objects", match.params.id))
.then((res) => {
if(res.state){
SaveData(res.data);
setIsLoaded(true);
}
else{
setError(true);
}
);
});
}, []);
if (error) {
......@@ -480,9 +532,18 @@ const EditEducationalObject = ({ match }) => {
}
/>
<CardContent>
<Grid container direction="row" justify="space-between">
<Grid
container
direction="row"
justify="space-between"
xs={12}
alignContent="center"
alignItems="center"
>
<Grid item>
<Typography variant="h4">{name}</Typography>
</Grid>
<Grid item>
<Link
style={{ textDecoration: "none" }}
to={"/admin/learningObjects"}
......@@ -496,6 +557,7 @@ const EditEducationalObject = ({ match }) => {
</Button>
</Link>
</Grid>
</Grid>
<Tabs
value={value}
......@@ -515,7 +577,6 @@ const EditEducationalObject = ({ match }) => {
index={value}
onChangeIndex={handleChangeIndex}
>
<TabPanel value={value} index={0} dir={theme.direction}>
<form style={{ display: "flex", flexDirection: "column" }}>
{fields.map((field, index) => (
......@@ -545,15 +606,19 @@ const EditEducationalObject = ({ match }) => {
{listOfObjectTypes.length >= 1 ? (
<List
className={classes.root}
// onScroll={HandleLanguageScroll}
onScroll={HandleObjectTypeScroll}
>
{listOfObjectTypes.map((item, index) => (
<ListItem key={item.id} divider>
<Button
variant="text"
startIcon={<LanguageRoundedIcon />}
color={ objectTypeName === item.name ? 'primary' : 'default'}
startIcon={<MenuBookRoundedIcon />}
onClick={() => HandleObjectTypePressed(item.id, item.name)}
color={
objectTypeName === item.name
? "primary"
: "default"
}
>
{item.name}
</Button>
......@@ -582,7 +647,11 @@ const EditEducationalObject = ({ match }) => {
variant="text"
startIcon={<LanguageRoundedIcon />}
onClick={() => HandleLanguagePressed(item.id)}
color={languagesID[item.id] === item.id ? 'primary' : 'default'}
color={
languagesID[item.id] === item.id
? "primary"
: "default"
}
>
{item.name}
</Button>
......@@ -591,7 +660,6 @@ const EditEducationalObject = ({ match }) => {
</List>
) : null}
</>
</form>
</TabPanel>
......@@ -621,7 +689,6 @@ const EditEducationalObject = ({ match }) => {
))}
</form>
</TabPanel>
</SwipeableViews>
</CardContent>
......@@ -638,7 +705,6 @@ const EditEducationalObject = ({ match }) => {
{isLoading ? <CircularProgress size={24} /> : "Salvar"}
</Button>
</CardAction>
</Card>
);
}
......
src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+ 27
− 13
View file @ b8620a75
......@@ -17,6 +17,7 @@ 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, { useState, useEffect } from "react";
import moment from 'moment';
// Imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
......@@ -178,8 +179,8 @@ const EducationalObjects = () => {
//Filters the search
const Filter = (api) => {
GetFullList(api).then((res) => {
const arrData = [...res.data];
if (res.state) {
const arrData = [...res.data];
setItems(arrData.concat(addOndeLenght));
} else {
setError(true);
......@@ -253,19 +254,27 @@ const EducationalObjects = () => {
});
};
const DisplayDate = (date) => {
const convertedData = moment.utc(date);
return moment(convertedData)
.format("LLL")
.toString();
};
useEffect(() => {
fetch(Url("learning_objects", "", `${currPage}`, "DESC"))
.then((res) => res.json())
GetFullList(Url("learning_objects", "", `${currPage}`, "DESC"))
.then(
(result) => {
if(result.state){
setIsLoaded(true);
setItems(result.concat(addOndeLenght));
},
(error) => {
setIsLoaded(true);
setError(error);
setItems(result.data.concat(addOndeLenght));
} else{
setError(true);
}
},
);
}, []);
if (error) {
......@@ -468,7 +477,12 @@ const EducationalObjects = () => {
}
onClick={() => {
currPage++
LoadMoreItens(Url('learning_objects', '', `${currPage}`, 'DESC'))
if(showAuthorField) LoadMoreItens(Url("learning_objects", `"author" : "${author}"`, currPage, "DESC"))
else if(showDescriptionField) LoadMoreItens(Url("learning_objects", `"description" : "${description}"`, currPage, "DESC"))
else if(showStandadSearch) LoadMoreItens(Url("learning_objects", `"name" : "${search}"`, currPage, "DESC"))
else LoadMoreItens(Url('learning_objects', '', `${currPage}`, 'DESC'))
}}
>
{isLoadingMoreItems ? (
......@@ -481,7 +495,7 @@ const EducationalObjects = () => {
) : (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
{row.created_at}
{DisplayDate(row.created_at)}
</StyledTableCell>
<StyledTableCell align="right">
{row.name}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment