diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js index 138a6ebb23..f4092cfaa1 100644 --- a/frontend/src/components/dialog/share-to-group.js +++ b/frontend/src/components/dialog/share-to-group.js @@ -268,6 +268,7 @@ class ShareToGroup extends React.Component { ; @@ -33,7 +34,11 @@ class Content extends Component { - + + {items.map((item, index) => { + return (); + })} + ); @@ -42,43 +47,13 @@ class Content extends Component { } } -class TableBody extends Component { - - constructor(props) { - super(props); - this.state = { - items: this.props.items - }; - } - - componentDidMount() { - document.addEventListener('click', this.clickDocument); - } - - clickDocument(e) { - // TODO: click 'outside' to hide `` - } - - render() { - - let listItems = this.state.items.map(function(item, index) { - return ; - }, this); - - return ( - {listItems} - ); - } -} - class Item extends Component { constructor(props) { super(props); + + let item = this.props.item; this.state = { - share_permission: this.props.data.share_permission, - is_admin: this.props.data.is_admin, + share_permission: item.share_permission, + is_admin: item.is_admin, showOpIcon: false, - showSelect: false, unshared: false }; this.permissions = ['rw', 'r']; @@ -96,58 +73,25 @@ class Item extends Component { this.setState({showOpIcon: false}); } - unshare = (e) => { - e.preventDefault(); - - const data = this.props.data; - const share_type = data.share_type; - let options = { - 'share_type': share_type - }; - if (share_type == 'personal') { - options.user = data.user_email; - } else if (share_type == 'group') { - options.group_id = data.group_id; - } - - seafileAPI.unshareRepo(data.repo_id, options) - .then((res) => { - this.setState({ - unshared: true - }); - // TODO: show feedback msg - // gettext("Successfully deleted 1 item") - }) - .catch((error) => { - // TODO: show feedback msg - }); - } - - showSelect = (e) => { - e.preventDefault(); - this.setState({ - showSelect: true - }); - } - changePerm = (permission) => { - const data = this.props.data; - const share_type = data.share_type; - const perm = permission; + const item = this.props.item; + const share_type = item.share_type; let options = { 'share_type': share_type, - 'permission': perm + 'permission': permission }; if (share_type == 'personal') { - options.user = data.user_email; + options.user = item.user_email; } else if (share_type == 'group') { - options.group_id = data.group_id; - } - seafileAPI.updateRepoSharePerm(data.repo_id, options).then((res) => { + options.group_id = item.group_id; + } else if (share_type === 'public') { + // nothing todo + } + + seafileAPI.updateRepoSharePerm(item.repo_id, options).then(() => { this.setState({ - share_permission: perm == 'admin' ? 'rw' : perm, - is_admin: perm == 'admin', - showSelect: false + share_permission: permission == 'admin' ? 'rw' : permission, + is_admin: permission == 'admin', }); // TODO: show feedback msg // gettext("Successfully modified permission") @@ -156,67 +100,72 @@ class Item extends Component { }); } - render() { + unshare = () => { + this.props.unshareFolder(this.props.item); + } - if (this.state.unshared) { - return null; - } - - const data = this.props.data; - const share_permission = this.state.share_permission; - const is_admin = this.state.is_admin; + getRepoParams = () => { + let item = this.props.item; + const { share_permission, is_admin } = this.state; let is_readonly = false; if (share_permission == 'r' || share_permission == 'preview') { is_readonly = true; } - data.icon_url = Utils.getLibIconUrl({ - is_encrypted: data.encrypted, + let iconUrl = Utils.getLibIconUrl({ + is_encrypted: item.encrypted, is_readonly: is_readonly, size: Utils.isHiDPI() ? 48 : 24 }); - data.icon_title = Utils.getLibIconTitle({ - 'encrypted': data.encrypted, + let iconTitle = Utils.getLibIconTitle({ + 'encrypted': item.encrypted, 'is_admin': is_admin, 'permission': share_permission }); - data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}`; + let repoUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}`; + + return { iconUrl, iconTitle, repoUrl }; + } + + render() { + + let { iconUrl, iconTitle, repoUrl } = this.getRepoParams(); + let item = this.props.item; + let { share_permission, is_admin } = this.state; let shareTo; - const shareType = data.share_type; + const shareType = item.share_type; if (shareType == 'personal') { - shareTo = {data.user_name}; + shareTo = {item.user_name}; } else if (shareType == 'group') { - shareTo = {data.group_name}; + shareTo = {item.group_name}; } else if (shareType == 'public') { shareTo = {gettext('all members')}; } - data.cur_perm = share_permission; // show 'admin' perm or not - data.show_admin = isPro && data.share_type != 'public'; - if (data.show_admin && is_admin) { - data.cur_perm = 'admin'; + let showAdmin = isPro && (item.share_type !== 'public'); + if (showAdmin && is_admin) { + share_permission = 'admin'; } - data.cur_perm_text = Utils.sharePerms(data.cur_perm); let iconVisibility = this.state.showOpIcon ? '' : ' invisible'; let unshareIconClassName = 'unshare op-icon sf2-icon-x3' + iconVisibility; - if (data.show_admin && this.permissions.indexOf('admin') === -1) { + if (showAdmin && this.permissions.indexOf('admin') === -1) { this.permissions.splice(2, 0, 'admin'); // add a item after 'r' permission; } - const item = ( + return ( - {data.icon_title} - {data.repo_name} + {iconTitle} + {item.repo_name} {shareTo} @@ -224,8 +173,6 @@ class Item extends Component { ); - - return item; } } @@ -243,9 +190,12 @@ class ShareAdminLibraries extends Component { componentDidMount() { seafileAPI.listSharedRepos().then((res) => { // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …} + let items = res.data.map(item => { + return new SharedRepoInfo(item); + }); this.setState({ loading: false, - items: res.data + items: items }); }).catch((error) => { if (error.response) { @@ -261,7 +211,6 @@ class ShareAdminLibraries extends Component { errorMsg: gettext("Error") }); } - } else { this.setState({ loading: false, @@ -271,6 +220,40 @@ class ShareAdminLibraries extends Component { }); } + unshareFolder = (item) => { + const share_type = item.share_type; + let options = { + 'share_type': share_type + }; + if (share_type == 'personal') { + options.user = item.user_email; + } else if (share_type == 'group') { + options.group_id = item.group_id; + } + + seafileAPI.unshareRepo(item.repo_id, options).then((res) => { + let items = []; + if (item.share_type === 'personal') { + items = this.state.items.filter(repoItem => { + return !(repoItem.user_email === item.user_email && repoItem.repo_id === item.repo_id); + }); + } else if (item.share_type === 'group') { + items = this.state.items.filter(repoItem => { + return !(repoItem.group_id === item.group_id && repoItem.repo_id === item.repo_id); + }); + } else if (item.share_type === 'public') { + items = this.state.items.filter(repoItem => { + return !(repoItem.share_type === 'public' && repoItem.repo_id === item.repo_id); + }); + } + this.setState({items: items}); + // TODO: show feedback msg + // gettext("Successfully deleted 1 item") + }).catch((error) => { + // TODO: show feedback msg + }); + } + render() { return (
@@ -279,7 +262,12 @@ class ShareAdminLibraries extends Component {

{gettext("Libraries")}

- +
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js index 73ab478d40..465b1772a0 100644 --- a/frontend/src/pages/share-admin/share-links.js +++ b/frontend/src/pages/share-admin/share-links.js @@ -1,10 +1,11 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { Link } from '@reach/router'; import moment from 'moment'; import { Modal, ModalHeader, ModalBody } from 'reactstrap'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants'; +import SharedLinkInfo from '../../models/shared-link-info'; class Content extends Component { @@ -25,13 +26,11 @@ class Content extends Component { showModal = (options) => { this.toggleModal(); - this.setState({ - modalContent: options.content - }); + this.setState({modalContent: options.content}); } render() { - const {loading, errorMsg, items} = this.props.data; + const { loading, errorMsg, items } = this.props; if (loading) { return ; @@ -58,9 +57,12 @@ class Content extends Component { {/*Operations*/} - + + {items.map((item, index) => { + return (); + })} + - {gettext('Link')} @@ -75,113 +77,91 @@ class Content extends Component { } } -class TableBody extends Component { - - constructor(props) { - super(props); - this.state = { - //items: this.props.items - }; - } - - render() { - - let listItems = this.props.items.map(function(item, index) { - return ; - }, this); - - return ( - {listItems} - ); - } -} - class Item extends Component { constructor(props) { super(props); this.state = { showOpIcon: false, - deleted: false }; } handleMouseOver = () => { - this.setState({ - showOpIcon: true - }); + this.setState({showOpIcon: true}); } handleMouseOut = () => { - this.setState({ - showOpIcon: false - }); + this.setState({showOpIcon: false}); } viewLink = (e) => { e.preventDefault(); - this.props.showModal({content: this.props.data.link}); + this.props.showModal({content: this.props.item.link}); } - + removeLink = (e) => { e.preventDefault(); + this.props.onRemoveLink(this.props.item); + } - const data = this.props.data; - seafileAPI.deleteShareLink(data.token) - .then((res) => { - this.setState({ - deleted: true - }); - // TODO: show feedback msg - // gettext("Successfully deleted 1 item") - }) - .catch((error) => { - // TODO: show feedback msg + getLinkParams = () => { + let item = this.props.item; + let icon_size = Utils.isHiDPI() ? 48 : 24; + let iconUrl = ''; + let linkUrl = ''; + if (item.is_dir) { + iconUrl = Utils.getFolderIconUrl({ + is_readonly: false, + size: icon_size }); + linkUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`; + } else { + iconUrl = Utils.getFileIconUrl(item.obj_name, icon_size); + linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`; + } + + return { iconUrl, linkUrl }; + } + + renderExpriedData = () => { + let item = this.props.item; + if (!item.expire_date) { + return ( + -- + ); + } + let expire_date = moment(item.expire_date).format('YYYY-MM-DD'); + return ( + + {item.is_expired ? + {expire_date} : + expire_date + } + + ); } render() { - - if (this.state.deleted) { - return null; - } - - const data = this.props.data; - const icon_size = Utils.isHiDPI() ? 48 : 24; - if (data.is_dir) { - data.icon_url = Utils.getFolderIconUrl({ - is_readonly: false, - size: icon_size - }); - data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`; - } else { - data.icon_url = Utils.getFileIconUrl(data.obj_name, icon_size); - data.url = `${siteRoot}lib/${data.repo_id}/file${Utils.encodePath(data.path)}`; - } - let showDate = function(options) { - const date = moment(options.date).format('YYYY-MM-DD'); - return options.is_expired ? {date} : date; - } + const item = this.props.item; + let { iconUrl, linkUrl } = this.getLinkParams(); let iconVisibility = this.state.showOpIcon ? '' : ' invisible'; let linkIconClassName = 'sf2-icon-link op-icon' + iconVisibility; let deleteIconClassName = 'sf2-icon-delete op-icon' + iconVisibility; - const item = ( + return ( - - {data.obj_name} - {data.repo_name} - {data.view_cnt} - {data.expire_date ? showDate({date: data.expire_date, is_expired: data.is_expired}) : '--'} + + {item.obj_name} + {item.repo_name} + {item.view_cnt} + {this.renderExpriedData()} ); - - return item; } } @@ -199,9 +179,12 @@ class ShareAdminShareLinks extends Component { componentDidMount() { seafileAPI.listShareLinks().then((res) => { // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …} + let items = res.data.map(item => { + return new SharedLinkInfo(item); + }); this.setState({ loading: false, - items: res.data + items: items }); }).catch((error) => { if (error.response) { @@ -227,6 +210,19 @@ class ShareAdminShareLinks extends Component { }); } + onRemoveLink = (item) => { + seafileAPI.deleteUploadLink(item.token).then(() => { + let items = this.state.items.filter(uploadItem => { + return uploadItem.token !== item.token; + }); + this.setState({items: items}); + // TODO: show feedback msg + // gettext("Successfully deleted 1 item") + }).catch((error) => { + // TODO: show feedback msg + }); + } + render() { return (
@@ -236,13 +232,18 @@ class ShareAdminShareLinks extends Component {
  • {gettext('Share Links')}
    • - { canGenerateUploadLink ? + {canGenerateUploadLink && (
  • {gettext('Upload Links')}
    • - : '' } + )}
    - +
    diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js index bc43b86ce9..db74355dd4 100644 --- a/frontend/src/pages/share-admin/upload-links.js +++ b/frontend/src/pages/share-admin/upload-links.js @@ -1,9 +1,10 @@ import React, { Component } from 'react'; import { Link } from '@reach/router'; import { Modal, ModalHeader, ModalBody } from 'reactstrap'; +import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; -import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants'; +import SharedUploadInfo from '../../models/shared-upload-info'; class Content extends Component { @@ -30,7 +31,7 @@ class Content extends Component { } render() { - const {loading, errorMsg, items} = this.props.data; + const { loading, errorMsg, items } = this.props; if (loading) { return ; @@ -56,7 +57,11 @@ class Content extends Component { {/*Operations*/} - + + {items.map((item, index) => { + return (); + })} + @@ -73,34 +78,12 @@ class Content extends Component { } } -class TableBody extends Component { - - constructor(props) { - super(props); - this.state = { - //items: this.props.items - }; - } - - render() { - - let listItems = this.props.items.map(function(item, index) { - return ; - }, this); - - return ( - {listItems} - ); - } -} - class Item extends Component { constructor(props) { super(props); this.state = { showOpIcon: false, - deleted: false }; } @@ -114,60 +97,47 @@ class Item extends Component { viewLink = (e) => { e.preventDefault(); - this.props.showModal({content: this.props.data.link}); + this.props.showModal({content: this.props.item.link}); } - + removeLink = (e) => { e.preventDefault(); - - const data = this.props.data; - seafileAPI.deleteUploadLink(data.token) - .then((res) => { - this.setState({ - deleted: true - }); - // TODO: show feedback msg - // gettext("Successfully deleted 1 item") - }) - .catch((error) => { - // TODO: show feedback msg - }); + this.props.onRemoveLink(this.props.item); } - render() { - - if (this.state.deleted) { - return null; - } - - const data = this.props.data; - - const icon_size = Utils.isHiDPI() ? 48 : 24; - data.icon_url = Utils.getFolderIconUrl({ + getUploadParams = () => { + let item = this.props.item; + let icon_size = Utils.isHiDPI() ? 48 : 24; + let iconUrl = Utils.getFolderIconUrl({ is_readonly: false, size: icon_size }); - data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`; + let uploadUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`; + + return { iconUrl, uploadUrl }; + } + + render() { + let item = this.props.item; + let { iconUrl, uploadUrl } = this.getUploadParams(); let iconVisibility = this.state.showOpIcon ? '' : ' invisible'; let linkIconClassName = 'sf2-icon-link op-icon' + iconVisibility; let deleteIconClassName = 'sf2-icon-delete op-icon' + iconVisibility; - const item = ( + return ( - - {data.obj_name} - {data.repo_name} - {data.view_cnt} + + {item.obj_name} + {item.repo_name} + {item.view_cnt} ); - - return item; } } @@ -185,9 +155,12 @@ class ShareAdminUploadLinks extends Component { componentDidMount() { seafileAPI.listUploadLinks().then((res) => { // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …} + let items = res.data.map(item => { + return new SharedUploadInfo(item); + }); this.setState({ loading: false, - items: res.data + items: items }); }).catch((error) => { if (error.response) { @@ -203,7 +176,6 @@ class ShareAdminUploadLinks extends Component { errorMsg: gettext("Error") }); } - } else { this.setState({ loading: false, @@ -213,20 +185,38 @@ class ShareAdminUploadLinks extends Component { }); } + onRemoveLink = (item) => { + seafileAPI.deleteUploadLink(item.token).then(() => { + let items = this.state.items.filter(uploadItem => { + return uploadItem.token !== item.token; + }); + this.setState({items: items}); + // TODO: show feedback msg + // gettext("Successfully deleted 1 item") + }).catch((error) => { + // TODO: show feedback msg + }); + } + render() { return (
      - { canGenerateShareLink ? -
    • {gettext('Share Links')}
      • - : '' } + { canGenerateShareLink && ( +
    • {gettext('Share Links')}
      • + )}
    • {gettext('Upload Links')}
    - +