m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add pageination

Browse Source
chromesetting
tangjiang 5 years ago
parent f69620564b
commit 50fec5b18f
9 changed files with 129 additions and 60 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/modules/developer/components/userInfo/index.js
Unescape View File

@ -14,7 +14,7 @@ function UserInfo (props) {
const {image_url, name} = props.userInfo;
return (
<div className={'avator_nicker'}>
<img alt="用户头像" className={'student_img'} src={getImageUrl(`images/${image_url}` || 'images/educoder/headNavLogo.png?1526520218')} />
<img style={{ display: image_url ? 'inline-block' : 'none'}} alt="用户头像" className={'student_img'} src={getImageUrl(`images/${image_url}` || 'images/educoder/headNavLogo.png?1526520218')} />
<span className={'student_nicker'}>
{name || ''}
</span>

41
public/react/src/modules/tpm/jupyter/index.js
Unescape View File

@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-12-11 08:35:23
* @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 20:19:48
* @LastEditTime: 2019-12-13 15:25:50
*/
import './index.scss';
import React, { useEffect, useState } from 'react';
@ -26,16 +26,20 @@ function JupyterTPI (props) {
},
url,
loading, // 保存按钮状态
total,
pagination,
dataSets, // 数据集
jupyter_info,
getJupyterInfo,
syncJupyterCode,
jupyter_tpi_url_state,
// getJupyterTpiDataSet,
getJupyterTpiDataSet,
getJupyterTpiUrl,
saveJupyterTpi,
changeLoadingState,
changeGetJupyterUrlState
changeGetJupyterUrlState,
jupyter_identifier,
changeCurrentPage
} = props;
const {identifier} = params;
@ -107,6 +111,7 @@ function JupyterTPI (props) {
const handleClickQuitTpi = () => {
// console.log(jupyterInfo);
const { identifier } = jupyterInfo;
if (!identifier) return;
props.history.push(`/shixuns/${identifier}/challenges`);
}
@ -125,6 +130,14 @@ function JupyterTPI (props) {
saveJupyterTpi();
}
// 分页信息改变时
const handlePageChange = (current) => {
// 改变当前页
changeCurrentPage(current);
// 分页查找数据
getJupyterTpiDataSet(jupyter_identifier);
}
return (
<div className="jupyter_area">
<div className="jupyter_header">
@ -152,7 +165,12 @@ function JupyterTPI (props) {
<div className="jupyter_ctx">
<SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
<div className={'split-pane-left'}>
<LeftPane dataSets={dataSets} />
<LeftPane
dataSets={dataSets}
total={total}
pagination={pagination}
onPageChange={handlePageChange}
/>
</div>
<SplitPane split="vertical" defaultSize="100%" allowResize={false}>
<RightPane
@ -176,7 +194,10 @@ const mapStateToProps = (state) => {
jupyter_info,
jupyter_tpi_url,
jupyter_data_set,
jupyter_tpi_url_state
jupyter_tpi_url_state,
jupyter_data_set_count,
jupyter_pagination,
jupyter_identifier
} = state.jupyterReducer;
const { loading } = state.commonReducer;
return {
@ -184,7 +205,10 @@ const mapStateToProps = (state) => {
jupyter_info,
url: jupyter_tpi_url,
dataSets: jupyter_data_set,
jupyter_tpi_url_state
jupyter_tpi_url_state,
total: jupyter_data_set_count,
pagination: jupyter_pagination,
jupyter_identifier
};
}
@ -193,10 +217,11 @@ const mapDispatchToProps = (dispatch) => ({
getJupyterInfo: (identifier) => dispatch(actions.getJupyterInfo(identifier)),
// 重置代码
syncJupyterCode: (identifier, msg) => dispatch(actions.syncJupyterCode(identifier, msg)),
// getJupyterTpiDataSet: (identifier) => dispatch(actions.getJupyterTpiDataSet(identifier)),
getJupyterTpiDataSet: (identifier, current) => dispatch(actions.getJupyterTpiDataSet(identifier, current)),
getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)),
saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()),
changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag))
changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current))
});
export default connect(

60
public/react/src/modules/tpm/jupyter/leftPane/index.js
Unescape View File

@ -4,17 +4,22 @@
* @Github:
* @Date: 2019-12-12 10:34:03
* @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 20:18:46
* @LastEditTime: 2019-12-13 15:31:35
*/
import './index.scss';
import React, { useState, useEffect } from 'react';
import {Icon, Empty} from 'antd';
import {Icon, Empty, Pagination, Tooltip } from 'antd';
import MyIcon from '../../../../common/components/MyIcon';
function LeftPane (props) {
// 获取数据集
const { dataSets = [] } = props;
const {
dataSets = [],
total,
pagination,
onPageChange
} = props;
const emptyCtx = (
<div className="jupyter_empty">
@ -31,8 +36,10 @@ function LeftPane (props) {
const oList = dataSets.map((item, i) => {
return (
<li className="jupyter_item" key={`key_${i}`}>
<Icon type="file-text" className="jupyter_icon"/>
<span className="jupyter_name">{item.title}</span>
<Tooltip placement="right" title={'文字提示信息'}>
<Icon type="file-text" className="jupyter_icon"/>
<span className="jupyter_name">{item.title}</span>
</Tooltip>
</li>
);
});
@ -46,37 +53,30 @@ function LeftPane (props) {
setRenderCtx(oUl);
}
}, [props]);
// 渲染数据集
// const renderList = () => {
// // 空数据
// if (dataSets.length === 0) {
// return <div className="jupyter_empty">
// <Empty />
// </div>
// } else {
// // 渲染列表
// const oList = dataSets.map((item, i) => {
// return (
// <li className="jupyter_item" key={`key_${i}`}>
// <Icon type="file-text" className="jupyter_icon"/>
// <span className="jupyter_name">{item.title}</span>
// </li>
// );
// });
// return (
// <ul className="jupyter_data_list">
// { oList }
// </ul>
// );
// }
// }
// 分页处理
const handleChangePage = (page) => {
// console.log(page, pageSize);
// setCurrent(page);
onPageChange && onPageChange(page);
}
return (
<div className="jupyter_data_sets_area">
<h2 className="jupyter_h2_title">
<MyIcon type="iconwenti" className="jupyter_data_icon"/> 数据集
{/* <span className="iconfont icon-java jupyter_data_icon"></span>数据集 */}
</h2>
{ renderCtx }
<div className='jupyter_pagination'>
<Pagination
simple
current={pagination.page}
pageSize={pagination.limit}
total={total}
onChange={handleChangePage}
/>
</div>
</div>
)
}

19
public/react/src/modules/tpm/jupyter/leftPane/index.scss
Unescape View File

@ -1,10 +1,16 @@
.jupyter_data_sets_area{
height: 100%;
background: #fff;
.jupyter_h2_title{
height: 44px;
line-height: 44px;
background-color: #EEEEEE;
// background-color: #EEEEEE;
background: #fff;
padding: 0 30px;
font-size: 16px;
// box-size: border-box;
box-sizing: border-box;
border-bottom: 1px solid rgba(238,238,238,1);
.jupyter_data_icon{
// color: #7286ff;
color: #1890ff;
@ -18,7 +24,7 @@
.jupyter_data_list,
.jupyter_empty{
height: calc(100vh - 104px);
height: calc(100vh - 160px);
overflow-y: auto;
}
@ -54,4 +60,13 @@
justify-content: center;
width: 100%;
}
.jupyter_pagination{
display: flex;
justify-content: center;
align-items: center;
height: 56px;
box-sizing: border-box;
border-top: 1px solid rgba(238,238,238,1);
}
}

1
public/react/src/redux/actions/actionTypes.js
Unescape View File

@ -57,6 +57,7 @@ const types = {
SAVE_JUPYTER_INFO: 'SAVE_JUPYTER_INFO', // 保存 jupyter 信息
CHANGE_JUPYTER_URL_STATE: 'CHANGE_JUPYTER_URL_STATE', // 获取url返回的状态值
SAVE_JUPYTER_TPI: 'SAVE_JUPYTER_TPI', // 保存 jupyter tpi
CHANGE_JUPYTER_CURRENT_PAGE: 'CHANGE_JUPYTER_CURRENT_PAGE'
}
export default types;

6
public/react/src/redux/actions/index.js
Unescape View File

@ -68,7 +68,8 @@ import {
getJupyterInfo,
syncJupyterCode,
changeGetJupyterUrlState,
saveJupyterTpi
saveJupyterTpi,
changeCurrentPage
} from './jupyter';
export default {
@ -119,6 +120,7 @@ export default {
getJupyterInfo,
syncJupyterCode,
changeGetJupyterUrlState,
saveJupyterTpi
saveJupyterTpi,
changeCurrentPage
// isUpdateCodeCtx
}

35
public/react/src/redux/actions/jupyter.js
Unescape View File

@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-12-12 09:01:30
* @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 17:58:38
* @LastEditTime: 2019-12-13 15:27:13
*/
import types from "./actionTypes";
import { message } from 'antd';
@ -18,20 +18,22 @@ import {
// 获取 jupyter 相关信息
export const getJupyterInfo = (id) => {
return (dispatch) => {
return (dispatch, getState) => {
const { jupyter_pagination } = getState().jupyterReducer;
console.log(jupyter_pagination);
fetchJupyterInfo(id).then(res => {
if (res.data.status === 401) return;
if (res.status === 200) {
const { data } = res;
console.log(data);
if (data.status === 0) {
dispatch({
type: types.SAVE_JUPYTER_INFO,
payload: data
});
const { identifier, myshixun_identifier } = data;
dispatch(saveJupyterIdentifier(identifier));
// 调用获取数据集接口
dispatch(getJupyterTpiDataSet(identifier));
dispatch(getJupyterTpiDataSet(identifier, jupyter_pagination));
// 调用获取url接口
dispatch(getJupyterTpiUrl({identifier: myshixun_identifier}));
}
@ -40,16 +42,21 @@ export const getJupyterInfo = (id) => {
}
}
// 获取 jupyter tpi 数据集
export const getJupyterTpiDataSet = (identifier) => {
return (dispatch) => {
fetchJupyterTpiDataSet(identifier).then(res => {
export const getJupyterTpiDataSet = (identifier, params) => {
return (dispatch, getState) => {
if (!params) {
params = getState().jupyterReducer.jupyter_pagination;
}
fetchJupyterTpiDataSet(identifier, params).then(res => {
if (res.data.status === 401) return; // 用户未登录
console.log('数据集:', res);
if (res.status === 200) {
const {data_sets} = res.data;
const {data_sets, data_sets_count} = res.data;
dispatch({
type: types.GET_JUPYTER_DATA_SETS,
payload: data_sets
payload: {
data_sets,
data_sets_count
}
});
}
});
@ -59,7 +66,6 @@ export const getJupyterTpiDataSet = (identifier) => {
export const getJupyterTpiUrl = (obj) => {
return (dispatch, getState) => {
const {jupyter_info} = getState().jupyterReducer;
console.log(obj.identifier, jupyter_info.myshixun_identifier);
if (!obj.identifier && !jupyter_info.myshixun_identifier) return;
const id = obj.identifier || jupyter_info.myshixun_identifier;
fetchJupyterTpiUrl({identifier: id}).then(res => {
@ -136,4 +142,11 @@ export const saveJupyterTpi = () => {
});
});
}
}
// 改变当前页数
export const changeCurrentPage = (current) => {
return {
type: types.CHANGE_JUPYTER_CURRENT_PAGE,
payload: current
}
}

19
public/react/src/redux/reducers/jupyterReducer.js
Unescape View File

@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-12-12 09:01:39
* @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 17:23:54
* @LastEditTime: 2019-12-13 15:28:45
*/
import types from "../actions/actionTypes";
@ -14,15 +14,22 @@ const initState = {
jupyter_data_set: [],
jupyter_identifier: '',
jupyter_tpi_url_state: -1, // 获取 url 状态值: 0 成功, 其它 失败
jupyter_tpi_code: '' // 端口号
jupyter_tpi_code: '', // 端口号
jupyter_data_set_count: 1, // 数据集总数
jupyter_pagination: {
page: 1,
limit: 20 // 默认加载20条
}
};
const JupyterReducer = (state = initState, action) => {
switch (action.type) {
case types.GET_JUPYTER_DATA_SETS:
const { data_sets, data_sets_count } = action.payload;
return {
...state,
jupyter_data_set: action.payload
jupyter_data_set: data_sets,
jupyter_data_set_count: data_sets_count
}
case types.GET_JUPYTER_TPI_URL:
const {url, status, port} = action.payload;
@ -33,6 +40,7 @@ const JupyterReducer = (state = initState, action) => {
jupyter_tpi_code: port
}
case types.SAVE_JUPYTER_IDENTIFIER:
console.log('保存的jupyter_identifier', action.payload);
return {
...state,
jupyter_identifier: action.payload
@ -47,6 +55,11 @@ const JupyterReducer = (state = initState, action) => {
...state,
jupyter_tpi_url_state: action.payload
}
case types.CHANGE_JUPYTER_CURRENT_PAGE:
return {
...state,
jupyter_pagination: Object.assign({}, state.jupyter_pagination, { page: action.payload })
}
default:
return {
...state

6
public/react/src/services/jupyterServer.js
Unescape View File

@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-12-12 09:07:07
* @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 17:46:17
* @LastEditTime: 2019-12-13 14:30:51
*/
import axios from 'axios';
@ -14,9 +14,9 @@ export async function fetchJupyterInfo (identifier) {
return axios.get(url);
}
// 获取数据集
export async function fetchJupyterTpiDataSet (identifier) {
export async function fetchJupyterTpiDataSet (identifier, params) {
const url = `/shixuns/${identifier}/jupyter_data_sets.json`;
return axios.get(url);
return axios.get(url, { params });
}
// 获取 tpi url
export async function fetchJupyterTpiUrl (params) {

Write Preview
Loading…
Cancel
Save