|
|
import React, { Component } from "react";
|
|
|
import { Modal, Checkbox, Input, Spin, Select, Divider, Icon } from "antd";
|
|
|
import axios from 'axios'
|
|
|
import ModalWrapper from "../../common/ModalWrapper"
|
|
|
import InfiniteScroll from 'react-infinite-scroller';
|
|
|
import { ROLE_TEACHER_NUM, ROLE_ASSISTANT_NUM } from '../common'
|
|
|
import { ConditionToolTip, ActionBtn } from 'educoder'
|
|
|
import NoneData from '../../coursesPublic/NoneData'
|
|
|
import AddGraduationGroupModal from './AddGraduationGroupModal'
|
|
|
import SchoolSelect from '../../coursesPublic/form/SchoolSelect'
|
|
|
|
|
|
const Option = Select.Option;
|
|
|
const pageCount = 15;
|
|
|
let timeout, currentValue
|
|
|
class AddTeacherModal extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
school_names: [],
|
|
|
checkBoxValues: [],
|
|
|
candidates: [],
|
|
|
hasMore: true,
|
|
|
loading: false,
|
|
|
page: 1
|
|
|
}
|
|
|
}
|
|
|
fetchMemberList = (arg_page) => {
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
const page = arg_page || this.state.page;
|
|
|
const { name, school_name } = this.state
|
|
|
let url = `/courses/${courseId}/search_teacher_candidate.json`
|
|
|
this.setState({ loading: true })
|
|
|
axios.post(url, {
|
|
|
page: page,
|
|
|
limit: pageCount,
|
|
|
school_name: school_name || '',
|
|
|
name: name || ''
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (!response.data.candidates || response.data.candidates.length == 0) {
|
|
|
this.setState({
|
|
|
candidates: page == 1 ? response.data.candidates : this.state.candidates,
|
|
|
page,
|
|
|
loading: false,
|
|
|
hasMore: false,
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({
|
|
|
candidates: page == 1 ? response.data.candidates : this.state.candidates.concat(response.data.candidates),
|
|
|
page,
|
|
|
loading: false,
|
|
|
hasMore: response.data.candidates.length == pageCount
|
|
|
})
|
|
|
}
|
|
|
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
|
}
|
|
|
onAddGraduationGroupOk = () => {
|
|
|
this.fetchOptions()
|
|
|
}
|
|
|
fetchOptions = () => {
|
|
|
// add_teacher_popup
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
|
|
|
let url = `/courses/${courseId}/add_teacher_popup.json`
|
|
|
|
|
|
axios.get(url, {
|
|
|
})
|
|
|
.then((response) => {
|
|
|
|
|
|
if (response.data.school_name) {
|
|
|
this.setState({
|
|
|
school_name: response.data.school_name
|
|
|
}, () => this.fetchMemberList())
|
|
|
} else {
|
|
|
this.fetchMemberList()
|
|
|
|
|
|
}
|
|
|
if (response.data.graduation_groups) {
|
|
|
this.setState({
|
|
|
graduation_groups: response.data.graduation_groups
|
|
|
})
|
|
|
}
|
|
|
if (response.data.course_groups) {
|
|
|
this.setState({
|
|
|
course_groups: response.data.course_groups
|
|
|
})
|
|
|
}
|
|
|
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
setVisible = (visible) => {
|
|
|
if (visible) {
|
|
|
this.fetchOptions()
|
|
|
}
|
|
|
this.refs.modalWrapper.setVisible(visible)
|
|
|
if (visible == false) {
|
|
|
this.setState({
|
|
|
checkBoxValues: []
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onSendOk = () => {
|
|
|
const courseId = this.props.match.params.coursesId
|
|
|
const url = `/courses/${courseId}/add_teacher.json`
|
|
|
if (this.state.checkBoxValues.length == 0) {
|
|
|
this.props.showNotification('请先在下面列表中选择要添加教师的成员')
|
|
|
return
|
|
|
}
|
|
|
const params = {
|
|
|
"user_list": this.state.checkBoxValues.map (item => { return { 'user_id': item }}) ,
|
|
|
// "graduation_group_id": "2",
|
|
|
// "course_group_id": "820",
|
|
|
"role": this.props.isTeacher ? ROLE_TEACHER_NUM : ROLE_ASSISTANT_NUM
|
|
|
}
|
|
|
const { graduationGroup, courseGroup } = this.state
|
|
|
if (graduationGroup) {
|
|
|
params.graduation_group_id = graduationGroup
|
|
|
}
|
|
|
if (courseGroup) {
|
|
|
params.course_group_id = courseGroup
|
|
|
}
|
|
|
axios.post(url, params)
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 0) {
|
|
|
this.setVisible(false)
|
|
|
this.props.showNotification('添加成功')
|
|
|
this.props.addTeacherSuccess && this.props.addTeacherSuccess(params)
|
|
|
}
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
onOk = () => {
|
|
|
this.onSendOk()
|
|
|
}
|
|
|
|
|
|
onCheckBoxChange = (checkBoxValues) => {
|
|
|
this.setState({
|
|
|
checkBoxValues: checkBoxValues
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleInfiniteOnLoad = () => {
|
|
|
this.fetchMemberList(this.state.page + 1)
|
|
|
}
|
|
|
|
|
|
onSearch = () => {
|
|
|
this.fetchMemberList(1)
|
|
|
}
|
|
|
handleGradationGroupChange = (value) => {
|
|
|
this.setState({
|
|
|
graduationGroup: value
|
|
|
})
|
|
|
}
|
|
|
handleCourseGroupChange = (value) => {
|
|
|
this.setState({
|
|
|
courseGroup: value
|
|
|
})
|
|
|
}
|
|
|
onOrgNameChange = (value) => {
|
|
|
// console.log('school_name: ', value)
|
|
|
this.setState({ school_name: value })
|
|
|
}
|
|
|
|
|
|
hasGraduationModule = () => {
|
|
|
const { course_modules } = this.props;
|
|
|
const result = course_modules && course_modules.filter( item => {
|
|
|
return item.type == 'graduation'
|
|
|
})
|
|
|
return result && result.length > 0
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
const { candidates, checkBoxValues, loading, hasMore, name, school_name, school_names
|
|
|
, graduationGroup, graduation_groups, courseGroup, course_groups } = this.state
|
|
|
const { moduleName } = this.props
|
|
|
|
|
|
return(
|
|
|
<ModalWrapper
|
|
|
ref="modalWrapper"
|
|
|
width="700px"
|
|
|
title={`添加${moduleName}`}
|
|
|
{...this.props }
|
|
|
onOk={this.onOk}
|
|
|
className="addTeacherModal courseForm"
|
|
|
>
|
|
|
<AddGraduationGroupModal ref="addGraduationGroupModal"
|
|
|
{...this.props} onOk={this.onAddGraduationGroupOk}
|
|
|
></AddGraduationGroupModal>
|
|
|
<style>
|
|
|
{`
|
|
|
.demo-loading-container {
|
|
|
position: absolute;
|
|
|
bottom: 210px;
|
|
|
width: 82%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.df {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
margin: 12px 0;
|
|
|
}
|
|
|
.firstLabel {
|
|
|
flex: 0 0 60px;
|
|
|
}
|
|
|
.df span.label {
|
|
|
margin-right: 8px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.df .ant-input-affix-wrapper {
|
|
|
width: 32%;
|
|
|
}
|
|
|
|
|
|
.addTeacherModal label.task-hide {
|
|
|
width: 100%;
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
<div className="df">
|
|
|
<span className="firstLabel label" style={{ flex: '0 0 40px' }}>姓名:</span>
|
|
|
<Input allowClear placeholder="请输入真实姓名" value={name} onChange={(e) => {this.setState({name: e.target.value})}}
|
|
|
style={{ width: '200px', marginRight: '18px' }}>
|
|
|
</Input>
|
|
|
<span className="label" style={{ minWidth: '36px', flex: '0 0 40px' }}>单位:</span>
|
|
|
<SchoolSelect
|
|
|
value={school_name}
|
|
|
onChange={this.onOrgNameChange}
|
|
|
></SchoolSelect>
|
|
|
{/* <Select allowClear placeholder="请输入单位名称" value={school_name}
|
|
|
style={{ width: '200px'}} showArrow={false}
|
|
|
filterOption={false} onSearch={this.onOrgNameSearch}
|
|
|
onChange={this.onOrgNameChange} notFoundContent={null}
|
|
|
showSearch defaultActiveFirstOption={false}
|
|
|
>
|
|
|
{ school_names && school_names.map((item, index) => {
|
|
|
return <Option value={item} key={index}>{item}</Option>
|
|
|
})}
|
|
|
</Select> */}
|
|
|
<a className="task-btn task-btn-orange" onClick={() => this.fetchMemberList(1)}
|
|
|
style={{ height: '30px', lineHeight: '30px', marginLeft: '10px', width: '70px'}}
|
|
|
>搜索</a>
|
|
|
</div>
|
|
|
{/* graduation_groups && !!graduation_groups.length */}
|
|
|
|
|
|
|
|
|
<p className="clearfix mb2" style={{ margin: '0px 15px 6px' }}>
|
|
|
<Checkbox className="fl" style={{ visibility: 'hidden' }} ></Checkbox>
|
|
|
<span className="fl with25"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{'姓名'}</label></span>
|
|
|
<span className="fl with25"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{'昵称'}</label></span>
|
|
|
<span className="fl with35"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{'单位'}</label></span>
|
|
|
<span className="fl with10"><label className="task-hide fl" style={{"maxWidth":"48px"}}>{''}</label></span>
|
|
|
|
|
|
</p>
|
|
|
{ loading || candidates.length ? <div>
|
|
|
{/* https://github.com/CassetteRocks/react-infinite-scroller/issues/70 */}
|
|
|
<div className="edu-back-skyblue padding10-15" style={{"height":"300px", overflowY: "scroll", overflowAnchor: 'none' }}>
|
|
|
<InfiniteScroll
|
|
|
threshold={10}
|
|
|
initialLoad={false}
|
|
|
pageStart={0}
|
|
|
loadMore={this.handleInfiniteOnLoad}
|
|
|
hasMore={!loading && hasMore}
|
|
|
useWindow={false}
|
|
|
>
|
|
|
<Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckBoxChange} value={checkBoxValues}>
|
|
|
|
|
|
{ candidates && candidates.map( candidate => {
|
|
|
return (
|
|
|
<p className="clearfix mb7" key={candidate.id}>
|
|
|
<Checkbox className="fl" value={candidate.id} key={candidate.id}></Checkbox>
|
|
|
<span className="fl with25">
|
|
|
{/* "color":"#4c4c4c" */}
|
|
|
<ConditionToolTip title={candidate.name} condition={candidate.name && candidate.name.length > 12 }>
|
|
|
<label className="task-hide fl" style={{"maxWidth":"208px;"}}
|
|
|
>
|
|
|
<a href={`/users/${candidate.login}`} target="_blank"
|
|
|
style={{}}
|
|
|
>{candidate.name}</a>
|
|
|
</label>
|
|
|
</ConditionToolTip>
|
|
|
</span>
|
|
|
<span className="fl with25">
|
|
|
<ConditionToolTip title={candidate.nickname} condition={candidate.nickname && candidate.nickname.length > 12 }>
|
|
|
<label className="task-hide fl" style={{"maxWidth":"208px;"}}>{candidate.nickname || ' '}</label>
|
|
|
</ConditionToolTip>
|
|
|
</span>
|
|
|
<span className="fl with35"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{candidate.school_name}</label></span>
|
|
|
<span className="fl with10"><label className="task-hide fl" style={{"maxWidth":"48px;"}}>{candidate.added ? '已加入' : ''}</label></span>
|
|
|
|
|
|
</p>
|
|
|
)
|
|
|
}) }
|
|
|
</Checkbox.Group>
|
|
|
{loading && hasMore && (
|
|
|
<div className="demo-loading-container">
|
|
|
<Spin />
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
</InfiniteScroll>
|
|
|
</div>
|
|
|
</div> : <NoneData></NoneData> }
|
|
|
<div className="df">
|
|
|
{ this.hasGraduationModule() && <div className="df" style={{ marginTop: '24px' }} >
|
|
|
<span className="firstLabel label" style={{ flex: '0 0 96px' }}>添加至答辩组:</span>
|
|
|
<Select style={{ width: 218, marginRight: '18px' }} onChange={this.handleGradationGroupChange} value={graduationGroup}
|
|
|
dropdownRender={menu => (
|
|
|
<div>
|
|
|
{menu}
|
|
|
<Divider style={{ margin: '4px 0' }} />
|
|
|
{/* <ActionBtn
|
|
|
onMouseDown={() => { debugger; this.refs['addGraduationGroupModal'].setVisible(true) }}
|
|
|
>添加答辩组</ActionBtn> */}
|
|
|
<div style={{ padding: '8px', cursor: 'pointer' }}
|
|
|
onMouseDown={() => { debugger; this.refs['addGraduationGroupModal'].setVisible(true) }}
|
|
|
>
|
|
|
<Icon type="plus" /> 添加答辩组
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
>
|
|
|
{ graduation_groups && graduation_groups.map((item) => {
|
|
|
return <Option value={item.id}>{item.name}</Option>
|
|
|
})}
|
|
|
</Select>
|
|
|
</div>}
|
|
|
|
|
|
{ course_groups && !!course_groups.length && <div className="df">
|
|
|
<span className="firstLabel label">管理权限:</span>
|
|
|
<Select style={{ width: 218 }} onChange={this.handleCourseGroupChange} value={courseGroup}>
|
|
|
{ course_groups && course_groups.map((item) => {
|
|
|
return <Option value={item.id}>{item.name}</Option>
|
|
|
})}
|
|
|
</Select>
|
|
|
</div> }
|
|
|
</div>
|
|
|
</ModalWrapper>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default AddTeacherModal;
|
