mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-02 15:38:15 +00:00
add unshared method for groups-view
This commit is contained in:
shanshuirenjia
@@ -18,8 +18,8 @@ import ShareAdminUploadLinks from './pages/share-admin/upload-links';
|
|||||||
import SharedLibraries from './pages/shared-libs/shared-libs';
|
import SharedLibraries from './pages/shared-libs/shared-libs';
|
||||||
import MyLibraries from './pages/my-libs/my-libs';
|
import MyLibraries from './pages/my-libs/my-libs';
|
||||||
import DirView from './components/dir-view/dir-view';
|
import DirView from './components/dir-view/dir-view';
|
||||||
import Groups from './pages/group/groups';
|
import Group from './pages/groups/group-view';
|
||||||
import Group from './pages/group/group';
|
import Groups from './pages/groups/groups-view';
|
||||||
import MainContentWrapper from './components/main-content-wrapper';
|
import MainContentWrapper from './components/main-content-wrapper';
|
||||||
|
|
||||||
import './assets/css/fa-solid.css';
|
import './assets/css/fa-solid.css';
|
||||||
|
|||||||
@@ -1,270 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
|
|
||||||
import moment from 'moment';
|
|
||||||
import { seafileAPI } from '../../utils/seafile-api';
|
|
||||||
import { Utils } from '../../utils/utils';
|
|
||||||
import { gettext, siteRoot, loginUrl, isPro, folderPermEnabled, username } from '../../utils/constants';
|
|
||||||
|
|
||||||
class GroupRepoItem extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
showOpIcon: false,
|
|
||||||
operationMenuOpen: false,
|
|
||||||
unshared: false
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleMouseOver = this.handleMouseOver.bind(this);
|
|
||||||
this.handleMouseOut = this.handleMouseOut.bind(this);
|
|
||||||
this.toggleOperationMenu = this.toggleOperationMenu.bind(this);
|
|
||||||
this.clickOperationMenuToggle = this.clickOperationMenuToggle.bind(this);
|
|
||||||
|
|
||||||
this.share = this.share.bind(this);
|
|
||||||
this.unshare = this.unshare.bind(this);
|
|
||||||
|
|
||||||
this.deleteItem = this.deleteItem.bind(this);
|
|
||||||
|
|
||||||
this.rename = this.rename.bind(this);
|
|
||||||
this.folderPerm = this.folderPerm.bind(this);
|
|
||||||
this.showDetails = this.showDetails.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseOver() {
|
|
||||||
this.setState({
|
|
||||||
showOpIcon: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseOut() {
|
|
||||||
this.setState({
|
|
||||||
showOpIcon: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleOperationMenu() {
|
|
||||||
this.setState({
|
|
||||||
operationMenuOpen: !this.state.operationMenuOpen
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
clickOperationMenuToggle(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.toggleOperationMenu();
|
|
||||||
}
|
|
||||||
|
|
||||||
share(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// TODO
|
|
||||||
}
|
|
||||||
|
|
||||||
unshare(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// TODO
|
|
||||||
|
|
||||||
const data = this.props.data;
|
|
||||||
|
|
||||||
let request;
|
|
||||||
if (data.owner_email.indexOf('@seafile_group') == -1) {
|
|
||||||
let options = {
|
|
||||||
'share_type': 'personal',
|
|
||||||
'from': data.owner_email
|
|
||||||
};
|
|
||||||
request = seafileAPI.leaveShareRepo(data.repo_id, options);
|
|
||||||
} else {
|
|
||||||
request = seafileAPI.leaveShareGroupOwnedRepo(data.repo_id);
|
|
||||||
}
|
|
||||||
|
|
||||||
request.then((res) => {
|
|
||||||
this.setState({
|
|
||||||
unshared: true
|
|
||||||
});
|
|
||||||
// TODO: show feedback msg
|
|
||||||
}).catch((error) => {
|
|
||||||
// TODO: show feedback msg
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
deleteItem() {
|
|
||||||
// TODO
|
|
||||||
const data = this.props.data;
|
|
||||||
seafileAPI.deleteRepo(data.repo_id).then((res) => {
|
|
||||||
this.setState({
|
|
||||||
deleted: true
|
|
||||||
});
|
|
||||||
// TODO: show feedback msg
|
|
||||||
}).catch((error) => {
|
|
||||||
// TODO: show feedback msg
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
rename() {
|
|
||||||
}
|
|
||||||
|
|
||||||
folderPerm() {
|
|
||||||
}
|
|
||||||
|
|
||||||
showDetails() {
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
if (this.state.unshared) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = this.props.data;
|
|
||||||
const permission = data.permission;
|
|
||||||
|
|
||||||
const {groupId, isStaff, showRepoOwner} = this.props.extra;
|
|
||||||
const isRepoOwner = username == data.owner_email;
|
|
||||||
const isAdmin = data.is_admin;
|
|
||||||
|
|
||||||
let is_readonly = false;
|
|
||||||
if (permission == 'r' || permission == 'preview') {
|
|
||||||
is_readonly = true;
|
|
||||||
}
|
|
||||||
data.icon_url = Utils.getLibIconUrl({
|
|
||||||
is_encrypted: data.encrypted,
|
|
||||||
is_readonly: is_readonly,
|
|
||||||
size: Utils.isHiDPI() ? 48 : 24
|
|
||||||
});
|
|
||||||
data.icon_title = Utils.getLibIconTitle({
|
|
||||||
'encrypted': data.encrypted,
|
|
||||||
'is_admin': data.is_admin,
|
|
||||||
'permission': permission
|
|
||||||
});
|
|
||||||
data.url = `${siteRoot}#group/${groupId}/lib/${data.repo_id}/`;
|
|
||||||
|
|
||||||
let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
|
|
||||||
let shareIconClassName = 'sf2-icon-share sf2-x repo-share-btn op-icon' + iconVisibility;
|
|
||||||
let unshareIconClassName = 'sf2-icon-x3 sf2-x op-icon' + iconVisibility;
|
|
||||||
let deleteIconClassName = 'sf2-icon-delete sf2-x op-icon' + iconVisibility;
|
|
||||||
let operationMenuToggleIconClassName = 'sf2-icon-caret-down item-operation-menu-toggle-icon op-icon';
|
|
||||||
if (window.innerWidth >= 768) {
|
|
||||||
operationMenuToggleIconClassName += iconVisibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
const commonToggle = (
|
|
||||||
<DropdownToggle
|
|
||||||
tag="a" href="#" className={operationMenuToggleIconClassName} title={gettext('More Operations')}
|
|
||||||
onClick={this.clickOperationMenuToggle}
|
|
||||||
data-toggle="dropdown" aria-expanded={this.state.operationMenuOpen}>
|
|
||||||
</DropdownToggle>
|
|
||||||
);
|
|
||||||
|
|
||||||
const commonOperationsInMenu = (
|
|
||||||
<React.Fragment>
|
|
||||||
<DropdownItem onClick={this.rename}>{gettext('Rename')}</DropdownItem>
|
|
||||||
{folderPermEnabled ? <DropdownItem onClick={this.folderPerm}>{gettext('Folder Permission')}</DropdownItem> : null}
|
|
||||||
<DropdownItem onClick={this.showDetails}>{gettext('Details')}</DropdownItem>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
|
|
||||||
let desktopOperations;
|
|
||||||
let mobileOperationMenu;
|
|
||||||
|
|
||||||
const share = <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>;
|
|
||||||
const unshare = <a href="#" className={unshareIconClassName} title={gettext("Unshare")} onClick={this.unshare}></a>
|
|
||||||
|
|
||||||
const shareDropdownItem = <DropdownItem onClick={this.share}>{gettext('Share')}</DropdownItem>;
|
|
||||||
const unshareDropdownItem = <DropdownItem onClick={this.unshare}>{gettext('Unshare')}</DropdownItem>;
|
|
||||||
|
|
||||||
if (isPro) {
|
|
||||||
if (data.owner_email.indexOf('@seafile_group') != -1) { // group owned repo
|
|
||||||
if (isStaff) {
|
|
||||||
if (data.owner_email == groupId + '@seafile_group') { // this repo belongs to the current group
|
|
||||||
desktopOperations = (
|
|
||||||
<React.Fragment>
|
|
||||||
{share}
|
|
||||||
<a href="#" className={deleteIconClassName} title={gettext('Delete')} onClick={this.deleteItem}></a>
|
|
||||||
<Dropdown isOpen={this.state.operationMenuOpen} toggle={this.toggleOperationMenu}>
|
|
||||||
{commonToggle}
|
|
||||||
<DropdownMenu>
|
|
||||||
{commonOperationsInMenu}
|
|
||||||
</DropdownMenu>
|
|
||||||
</Dropdown>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
mobileOperationMenu = (
|
|
||||||
<React.Fragment>
|
|
||||||
{shareDropdownItem}
|
|
||||||
<DropdownItem onClick={this.deleteItem}>{gettext('Delete')}</DropdownItem>
|
|
||||||
{commonOperationsInMenu}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
desktopOperations = unshare;
|
|
||||||
mobileOperationMenu = unshareDropdownItem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
desktopOperations = (
|
|
||||||
<React.Fragment>
|
|
||||||
{isRepoOwner || isAdmin ? share : null}
|
|
||||||
{isStaff || isRepoOwner || isAdmin ? unshare : null}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
mobileOperationMenu = (
|
|
||||||
<React.Fragment>
|
|
||||||
{isRepoOwner || isAdmin ? shareDropdownItem : null}
|
|
||||||
{isStaff || isRepoOwner || isAdmin ? unshareDropdownItem : null}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
desktopOperations = (
|
|
||||||
<React.Fragment>
|
|
||||||
{isRepoOwner ? share : null}
|
|
||||||
{isStaff || isRepoOwner ? unshare : null}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
mobileOperationMenu = (
|
|
||||||
<React.Fragment>
|
|
||||||
{isRepoOwner ? shareDropdownItem : null}
|
|
||||||
{isStaff || isRepoOwner ? unshareDropdownItem : null}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const mobileOperations = (
|
|
||||||
<Dropdown isOpen={this.state.operationMenuOpen} toggle={this.toggleOperationMenu}>
|
|
||||||
{commonToggle}
|
|
||||||
<div className={`${this.state.operationMenuOpen?'':'d-none'}`} onClick={this.toggleOperationMenu}>
|
|
||||||
<div className="mobile-operation-menu-bg-layer"></div>
|
|
||||||
<div className="mobile-operation-menu">
|
|
||||||
{mobileOperationMenu}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dropdown>
|
|
||||||
);
|
|
||||||
|
|
||||||
const desktopItem = (
|
|
||||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
|
||||||
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
|
|
||||||
<td><a href={data.url}>{data.repo_name}</a></td>
|
|
||||||
<td>{desktopOperations}</td>
|
|
||||||
<td>{Utils.formatSize({bytes: data.size})}</td>
|
|
||||||
<td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
|
|
||||||
{showRepoOwner ? <td title={data.owner_contact_email}>{data.owner_name}</td> : null}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
|
|
||||||
const mobileItem = (
|
|
||||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
|
||||||
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
|
|
||||||
<td>
|
|
||||||
<a href={data.url}>{data.repo_name}</a><br />
|
|
||||||
{showRepoOwner ? <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span> : null}
|
|
||||||
<span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
|
|
||||||
<span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
|
|
||||||
</td>
|
|
||||||
<td>{mobileOperations}</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
|
|
||||||
return window.innerWidth >= 768 ? desktopItem : mobileItem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default GroupRepoItem;
|
|
||||||
@@ -1,305 +0,0 @@
|
|||||||
import React, { Component, Fragment } 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 CommonToolbar from '../../components/toolbar/common-toolbar';
|
|
||||||
import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
|
|
||||||
|
|
||||||
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>
|
|
||||||
{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() {
|
|
||||||
this.updateGroupRepoList(this.props.groupID);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if (nextProps.groupID !== this.props.groupID) {
|
|
||||||
this.updateGroupRepoList(nextProps.groupID);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateGroupRepoList = (groupID) => {
|
|
||||||
seafileAPI.getGroup(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.")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onCreateRepo = (repo) => {
|
|
||||||
let groupId = this.props.groupID;
|
|
||||||
seafileAPI.createGroupRepo(groupId, repo).then(() => {
|
|
||||||
//todo update group list
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<div className="main-panel-north">
|
|
||||||
<RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} libraryType={'group'}/>
|
|
||||||
<CommonToolbar onSearchedClick={this.props.onSearchedClick} />
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Group;
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import React, { Component, Fragment } from 'react';
|
|
||||||
import { seafileAPI } from '../../utils/seafile-api';
|
|
||||||
import { gettext, siteRoot, loginUrl, username } from '../../utils/constants';
|
|
||||||
import Loading from '../../components/loading';
|
|
||||||
import GroupRepoItem from './group-repo-item';
|
|
||||||
import GeneralToolbar from '../../components/toolbar/general-toolbar';
|
|
||||||
|
|
||||||
import '../../css/groups.css';
|
|
||||||
|
|
||||||
class Content extends Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {loading, errorMsg, items} = this.props.data;
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <Loading />;
|
|
||||||
} else if (errorMsg) {
|
|
||||||
return <p className="error text-center">{errorMsg}</p>;
|
|
||||||
} else {
|
|
||||||
/* TODO:
|
|
||||||
{% if user.permissions.can_add_group %}
|
|
||||||
<p>{% blocktrans %}Groups allow multiple people to collaborate on libraries. You can create a group by clicking the "New Group" button.{% endblocktrans %}</p>
|
|
||||||
{% else %}
|
|
||||||
<p>{% trans "Groups allow multiple people to collaborate on libraries. Groups you join will be listed here." %}</p>
|
|
||||||
{% endif %}
|
|
||||||
*/
|
|
||||||
const emptyTip = (
|
|
||||||
<div className="empty-tip">
|
|
||||||
<h2>{gettext('You are not in any groups')}</h2>
|
|
||||||
<p>{gettext('Groups allow multiple people to collaborate on libraries.')}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
let listItems = items.map(function(item, index) {
|
|
||||||
return <GroupItem key={index} data={item} />;
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
const groupItems = (
|
|
||||||
<React.Fragment>
|
|
||||||
{listItems}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
|
|
||||||
return items.length ? groupItems : emptyTip;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class GroupItem extends Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
const data = this.props.data;
|
|
||||||
|
|
||||||
const desktopThead = (
|
|
||||||
<thead className="invisible">
|
|
||||||
<tr>
|
|
||||||
<th width="8%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
|
||||||
<th width="40%">{gettext("Name")}</th>
|
|
||||||
<th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
|
|
||||||
<th width="20%">{gettext("Size")}</th>
|
|
||||||
<th width="22%">{gettext("Last Update")}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
);
|
|
||||||
|
|
||||||
const mobileThead = (
|
|
||||||
<thead className="invisible">
|
|
||||||
<tr>
|
|
||||||
<th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
|
||||||
<th width="68%">{gettext("name")}</th>
|
|
||||||
<th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
);
|
|
||||||
|
|
||||||
const extraData = {
|
|
||||||
groupId: data.id,
|
|
||||||
isStaff: data.admins.indexOf(username) != -1,
|
|
||||||
showRepoOwner: false
|
|
||||||
};
|
|
||||||
|
|
||||||
const table = (
|
|
||||||
<table className="table table-hover table-vcenter group-item-table">
|
|
||||||
{window.innerWidth >= 768 ? desktopThead : mobileThead}
|
|
||||||
<TableBody items={data.repos} extra={extraData} />
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
|
|
||||||
const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
|
|
||||||
|
|
||||||
const item = (
|
|
||||||
<React.Fragment>
|
|
||||||
<h4 className="group-item-heading ellipsis"><a href={`${siteRoot}group/${data.id}/`} title={data.name}>{data.name}</a></h4>
|
|
||||||
{data.repos.length ? table : emptyTip}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
|
|
||||||
return item;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class TableBody extends Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
let listItems = this.props.items.map(function(item, index) {
|
|
||||||
return <GroupRepoItem key={index} data={item} extra={this.props.extra} />;
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tbody>{listItems}</tbody>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Groups extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
loading: true,
|
|
||||||
errorMsg: '',
|
|
||||||
items: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
seafileAPI.listGroupsV2({'with_repos': 1}).then((res) => { // TODO: api name
|
|
||||||
// `{'with_repos': 1}`: list repos of every group
|
|
||||||
// res: {data: [...], status: 200, statusText: "OK", headers: {…}, config: {…}, …}
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
items: res.data
|
|
||||||
});
|
|
||||||
}).catch((error) => {
|
|
||||||
if (error.response) {
|
|
||||||
if (error.response.status == 403) {
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
errorMsg: gettext("Permission denied")
|
|
||||||
});
|
|
||||||
location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
errorMsg: gettext("Error")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
errorMsg: gettext("Please check the network.")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<GeneralToolbar onShowSidePanel={this.props.onShowSidePanel} onSearchedClick={this.props.onSearchedClick}/>
|
|
||||||
<div className="main-panel-center">
|
|
||||||
<div className="cur-view-container">
|
|
||||||
<div className="cur-view-path">
|
|
||||||
<h3 className="sf-heading">{gettext("My Groups")}</h3>
|
|
||||||
</div>
|
|
||||||
<div className="cur-view-content">
|
|
||||||
<Content data={this.state} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Groups;
|
|
||||||
Reference in New Issue
Block a user