diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index ceae8f64d67b61de7269c313f6a0ad3dff6477db..90afe03c6b7d4106e005f57be616619c427fee39 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -27,33 +27,25 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
+import Chip from '@material-ui/core/Chip';
+import MenuItem from '@material-ui/core/MenuItem';
import { useTheme, makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
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";
import { Store } from '../../../../Store';
import Unauthorized from '../Unauthorized';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
-import { getRequest, postRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import { EditFilter, GetAData, Url } from "../../../Filters";
+import { fetchAllRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { EditFilter } from "../../../Filters";
//routers
import { Link } from "react-router-dom";
//jodit
// import JoditEditor from "jodit-react";
-let currLanPage = 0;
-let currLanFilter = "";
-
-let currObjTypePage = 0;
-let currObjTypeFilter = "";
-
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
@@ -110,12 +102,12 @@ const EditEducationalObject = ({ match }) => {
const [name, setName] = useState();
const [owner, setOwner] = useState();
const [author, setAuthor] = useState();
- const [listOfLanguages, setListOfLanguages] = useState([]);
+ const [objectType, setObjectType] = useState({});
+ const [description, setDescription] = useState("");
const [languagesID, setLanguagesID] = useState([]);
- const [listOfObjectTypes, setListOfObjectTypes] = useState([]);
- const [objectTypeName, setObjectTypeName] = useState();
const [objectTypeID, setObjectTypeID] = useState();
- const [description, setDescription] = useState("");
+ const [listOfLanguages, setListOfLanguages] = useState([]);
+ const [listOfObjectTypes, setListOfObjectTypes] = useState([]);
// Imutables
const [CREATE_AT, setCreateAt] = useState("");
@@ -177,122 +169,6 @@ const EditEducationalObject = ({ match }) => {
setAuthor(e.target.value);
};
- const onChangeObjectHandler = async (e) => {
- currObjTypePage = 0;
- currObjTypeFilter = e.target.value;
- getRequest(
- Url(
- "object_types",
- `"name" : "${currObjTypeFilter}"`,
- currObjTypePage,
- "DESC"
- ),
- (data, header) => {
- if (data.length === 0)
- HandleSnack("Não há nenhum tipo de objeto educacional com esse nome", true, "warning", "#FFC125");
- setListOfObjectTypes([...data]);
- },
- (error) => {
- HandleSnack("Erro ao pegar os dados", true, "warning", "#FA8072");
- }
- )
- };
-
- const OnChangeLanguageHandler = async (e) => {
- currLanPage = 0;
- currLanFilter = e.target.value;
- getRequest(
- Url("languages", `"name" : "${currLanFilter}"`, currLanPage, "DESC"),
- (data, header) => {
- if (data.length === 0)
- HandleSnack("Não há nenhuma linguagem com esse nome", true, "warning", "#FFC125");
- setListOfLanguages([...data]);
- },
- (error) => {
- HandleSnack("Erro ao pegar os dados", true, "warning", "#FA8072");
- }
- )
- };
-
- const HandleLanguageScroll = async (e) => {
- const bottom =
- e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
- if (bottom) {
- currLanPage++;
- getRequest(
- Url("languages", `"name" : "${currLanFilter}"`, currLanPage, "DESC"),
- (data, header) => {
- if (data.length >= 1) {
- const currData = listOfLanguages.concat(data);
- setListOfLanguages(currData);
- } else {
- HandleSnack(
- "Não há mais linguagens para serem carregadas",
- true,
- "warning",
- "#FFC125"
- );
- }
- },
- (error) => {
- HandleSnack(
- "Erro ao carregar as linguagens",
- true,
- "warning",
- "#FA8072"
- );
- }
- )
- }
- };
-
- const HandleObjectTypeScroll = async (e) => {
- const bottom =
- e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
- if (bottom) {
- currObjTypePage++;
- getRequest(
- Url("languages", `"name" : "${currObjTypeFilter}"`, currObjTypePage, "DESC"),
- (data, header) => {
- if (data.length >= 1) {
- const currData = listOfLanguages.concat(data);
- setListOfObjectTypes(currData);
- } else {
- HandleSnack(
- "Não há mais objetos educacionais para serem carregadas",
- true,
- "warning",
- "#FFC125"
- );
- }
- },
- (error) => {
- 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;
-
- setLanguagesID(currSelectedLanguages);
- };
-
- const HandleObjectTypePressed = (id, name) => {
- setObjectTypeID(id);
- setObjectTypeName(name);
- };
-
//Verify if the string is empty
const isEmpty = (text) => {
return text.length === 0 ? true : false;
@@ -327,10 +203,46 @@ const EditEducationalObject = ({ match }) => {
};
}
- const handleChange = (event, newValue) => {
- setValue(newValue);
+ const handleChangeLan = (id, value) => {
+ const currLanguagesId = [...languagesID];
+ currLanguagesId.push(
+ {
+ id: id,
+ name: value,
+ }
+ )
+ setListOfLanguages((chips) => chips.filter((chip) => chip.id !== id));
+ setLanguagesID(currLanguagesId);
+ };
+
+ const handleDeleteLan = (chipToDelete) => () => {
+ const currLanguageList = [...listOfLanguages];
+ currLanguageList.push({
+ id: chipToDelete.id,
+ name: chipToDelete.name
+ })
+ setListOfLanguages(currLanguageList)
+ setLanguagesID((chips) => chips.filter((chip) => chip.id !== chipToDelete.id));
+ };
+
+ const handleChangeObj = (id, value) => {
+ let currListOfObjs = [...listOfObjectTypes]
+ currListOfObjs.push({
+ id: objectType.id,
+ name: objectType.name
+ })
+ currListOfObjs = currListOfObjs.filter((chip) => chip.id !== id)
+ setListOfObjectTypes(currListOfObjs);
+ setObjectType({
+ id: id,
+ name: value
+ });
};
+ const handleChangeTab = (event, newValue) => {
+ setValue(newValue);
+ }
+
const handleChangeIndex = (index) => {
setValue(index);
};
@@ -346,12 +258,6 @@ const EditEducationalObject = ({ match }) => {
};
const SaveData = (data) => {
- const languages = [];
-
- for (let i = 0; i < data.language.length; i++) {
- languages[data.language[i].id] = data.language[i].id;
- }
- setObjectTypeName(data.object_type);
setName(data.name);
setOwner(data.publisher.name);
setAuthor(data.author);
@@ -362,7 +268,6 @@ const EditEducationalObject = ({ match }) => {
setCreateAt(DisplayDate(data.created_at));
setUpdateAt(DisplayDate(data.updated_at));
setDescription(data.description);
- setLanguagesID(languages);
};
const DisplayDate = (date) => {
@@ -522,15 +427,43 @@ const EditEducationalObject = ({ match }) => {
return canUserEdit;
}
-
useEffect(() => {
- getRequest(
- GetAData("learning_objects", match.params.id),
- (data, header) => {
- SaveData(data);
+ const urls = [`/learning_objects/${match.params.id}`, "/languages", "/object_types"]
+ fetchAllRequest(
+ urls,
+ (data) => {
+ const auxiliarLanguages = [...data[1]]
+ const auxiliarLanguagesId = []
+ const objectLanguagesId = []
+ data[0].language.map((lan) => (objectLanguagesId.push(lan.id)))
+ data[1].map((lan) => (auxiliarLanguagesId.push(lan.id)))
+ objectLanguagesId.map((lan) => {
+ const index = auxiliarLanguagesId.indexOf(lan);
+ auxiliarLanguages.splice(index, 1);
+ auxiliarLanguagesId.splice(index, 1);
+ })
+
+ const auxiliarObjects = [...data[2]]
+ const auxiliarObjectsName = []
+ const objectTypeName = data[0].object_type;
+ data[2].map((obj) => (auxiliarObjectsName.push(obj.name)))
+ const index = auxiliarObjectsName.indexOf(objectTypeName);
+ setObjectType({
+ id: auxiliarObjects[index].id,
+ name: auxiliarObjects[index].name
+ })
+ auxiliarObjects.splice(index, 1);
+ auxiliarObjectsName.splice(index, 1);
+
+
+ SaveData(data[0])
+ setLanguagesID(data[0].language)
+ setListOfLanguages(auxiliarLanguages)
+ setListOfObjectTypes(auxiliarObjects)
setIsLoaded(true);
},
(error) => {
+ console.log(error)
setError(true);
}
)
@@ -587,7 +520,7 @@ const EditEducationalObject = ({ match }) => {
<Tabs
value={value}
- onChange={handleChange}
+ onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
@@ -620,72 +553,48 @@ const EditEducationalObject = ({ match }) => {
multiline
/>
))}
-
- <>
- <TextField
- style={{ width: "250px", marginBottom: "1em" }}
- label="Digite o tipo de objeto"
- onBlurCapture={onChangeObjectHandler}
- type="search"
- multiline
- />
- {listOfObjectTypes.length >= 1 ? (
- <List
- className={classes.root}
- onScroll={HandleObjectTypeScroll}
- >
- {listOfObjectTypes.map((item, index) => (
- <ListItem key={item.id} divider>
- <Button
- variant="text"
- startIcon={<MenuBookRoundedIcon />}
- onClick={() => HandleObjectTypePressed(item.id, item.name)}
- color={
- objectTypeName === item.name
- ? "primary"
- : "default"
- }
- >
- {item.name}
- </Button>
- </ListItem>
- ))}
- </List>
- ) : null}
- </>
-
- <>
- <TextField
- style={{ width: "250px", marginBottom: "1em" }}
- label="Digite as lÃnguas"
- onBlurCapture={OnChangeLanguageHandler}
- type="search"
- multiline
+ {languagesID.map((data) => {
+ return (
+ <li key={data.id} style={{ listStyleType: "none", marginBottom: "0.5em" }}>
+ <Chip
+ label={data.name}
+ onDelete={data === 'React' ? undefined : handleDeleteLan(data)}
+ className={classes.chip}
+ />
+ </li>
+ );
+ })}
+ <TextField
+ id="standard-select-currency"
+ select
+ label="LÃnguas"
+ style={{ width: '250px', marginBottom: '1em' }}
+ >
+ {listOfLanguages.map((option) => (
+ <MenuItem key={option.id} value={option.name} onClick={() => { handleChangeLan(option.id, option.name) }}>
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+
+ <li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
+ <Chip
+ label={objectType.name}
+ className={classes.chip}
/>
- {listOfLanguages.length >= 1 ? (
- <List
- className={classes.root}
- onScroll={HandleLanguageScroll}
- >
- {listOfLanguages.map((item, index) => (
- <ListItem key={item.id} divider>
- <Button
- variant="text"
- startIcon={<LanguageRoundedIcon />}
- onClick={() => HandleLanguagePressed(item.id)}
- color={
- languagesID[item.id] === item.id
- ? "primary"
- : "default"
- }
- >
- {item.name}
- </Button>
- </ListItem>
- ))}
- </List>
- ) : null}
- </>
+ </li>
+ <TextField
+ id="standard-select-currency"
+ select
+ label="Object type"
+ style={{ width: '250px', marginBottom: '1em' }}
+ >
+ {listOfObjectTypes.map((option) => (
+ <MenuItem key={option.id} value={option.name} onClick={() => { handleChangeObj(option.id, option.name) }}>
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
</form>
</TabPanel>