mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-12 13:24:52 +00:00
Merge pull request #2618 from haiwen/group-module-improve
Group module improve
This commit is contained in:
Daniel Pan
GitHub
@@ -18,8 +18,8 @@ import ShareAdminUploadLinks from './pages/share-admin/upload-links';
|
||||
import SharedLibraries from './pages/shared-libs/shared-libs';
|
||||
import MyLibraries from './pages/my-libs/my-libs';
|
||||
import DirView from './components/dir-view/dir-view';
|
||||
import Groups from './pages/group/groups';
|
||||
import Group from './pages/group/group';
|
||||
import Group from './pages/groups/group-view';
|
||||
import Groups from './pages/groups/groups-view';
|
||||
import MainContentWrapper from './components/main-content-wrapper';
|
||||
|
||||
import './assets/css/fa-solid.css';
|
||||
|
||||
106
frontend/src/components/dialog/create-department-repo-dialog.js
Normal file
106
frontend/src/components/dialog/create-department-repo-dialog.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
|
||||
import { gettext, maxFileName } from '../../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
onCreateRepo: PropTypes.func.isRequired,
|
||||
onCreateToggle: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
class CreateDepartmentRepoDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
repoName: '',
|
||||
errMessage: '',
|
||||
};
|
||||
this.newInput = React.createRef();
|
||||
}
|
||||
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
repoName: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
let isValid = this.validateRepoName();
|
||||
if (isValid) {
|
||||
let repo = this.createRepo(this.state.repoName);
|
||||
this.props.onCreateRepo(repo);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.props.onCreateToggle();
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
this.newInput.focus();
|
||||
}
|
||||
|
||||
validateRepoName = () => {
|
||||
let errMessage = '';
|
||||
let repoName = this.state.repoName.trim();
|
||||
if (!repoName.length) {
|
||||
errMessage = 'Name is required';
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
if (repoName.indexOf('/') > -1) {
|
||||
errMessage = 'Name should not include \'/\'.';
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
if (repoName.length > maxFileName) {
|
||||
errMessage = 'RepoName\'s length is must little than ' + maxFileName;
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
createRepo = (repoName) => {
|
||||
let repo = { repo_name: repoName };
|
||||
return repo;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal isOpen={true} toggle={this.toggle}>
|
||||
<ModalHeader toggle={this.toggle}>{gettext('New Department Library')}</ModalHeader>
|
||||
<ModalBody>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<Label for="repo-name">{gettext('Name')}</Label>
|
||||
<Input
|
||||
id="repo-name"
|
||||
onKeyPress={this.handleKeyPress}
|
||||
innerRef={input => {this.newInput = input;}}
|
||||
value={this.state.repoName}
|
||||
onChange={this.handleChange}
|
||||
maxLength={maxFileName}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
<Label className="err-message">{gettext(this.state.errMessage)}</Label>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CreateDepartmentRepoDialog.propTypes = propTypes;
|
||||
|
||||
export default CreateDepartmentRepoDialog;
|
||||
@@ -0,0 +1,309 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import moment from 'moment';
|
||||
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, isPro, username, folderPermEnabled } from '../../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
currentGroup: PropTypes.object,
|
||||
repo: PropTypes.object.isRequired,
|
||||
isItemFreezed: PropTypes.bool.isRequired,
|
||||
onFreezedItem: PropTypes.func.isRequired,
|
||||
onItemUnshare: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class SharedRepoListItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
highlight: false,
|
||||
isOperationShow: false,
|
||||
isItemMenuShow: false,
|
||||
};
|
||||
this.isDeparementOnwerGroupMember = false;
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({
|
||||
highlight: true,
|
||||
isOperationShow: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMouseOver = () => {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({
|
||||
highlight: true,
|
||||
isOperationShow: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({
|
||||
highlight: false,
|
||||
isOperationShow: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
clickOperationMenuToggle = (e) => {
|
||||
e.preventDefault();
|
||||
this.toggleOperationMenu();
|
||||
}
|
||||
|
||||
toggleOperationMenu = () => {
|
||||
if (this.props.isItemFreezed) {
|
||||
this.setState({
|
||||
highlight: false,
|
||||
isOperationShow: false,
|
||||
isItemMenuShow: !this.state.isItemMenuShow
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
isItemMenuShow: !this.state.isItemMenuShow
|
||||
});
|
||||
}
|
||||
this.props.onFreezedItem();
|
||||
}
|
||||
|
||||
getRepoComputeParams = () => {
|
||||
let repo = this.props.repo;
|
||||
let currentGroup = this.props.currentGroup; //todo--change to libray
|
||||
let isReadyOnly = false;
|
||||
if ( repo.permission === 'r' || repo.permission === 'preview') {
|
||||
isReadyOnly = true;
|
||||
}
|
||||
let iconUrl = Utils.getLibIconUrl({
|
||||
is_encryted: repo.encrypted,
|
||||
is_readyonly: isReadyOnly,
|
||||
size: Utils.isHiDPI() ? 48 : 24
|
||||
});
|
||||
let iconTitle = Utils.getLibIconTitle({
|
||||
'encrypted': repo.encrypted,
|
||||
'is_admin': repo.is_admin,
|
||||
'permission': repo.permission
|
||||
});
|
||||
|
||||
//todo change to library; div-view is not compatibility
|
||||
let libPath = `${siteRoot}#group/${currentGroup.id}/lib/${this.props.repo.repo_id}/`;
|
||||
|
||||
return { iconUrl, iconTitle, libPath };
|
||||
}
|
||||
|
||||
onMenuItemClick = (e) => {
|
||||
let operation = e.target.dataset.toggle;
|
||||
switch(operation) {
|
||||
case 'Rename':
|
||||
this.onItemRename();
|
||||
break;
|
||||
case 'Folder Permission':
|
||||
this.onItemPermisionChanged();
|
||||
break;
|
||||
case 'Details':
|
||||
this.onItemDetails();
|
||||
break;
|
||||
case 'Share':
|
||||
this.onItemShared();
|
||||
break;
|
||||
case 'Unshare':
|
||||
this.onItemUnshare();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onItemRename = () => {
|
||||
// todo
|
||||
}
|
||||
|
||||
onItemPermisionChanged = () => {
|
||||
// todo
|
||||
}
|
||||
|
||||
onItemDetails = () => {
|
||||
// todo
|
||||
}
|
||||
|
||||
onItemShare = () => {
|
||||
// todo
|
||||
}
|
||||
|
||||
onItemUnshare = () => {
|
||||
// todo
|
||||
this.props.onItemUnshare(this.props.repo);
|
||||
}
|
||||
|
||||
onItemDelete = () => {
|
||||
// todo
|
||||
}
|
||||
|
||||
generatorOperations = () => {
|
||||
let { repo, currentGroup } = this.props;
|
||||
//todo this have a bug; use current api is not return admins param;
|
||||
let isStaff = currentGroup.admins && currentGroup.admins.indexOf(username) > -1; //for group repolist;
|
||||
let isRepoOwner = repo.owner_email === username;
|
||||
let isAdmin = repo.is_admin;
|
||||
let operations = [];
|
||||
// todo ,shared width me shared width all;
|
||||
if (isPro) {
|
||||
if (repo.owner_email.indexOf('@seafile_group') != -1) { //current repo is belong to a group;
|
||||
if (isStaff && repo.owner_email == currentGroup.id + '@seafile_group') { //is a member of this current group,
|
||||
this.isDeparementOnwerGroupMember = true;
|
||||
if (folderPermEnabled) {
|
||||
operations = ['Rename', 'Folder Permission', 'deatils'];
|
||||
} else {
|
||||
operations = ['Rename', 'Details']
|
||||
}
|
||||
} else {
|
||||
operations.push('Unshare');
|
||||
}
|
||||
} else {
|
||||
if (isRepoOwner || isAdmin) {
|
||||
operations.push('Share');
|
||||
}
|
||||
if (isStaff || isRepoOwner || isAdmin) {
|
||||
operations.push('Unshare');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (isRepoOwner) {
|
||||
operations.push('share');
|
||||
}
|
||||
if (isStaff || isRepoOwner) {
|
||||
operations.push('Unshare');
|
||||
}
|
||||
}
|
||||
return operations;
|
||||
}
|
||||
|
||||
generatorMobileMenu = () => {
|
||||
let operations = this.generatorOperations();
|
||||
if (this.isDeparementOnwerGroupMember) {
|
||||
operations.unshift('unshare');
|
||||
operations.unshift('share');
|
||||
}
|
||||
return (
|
||||
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
|
||||
<DropdownToggle
|
||||
tag="a"
|
||||
className="sf2-icon-caret-down item-operation-menu-toggle-icon op-icon"
|
||||
title={gettext('More Operations')}
|
||||
data-toggle="dropdown"
|
||||
aria-expanded={this.state.isItemMenuShow}
|
||||
onClick={this.clickOperationMenuToggle}
|
||||
/>
|
||||
<div className={`${this.state.isItemMenuShow?'':'d-none'}`} onClick={this.toggleOperationMenu}>
|
||||
<div className="mobile-operation-menu-bg-layer"></div>
|
||||
<div className="mobile-operation-menu">
|
||||
{operations.map((item, index) => {
|
||||
return (
|
||||
<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{gettext(item)}</DropdownItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
generatorPCMenu = () => {
|
||||
// scene one: (share, delete, itemToggle and other operations);
|
||||
// scene two: (share, unshare), (share), (unshare)
|
||||
let operations = this.generatorOperations();
|
||||
const shareOperation = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShared}></a>;
|
||||
const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemUnshare}></a>
|
||||
const deleteOperation = <a href="#" className="sf2-icon-delete sf2-x op-icon" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
|
||||
|
||||
if (this.isDeparementOnwerGroupMember) {
|
||||
return (
|
||||
<Fragment>
|
||||
{shareOperation}
|
||||
{deleteOperation}
|
||||
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
|
||||
<DropdownToggle
|
||||
tag="a"
|
||||
className="sf2-icon-caret-down item-operation-menu-toggle-icon op-icon"
|
||||
title={gettext('More Operations')}
|
||||
data-toggle="dropdown"
|
||||
aria-expanded={this.state.isItemMenuShow}
|
||||
onClick={this.clickOperationMenuToggle}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
{operations.map((item, index) => {
|
||||
return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{gettext(item)}</DropdownItem>
|
||||
})}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
if (operations.length == 2) {
|
||||
return (
|
||||
<Fragment>
|
||||
{shareOperation}
|
||||
{unshareOperation}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
if (operations.length == 1 && operations[0] === 'share') {
|
||||
return shareOperation;
|
||||
}
|
||||
|
||||
if (operations.length == 1 && operations[0] === 'unshare') {
|
||||
return unshareOperation;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
renderPCUI = () => {
|
||||
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
|
||||
let { repo } = this.props;
|
||||
return (
|
||||
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
|
||||
<td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
|
||||
<td><a href={libPath}>{repo.repo_name}</a></td>
|
||||
<td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
|
||||
<td>{repo.size}</td>
|
||||
<td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
|
||||
<td title={repo.owner_contact_email}>{repo.owner_name}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
renderMobileUI = () => {
|
||||
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
|
||||
let { repo } = this.props;
|
||||
return (
|
||||
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
|
||||
<td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
|
||||
<td>
|
||||
<a href={libPath}>{repo.repo_name}</a><br />
|
||||
<span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
|
||||
<span className="item-meta-info">{repo.size}</span>
|
||||
<span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
|
||||
</td>
|
||||
<td>{this.generatorMobileMenu()}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (window.innerWidth >= 768) {
|
||||
return this.renderPCUI();
|
||||
} else {
|
||||
return this.renderMobileUI();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SharedRepoListItem.propTypes = propTypes;
|
||||
|
||||
export default SharedRepoListItem;
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, {Fragment} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import SharedRepoListItem from './shared-repo-list-item';
|
||||
|
||||
const propTypes = {
|
||||
currentGroup: PropTypes.object,
|
||||
repoList: PropTypes.array.isRequired,
|
||||
isShowTableThread: PropTypes.bool,
|
||||
onItemUnshare: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class SharedRepoListView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isItemFreezed: false,
|
||||
};
|
||||
}
|
||||
|
||||
onFreezedItem = () => {
|
||||
this.setState({
|
||||
isItemFreezed: !this.state.isItemFreezed,
|
||||
});
|
||||
}
|
||||
|
||||
renderRepoListView = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
{this.props.repoList.map(repo => {
|
||||
return (
|
||||
<SharedRepoListItem
|
||||
key={repo.repo_id}
|
||||
repo={repo}
|
||||
currentGroup={this.props.currentGroup}
|
||||
isItemFreezed={this.state.isItemFreezed}
|
||||
onFreezedItem={this.onFreezedItem}
|
||||
onItemUnshare={this.props.onItemUnshare}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
renderPCUI = () => {
|
||||
let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
|
||||
return (
|
||||
<table>
|
||||
<thead className={isShowTableThread ? '' : 'vh'}>
|
||||
<tr>
|
||||
<th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
|
||||
<th width="40%">{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="12%"><span className="sr-only">{gettext("Actions")}</span></th>
|
||||
<th width={'14%'}>{gettext("Size")}</th>
|
||||
<th width={'14%'}>{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>
|
||||
<tbody>
|
||||
{this.renderRepoListView()}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
renderMobileUI = () => {
|
||||
let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
|
||||
return (
|
||||
<table>
|
||||
<thead className={isShowTableThread ? '' : 'vh'}>
|
||||
<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>
|
||||
<tbody>
|
||||
{this.renderRepoListView()}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (window.innerWidth >= 768) {
|
||||
return this.renderPCUI();
|
||||
} else {
|
||||
return this.renderMobileUI();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SharedRepoListView.propTypes = propTypes;
|
||||
|
||||
export default SharedRepoListView;
|
||||
17
frontend/src/models/group.js
Normal file
17
frontend/src/models/group.js
Normal file
@@ -0,0 +1,17 @@
|
||||
class Group {
|
||||
constructor(object) {
|
||||
this.id= object.id;
|
||||
this.name = object.name;
|
||||
this.owner = object.owner;
|
||||
this.admins = object.admins || [];
|
||||
this.avatar_url = object.avatar_url;
|
||||
this.created_at = object.created_at;
|
||||
this.parent_group_id = object.parent_group_id;
|
||||
this.wiki_enabled = object.wiki_enabled;
|
||||
if (object.repos) {
|
||||
this.repos = object.repos;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Group;
|
||||
24
frontend/src/models/repoInfo.js
Normal file
24
frontend/src/models/repoInfo.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Utils } from '../utils/utils';
|
||||
|
||||
class RepoInfo {
|
||||
constructor(object) {
|
||||
this.repo_id = object.repo_id;
|
||||
this.repo_name = object.repo_name;
|
||||
this.permission = object.permission;
|
||||
this.size = Utils.bytesToSize(object.size);
|
||||
this.owner_name = object.owner_name;
|
||||
this.owner_email = object.owner_email;
|
||||
this.owner_contact_email = object.owner_contact_name;
|
||||
this.is_admin = object.is_admin;
|
||||
this.encrypted = object.encrypted;
|
||||
this.last_modified = object.last_modified;
|
||||
this.modifier_contact_email = object.modifier_contact_email;
|
||||
this.modifier_email = object.modifier_email;
|
||||
this.modifier_name = object.modifier_name;
|
||||
this.mtime = object.mtime;
|
||||
}
|
||||
}
|
||||
|
||||
export default RepoInfo;
|
||||
|
||||
//todo rename to repo, and rename repo to repoInfo
|
||||
@@ -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;
|
||||
259
frontend/src/pages/groups/group-view.js
Normal file
259
frontend/src/pages/groups/group-view.js
Normal file
@@ -0,0 +1,259 @@
|
||||
import React,{ Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { gettext, siteRoot, username, loginUrl } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import Loading from '../../components/loading';
|
||||
import ModalPortal from '../../components/modal-portal';
|
||||
import Group from '../../models/group';
|
||||
import RepoInfo from '../../models/repoInfo';
|
||||
import CommonToolbar from '../../components/toolbar/common-toolbar';
|
||||
import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
|
||||
import CreateDepartmentRepoDialog from '../../components/dialog/create-department-repo-dialog';
|
||||
import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
|
||||
|
||||
const propTypes = {
|
||||
onShowSidePanel: PropTypes.func.isRequired,
|
||||
onSearchedClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const DEPARETMENT_GROUP_ONWER_NAME = 'system admin';
|
||||
|
||||
class GroupView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errMessage: '',
|
||||
emptyTip: null,
|
||||
currentGroup: null,
|
||||
isStaff: false,
|
||||
repoList: [],
|
||||
libraryType: 'group',
|
||||
isCreateRepoDialogShow: false,
|
||||
isDepartmentGroup: false,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let groupID = this.props.groupID;
|
||||
this.loadGroup(groupID);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.groupID !== this.props.groupID) {
|
||||
this.loadGroup(nextProps.groupID);
|
||||
}
|
||||
}
|
||||
|
||||
loadGroup = (groupID) => {
|
||||
seafileAPI.getGroup(groupID).then((res) => {
|
||||
let currentGroup = new Group(res.data);
|
||||
let emptyTip = this.getEmptyTip(currentGroup);
|
||||
let isStaff = currentGroup.admins.indexOf(username) > -1; //for item operations
|
||||
let isDepartmentGroup = currentGroup.owner === DEPARETMENT_GROUP_ONWER_NAME;
|
||||
this.setState({
|
||||
emptyTip: emptyTip,
|
||||
currentGroup: currentGroup,
|
||||
isStaff: isStaff,
|
||||
isDepartmentGroup: isDepartmentGroup,
|
||||
});
|
||||
this.loadRepos(groupID);
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errMessage: gettext("Permission denied")
|
||||
});
|
||||
location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errMessage: gettext("Error")
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errMessage: gettext("Please check the network.")
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadRepos = (groupID) => {
|
||||
this.setState({isLoading: true});
|
||||
seafileAPI.listGroupRepos(groupID).then((res) => {
|
||||
let repoList = res.data.map(item => {
|
||||
let repoInfo = new RepoInfo(item);
|
||||
return repoInfo;
|
||||
});
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
repoList: repoList
|
||||
});
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errMessage: gettext("Permission denied")
|
||||
});
|
||||
location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errMessage: gettext("Error")
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errMessage: gettext("Please check the network.")
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getEmptyTip = (currentGroup) => {
|
||||
let emptyTip = null;
|
||||
if (currentGroup) {
|
||||
if (currentGroup.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 (currentGroup.admins.indexOf(username) == -1) { // is a member of this group
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
return emptyTip;
|
||||
}
|
||||
|
||||
onCreateRepoToggle = () => {
|
||||
this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
|
||||
}
|
||||
|
||||
onCreateRepo = (repo) => {
|
||||
let groupId = this.props.groupID;
|
||||
seafileAPI.createGroupRepo(groupId, repo).then(res => {
|
||||
let repo = new RepoInfo(res.data);
|
||||
let repoList = this.addRepoItem(repo);
|
||||
this.setState({repoList: repoList});
|
||||
}).catch(() => {
|
||||
//todo
|
||||
});
|
||||
this.onCreateRepoToggle();
|
||||
}
|
||||
|
||||
addRepoItem = (repo) => {
|
||||
let newRepoList = this.state.repoList.map(item => {return item;});
|
||||
newRepoList.push(repo);
|
||||
return newRepoList;
|
||||
}
|
||||
|
||||
onItemUnshare = (repo) => {
|
||||
let group = this.state.currentGroup;
|
||||
seafileAPI.unshareRepo(repo.repo_id, {share_type: 'group', group_id: group.id}).then(() => {
|
||||
let repoList = this.state.repoList.filter(item => {
|
||||
return item.repo_id !== repo.repo_id;
|
||||
});
|
||||
this.setState({repoList: repoList});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let { errMessage, emptyTip, currentGroup } = this.state;
|
||||
let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="main-panel-north">
|
||||
<div className="cur-view-toolbar border-left-show">
|
||||
<span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
|
||||
<div className="operation">
|
||||
<button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
|
||||
<i className="fas fa-plus-square op-icon"></i>
|
||||
{gettext('New Library')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<CommonToolbar onSearchedClick={this.props.onSearchedClick} />
|
||||
</div>
|
||||
<div className="main-panel-center">
|
||||
<div className="cur-view-container">
|
||||
<div className="cur-view-path">
|
||||
{currentGroup && (
|
||||
<Fragment>
|
||||
<div className="path-container">
|
||||
<a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
|
||||
<span className="path-split">/</span>
|
||||
<span>{currentGroup.name}</span>
|
||||
{currentGroup.parent_group_id !== 0 && (
|
||||
<span className="address-book-group-icon icon-building" title={gettext("This is a special group representing a department.")}></span>
|
||||
)}
|
||||
</div>
|
||||
<div className="path-tool">
|
||||
{isShowSettingIcon && (
|
||||
<a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title={gettext("Settings")} aria-label={gettext("Settings")}></a>
|
||||
)}
|
||||
<a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} aria-label={gettext("Members")}></a>
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
<div className="cur-view-content">
|
||||
{this.state.isLoading && <Loading />}
|
||||
{(!this.state.isLoading && errMessage) && errMessage}
|
||||
{(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
|
||||
{(!this.state.isLoading && this.state.repoList.length > 0) &&
|
||||
<SharedRepoListView
|
||||
repoList={this.state.repoList}
|
||||
currentGroup={this.state.currentGroup}
|
||||
onItemUnshare={this.onItemUnshare}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.isCreateRepoDialogShow && !this.state.isDepartmentGroup && (
|
||||
<ModalPortal>
|
||||
<CreateRepoDialog
|
||||
hasPermission={this.hasPermission}
|
||||
libraryType={this.state.libraryType}
|
||||
onCreateToggle={this.onCreateRepoToggle}
|
||||
onCreateRepo={this.onCreateRepo}
|
||||
/>
|
||||
</ModalPortal>
|
||||
)}
|
||||
{this.state.isCreateRepoDialogShow && this.state.isDepartmentGroup &&
|
||||
<CreateDepartmentRepoDialog
|
||||
isAdmin={this.state.isAdmin}
|
||||
onCreateToggle={this.onCreateRepoToggle}
|
||||
onCreateRepo={this.onCreateRepo}
|
||||
/>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
GroupView.propTypes = propTypes;
|
||||
|
||||
export default GroupView;
|
||||
145
frontend/src/pages/groups/groups-view.js
Normal file
145
frontend/src/pages/groups/groups-view.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { gettext, siteRoot, loginUrl } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import Loading from '../../components/loading';
|
||||
import Group from '../../models/group';
|
||||
import RepoInfo from '../../models/repoInfo';
|
||||
import GeneralToolbar from '../../components/toolbar/general-toolbar';
|
||||
import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
|
||||
|
||||
import '../../css/groups.css';
|
||||
|
||||
const propTypes = {
|
||||
group: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
class RepoListViewPanel extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
repoList: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let group = this.props.group;
|
||||
let repoList = group.repos.map(item => {
|
||||
let repo = new RepoInfo(item);
|
||||
return repo;
|
||||
});
|
||||
this.setState({repoList: repoList});
|
||||
}
|
||||
|
||||
onItemUnshare = (repo) => {
|
||||
let group = this.props.group;
|
||||
seafileAPI.unshareRepo(repo.repo_id, {share_type: 'group', group_id: group.id}).then(() => {
|
||||
let repoList = this.state.repoList.filter(item => {
|
||||
return item.repo_id !== repo.repo_id;
|
||||
});
|
||||
this.setState({repoList: repoList});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let group = this.props.group;
|
||||
const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
|
||||
return (
|
||||
<Fragment>
|
||||
<h4 className="group-item-heading ellipsis">
|
||||
<a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>
|
||||
</h4>
|
||||
{this.state.repoList.length === 0 ?
|
||||
emptyTip :
|
||||
<SharedRepoListView
|
||||
isShowTableThread={false}
|
||||
isShowRepoOwner={false}
|
||||
currentGroup={this.props.group}
|
||||
repoList={this.state.repoList}
|
||||
onItemUnshare={this.onItemUnshare}
|
||||
/>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RepoListViewPanel.propTypes = propTypes;
|
||||
|
||||
class GroupsView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
groupList: [],
|
||||
}
|
||||
}
|
||||
|
||||
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: {…}, …}
|
||||
let groupList = res.data.map(item => {
|
||||
let group = new Group(item);
|
||||
return group;
|
||||
})
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
groupList: groupList,
|
||||
});
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext("Permission denied")
|
||||
});
|
||||
location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext("Error")
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: 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">
|
||||
{this.state.isLoading && <Loading />}
|
||||
{(!this.state.isLoading && this.state.errorMsg !== '') && this.state.errorMsg}
|
||||
{/* {(!this.state.isLoading && this.state.groupList.length === 0 ) && emptyTip} //todo */}
|
||||
{!this.state.isLoading && this.state.groupList.map((group, index) => {
|
||||
return (
|
||||
<RepoListViewPanel key={index} group={group} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Groups.propTypes = propTypes;
|
||||
|
||||
export default GroupsView;
|
||||
@@ -27,6 +27,7 @@ export const storages = window.app.pageOptions.storages; // storage backends
|
||||
export const enableRepoSnapshotLabel = window.app.pageOptions.enableRepoSnapshotLabel;
|
||||
export const shareLinkExpireDaysMin = window.app.pageOptions.shareLinkExpireDaysMin;
|
||||
export const shareLinkExpireDaysMax = window.app.pageOptions.shareLinkExpireDaysMax;
|
||||
export const maxFileName = window.app.pageOptions.maxFileName;
|
||||
|
||||
// wiki
|
||||
export const slug = window.wiki ? window.wiki.config.slug : '';
|
||||
|
||||
Reference in New Issue
Block a user