|
|
|
@ -1,12 +1,21 @@
|
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
|
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Breadcrumb,Button } from "antd";
|
|
|
|
|
import { WordsBtn,on, off, trigger } from 'educoder';
|
|
|
|
|
import { DragDropContext,Draggable, Droppable} from 'react-beautiful-dnd';
|
|
|
|
|
import axios from'axios';
|
|
|
|
|
import Modals from '../../modals/Modals';
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import '../css/members.css';
|
|
|
|
|
import '../css/busyWork.css';
|
|
|
|
|
import NoneData from "../coursesPublic/NoneData";
|
|
|
|
|
|
|
|
|
|
const reorder = (list, startIndex, endIndex) => {
|
|
|
|
|
const result = Array.from(list);
|
|
|
|
|
const [removed] = result.splice(startIndex, 1);
|
|
|
|
|
result.splice(endIndex, 0, removed);
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class Ordering extends Component{
|
|
|
|
|
constructor(props){
|
|
|
|
|
super(props);
|
|
|
|
@ -43,26 +52,65 @@ class Ordering extends Component{
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
|
|
|
|
|
|
// if(prevProps.match.params.main_id != this.props.match.params.main_id){
|
|
|
|
|
// if(this.props.match.params.main_id!=undefined){
|
|
|
|
|
// this.seactall();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// if(prevProps.match.params.category_id != this.props.match.params.category_id){
|
|
|
|
|
// if(this.props.match.params.category_id!=undefined){
|
|
|
|
|
// this.seactall(parseInt(this.props.match.params.category_id))
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
onDragEnd=(result)=>{
|
|
|
|
|
|
|
|
|
|
if(result.destination!=null&&result.destination!=undefined){
|
|
|
|
|
let {datas}=this.state;
|
|
|
|
|
if (!result.destination) {
|
|
|
|
|
console.log('dropped outside the list')
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (result.destination.index === result.source.index) {
|
|
|
|
|
console.log('the same')
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpin:true
|
|
|
|
|
})
|
|
|
|
|
const shixuns_list = reorder(
|
|
|
|
|
datas,
|
|
|
|
|
result.source.index,
|
|
|
|
|
result.destination.index
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
let newtask_ids=[]
|
|
|
|
|
shixuns_list.map((item,key)=>{
|
|
|
|
|
newtask_ids.push(item.task_id)
|
|
|
|
|
})
|
|
|
|
|
this.updatalist(shixuns_list,newtask_ids)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updatalist=(shixuns_list,newtask_ids)=>{
|
|
|
|
|
|
|
|
|
|
let coursesId=this.props.match.params.coursesId;
|
|
|
|
|
let ordering_type=this.props.match.params.ordering_type;
|
|
|
|
|
let url=`/courses/${coursesId}/update_task_position.json`;
|
|
|
|
|
axios.post(url,{
|
|
|
|
|
container_type:ordering_type,
|
|
|
|
|
task_ids:newtask_ids
|
|
|
|
|
}).then((result)=>{
|
|
|
|
|
if(result.data.status===0){
|
|
|
|
|
this.props.showNotification(result.data.message);
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpin:false,
|
|
|
|
|
datas:shixuns_list
|
|
|
|
|
});
|
|
|
|
|
}else{
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpin:false,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}).catch((error)=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpin:false,
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render(){
|
|
|
|
|
let {
|
|
|
|
@ -115,36 +163,56 @@ class Ordering extends Component{
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Spin size="large" spinning={this.state.isSpin}>
|
|
|
|
|
|
|
|
|
|
<div className={"educontent mb50 mt40"}>
|
|
|
|
|
{datas===undefined?"": <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={this.state.checkBoxValues}>
|
|
|
|
|
{ datas.map((item, index) => {
|
|
|
|
|
return (
|
|
|
|
|
<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"} key={index}>
|
|
|
|
|
<div className={"clearfix"}>
|
|
|
|
|
<div className={"item-body"}>
|
|
|
|
|
<div className={"clearfix ds pr orderSection"}>
|
|
|
|
|
<p title={item.task_name} className="font-16 color-dark maxwidth865s orderfonttop"
|
|
|
|
|
href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
|
|
|
|
|
<p className={"color-grey panel-lightgrey mt16 "}>
|
|
|
|
|
<span className="topicswidth400">
|
|
|
|
|
<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
|
|
|
|
|
<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<DragDropContext onDragEnd={this.onDragEnd} >
|
|
|
|
|
<Droppable droppableId={this.props.match.params.ordering_type}>
|
|
|
|
|
{(provided, snapshot) => (
|
|
|
|
|
<div
|
|
|
|
|
ref={provided.innerRef}
|
|
|
|
|
{...provided.droppableProps}
|
|
|
|
|
className={"educontent mb50 mt40 droppableul"}
|
|
|
|
|
>
|
|
|
|
|
{datas===undefined?"":
|
|
|
|
|
datas.map((item, index) => {
|
|
|
|
|
return (
|
|
|
|
|
<Draggable
|
|
|
|
|
key={item.task_id}
|
|
|
|
|
draggableId={item.task_id}
|
|
|
|
|
index={index}
|
|
|
|
|
className={"TabsWarps"}
|
|
|
|
|
>
|
|
|
|
|
{(provided, snapshot) => (
|
|
|
|
|
<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"}
|
|
|
|
|
key={index}
|
|
|
|
|
ref={provided.innerRef}
|
|
|
|
|
{...provided.draggableProps}
|
|
|
|
|
{...provided.dragHandleProps}
|
|
|
|
|
>
|
|
|
|
|
<div className={"clearfix"}>
|
|
|
|
|
<div className={"item-body"}>
|
|
|
|
|
<div className={"clearfix ds pr orderSection"}>
|
|
|
|
|
<p title={item.task_name} className="font-16 color-dark maxwidth865s orderfonttop"
|
|
|
|
|
href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
|
|
|
|
|
<p className={"color-grey panel-lightgrey mt16 "}>
|
|
|
|
|
<span className="topicswidth400">
|
|
|
|
|
<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
|
|
|
|
|
<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</Draggable>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</Checkbox.Group>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
</Droppable>
|
|
|
|
|
</DragDropContext>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|