add notes

public/react/src/modules/developer/studentStudy/index.scss

@@ -1,6 +1,52 @@
 @import '../split_pane_resizer.scss';
 .split-pane-area{
   height: calc(100vh - 65px);
+
+  .right_pane_code_wrap{
+    position: relative;
+
+    .editor_nodte_area,
+    .student_notes{
+      position: absolute;
+      z-index: 100;
+    }
+    .student_notes{
+      right: 0px;
+      top: 50%;
+      width: 36px;
+      height: 36px;
+      margin-top: -18px;
+      border-radius: 50%;
+      background: #5091FF;
+      color: #fff;
+      font-size: 18px;
+      text-align: center;
+      transform: translateX(18px);
+      cursor: pointer;
+      opacity: 0.5;
+      transition: all .3s;
+      &:hover{
+        opacity: 1;
+        transform: translateX(-10px);
+      }
+    }
+    .editor_nodte_area{
+      right: 10px;
+      top: 50%;
+      width: 450px;
+      height: 200px;
+      margin-top: -100px;
+      background: #fff;
+      border-radius: 5px;
+      padding: 14px 10px 0;
+      // opacity: ;
+      transform: translateX(500px);
+      transition: all .3s;
+      &.active{
+        transform: translateX(0px);
+      }
+    }
+  }
 }
 
 .right_pane_code_wrap{

public/react/src/modules/developer/studentStudy/rightpane/index.js

@@ -4,14 +4,19 @@
  * @Github: 
  * @Date: 2019-11-27 14:59:51
  * @LastEditors  : tangjiang
- * @LastEditTime: 2019-12-20 14:01:57
+ * @LastEditTime : 2019-12-26 17:56:51
  */
 import React, { useState, useEffect } from 'react';
 import {connect} from 'react-redux';
 import MyMonacoEditor from '../../components/myMonacoEditor';
 import ControlSetting from '../../components/controlSetting';
 import actions from '../../../../redux/actions';
-
+// import QuillForEditor from '../../../../common/quillForEditor';
+// import TextArea from 'antd/lib/input/TextArea';
+import { Input, Form, Button } from 'antd';
+// import FormItem from 'antd/lib/form/FormItem';
+const { TextArea } = Input;
+const FormItem = Form.Item;
 const RightPane = (props) => {
   
   const {
@@ -20,6 +25,7 @@ const RightPane = (props) => {
     submitUserCode,
     input,
     hack,
+    loading,
     notice,
     updateCode,
     hadCodeUpdate,
@@ -27,12 +33,15 @@ const RightPane = (props) => {
     updateNotice,
     saveUserInputCode,
     restoreInitialCode,
-    saveOpacityType,
-    saveUserCodeForInterval
+    // saveOpacityType,
+    saveUserCodeForInterval,
+    addNotes,
+    changeLoadingState
   } = props;
 
   const [editorCode, setEditorCode] = useState('');
-
+  const [noteClazz, setNoteClazz] = useState('editor_nodte_area');
+  const [noteCount] = useState(5000);
   let initFlag = true;
   useEffect(() => {
     if (editor_code) {
@@ -86,6 +95,28 @@ const RightPane = (props) => {
     updateNotice && updateNotice();
   };
 
+  const handleClickNote = () => {
+    setNoteClazz('editor_nodte_area active');
+  }
+
+  const handleCancelNote = () => {
+    props.form.resetFields();
+    setNoteClazz('editor_nodte_area');
+  }
+ 
+  const handleSubmitNote = () => {
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        changeLoadingState(true);
+        addNotes(identifier, values, function () {
+          setNoteClazz('editor_nodte_area');
+          props.form.resetFields();
+        });
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
   return (
     <div className={'right_pane_code_wrap'}>
       <MyMonacoEditor
@@ -98,6 +129,40 @@ const RightPane = (props) => {
         onUpdateNotice={handleUpdateNotice}
         onRestoreInitialCode={handleRestoreInitialCode}
       />
+
+      <span 
+        className="iconfont icon-biji student_notes"
+        onClick={handleClickNote}
+      ></span>
+      
+      {/* <div className="student_notes">
+        <TextArea rows={5} />
+      </div> */}
+      <div className={noteClazz}>
+        <Form>
+          <FormItem>
+            {
+              getFieldDecorator('notes',{
+                rules: [
+                  { required: true, message: '笔记不能为空' },
+                  { max: noteCount, message: `笔记最大字数为${noteCount}` }
+                ],
+                initialValue: (hack && hack.notes) || ''
+              })(<TextArea
+                max={noteCount}
+                placeholder="请输入笔记内容"
+                rows="5"
+              />)
+            }
+            
+          </FormItem>
+          <FormItem style={{ textAlign: 'right' }}>
+            <Button loading={loading} style={{ marginRight: '10px' }} onClick={handleCancelNote}>取消</Button>
+            <Button type="primary" onClick={handleSubmitNote}>提交</Button>
+          </FormItem>
+        </Form>
+      </div>
+      
       <ControlSetting 
         identifier={identifier}
         inputValue={input}
@@ -117,10 +182,14 @@ const mapStateToProps = (state) => {
     notice,
     hadCodeUpdate
   } = state.ojForUserReducer;
+  const {
+    loading
+  } = state.commonReducer;
   // const { language, code } = hack;
   return {
     hack,
     notice,
+    loading,
     hadCodeUpdate,
     editor_code,
     input: userTestInput,
@@ -141,9 +210,12 @@ const mapDispatchToProps = (dispatch) => ({
   // 恢复初始代码
   restoreInitialCode: (identifier, msg) => dispatch(actions.restoreInitialCode(identifier, msg)),
   // saveOpacityType: (type) => dispatch(actions.saveOpacityType(type))
+  // 添加笔记
+  addNotes: (identifier, params, cb) => dispatch(actions.addNotes(identifier, params, cb)),
+  changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag))
 });
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(RightPane);
+)(Form.create()(RightPane));

public/react/src/redux/actions/actionTypes.js

@@ -56,7 +56,8 @@ const types = {
   CLEAR_OJ_FOR_USER_REDUCER: 'CLEAR_OJ_FOR_USER_REDUCER', // 退出时清空 ojForUserReducer保存内容
   ADD_OJ_LIKE_COUNT: 'ADD_OJ_LIKE_COUNT', // 增加点赞数
   CHANGE_RECORD_PAGINATION_PAGE: 'CHANGE_RECORD_PAGINATION_PAGE', // 改变提交分页
-  UPDATE_OJ_FOR_USER_COMMENT_COUNT: 'UPDATE_OJ_FOR_USER_COMMENT_COUNT', // 更新 hack 中的评论数
+  UPDATE_OJ_FOR_USER_COMMENT_COUNT: 'UPDATE_OJ_FOR_USER_COMMENT_COUNT', // 更新 hack 中的评论数,
+  UPDATE_NOTE_CONTENT: 'UPDATE_NOTE_CONTENT', // 更新笔记内容
   /*** jupyter  */
   GET_JUPYTER_DATA_SETS: 'GET_JUPYTER_DATA_SETS', // jupyter 数据集
   GET_JUPYTER_TPI_URL: 'GET_JUPYTER_TPI_URL', // 获取 jupyter url

public/react/src/redux/actions/index.js

@@ -50,7 +50,8 @@ import {
   saveEditorCodeForDetail,
   saveOpacityType,
   clearOjForUserReducer,
-  changeRecordPagination
+  changeRecordPagination,
+  addNotes
   // isUpdateCodeCtx
 } from './ojForUser';
 
@@ -137,6 +138,7 @@ export default {
   saveOpacityType,
   clearOjForUserReducer,
   changeRecordPagination,
+  addNotes,
   // jupyter
   getJupyterTpiDataSet,
   getJupyterTpiUrl,

public/react/src/redux/actions/ojForUser.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 13:42:11
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-25 14:27:58
+ * @LastEditTime : 2019-12-26 18:32:08
  */
 import types from "./actionTypes";
 import { Base64 } from 'js-base64';
@@ -17,7 +17,8 @@ import {
   fetchUserCommitRecordDetail,
   fetchUpdateCode,
   fetchUserCodeSubmit,
-  fetchRestoreInitialCode
+  fetchRestoreInitialCode,
+  fetchAddNotes
 } from "../../services/ojService";
 import { notification } from "antd";
 
@@ -488,3 +489,33 @@ export const changeRecordPagination = (page) => {
   }
 }
 // 更新通知状态
+
+// 添加笔记
+export const addNotes = (identifier, params, cb) => {
+  return (dispatch) => {
+    fetchAddNotes(identifier, params).then(res => {
+      // console.log('添加笔记成功===>>', res);
+      dispatch({
+        type: types.LOADING_STATUS,
+        payload: false
+      });
+      const { data } = res;
+      if (data.status === 0) {
+        cb && cb();
+        notification.success({
+          message: '提示',
+          description: '添加笔记成功'
+        });
+        dispatch({
+          type: types.UPDATE_NOTE_CONTENT,
+          payload: params.notes
+        })
+      }
+    }).catch(() => {
+      dispatch({
+        type: types.LOADING_STATUS,
+        payload: false
+      });
+    })
+  }
+}

public/react/src/redux/reducers/ojForUserReducer.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-27 13:41:48
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-26 13:39:41
+ * @LastEditTime : 2019-12-26 18:34:56
  */
 import types from "../actions/actionTypes";
 import { Base64 } from 'js-base64';
@@ -218,6 +218,13 @@ const ojForUserReducer = (state = initialState, action) => {
         ...state,
         hack: Object.assign({}, state.hack, { comments_count: _comments_count })
       }
+    // 修改笔记内容
+    case types.UPDATE_NOTE_CONTENT:
+      const _hack1 = Object.assign({}, state.hack, {notes: action.payload });
+      return {
+        ...state,
+        hack: _hack1
+      }
     default:
       return state;
   }

public/react/src/services/ojService.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-20 10:55:38
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-25 14:27:30
+ * @LastEditTime : 2019-12-26 17:37:38
  */
 
 import axios from 'axios';
@@ -137,3 +137,9 @@ export async function fetchUploadImageUrl (id) {
   const url = `/attachments/${id}`;
   return axios.get(url);
 } 
+
+// 添加笔记
+export async function fetchAddNotes (identifier, params) {
+  const url = `/myproblems/${identifier}/add_notes.json`;
+  return axios.post(url, params);
+}