You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/courses/coursesPublic/NewShixunModel.js

699 lines
21 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React,{Component} from 'react';
import { Modal,Checkbox,Select,Input,Tooltip,Spin,Icon,Drawer,Dropdown,Menu,Breadcrumb,Pagination,Button,notification} from "antd";
import axios from'axios';
import NoneData from "../coursesPublic/NoneData";
import './Newshixunmodel.css';
const Search = Input.Search;
class NewShixunModel extends Component{
constructor(props){
super(props)
this.state={
shixun_list:undefined,
shixuns_count:undefined,
Grouplist:[],
allGrouplist:[{page:1,list:[]}],
page:1,
type:'all',
status:'all',
keyword:undefined,
order:'desc',
diff:0,
limit:15,
sort:"myshixuns_count"
}
}
componentDidMount() {
let{page,type,keyword,order,diff,limit,status,sort}=this.state;
if(this.props.type==='shixuns'){
this.getdatalist(page,type,status,keyword,order,diff,limit)
}else{
this.getdatalist(page,type,undefined,keyword,order,undefined,limit,undefined,sort);
}
}
getdatalist=(page,type,newstatus,keyword,order,diff,limit,pagetype,sort)=>{
this.setState({
isspinning:true
})
let status=this.props.statustype===undefined?newstatus:'published';
let url;
if(this.props.type==='shixuns'){
url="/shixun_lists.json";
}else{
url="/subject_lists.json";
}
axios.get(url,{params:{
page,
type,
status,
keyword,
order,
diff,
limit,
sort
}}).then((response) => {
if(response.data){
if(pagetype===undefined){
this.setState({
shixun_list:response.data.shixun_list===undefined?response.data.subject_list:response.data.shixun_list,
shixuns_count:response.data.shixuns_count===undefined?response.data.subjects_count:response.data.shixuns_count,
Grouplist:[],
isspinning:false
})
}else if(pagetype==="pagetype"){
this.setState({
shixun_list:response.data.shixun_list===undefined?response.data.subject_list:response.data.shixun_list,
shixuns_count:response.data.shixuns_count===undefined?response.data.subjects_count:response.data.shixuns_count,
isspinning:false
})
}
}
}).catch((error) => {
this.setState({
isspinning:false
})
})
}
DropdownClick=(diff)=>{
this.setState({
diff:diff
})
let{page,type,status,keyword,order,limit}=this.state;
this.getdatalist(page,type,status,keyword,order,diff,limit)
}
ItsCourse=(item)=>{
return <Menu>
{item.map((list,key)=>{
return(
<Menu.Item key={key} id={list.id}>
<a target="_blank" href={`/paths/${list.id}`} className={"newshixun500"}>{list.name}</a>
</Menu.Item>
)
})}
</Menu>
}
getGrouplist=(Grouplist)=>{
let {page,allGrouplist}=this.state;
let newallGrouplist=allGrouplist;
var a=newallGrouplist.find((value,index,arr)=>{
return value.page==page
});
if(a!=undefined){
newallGrouplist.map((item,key)=>{
if(item.page===page){
item.list=Grouplist
}
})
}
let newGrouplist=[];
newallGrouplist.map((item,key)=>{
item.list.map((items,ke)=>{
newGrouplist.push(items)
})
})
this.setState({
Grouplist: newGrouplist,
allGrouplist:newallGrouplist
})
}
PaginationCourse=(pageNumber)=>{
let {allGrouplist}=this.state;
let newallGrouplist=allGrouplist;
var v=newallGrouplist.find((value,index,arr)=>{
return value.page==pageNumber
});
if(v===undefined){
newallGrouplist.push({page:pageNumber,list:[]})
}
let{type,status,keyword,order,diff,limit,sort}=this.state;
if(this.props.type==='shixuns'){
this.getdatalist(pageNumber,type,status,keyword,order,diff,limit,"pagetype")
}else{
this.getdatalist(pageNumber,type,undefined,keyword,order,undefined,limit,"pagetype",sort);
}
this.setState({
page:pageNumber,
allGrouplist:newallGrouplist
})
}
belongto=(value)=>{
this.setState({
type:value,
keyword:undefined,
page:1
})
let{status,order,diff,limit,sort}=this.state;
if(this.props.type==='shixuns'){
this.getdatalist(1,value,status,undefined,order,diff,limit)
}else{
this.getdatalist(1,value,undefined,undefined,order,undefined,limit,undefined,sort)
}
}
updatedlist=(order)=>{
if(order==="desc"){
this.setState({
order:"asc"
})
let{type,page,status,keyword,diff,limit}=this.state;
this.getdatalist(page,type,status,keyword,"asc",diff,limit)
}else{
this.setState({
order:"desc"
})
let{type,page,status,keyword,diff,limit}=this.state;
this.getdatalist(page,type,status,keyword,"desc",diff,limit)
}
}
setdatafunsval=(e)=>{
this.setState({
keyword:e.target.value
})
}
setdatafuns=(value)=>{
this.setState({
keyword:value,
type:undefined,
page:1,
status:'all',
order:'desc',
diff:0,
limit:15,
})
this.getdatalist(1,undefined,'all',value,'desc',0,15)
}
showNotification = (description, message = "提示", icon) => {
const data = {
message,
description
}
if (icon) {
data.icon = icon;
}
notification.open(data);
}
savecouseShixunModal=()=>{
this.setState({
hometypepvisible:true
})
let {coursesId}=this.props;
let{Grouplist}=this.state;
if(Grouplist.length===0){
this.setState({
hometypepvisible:false
})
this.showNotification(this.props.type==='shixuns'?"请先选择实训":"请先选择课程")
return
}
if (this.props.chooseShixun) {
if(Grouplist.length>1){
this.setState({
hometypepvisible:false
})
this.showNotification("试卷选择的实训数不能大于1")
return
}
this.props.chooseShixun(Grouplist)
this.setState({
hometypepvisible:false
})
return;
}
if (this.props.pathShixun) {
this.setState({
hometypepvisible:false
})
this.props.pathShixun(Grouplist)
return;
}
if(this.props.type==='shixuns'){
let url="/courses/"+coursesId+"/homework_commons/create_shixun_homework.json";
axios.post(url, {
category_id:this.props.category_id===null||this.props.category_id===undefined?undefined:parseInt(this.props.category_id),
shixun_ids:Grouplist,
}
).then((response) => {
if(response.data.status===-1){
// this.props.showNotification(response.data.message)
}else{
// this.props.courseshomeworkstart(response.data.category_id,response.data.homework_ids)
this.showNotification("操作成功")
this.props.homeworkupdatalists(this.props.Coursename,this.props.page,this.props.order);
this.props.hideNewShixunModelType()
this.props.updataleftNavfun()
}
this.setState({
hometypepvisible:false
})
// category_id: 3
// homework_ids: (5) [9171, 9172, 9173, 9174, 9175]
}).catch((error) => {
console.log(error)
this.setState({
hometypepvisible:false
})
})
}else{
let url="/courses/"+coursesId+"/homework_commons/create_subject_homework.json";
axios.post(url, {
category_id:this.props.category_id===null||this.props.category_id===undefined?undefined:parseInt(this.props.category_id),
subject_ids:Grouplist,
}
).then((response) => {
if(response.data.status===-1){
// this.props.showNotification(response.data.message)
}else{
// this.props.courseshomeworkstart(response.data.category_id,response.data.homework_ids)
this.showNotification("操作成功")
this.props.homeworkupdatalists(this.props.Coursename,this.props.page,this.props.order);
this.props.hideNewShixunModelType()
this.props.updataleftNavfun()
}
this.setState({
hometypepvisible:false
})
// category_id: 3
// homework_ids: (5) [9171, 9172, 9173, 9174, 9175]
}).catch((error) => {
console.log(error)
this.setState({
hometypepvisible:false
})
})
}
}
poststatus=(status)=>{
this.setState({
status:status
})
let{page,type,keyword,order,diff,limit}=this.state;
this.getdatalist(page,type,status,keyword,order,diff,limit)
}
updatepathlist=(sorts,orders)=>{
let{page,type,keyword,order,diff,limit,status,sort}=this.state;
let seartorders;
if(sort===sorts){
if(orders==="desc"){
this.setState({
sort:sorts,
order:"asc"
})
seartorders="asc"
}else{
this.setState({
sort:sorts,
order:"desc"
})
seartorders="desc"
}
}else{
this.setState({
sort:sorts,
order:"desc"
})
seartorders=orders
}
this.getdatalist(page,type,undefined,keyword,seartorders,undefined,limit,undefined,sorts)
}
render() {
let {diff,Grouplist,status,shixun_list,shixuns_count,page,type,order,sort}=this.state;
// let {visible,patheditarry}=this.props;
// console.log(Grouplist)
// console.log(allGrouplist)
const statusmenus=(
<Menu className="menus">
<Menu.Item>
<a className={status==="all"?"color-blue":""} onClick={()=>this.poststatus("all")}>
所有
</a>
</Menu.Item>
<Menu.Item >
<a className={status==="published"?"color-blue":""} onClick={()=>this.poststatus("published")} >
已发布
</a>
</Menu.Item>
<Menu.Item>
<a className={status==="unpublished"?"color-blue":""} onClick={()=>this.poststatus("unpublished")}>
未发布
</a>
</Menu.Item>
</Menu>
);
const menus = (
<Menu className="menus">
<Menu.Item>
<a className={diff===0?"color-blue":""} onClick={()=>this.DropdownClick(0)}>
所有
</a>
</Menu.Item>
<Menu.Item >
<a className={diff===1?"color-blue":""} onClick={()=>this.DropdownClick(1)} >
初级
</a>
</Menu.Item>
<Menu.Item>
<a className={diff===2?"color-blue":""} onClick={()=>this.DropdownClick(2)}>
中级
</a>
</Menu.Item>
<Menu.Item>
<a className={diff===3?"color-blue":""} onClick={()=>this.DropdownClick(3)}>
高级
</a>
</Menu.Item>
<Menu.Item>
<a className={diff===4?"color-blue":""} onClick={()=>this.DropdownClick(4)}>
顶级
</a>
</Menu.Item>
</Menu>
);
console.log(shixun_list)
return(
<div>
<style>
{
`body{ overflow: hidden !important; }
.ant-drawer-content{ overflow:auto !important; background: #f5f5f5; }
.yslbottomsj{position: absolute;bottom: -8px;}
.ant-drawer-close{
font-size:24px !important;
}
.ant-drawer-body {
padding:15px 24px 24px 0px;
}
.ant-dropdown {
z-index:11000
}
`
}
</style>
<Drawer
placement="bottom"
closable={true}
destroyOnClose={true}
onClose={()=>this.props.hideNewShixunModelType()}
visible={this.props.type==='shixuns'?this.props.NewShixunModelType:this.props.shixunpath}
height={'100%'}
>
<Spin spinning={this.state.isspinning}>
<div className={"clearfix educontent pr mb60shixun"}>
<div className={"square-list clearfix"}>
<div className="newshixunheadersear">
<div style={{height:"53px"}}></div>
<style>
{
`
.ant-input, .ant-input .ant-input-suffix{
background-color: #fff !important;
}
.packinput .ant-input{
border: 1px solid rgba(217,217,217,1) !important;
}
`
}
</style>
<Search
style={{ width: "780px"}}
className="packinput"
placeholder={this.props.type==='shixuns'?"实训信息 / 院校名称 / 创建者":"课程名称 / 院校名称 / 创建者"}
value={this.state.keyword}
enterButton={<span>搜索</span>}
onInput={(e)=>this.setdatafunsval(e)}
onSearch={ (value)=>this.setdatafuns(value)} />
</div>
<div className="clearfix font-12 mt30">
<div className="font-12 ml5 fl">
<span className="fl color-grey-9 mr20">已选 <span className={"color-blue"}>{Grouplist.length}</span> {this.props.type==='shixuns'?'':''}</span>
<span className="fl color-grey-9 mr20"> <span className={"color-blue"}>{shixuns_count===undefined?"":shixuns_count}</span> {this.props.type==='shixuns'?'':''}</span>
{this.props.type==='shixuns'?"":<span className="fl color-grey-9 pointer mr30">
<a className={" color-grey-6"} onClick={()=>this.updatepathlist("shixuns_count",order)}>实训数</a>
<sapn className="relativef ml5 " >
<i className={order==="asc"&&sort==="shixuns_count"?"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9 color-blue":"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9"}></i>
<i className={order==="desc"&&sort==="shixuns_count"?"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9 color-blue":"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9"}></i>
</sapn>
</span>}
{this.props.type==='shixuns'?"":<span className="fl color-grey-9 pointer mr30">
<a className={" color-grey-6"} onClick={()=>this.updatepathlist("myshixuns_count",order)}>学习人数</a>
<sapn className="relativef ml5 " >
<i className={order==="asc"&&sort==="myshixuns_count"?"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9 color-blue":"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9"}></i>
<i className={order==="desc"&&sort==="myshixuns_count"?"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9 color-blue":"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9"}></i>
</sapn>
</span>}
{this.props.type==='shixuns'?<span className="fl color-grey-9 pointer mr30">
<a className={" color-grey-6"} onClick={()=>this.updatedlist(order)}>学习人数</a>
<sapn className="relativef ml5 " >
<i className={order==="asc"?"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9 color-blue":"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9"}></i>
<i className={order==="desc"?"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9 color-blue":"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9"}></i>
</sapn>
</span>:""}
{this.props.type==='shixuns'?this.props.statustype===undefined?<Dropdown overlay={statusmenus}>
<a className="ant-dropdown-link color-grey-6 mr20">
{status==='all'?"发布状态":status==='published'?"已发布":status==="unpublished"?"未发布":""}<Icon type="down" className={"color-grey-6"}/>
</a>
</Dropdown>:"":""}
{this.props.type==='shixuns'? <Dropdown overlay={menus}>
<a className="ant-dropdown-link color-grey-6">
{diff===0?"难度":diff===1?"初级":diff===2?"中级":diff===3?"高级":diff===4?"顶级":""}<Icon type="down" className={"color-grey-6"}/>
</a>
</Dropdown>:""}
</div>
<div className="font-12 alltopiscright ml25 fr">
{/*<span className={"fr pointer color-grey-3"} onClick={()=>this.props.hideNewShixunModelType()}>返回</span>*/}
<span className={type==="mine"?"fr topcsactive pointer color-grey-3 color-blue":"fr pointer color-grey-3"} onClick={()=>this.belongto("mine")}>我的{this.props.type==='shixuns'?'实训':"课程"}</span>
<span className={type==="all"?"fr mr30 topcsactive pointer color-grey-3 color-blue":"fr mr30 pointer color-grey-3"} onClick={()=>this.belongto("all")}>全部{this.props.type==='shixuns'?'实训':"课程"}</span>
</div>
</div>
<Checkbox.Group onChange={this.getGrouplist} value={Grouplist} >
{shixun_list===undefined?"":shixun_list.length===0?"":shixun_list.map((item,key)=>{
return(
<div className="mt10 edu-back-white pd20 relativef newshixunlist" key={key}>
<div className="clearfix">
<div className="item-body">
<div className="clearfix ds pr contentSection">
<Checkbox
value={item.id}
key={item.id}
className="fl task-hide edu-txt-left mt3"
name="shixun_homework[]"
></Checkbox>
{
this.props.type==='shixuns'?
<div className="myysljupyter fl ml15 mt3 intermediatecenter">
<p className="myysljupytertest">
Jupyter
</p>
</div>
:""
}
<a target="_blank" href={this.props.type==='shixuns'?`/shixuns/${item.identifier}/challenges`:`/paths/${item.id}`} className="ml15 fl font-16 color-dark maxwidth1100"
dangerouslySetInnerHTML={{__html: item.title}}
>
</a>
<div className="cl"></div>
<style>
{
`
.newradioStyles{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 42px;
}
`
}
</style>
{JSON.stringify(item.description) == "{}"?"":<div className="newshixunmodelmidfont newradioStyles" dangerouslySetInnerHTML={{__html: item.description}}>
</div>}
{item.challenge_names===undefined?"":item.challenge_names.length===0?"":<div className="newshixunmodelbotfont">
{item.challenge_names.map((item,key)=>{
return(
<span>{key+1}{item}</span>
)
})}
</div>}
<div className={"newshixunpd030"}>
<div className="xuxianpro"></div>
</div>
<div className="color-grey panel-lightgrey fl ml30">
<style>
{`
.ant-breadcrumb-separator{
color: #D7D7D7 !important;
}
.panel-lightgrey, .panel-lightgrey span{
color: #999 !important;
}
.ant-breadcrumb-link{
margin-right:10px !important;
}
.ant-breadcrumb-separator{
margin-right:20px !important;
}
`}
</style>
{this.props.type==='shixuns'?<Breadcrumb separator="|">
<Breadcrumb.Item>{item.author_name}</Breadcrumb.Item>
<Breadcrumb.Item>{item.author_school_name}</Breadcrumb.Item>
<Breadcrumb.Item>难度系数{item.level}</Breadcrumb.Item>
<Breadcrumb.Item>学习人数{item.study_count}</Breadcrumb.Item>
</Breadcrumb>:
<Breadcrumb separator="|">
<Breadcrumb.Item>{item.author_name}</Breadcrumb.Item>
<Breadcrumb.Item>{item.author_school_name}</Breadcrumb.Item>
<Breadcrumb.Item>学习人数{item.myshixuns_count}</Breadcrumb.Item>
<Breadcrumb.Item>章节{item.stage_count}</Breadcrumb.Item>
<Breadcrumb.Item>实训{item.shixuns_count}</Breadcrumb.Item>
</Breadcrumb>}
</div>
{item.subjects===undefined?"":item.subjects.length===0?"":<Dropdown overlay={()=>this.ItsCourse(item.subjects)}>
<a className="ant-dropdown-link fl ml30 newshixunfont12 color-blue" >
所属课程<Icon className={"color-blue"} type="down" />
</a>
</Dropdown>}
</div>
</div>
</div>
</div>
)})
}
</Checkbox.Group>
{shixun_list===undefined||shixuns_count===undefined?"":shixun_list.length===0||shixuns_count===0?"":shixuns_count>15?<div className={" edu-txt-center pd303010 newshixunmodels"}>
<Pagination
showQuickJumper
defaultCurrent={1}
pageSize={15}
total={shixuns_count===undefined?"":shixuns_count}
current={page}
onChange={this.PaginationCourse}
/>
</div>:""}
{
shixun_list===undefined?
<div className={"minhegiht300"}>
</div>
:shixun_list.length===0? <NoneData></NoneData>:""
}
</div>
</div>
<div className="clearfix bor-bottom-greyE edu-back-white orderingbox newshixunbottombtn"
>
{
shixun_list===undefined?"":shixun_list.length===0?"":<div className={" edu-txt-center padding13-30"}>
<Button className={"mr20 newshixunmode"} onClick={()=>this.props.hideNewShixunModelType()}>取消</Button>
<Button className={"newshixunmode mr40"} type="primary" onClick={()=>this.savecouseShixunModal()} loading={this.state.hometypepvisible}>确定</Button>
</div>}
</div>
</Spin>
</Drawer>
</div>
)
}
}
export default NewShixunModel;
// {JSON.stringify(item.content) == "{}"?<div className="newshixunmodelmidfont newradioStyles" title={item.description} dangerouslySetInnerHTML={{__html: item.description}}>
// </div>:<div className="newshixunmodelbotfont">
// {item.content.description === undefined || item.content.description===0?"":item.content.description.map((item,key)=>{
// return(
// <span dangerouslySetInnerHTML={{__html: item}}>{}</span>
// )
// })}
// </div>}
//
// {JSON.stringify(item.content) == "{}"?item.challenge_names.length===0?"":<div className="newshixunmodelbotfont">
// {item.challenge_names.map((item,key)=>{
// return(
// <span>第{key+1}关:{item}</span>
// )
// })}
// </div>:<div className="newshixunmodelbotfont">
// {item.content.challenge_names === undefined || item.content.challenge_names===0?"":item.content.challenge_names.map((item,key)=>{
// return(
// <span dangerouslySetInnerHTML={{__html: item}}>{}</span>
// )
// })}
// </div>}