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"; ...@@ -27,33 +27,25 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions"; import CardAction from "@material-ui/core/CardActions";
import ListRoundedIcon from "@material-ui/icons/ListRounded"; import ListRoundedIcon from "@material-ui/icons/ListRounded";
import List from "@material-ui/core/List"; import Chip from '@material-ui/core/Chip';
import ListItem from "@material-ui/core/ListItem"; import MenuItem from '@material-ui/core/MenuItem';
import { useTheme, makeStyles } from "@material-ui/core/styles"; import { useTheme, makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs"; import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab"; import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box"; import Box from "@material-ui/core/Box";
import SaveIcon from "@material-ui/icons/Save"; import SaveIcon from "@material-ui/icons/Save";
import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
import MenuBookRoundedIcon from '@material-ui/icons/MenuBookRounded';
//imports local files //imports local files
import SnackBar from "../../../../Components/SnackbarComponent"; import SnackBar from "../../../../Components/SnackbarComponent";
import { Store } from '../../../../Store'; import { Store } from '../../../../Store';
import Unauthorized from '../Unauthorized'; import Unauthorized from '../Unauthorized';
import LoadingSpinner from '../../../../Components/LoadingSpinner'; import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest, postRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { fetchAllRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, Url } from "../../../Filters"; import { EditFilter } from "../../../Filters";
//routers //routers
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
//jodit //jodit
// import JoditEditor from "jodit-react"; // import JoditEditor from "jodit-react";
let currLanPage = 0;
let currLanFilter = "";
let currObjTypePage = 0;
let currObjTypeFilter = "";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
width: "100%", width: "100%",
...@@ -110,12 +102,12 @@ const EditEducationalObject = ({ match }) => { ...@@ -110,12 +102,12 @@ const EditEducationalObject = ({ match }) => {
const [name, setName] = useState(); const [name, setName] = useState();
const [owner, setOwner] = useState(); const [owner, setOwner] = useState();
const [author, setAuthor] = useState(); const [author, setAuthor] = useState();
const [listOfLanguages, setListOfLanguages] = useState([]); const [objectType, setObjectType] = useState({});
const [description, setDescription] = useState("");
const [languagesID, setLanguagesID] = useState([]); const [languagesID, setLanguagesID] = useState([]);
const [listOfObjectTypes, setListOfObjectTypes] = useState([]);
const [objectTypeName, setObjectTypeName] = useState();
const [objectTypeID, setObjectTypeID] = useState(); const [objectTypeID, setObjectTypeID] = useState();
const [description, setDescription] = useState(""); const [listOfLanguages, setListOfLanguages] = useState([]);
const [listOfObjectTypes, setListOfObjectTypes] = useState([]);
// Imutables // Imutables
const [CREATE_AT, setCreateAt] = useState(""); const [CREATE_AT, setCreateAt] = useState("");
...@@ -177,122 +169,6 @@ const EditEducationalObject = ({ match }) => { ...@@ -177,122 +169,6 @@ const EditEducationalObject = ({ match }) => {
setAuthor(e.target.value); 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 //Verify if the string is empty
const isEmpty = (text) => { const isEmpty = (text) => {
return text.length === 0 ? true : false; return text.length === 0 ? true : false;
...@@ -327,10 +203,46 @@ const EditEducationalObject = ({ match }) => { ...@@ -327,10 +203,46 @@ const EditEducationalObject = ({ match }) => {
}; };
} }
const handleChange = (event, newValue) => { const handleChangeLan = (id, value) => {
setValue(newValue); 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) => { const handleChangeIndex = (index) => {
setValue(index); setValue(index);
}; };
...@@ -346,12 +258,6 @@ const EditEducationalObject = ({ match }) => { ...@@ -346,12 +258,6 @@ const EditEducationalObject = ({ match }) => {
}; };
const SaveData = (data) => { 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); setName(data.name);
setOwner(data.publisher.name); setOwner(data.publisher.name);
setAuthor(data.author); setAuthor(data.author);
...@@ -362,7 +268,6 @@ const EditEducationalObject = ({ match }) => { ...@@ -362,7 +268,6 @@ const EditEducationalObject = ({ match }) => {
setCreateAt(DisplayDate(data.created_at)); setCreateAt(DisplayDate(data.created_at));
setUpdateAt(DisplayDate(data.updated_at)); setUpdateAt(DisplayDate(data.updated_at));
setDescription(data.description); setDescription(data.description);
setLanguagesID(languages);
}; };
const DisplayDate = (date) => { const DisplayDate = (date) => {
...@@ -522,15 +427,43 @@ const EditEducationalObject = ({ match }) => { ...@@ -522,15 +427,43 @@ const EditEducationalObject = ({ match }) => {
return canUserEdit; return canUserEdit;
} }
useEffect(() => { useEffect(() => {
getRequest( const urls = [`/learning_objects/${match.params.id}`, "/languages", "/object_types"]
GetAData("learning_objects", match.params.id), fetchAllRequest(
(data, header) => { urls,
SaveData(data); (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); setIsLoaded(true);
}, },
(error) => { (error) => {
console.log(error)
setError(true); setError(true);
} }
) )
...@@ -587,7 +520,7 @@ const EditEducationalObject = ({ match }) => { ...@@ -587,7 +520,7 @@ const EditEducationalObject = ({ match }) => {
<Tabs <Tabs
value={value} value={value}
onChange={handleChange} onChange={handleChangeTab}
indicatorColor="primary" indicatorColor="primary"
textColor="primary" textColor="primary"
variant="fullWidth" variant="fullWidth"
...@@ -620,72 +553,48 @@ const EditEducationalObject = ({ match }) => { ...@@ -620,72 +553,48 @@ const EditEducationalObject = ({ match }) => {
multiline multiline
/> />
))} ))}
{languagesID.map((data) => {
<> return (
<TextField <li key={data.id} style={{ listStyleType: "none", marginBottom: "0.5em" }}>
style={{ width: "250px", marginBottom: "1em" }} <Chip
label="Digite o tipo de objeto" label={data.name}
onBlurCapture={onChangeObjectHandler} onDelete={data === 'React' ? undefined : handleDeleteLan(data)}
type="search" className={classes.chip}
multiline />
/> </li>
{listOfObjectTypes.length >= 1 ? ( );
<List })}
className={classes.root} <TextField
onScroll={HandleObjectTypeScroll} id="standard-select-currency"
> select
{listOfObjectTypes.map((item, index) => ( label="Línguas"
<ListItem key={item.id} divider> style={{ width: '250px', marginBottom: '1em' }}
<Button >
variant="text" {listOfLanguages.map((option) => (
startIcon={<MenuBookRoundedIcon />} <MenuItem key={option.id} value={option.name} onClick={() => { handleChangeLan(option.id, option.name) }}>
onClick={() => HandleObjectTypePressed(item.id, item.name)} {option.name}
color={ </MenuItem>
objectTypeName === item.name ))}
? "primary" </TextField>
: "default"
} <li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
> <Chip
{item.name} label={objectType.name}
</Button> className={classes.chip}
</ListItem>
))}
</List>
) : null}
</>
<>
<TextField
style={{ width: "250px", marginBottom: "1em" }}
label="Digite as línguas"
onBlurCapture={OnChangeLanguageHandler}
type="search"
multiline
/> />
{listOfLanguages.length >= 1 ? ( </li>
<List <TextField
className={classes.root} id="standard-select-currency"
onScroll={HandleLanguageScroll} select
> label="Object type"
{listOfLanguages.map((item, index) => ( style={{ width: '250px', marginBottom: '1em' }}
<ListItem key={item.id} divider> >
<Button {listOfObjectTypes.map((option) => (
variant="text" <MenuItem key={option.id} value={option.name} onClick={() => { handleChangeObj(option.id, option.name) }}>
startIcon={<LanguageRoundedIcon />} {option.name}
onClick={() => HandleLanguagePressed(item.id)} </MenuItem>
color={ ))}
languagesID[item.id] === item.id </TextField>
? "primary"
: "default"
}
>
{item.name}
</Button>
</ListItem>
))}
</List>
) : null}
</>
</form> </form>
</TabPanel> </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