forked from Gitlink/forgeplus-react
442 lines
12 KiB
JavaScript
442 lines
12 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Menu, Input, Spin, Pagination, Popover, Affix } from "antd";
|
|
import "../css/index.scss";
|
|
import "./list.css";
|
|
import ListItem from "./IndexItem";
|
|
import axios from "axios";
|
|
import img_new from "../Images/new.png";
|
|
import img_array from "../Images/array.png";
|
|
import banner_list from "../Images/banner_list.png";
|
|
|
|
const Search = Input.Search;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
projectsList: undefined,
|
|
page: 1,
|
|
limit: 15,
|
|
search: undefined,
|
|
sort: undefined,
|
|
total: 0,
|
|
isSpin: true,
|
|
project_type: undefined,
|
|
category_id: undefined,
|
|
language_id: undefined,
|
|
|
|
typeList: undefined,
|
|
categoryList: undefined,
|
|
languageSpin: false,
|
|
categorySPin: false,
|
|
menu_active_id: undefined,
|
|
};
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
const {
|
|
page,
|
|
limit,
|
|
search,
|
|
sort,
|
|
project_type,
|
|
category_id,
|
|
language_id,
|
|
} = this.state;
|
|
this.getListData(
|
|
page,
|
|
limit,
|
|
search,
|
|
sort,
|
|
project_type,
|
|
category_id,
|
|
language_id
|
|
);
|
|
|
|
this.getType();
|
|
|
|
this.getCategory();
|
|
};
|
|
|
|
// 获取列表
|
|
getListData = (
|
|
page,
|
|
limit,
|
|
search,
|
|
sort,
|
|
project_type,
|
|
category_id,
|
|
language_id
|
|
) => {
|
|
const { current_user } = this.props;
|
|
const url = `/projects.json`;
|
|
axios
|
|
.get(url, {
|
|
params: {
|
|
user_id: current_user && current_user.user_id,
|
|
page,
|
|
limit,
|
|
search,
|
|
sort_by: sort,
|
|
category_id,
|
|
language_id,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
projectsList: result.data.projects,
|
|
total: result.data.total_count,
|
|
isSpin: false,
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {});
|
|
};
|
|
|
|
// 获取类型
|
|
getType = () => {
|
|
this.setState({ languageSpin: true });
|
|
const url = `/projects/group_type_list.json`;
|
|
axios
|
|
.get(url)
|
|
.then((result) => {
|
|
if (result && result.data) {
|
|
this.setTypeList(result.data, undefined);
|
|
this.setState({ languageSpin: false });
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.setState({ languageSpin: false });
|
|
});
|
|
};
|
|
|
|
setTypeList = (list, active_type) => {
|
|
this.setState({
|
|
typeList: list.map((item, key) => {
|
|
return (
|
|
<li
|
|
key={key}
|
|
className={
|
|
active_type && parseInt(active_type) === parseInt(item.id)
|
|
? "active"
|
|
: ""
|
|
}
|
|
onClick={() => this.changeType(`${item.id}`, list)}
|
|
>
|
|
<p>
|
|
<span className="font-16">{item.name}</span>
|
|
<span className="color-blue">{item.projects_count}</span>
|
|
</p>
|
|
</li>
|
|
);
|
|
}),
|
|
});
|
|
};
|
|
|
|
// 切换类型
|
|
changeType = (type, list) => {
|
|
const { page, limit, sort, category_id, language_id } = this.state;
|
|
let new_language_id = type;
|
|
if (parseInt(language_id) === parseInt(new_language_id)) {
|
|
new_language_id = undefined;
|
|
}
|
|
this.setState({
|
|
isSpin: true,
|
|
language_id: new_language_id,
|
|
search: undefined,
|
|
});
|
|
this.setTypeList(list, new_language_id);
|
|
// const { page, limit, sort, category_id, language_id } = this.state;
|
|
this.getListData(
|
|
page,
|
|
limit,
|
|
undefined,
|
|
sort,
|
|
undefined,
|
|
category_id,
|
|
new_language_id
|
|
);
|
|
};
|
|
|
|
// 获取类型
|
|
getCategory = () => {
|
|
this.setState({ categorySpin: true });
|
|
const url = `/project_categories/group_list.json`;
|
|
|
|
axios
|
|
.get(url)
|
|
.then((result) => {
|
|
if (result && result.data) {
|
|
this.setCategoryList(result.data, undefined);
|
|
this.setState({ categorySpin: false });
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.setState({ categorySpin: false });
|
|
});
|
|
};
|
|
children_category = (childrens, list, active_id) => {
|
|
return (
|
|
<div className="category-popver-content">
|
|
{childrens.map((item, key) => {
|
|
return (
|
|
<div
|
|
key={key}
|
|
onClick={() => this.changeCategory(item.id, list, item.parent_id)}
|
|
className={
|
|
active_id && parseInt(active_id) === item.id
|
|
? "active category-popver"
|
|
: "category-popver"
|
|
}
|
|
>
|
|
{item.name}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
setCategoryList = (list, active_id, children_active_id = undefined) => {
|
|
this.setState({
|
|
categoryList: list.map((item, key) => {
|
|
return (
|
|
<li
|
|
key={key}
|
|
className={
|
|
active_id && parseInt(active_id) === item.id ? "active" : ""
|
|
}
|
|
>
|
|
{item.children && item.children.length > 0 ? (
|
|
<Popover
|
|
content={this.children_category(
|
|
item.children,
|
|
list,
|
|
children_active_id
|
|
)}
|
|
placement="right"
|
|
trigger="click"
|
|
>
|
|
<p>
|
|
<span className="font-16">{item.name}</span>
|
|
<i className="iconfont icon-youjiantou color-grey-9 font-12 ml5"></i>
|
|
{/* <span className="color-blue">{item.projects_count}</span> */}
|
|
</p>
|
|
</Popover>
|
|
) : (
|
|
<p onClick={() => this.changeCategory(`${item.id}`, list)}>
|
|
<span className="font-16">{item.name}</span>
|
|
<span></span>
|
|
{/* <span className="color-blue">{item.projects_count}</span> */}
|
|
</p>
|
|
)}
|
|
</li>
|
|
);
|
|
}),
|
|
});
|
|
};
|
|
|
|
changeCategory = (id, list, parent_id = undefined) => {
|
|
const { limit, sort, category_id, language_id } = this.state;
|
|
let new_category_id = id;
|
|
if (parseInt(category_id) === parseInt(new_category_id)) {
|
|
new_category_id = undefined;
|
|
}
|
|
this.setState({
|
|
category_id: new_category_id,
|
|
page: 1,
|
|
search: undefined,
|
|
menu_active_id: new_category_id,
|
|
});
|
|
let active_id = parent_id ? parent_id : new_category_id;
|
|
let children_active_id = parent_id ? id : undefined;
|
|
|
|
this.setCategoryList(list, active_id, children_active_id);
|
|
|
|
this.getListData(
|
|
1,
|
|
limit,
|
|
undefined,
|
|
sort,
|
|
undefined,
|
|
new_category_id,
|
|
language_id
|
|
);
|
|
};
|
|
|
|
// 排序
|
|
ChangeSoryBy = (e) => {
|
|
this.setState({
|
|
sort_by: e.key,
|
|
page: 1,
|
|
search: undefined,
|
|
isSpin: true,
|
|
});
|
|
const { limit, project_type, category_id } = this.state;
|
|
this.getListData(1, limit, undefined, e.key, project_type, category_id);
|
|
};
|
|
|
|
// 搜索
|
|
searchFun = (value) => {
|
|
this.setState({
|
|
page: 1,
|
|
search: value,
|
|
isSpin: true,
|
|
project_type: undefined,
|
|
sort: "updated_on",
|
|
});
|
|
const { limit, sort, category_id } = this.state;
|
|
this.getListData(1, limit, value, sort, undefined, category_id);
|
|
};
|
|
changeSearchValue = (e) => {
|
|
this.setState({
|
|
search: e.target.value,
|
|
});
|
|
};
|
|
// 翻页
|
|
ChangePage = (page) => {
|
|
this.setState({
|
|
page,
|
|
});
|
|
const { limit, search, sort, project_type, category_id } = this.state;
|
|
this.getListData(page, limit, search, sort, project_type, category_id);
|
|
};
|
|
|
|
render() {
|
|
const { current_user } = this.props;
|
|
const menu = (
|
|
<Menu onClick={this.ChangeSoryBy}>
|
|
<Menu.Item key="updated_on">更新时间排序</Menu.Item>
|
|
<Menu.Item key="created_on">创建时间排序</Menu.Item>
|
|
<Menu.Item key="forked_count">fork数据排序</Menu.Item>
|
|
<Menu.Item key="praises_count">点赞数量排序</Menu.Item>
|
|
</Menu>
|
|
);
|
|
const newItem = (
|
|
<Menu>
|
|
<Menu.Item key="created_mirror">
|
|
<Link to={`/projects/mirror/new`}>新建镜像项目</Link>
|
|
</Menu.Item>
|
|
<Menu.Item key="created_deposit">
|
|
<Link to={`/projects/deposit/new`}>新建托管项目</Link>
|
|
</Menu.Item>
|
|
</Menu>
|
|
);
|
|
|
|
const {
|
|
projectsList,
|
|
isSpin,
|
|
total,
|
|
search,
|
|
limit,
|
|
page,
|
|
typeList,
|
|
categoryList,
|
|
languageSpin,
|
|
categorySpin,
|
|
} = this.state;
|
|
|
|
const pagination =
|
|
total && total > limit ? (
|
|
<div className="edu-txt-center pt30 mb30 border-top-grey">
|
|
<Pagination
|
|
simple
|
|
defaultCurrent={page}
|
|
total={total}
|
|
pageSize={limit}
|
|
onChange={this.ChangePage}
|
|
></Pagination>
|
|
</div>
|
|
) : (
|
|
""
|
|
);
|
|
return (
|
|
<div>
|
|
<div className="banner_list_img">
|
|
<img src={banner_list}></img>
|
|
</div>
|
|
<p className="t_project_banner"></p>
|
|
<div className="ProjectListIndex">
|
|
<div className="list-left">
|
|
<Affix offsetTop={5}>
|
|
<Spin spinning={languageSpin}>
|
|
<ul className="list-l-Menu">
|
|
<li className="MenuTitle">
|
|
<i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
|
|
语言
|
|
</li>
|
|
{typeList}
|
|
</ul>
|
|
</Spin>
|
|
<Spin spinning={categorySpin}>
|
|
<ul className="list-l-Menu">
|
|
<li className="MenuTitle">
|
|
<i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>
|
|
项目类别
|
|
</li>
|
|
{categoryList}
|
|
</ul>
|
|
</Spin>
|
|
</Affix>
|
|
</div>
|
|
<div
|
|
className="list-right boxShandow radius-2"
|
|
style={{ padding: 0 }}
|
|
>
|
|
<Spin spinning={isSpin}>
|
|
<div className="list-r-operation">
|
|
<Search
|
|
placeholder="输入项目名称关键字进行搜索"
|
|
enterButton="搜索"
|
|
size="large"
|
|
onSearch={this.searchFun}
|
|
className="list-r-Search"
|
|
value={search}
|
|
onChange={this.changeSearchValue}
|
|
/>
|
|
<div>
|
|
{current_user && current_user.login && (
|
|
<Popover
|
|
content={newItem}
|
|
trigger={["click"]}
|
|
placement="bottom"
|
|
className="mr50"
|
|
>
|
|
<a className="ant-dropdown-link">
|
|
<span className="color-blue font-16">
|
|
<img src={img_new} alt="" width="13px" /> 新建
|
|
</span>
|
|
</a>
|
|
</Popover>
|
|
)}
|
|
|
|
<Popover
|
|
content={menu}
|
|
trigger={["click"]}
|
|
placement="bottom"
|
|
>
|
|
<a className="ant-dropdown-link">
|
|
<span className="color-blue font-16">
|
|
排序 <img src={img_array} alt="" width="10px" />
|
|
</span>
|
|
</a>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
<ListItem
|
|
{...this.props}
|
|
{...this.state}
|
|
projects={projectsList}
|
|
></ListItem>
|
|
{pagination}
|
|
</Spin>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default Index;
|