educoder/public/react/src/modules/courses/busyWork/NewWork.js

import React,{ Component } from "react";
import { Input, InputNumber, Form, Button, Checkbox, Upload, Icon, message, Modal } from "antd";
import axios from 'axios'
import '../css/busyWork.css'
import '../css/Courses.css'
import { WordsBtn, getUrl, ConditionToolTip } from 'educoder'

import CBreadcrumb from '../common/CBreadcrumb'
import NewWorkForm from './NewWorkForm'

const $ = window.$
const MAX_TITLE_LENGTH = 60;
class NewWork extends Component{
  constructor(props){
    super(props);
    this.contentMdRef = React.createRef();
    this.answerMdRef = React.createRef();
    
    this.state={
    }
  }
  componentDidMount () {
    let {typeId, coursesId, pageType, workId}=this.props.match.params;           
    const isEdit = pageType === "edit"
    this.isEdit = isEdit;
    if (isEdit) {
      this.fetchWork(workId)
    } else {
      this.fetchCourseData(coursesId)
    }
  }
  fetchCourseData = (courseId) => {
    const isGroup = this.props.isGroup()
    const url = `/courses/${courseId}/homework_commons/new.json?type=${isGroup ? 3 : 1}`
    axios.get(url, {
    })
    .then((response) => {
      if (response.data.course_name) {
        const data = response.data;
        this.setState({
          course_id: data.course_id,
          course_name: data.course_name,
          category: data.category,
        })
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  fetchWork = (workId) => {
    const url = `/homework_commons/${workId}/edit.json`
    axios.get(url, {
    })
    .then((response) => {
      if (response.data.name) {
        const data = response.data;
        data.isEdit = true;
        this.setState({ 
          category: data.category,
          course_id: data.course_id,
          course_name: data.course_name,
        })
        this.newWorkFormRef.initValue(data);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  
  doEdit = (params) => {
    const workId = this.props.match.params.workId
    const newUrl = `/homework_commons/${workId}.json`

    const isGroup = this.props.isGroup()
    axios.put(newUrl, params)
    .then((response) => {
      if (response.data.status == 0) {
        this.props.showNotification('保存成功')
        this.props.toWorkListPage(this.props.match.params, workId)
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  doNew = (params) => {
    const courseId = this.props.match.params.coursesId ;    
    const newUrl = `/courses/${courseId}/homework_commons.json`

    axios.post(newUrl, params)
    .then((response) => {
      if (response.data.status == 0) {
        this.props.showNotification('保存成功')
        this.props.toWorkListPage(this.props.match.params, response.data.homework_id)
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  

  render(){
    let {typeId,coursesId,pageType}=this.props.match.params;
    
    const isGroup = this.props.isGroup()
    const moduleName = !isGroup? "普通作业":"分组作业";
    const moduleEngName = this.props.getModuleName()
    let{
      category
    }=this.state
    const { current_user } = this.props

    const courseId = this.props.match.params.coursesId ;    
    const isEdit = this.isEdit;
    
    return(
      <div className="newMain">
        <div className="educontent mt20 mb50">

          <CBreadcrumb items={[
            { to: current_user && current_user.first_category_url, name: this.state.course_name},
            { to: `/courses/${courseId}/${moduleEngName}/${category && category.category_id ? category.category_id : ''}`
              , name: category && category.category_name },
            { name: `${ this.isEdit ? '编辑' : '新建'}` }
          ]}></CBreadcrumb>
          
          <p className="clearfix mt20 mb20">
            <span className="fl font-24 color-grey-3">{this.isEdit ?"编辑":"新建"}{ moduleName }</span>
            {/* history.goBack() 
                this.props.toListPage(this.props.match.params, category.category_id)}
            */}
            <a href="javascript:void(0)" className="color-grey-6 fr font-16 mr2" 
                onClick={() => this.props.history.goBack()}>
              返回
            </a>
          </p>
          <div>
            <NewWorkForm wrappedComponentRef={(ref) => {this.newWorkFormRef = ref}}
              {...this.props}
              onSave={this.onSave}
              doNew={this.doNew}
              doEdit={this.doEdit}
            ></NewWorkForm>
          </div>
        </div>
      </div>
    )
  }
}
export default NewWork;