}
+ {enableOCM && itemType === 'library' && this.state.isRepoOwner &&
+
+
+ {gettext('Share to other server')}
+
+
+ }
@@ -190,6 +198,11 @@ class ShareDialog extends React.Component {
}
}
+ {enableOCM && itemType === 'library' && activeTab === 'shareToOtherServer' &&
+
+
+
+ }
diff --git a/frontend/src/components/dialog/share-to-other-server.js b/frontend/src/components/dialog/share-to-other-server.js
new file mode 100644
index 0000000000..b82bb10e3d
--- /dev/null
+++ b/frontend/src/components/dialog/share-to-other-server.js
@@ -0,0 +1,234 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Input } from 'reactstrap';
+import { Button } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
+import SharePermissionEditor from '../select-editor/share-permission-editor';
+
+class ShareItem extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isOperationShow: false
+ };
+ }
+
+ onMouseEnter = () => {
+ this.setState({isOperationShow: true});
+ }
+
+ onMouseLeave = () => {
+ this.setState({isOperationShow: false});
+ }
+
+ deleteShareItem = () => {
+ let item = this.props.item;
+ this.props.deleteShareItem(item);
+ }
+
+ render() {
+ let item = this.props.item;
+ return (
+
+ | {item.to_sever_url} |
+ {item.to_user} |
+ {Utils.sharePerms(item.permission)} |
+ {/*
+
+ | */}
+
+
+
+ |
+
+ );
+ }
+}
+
+class ShareList extends React.Component {
+
+ render() {
+ return (
+
+
+
+
+ | {gettext('Server URL')} |
+ {gettext('User Email')} |
+ {gettext('Permission')} |
+ |
+
+
+
+ {this.props.items.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+
+  |
+
+ {dirent.is_file ?
+ dirent.name :
+ {dirent.name}
+ }
+ |
+
+ {isOpIconShown && dirent.is_file &&
+
+ }
+ |
+ {Utils.bytesToSize(dirent.size)} |
+ {moment(dirent.mtime).fromNow()} |
+
+
+ );
+ }
+}
+
+
+const propTypes = {
+ direntList: PropTypes.array.isRequired
+};
+
+class DirContent extends React.Component {
+
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ let { loading, errorMsg, direntList } = this.props;
+
+ if (loading) {
+ return ;
+ }
+
+ if (errorMsg) {
+ return {errorMsg}
;
+ }
+
+ return (
+
+
+
+
+ | {/*icon*/} |
+ {gettext('Name')} |
+ {/*operation*/} |
+ {gettext('Size')} |
+ {gettext('Last Update')} |
+
+
+
+ {direntList.map((dirent, index) => {
+ return ;
+ })}
+
+
+
+ );
+ }
+}
+
+DirContent.propTypes = propTypes;
+
+export default DirContent;
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-path.js b/frontend/src/pages/share-with-ocm/remote-dir-path.js
new file mode 100644
index 0000000000..6186151961
--- /dev/null
+++ b/frontend/src/pages/share-with-ocm/remote-dir-path.js
@@ -0,0 +1,70 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+ repoName: PropTypes.string.isRequired,
+ currentPath: PropTypes.string.isRequired,
+ onPathClick: PropTypes.func.isRequired,
+ onTabNavClick: PropTypes.func.isRequired,
+ repoID: PropTypes.string.isRequired,
+};
+
+class DirPath extends React.Component {
+
+ onPathClick = (e) => {
+ let path = Utils.getEventData(e, 'path');
+ this.props.onPathClick(path);
+ }
+
+ turnPathToLink = (path) => {
+ path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
+ let pathList = path.split('/');
+ let nodePath = '';
+ let pathElem = pathList.map((item, index) => {
+ if (item === '') {
+ return;
+ }
+ if (index === (pathList.length - 1)) {
+ return (
+
+ /
+ {item}
+
+ );
+ } else {
+ nodePath += '/' + item;
+ return (
+
+ /
+ {item}
+
+ );
+ }
+ });
+ return pathElem;
+ }
+
+ render() {
+ let { currentPath, repoName } = this.props;
+ let pathElem = this.turnPathToLink(currentPath);
+
+ return (
+
+
this.props.onTabNavClick('shared-with-ocm')}>{gettext('All')}
+
/
+ {(currentPath === '/' || currentPath === '') ?
+
{repoName}:
+
{repoName}
+ }
+ {pathElem}
+
+
+
+
+ {this.props.children}
+
+
+
+
{gettext('No libraries have been shared with you')}
+ {gettext('No libraries have been shared directly with you. You can find more shared libraries at "Shared with groups".')}
+
+ );
+
+ if (loading) {
+ return ;
+ } else if (errorMsg) {
+ return {errorMsg}
;
+ } else {
+ const table = (
+
+
+
+ |
+ {gettext('Name')} |
+ {gettext('Shared from')} |
+ {gettext('At site')} |
+ {gettext('Time')} |
+ {/* operations */} |
+
+
+
+ {items.map((item, index) => {
+ return
+ );
+
+ return items.length ? table : emptyTip;
+ }
+ }
+}
+
+Content.propTypes = {
+ loading: PropTypes.bool.isRequired,
+ errorMsg: PropTypes.string.isRequired,
+ items: PropTypes.array.isRequired,
+};
+
+class Item extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ showOpIcon: false,
+ isOpMenuOpen: false // for mobile
+ };
+ }
+
+ toggleOpMenu = () => {
+ this.setState({
+ isOpMenuOpen: !this.state.isOpMenuOpen
+ });
+ }
+
+ handleMouseOver = () => {
+ this.setState({
+ showOpIcon: true
+ });
+ }
+
+ handleMouseOut = () => {
+ this.setState({
+ showOpIcon: false
+ });
+ }
+
+ deleteShare = () => {
+ this.props.deleteShare(this.props.item);
+ }
+
+ render() {
+ const item = this.props.item;
+
+ item.icon_url = Utils.getLibIconUrl(item);
+ item.icon_title = Utils.getLibIconTitle(item);
+ item.url = `${siteRoot}#shared-libs/lib/${item.repo_id}/`;
+
+ let shareRepoUrl =`${siteRoot}remote-library/${this.props.item.provider_id}/${this.props.item.repo_id}/${Utils.encodePath(this.props.item.repo_name)}/`;
+ let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
+ let deleteIcon = `action-icon sf2-icon-x3 ${iconVisibility ? 'invisible' : ''}`;
+ return (
+
+
+  |
+ {item.repo_name} |
+ {item.from_user} |
+ {item.from_server_url} |
+ {moment(item.ctime).fromNow()} |
+
+
+ |
+
+
+
+ );
+ }
+}
+
+Item.propTypes = {
+ item: PropTypes.object.isRequired
+};
+
+class SharedWithOCM extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ errorMsg: '',
+ items: [],
+ };
+ }
+
+ componentDidMount() {
+ seafileAPI.listOCMSharesReceived().then((res) => {
+ this.setState({
+ loading: false,
+ items: res.data.ocm_share_received_list
+ });
+ }).catch((error) => {
+ if (error.response) {
+ if (error.response.status == 403) {
+ this.setState({
+ loading: false,
+ errorMsg: gettext('Permission denied')
+ });
+ } else {
+ this.setState({
+ loading: false,
+ errorMsg: gettext('Error')
+ });
+ }
+ } else {
+ this.setState({
+ loading: false,
+ errorMsg: gettext('Please check the network.')
+ });
+ }
+ });
+ }
+
+ deleteShare = (item) => {
+ let { id } = item;
+ seafileAPI.deleteOCMShareReceived(id).then((res) => {
+ toaster.success(gettext('delete success.'));
+ let items = this.state.items.filter(item => {
+ return item.id != id;
+ });
+ this.setState({items: items});
+ }).catch(error => {
+ let errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+
{gettext('Shared from other servers')}
+
+
+
+
+
+