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

Fixed Edit Education Page

parent 0caa83dc
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!40merge admin into develop,!39Update admin system
Hide whitespace changes
Inline Side-by-side
src/Admin/Components/Components/Inputs/EditEducationalObect.js
+ 121
− 212
View file @ ef2446eb
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment