import React,{ Component } from "react"; import { Link } from "react-router-dom"; import axios from 'axios'; import {Checkbox,Modal,Input,Tooltip,notification,Popover} from 'antd'; import { DragDropContext,Draggable, Droppable} from 'react-beautiful-dnd'; import Modals from '../../modals/Modals'; import { on, off, trigger } from 'educoder'; import './MainLeftNav.css'; import MyEduChapterupdate from './MyEduChapterupdate'; const CheckboxGroup = Checkbox.Group; let navidtype=true; //a little function to help us with reordering the result const reorder = (list, startIndex, endIndex) => { // console.log(list) // console.log(startIndex) // console.log(endIndex) let newlist=list; const result = Array.from(newlist); const [removed] = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); return result; }; // const getItemStyle = (isDragging, draggableStyle) => ({ // // change background colour if dragging // background: isDragging?'#f1f1f1': '', // // styles we need to apply on draggables // ...draggableStyle, // }); class Coursesleftnav extends Component{ constructor(props){ super(props); this.state = { index:1, addGroup:true, navid:undefined, sandiantype:undefined, twosandiantype:undefined, addCheckboxGroup:[], Navmodalname:"", Navmodalnametype:false, Navmodaltypename:"", setnavid:"", NavmodalValue:"", ModalsType:false, Modalstopval:"", loadtype:false, selectnavid:false, newselectnavid:undefined, positiontype:undefined, toopvisible:false, toopvisibleindex:undefined, sandiantypes:undefined, antIcon:false, chapterupdate:false, } } // updataleftNav=()=>{ // // let id=this.props.match.params.coursesId; // let url ="/courses/"+id+"/left_banner.json" // axios.get(url).then((response) => { // if(response!=undefined){ // if(response.data&&response.data){ // this.setState({ // course_modules:response.data.course_modules, // hidden_modules:response.data.hidden_modules, // is_teacher:response.data.is_teacher, // }) // this.locationNav(response.data.course_modules) // } // } // // }) // } // locationNav=(list)=>{ // let filesId=this.props.match.params.Id; // let url=this.props.location.pathname; // var lists=list; // // // lists.forEach((item,index)=>{ // if(item.second_category!=undefined&&item.second_category.length!=0){ // item.second_category.forEach((iem,key)=>{ // if( parseInt(filesId)===iem.category_id||parseInt(filesId)===item.id){ // this.setState({ // indexs:index, // url:url // }) // } // }) // } // // if(this.props.match.url===item.category_url){ // this.props.coursesidsfun(item.id) // } // }) // // } // setcoursesidsfun=()=>{ // // let {course_modules} =this.props; // // let lists=course_modules; // // let url=this.props.location.pathname; // // lists.forEach((item,index)=>{ // // if(item.second_category!=undefined&&item.second_category.length!=0){ // // item.second_category.forEach((iem,key)=>{ // // if(url===iem.second_category_url){ // // this.props.coursesidsfun(item.id,"child") // // } // // }) // // } // // // // if(url===item.category_url){ // // this.props.coursesidsfun(item.id,"node") // // } // // }) // // this.props.updataleftNavfun() // } componentWillUnmount() { off('boardAdd', this.boardAddListener) off('boardRename', this.boardRenameListener) off('groupAdd', this.groupAddListener) off('groupRename', this.groupRenameListener) off('attachmentAddlog',this.attachmentAddlog) off('flieseditDir',this.flieseditDir) off('shixun_homeworkadd',this.addshixunchild) off('editshixunname',this.editshixunchild) off('editshixunmainname',this.editshixunmainname) } addshixunchild=(e, data)=>{ this.Navmodalnames(e,1,"shixun_homework",data) } editshixunchild=(e, data)=>{ this.Navmodalnames(e,4,"editSecondname",data.id,data.name) } editshixunmainname=(e, data)=>{ this.Navmodalnames(e,3,"editname",data.id,data.name) } boardAddListener = (e, data) => { this.Navmodalnames(e,6,"board", data) } boardRenameListener = (e, data) => { this.Navmodalnames(e,7,"editSecondname", data.category_id, data.category_name) } groupAddListener = (e, data) => { this.Navmodalnames(e,2,"course_group", data) } groupRenameListener = (e, data) => { this.Navmodalnames(e,5,"editSecondname", data.id, data.name) } attachmentAddlog=(e,data)=>{ this.Navmodalnames(e,1,"attachment",data) } flieseditDir=(e, data)=>{ this.Navmodalnames(e,4,"editSecondname",data.id,data.name) } componentDidMount() { this.setState({ url:this.props.match.url }) on('boardAdd', this.boardAddListener) on('boardRename', this.boardRenameListener) on('groupAdd', this.groupAddListener) on('groupRename', this.groupRenameListener) on('attachmentAddlog', this.attachmentAddlog) on('flieseditDir', this.flieseditDir) on('shixun_homeworkadd',this.addshixunchild) on('editshixunname',this.editshixunchild) on('editshixunmainname',this.editshixunmainname) // this.props.updataleftNavfun(); // this.props.getleftNavid && this.props.getleftNavid("shixun_homework"); // const position =parseInt(this.props.match.params.position); let courstype=this.props.match.url; courstype = courstype.split('/'); courstype=courstype[3]; // console.log(courstype) const query =this.props.location.search; // const type = query.split('?type='); let category_id; if(courstype==="board"){ category_id=parseInt(this.props.match.params.boardId); }else{ category_id=parseInt(this.props.match.params.category_id); } // console.log(category_id) if(query===""){ this.setState({ navid:0, positiontype:courstype, selectnavid:false, newselectnavid:parseInt(category_id), }) }else{ if(isNaN(category_id)){ this.setState({ positiontype:courstype, newselectnavid:parseInt(category_id), selectnavid:false, }) }else{ this.setState({ positiontype:courstype, newselectnavid:parseInt(category_id), selectnavid:false, }) } } if(navidtype===false){ navidtype=true } this.props.updataleftNavfun() } setnavid=(e,key,id,type,url)=>{ // this.props.getleftNavid && this.props.getleftNavid(key,type); // let {selectnavid,navid}=this.state; // // if(navidtype===true&&selectnavid===false){ // // if(navid===key){ // this.setState({ // navid:"", // selectnavid:false, // newselectnavid:id // }) // }else{ // this.setState({ // navid:key, // positiontype:type, // selectnavid:false, // newselectnavid:id // }) // } // }else{ // // console.log(navidtype) // // console.log(selectnavid) // this.setState({ // navid:"", // selectnavid:false, // newselectnavid:id // }) // } // // this.props.updataleftNavfun(); // this.props.history.replace( url ); // e.stopPropagation();//阻止冒泡 this.selectnavid(e,key,id,type,url) } selectnavid=(e,key,id,type,urls,index)=>{ let {url}=this.state; if(urls!=url){ this.props.updataleftNavfun(); this.props.history.replace(urls); }else{ if (key === this.props.indexs) { this.props.unlocationNavfun(undefined) } else { this.props.updataleftNavfun(); this.props.unlocationNavfun(key) this.props.history.replace(urls); } } this.setState({ selectnavid:true, newselectnavid:id, url:urls, indexs:index }) // this.props.history.replace(urls); e.stopPropagation();//阻止冒泡 } selectnavids=(e,key,id,type,urls,index)=>{ this.setState({ selectnavid:true, newselectnavid:id, url:urls, indexs:index }) this.props.updataleftNavfun(); this.props.history.replace(urls); } twosandianshow=(e,key,type)=>{ this.setState({ twosandiantype:key, toopvisible:false, toopvisibleindex:undefined, twosandiantypes:type }) e.stopPropagation();//阻止冒泡 } twosandianhide=(e,index,type)=>{ // console.log(index) this.setState({ twosandiantype:undefined, twosandiantypenum:undefined, toopvisible:true, toopvisibleindex:index, twosandiantypes:type }) e.stopPropagation();//阻止冒泡 } //置顶 editSetup=(e,id)=>{ e.stopPropagation();//阻止冒泡 navidtype=false this.setState({ navid:undefined, sandiantype:undefined, twosandiantype:undefined, }) let url="/course_modules/"+id+"/sticky_module.json" axios.get(url).then((result)=>{ navidtype=true this.props.updataleftNavfun(); }).catch((error)=>{ navidtype=true }) } //隐藏 edithiddens=(id)=>{ navidtype=false this.setState({ navid:undefined, sandiantype:undefined, twosandiantype:undefined, ModalsType:false }) let url="/course_modules/"+id+"/hidden_module.json" axios.get(url).then((result)=>{ navidtype=true this.props.updataleftNavfun(); console.log(this.props) let list=this.props.course_modules; for(var i=0; i{ navidtype=true }) } edithidden=(e,id)=>{ e.stopPropagation();//阻止冒泡 let {course_modules}=this.props; if(course_modules.length>1){ this.setState({ ModalsType:true, Modalstopval:"隐藏后将不再显示此模块，", ModalsBottomval:"后续可通过添加模块恢复显示", ModalSave:()=>this.edithiddens(id), }) }else{ this.setState({ ModalsType:true, Modalstopval:"您不能隐藏所有课堂模块，请至少保留", ModalsBottomval:"其中一个模块。", loadtype:true, ModalSave:()=>this.cannerNavmoda(), }) } } Navmodalnames=(e,id,type,setnavid,name)=>{ e.stopPropagation();//阻止冒泡 navidtype=false if(id===1||id===2||id===6){ this.setState({ Navmodalname:id===2?"新建分班":"添加目录", Navtitles:id===2?"分班名称":"目录名称", Navplaceholder:"请输入名称，最大限制60个字符", Navmodalnametype:true, Navmodaltypename:id, setnavid:setnavid, NavmodalValue:"" }) }else if(id===3||id===4||id===5||id===7){ this.setState({ Navmodalname:id===5?"分班重命名":"目录重命名", Navtitles:id===5?"分班名称":"目录名称", Navplaceholder:"请输入名称，最大限制60个字符", Navmodalnametype:true, Navmodaltypename:id, setnavid:setnavid, NavmodalValue:name }) } } cannerNavmoda=()=>{ this.setState({ Navmodalnametype:false, NavmodalValuetype:false, ModalsType:false }) navidtype=true } setNavmodalValue=(e)=>{ this.setState({ NavmodalValue:e.target.value }) } updasaveNavmoda=(message)=>{ this.props.updataleftNavfun(); // this.setState({ // ModalsType:true, // Modalstopval:message, // loadtype:true, // NavmodalValue:"" // }) navidtype=true } saveNavmodapost=(url,value)=>{ axios.post(url, {name:value}).then((result)=>{ if(result.data.status===0){ // window.location.reload() this.updasaveNavmoda() // notification.open({ message:"提示", description:result.data.message }); trigger('updateNavSuccess') } }).catch((error)=>{ console.log(error) }) } saveboardpost=(url,value)=>{ axios.put(url, {name:value}).then((result)=>{ if(result.data.status===0){ // window.location.reload() this.updasaveNavmoda() trigger('updateNavSuccess') // notification.open({ message:"提示", description:result.data.message }); } }).catch((error)=>{ console.log(error) }) } saveNavmoda=()=>{ let {Navmodaltypename,setnavid,NavmodalValue}=this.state; let id =setnavid; if(Navmodaltypename===5&&NavmodalValue==="未分班"||Navmodaltypename===2&&NavmodalValue==="未分班"){ this.setState({ NavmodalValuetype:true, NavmodalValues:"名称不能和未分班一样" }) return } if(NavmodalValue===""){ this.setState({ NavmodalValuetype:true, NavmodalValues:"名称不能为空" }) return }else if(NavmodalValue.length>60){ this.setState({ NavmodalValuetype:true, NavmodalValues:"名称不能超过60个字" }) return } if(Navmodaltypename===1){ let url="/course_modules/"+id+"/add_second_category.json" this.saveNavmodapost(url,NavmodalValue) } else if(Navmodaltypename===2){ let newid=this.props.match.params.coursesId; let url="/courses/"+newid+"/course_groups.json"; this.saveNavmodapost(url,NavmodalValue) }else if(Navmodaltypename===3){ let url="/course_modules/"+id+"/rename_module.json" this.saveNavmodapost(url,NavmodalValue) }else if(Navmodaltypename===4){ let url="/course_second_categories/"+id+"/rename_category.json"; this.saveNavmodapost(url,NavmodalValue) }else if(Navmodaltypename===5){ let url="/course_groups/"+id+"/rename_group.json"; this.saveNavmodapost(url,NavmodalValue) }else if(Navmodaltypename===6) { let newid=this.props.match.params.coursesId; let url = "/courses/"+newid+"/boards.json"; this.saveNavmodapost(url,NavmodalValue) }else if(Navmodaltypename===7) { let url = "/boards/"+id+".json"; this.saveboardpost(url,NavmodalValue) } this.setState({ Navmodalnametype:false }) } updatadeleteSecondary=(url)=>{ this.props.updataleftNavfun(); // this.setState({ // ModalsType:true, // Modalstopval:"删除成功", // loadtype:true, // }) // notification.open({ // message: "删除成功", // }); // this.props.history.replace(url); window.location.href = url; } deletenavchilds=(url,mainurl)=>{ this.setState({ antIcon:true }) axios.delete(url).then((result)=>{ if(result.data.status===0){ if(mainurl===undefined){ this.updatadeleteSecondary(result.data.right_url) }else{ this.updatadeleteSecondary(mainurl) } } }).catch((error)=>{ console.log(error) }) } deleteSecondary=(e,type,id,mainurl)=>{ e.stopPropagation();//阻止冒泡 if(type===1){ let url="/course_second_categories/"+id+".json" this.setState({ ModalsType:true, Modalstopval:"该目录下的内容将被移动到父目录,", ModalsBottomval:"是否确认删除?", ModalSave:()=>this.deletenavchilds(url), }) }else if(type===2){ let url="/course_groups/"+id+".json" this.setState({ ModalsType:true, Modalstopval:"该分班的学生将被移动到“未分班”,", ModalsBottomval:"是否确认删除?", ModalSave:()=>this.deletenavchilds(url), }) }else if(type===3){ let url="/boards/"+id+".json" this.setState({ ModalsType:true, Modalstopval:"该目录下的内容将被移动到父目录,", ModalsBottomval:"是否确认删除?", ModalSave:()=>this.deletenavchilds(url,mainurl), }) } } droppablepost=(url,list)=>{ axios.post(url,{position: list}).then((result)=>{ // this.updasaveNavmoda(result.data.message) this.updasaveNavmoda() // notification.open({ message:"提示", description:result.data.message }); }).catch((error)=>{ console.log(error) }) } onDragEnd=(result)=>{ // console.log(result) // let {course_modules}=this.props; // let newcourse_modules=course_modules; // let newid=this.props.match.params.coursesId; // let list=[]; // let positionlist=[]; // for(var i=0; i{ this.setState({ sandiantypes:undefined }) e.stopPropagation();//阻止冒泡 } showsandian=(e,key)=>{ this.setState({ sandiantypes:key }) e.stopPropagation();//阻止冒泡 } showsandians=(e,key,urls,num,id,type,index)=> { let {url}=this.state; if (key === this.props.indexs) { this.props.unlocationNavfun(undefined) this.props.history.replace(urls); } else { this.props.updataleftNavfun(); this.props.unlocationNavfun(key) this.props.history.replace(urls); } if(urls!=url){ this.props.updataleftNavfun(); this.props.history.replace(urls); } this.setState({ selectnavid:true, newselectnavid:id, url:urls, indexs:index }) } maincontent=(item,key)=>{ return (
{/*公告栏*/} {/*作业*/} {item.type==="shixun_homework"?
this.Navmodalnames(e,1,"shixun_homework",item.id)}>添加目录
:""} {/*资源*/} {item.type==="attachment"?
this.Navmodalnames(e,1,"attachment",item.id)}>添加目录
:""} {/*毕业设计*/} {/*{item.type==="graduation"?
this.Navmodalnames(1,"attachment",item.id)}>添加目录
:""}*/} {/*讨论区*/} {item.type==="board"?this.props.current_user&&this.props.current_user.course_is_end===true?"":
this.Navmodalnames(e,6,"board",item.main_id)}>添加目录
:""} {/*分班*/} {item.type==="course_group"?this.props.current_user&&this.props.current_user.course_is_end===true?"":
this.Navmodalnames(e,2,"course_group",item.id)}>添加分班
:""} {/*分班*/} {/*{item.type==="course_group"? :""}*/}
this.Navmodalnames(e,3,"editname",item.id,item.name)}>重命名
{/*online_learning*/} {/*{*/} {/* this.props.isClassManagement()===true?*/} {/* (*/} {/* item.type==="online_learning"?*/} {/*
this.Chapterediting(e,item.id,item.url)}>章节编辑
*/} {/* :""*/} {/* )*/} {/* :""}*/}
this.edithidden(e,item.id)}>隐藏
this.editSetup(e,item.id)}>置顶
) } content=(item,iem,index)=>{ let {twosandiantypes,twosandiantypenum}=this.state; return (item.type==="graduation"?"":
{/*作业/资源*/} {item.type==="shixun_homework"||item.type==="attachment"||item.type==="graduation"?
this.Navmodalnames(e,4,"editSecondname",iem.category_id,iem.category_name)}>重命名
:""} {item.type==="shixun_homework"||item.type==="attachment"?
this.deleteSecondary(e,1,iem.category_id)}>删除
:""} {/*分班*/} {item.type==="course_group"?
this.Navmodalnames(e,5,"editSecondname",iem.category_id,iem.category_name)}>重命名
:""} {item.type==="course_group"?
this.deleteSecondary(e,2,iem.category_id)}>删除
:""} {/*讨论区*/} {item.type==="board"?
this.Navmodalnames(e,7,"editSecondname",iem.category_id,iem.category_name)}>重命名
:""} {item.type==="board"?
this.deleteSecondary(e,3,iem.category_id,item.category_url)}>删除
:""}
) }; //章节编辑 Chapterediting=(e,id,url)=> { e.stopPropagation();//阻止冒泡 console.log(url); console.log(id); //页面刷新 this.setState({ chapterupdate:true, }) // this.props.history.replace( url ); // this.props.comyslElearning(true); }; setchapterupdatefalse =()=>{ this.setState({ chapterupdate:false, }) } render(){ let { twosandiantype, Navmodalname, Navmodalnametype, NavmodalValue, ModalsType, Modalstopval, ModalsBottomval, ModalSave, loadtype, twosandiantypes, }=this.state; let {course_modules,hidden_modules,is_teacher} =this.props; // console.log(this.props.location.pathname) // // console.log(item.category_url) // console.log(this.props.location.pathname) // console.log("778"); // console.log("CoursesLeftNav"); // console.log(course_modules); return( ) } } export default Coursesleftnav;