mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-14 06:11:16 +00:00
[groups, group] rewrote them with react (#2593)
* [groups, group] rewrote them with react * [groups, group] update
This commit is contained in:
llj
GitHub
280
frontend/src/pages/group/group.js
Normal file
280
frontend/src/pages/group/group.js
Normal file
@@ -0,0 +1,280 @@
|
||||
import React, { Component } from 'react';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, loginUrl, username } from '../../utils/constants';
|
||||
import Loading from '../../components/loading';
|
||||
import GroupRepoItem from './group-repo-item';
|
||||
|
||||
import '../../css/groups.css';
|
||||
|
||||
class Header extends Component {
|
||||
|
||||
render() {
|
||||
const {loading, errorMsg, data} = this.props.data;
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
} else if (errorMsg) {
|
||||
return <p className="error text-center">{errorMsg}</p>;
|
||||
} else {
|
||||
/*
|
||||
admins: ["lj@1.com"]
|
||||
avatar_url: "http://127.0.0.1:8000/media/avatars/groups/default.png"
|
||||
created_at: "2018-10-25T08:18:11+00:00"
|
||||
id: 2
|
||||
name: "g1"
|
||||
owner: "lj@1.com"
|
||||
parent_group_id: 0
|
||||
wiki_enabled: false
|
||||
*/
|
||||
const path = (
|
||||
<div className="group-path cur-view-path-path">
|
||||
<a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
|
||||
<span className="path-split">/</span>
|
||||
<span className="group-name">{data.name}</span>
|
||||
{data.parent_group_id == 0 ? null :
|
||||
<span className="address-book-group-icon icon-building" title={gettext("This is a special group representing a department.")}></span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
let showSettingsIcon = true;
|
||||
if (data.parent_group_id != 0 && data.admins.indexOf(username) == -1) {
|
||||
showSettingsIcon = false;
|
||||
}
|
||||
|
||||
// TODO: click icon
|
||||
const toolbar = (
|
||||
<div className="group-toolbar-2">
|
||||
{showSettingsIcon ? <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title={gettext("Settings")} id="group-settings-icon" aria-label={gettext("Settings")}></a> : null}
|
||||
<a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} id="group-members-icon" aria-label={gettext("Members")}></a>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{path}
|
||||
{toolbar}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Content extends Component {
|
||||
|
||||
render() {
|
||||
const {loading, errorMsg, items} = this.props.data.repos;
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
} else if (errorMsg) {
|
||||
return <p className="error text-center">{errorMsg}</p>;
|
||||
} else {
|
||||
if (!items) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const groupInfo = this.props.data.groupMetaInfo.data;
|
||||
|
||||
let emptyTip;
|
||||
if (groupInfo.parent_group_id == 0) {
|
||||
emptyTip = (
|
||||
<div className="empty-tip">
|
||||
<h2>{gettext('No library is shared to this group')}</h2>
|
||||
<p>{gettext('You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.')}</p>
|
||||
<p>{gettext('Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded.')}</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (groupInfo.admins.indexOf(username) == -1) {
|
||||
emptyTip = (
|
||||
<div className="empty-tip">
|
||||
<h2>{gettext('No libraries')}</h2>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
emptyTip = (
|
||||
<div className="empty-tip">
|
||||
<h2>{gettext('No libraries')}</h2>
|
||||
<p>{gettext('You can create libraries by clicking the "New Library" button above.')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const desktopThead = (
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="8%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
||||
<th width="34%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
|
||||
<th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
|
||||
<th width="14%">{gettext("Size")}</th>
|
||||
<th width="18%">{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
|
||||
<th width="16%">{gettext("Owner")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
|
||||
const mobileThead = (
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
||||
<th width="68%">
|
||||
{gettext("Sort:")} {/* TODO: sort */}
|
||||
{gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
|
||||
{gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
|
||||
</th>
|
||||
<th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
|
||||
const extraData = {
|
||||
groupId: groupInfo.id,
|
||||
isStaff: groupInfo.admins.indexOf(username) != -1,
|
||||
showRepoOwner: true
|
||||
};
|
||||
|
||||
const table = (
|
||||
<table className="table table-hover table-vcenter">
|
||||
{window.innerWidth >= 768 ? desktopThead : mobileThead}
|
||||
<TableBody items={items} extra={extraData} />
|
||||
</table>
|
||||
);
|
||||
|
||||
return items.length ? table : emptyTip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class TableBody extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
items: this.props.items
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let listItems = this.state.items.map(function(item, index) {
|
||||
return <GroupRepoItem key={index} data={item} extra={this.props.extra} />;
|
||||
}, this);
|
||||
|
||||
return (
|
||||
<tbody>{listItems}</tbody>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Group extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
groupMetaInfo: {
|
||||
loading: true,
|
||||
errorMsg: ''
|
||||
},
|
||||
repos: {
|
||||
loading: false,
|
||||
errorMsg: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
seafileAPI.getGroup(this.props.groupID).then((res) => {
|
||||
// res: {data: {...}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
|
||||
this.setState({
|
||||
groupMetaInfo: {
|
||||
loading: false,
|
||||
data: res.data
|
||||
}
|
||||
});
|
||||
this.listGroupRepos();
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
groupMetaInfo: {
|
||||
loading: false,
|
||||
errorMsg: gettext("Permission denied")
|
||||
}
|
||||
});
|
||||
location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
|
||||
} else {
|
||||
this.setState({
|
||||
groupMetaInfo: {
|
||||
loading: false,
|
||||
errorMsg: gettext("Error")
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
groupMetaInfo: {
|
||||
loading: false,
|
||||
errorMsg: gettext("Please check the network.")
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
listGroupRepos() {
|
||||
seafileAPI.listGroupRepos(this.props.groupID).then((res) => {
|
||||
// res: {data: [...], status: 200, statusText: "OK", headers: {…}, config: {…}, …}
|
||||
this.setState({
|
||||
repos: {
|
||||
loading: false,
|
||||
items: res.data
|
||||
}
|
||||
});
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
repos: {
|
||||
loading: false,
|
||||
errorMsg: gettext("Permission denied")
|
||||
}
|
||||
});
|
||||
location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
|
||||
} else {
|
||||
this.setState({
|
||||
repos: {
|
||||
loading: false,
|
||||
errorMsg: gettext("Error")
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
repos: {
|
||||
loading: false,
|
||||
errorMsg: gettext("Please check the network.")
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="main-panel-center">
|
||||
<div className="cur-view-container">
|
||||
<div className="cur-view-path">
|
||||
<Header data={this.state.groupMetaInfo} />
|
||||
</div>
|
||||
<div className="cur-view-content">
|
||||
<Content data={this.state} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Group;
|
||||
Reference in New Issue
Block a user