mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-17 15:53:28 +00:00
Merge pull request #2618 from haiwen/group-module-improve
Group module improve
This commit is contained in:
Daniel Pan
GitHub
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;
|
||||
Reference in New Issue
Block a user