diff --git a/frontend/src/components/dialog/create-table-dialog.js b/frontend/src/components/dialog/create-table-dialog.js deleted file mode 100644 index 9e0b2d3257..0000000000 --- a/frontend/src/components/dialog/create-table-dialog.js +++ /dev/null @@ -1,161 +0,0 @@ -import React, { Fragment } from 'react'; -import PropTypes from 'prop-types'; -import Select from 'react-select'; -import makeAnimated from 'react-select/lib/animated'; -import { seafileAPI } from '../../utils/seafile-api.js'; -import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap'; -import { gettext } from '../../utils/constants'; - - -const propTypes = { - createDTable: PropTypes.func.isRequired, - onAddDTable: PropTypes.func.isRequired, - currentWorkspace: PropTypes.object, -}; - -class CreateTableDialog extends React.Component { - constructor(props) { - super(props); - this.state = { - tableName: '', - errMessage: '', - isSubmitBtnActive: false, - selectedOption: null, - options:[], - }; - this.newInput = React.createRef(); - } - - componentDidMount() { - this.newInput.focus(); - this.newInput.setSelectionRange(0,0); - - let options = []; - seafileAPI.getAccountInfo().then((res) => { - let obj = {}; - obj.value = 'Personal'; - obj.email = res.data.email; - obj.label = 'Personal'; - options.push(obj); - seafileAPI.listGroups().then((res) => { - for (let i = 0 ; i < res.data.length; i++) { - let obj = {}; - obj.value = res.data[i].name; - obj.email = res.data[i].id + '@seafile_group'; - obj.label = res.data[i].name; - options.push(obj); - } - this.setState({options: options}); - }); - }); - } - - handleChange = (e) => { - if (!e.target.value.trim()) { - this.setState({isSubmitBtnActive: false}); - } else { - this.setState({isSubmitBtnActive: true}); - } - - this.setState({ - tableName: e.target.value, - }) ; - } - - handleSelectChange = (option) => { - this.setState({selectedOption: option}); - } - - handleSubmit = () => { - if (!this.state.isSubmitBtnActive) return; - if (!this.validateInputParams()) return; - const space = this.props.currentWorkspace; - const options = this.state.options; - let email; - if (space) { - for (let i = 0; i < options.length; i++) { - if ((space.owner_type === 'Personal' && options[i].value === 'Personal') || (space.owner_type === 'Group' && options[i].value === space.owner_name)) { - email = options[i].email; - break; - } - } - } else { - email = this.state.selectedOption.email; - } - this.props.createDTable(this.state.tableName.trim(), email); - } - - handleKeyPress = (e) => { - if (e.key === 'Enter') { - this.handleSubmit(); - e.preventDefault(); - } - } - - toggle = () => { - this.props.onAddDTable(); - } - - validateInputParams = () => { - let errMessage = ''; - let tableName = this.state.tableName.trim(); - if (!tableName.length) { - errMessage = gettext('Name is required'); - this.setState({errMessage: errMessage}); - return false; - } - if (tableName.indexOf('/') > -1) { - errMessage = gettext('Name should not include \'/\'.'); - this.setState({errMessage: errMessage}); - return false; - } - return true; - } - - render() { - const { currentWorkspace } = this.props; - return ( - - {gettext('New Table')} - -
- - - {this.newInput = input;}} - value={this.state.tableName} - onChange={this.handleChange} - /> - -
- {this.state.errMessage && {this.state.errMessage}} - {!currentWorkspace && - - - {' '}{gettext('Add password protection')} - - - {this.state.isShowPasswordInput && - - {' '}{passwordLengthTip} - - - - - - - - - - - } - {this.isExpireDaysNoLimit && ( - - - - - {this.state.isExpireChecked && - - - - } - - )} - {!this.isExpireDaysNoLimit && ( - - - - - - - - - )} - - - - - - {this.permissionOptions.map((item, index) => { - return ( - - - - ); - })} - - - {this.state.errorInfo && {gettext(this.state.errorInfo)}} - - - ); - } - } -} - -GenerateDTableShareLink.propTypes = propTypes; - -export default GenerateDTableShareLink; diff --git a/frontend/src/components/dialog/share-table-dialog.js b/frontend/src/components/dialog/share-table-dialog.js deleted file mode 100644 index 6b7d9e446a..0000000000 --- a/frontend/src/components/dialog/share-table-dialog.js +++ /dev/null @@ -1,93 +0,0 @@ -import React, { Fragment } from 'react'; -import PropTypes from 'prop-types'; -import {gettext} from '../../utils/constants'; -import {Modal, ModalHeader, ModalBody, Nav, NavItem, NavLink, TabContent, TabPane} from 'reactstrap'; -import ShareTableToUser from './share-table-to-user'; - -import '../../css/share-link-dialog.css'; -import GenerateDTableShareLink from './generate-dtable-share-link'; - -const propTypes = { - currentTable: PropTypes.object.isRequired, - ShareCancel: PropTypes.func.isRequired, -}; - -class ShareTableDialog extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTab: 'shareToUser', - }; - } - - toggle = (tab) => { - if (this.state.activeTab !== tab) { - this.setState({activeTab: tab}); - } - }; - - renderContent = () => { - let activeTab = this.state.activeTab; - - return ( - -
- -
-
- - - - - - {activeTab === 'shareLink' && - - } - - -
- - ); - }; - - render() { - let currentTable = this.props.currentTable; - let name = currentTable.name; - - return ( - - {gettext('Share')} {name} - - {this.renderContent()} - - - ); - } -} - -ShareTableDialog.propTypes = propTypes; - -export default ShareTableDialog; diff --git a/frontend/src/components/dialog/share-table-to-user.js b/frontend/src/components/dialog/share-table-to-user.js deleted file mode 100644 index c0a46f6ba5..0000000000 --- a/frontend/src/components/dialog/share-table-to-user.js +++ /dev/null @@ -1,237 +0,0 @@ -import React, { Fragment } from 'react'; -import PropTypes from 'prop-types'; -import { gettext, canInvitePeople, siteRoot } from '../../utils/constants'; -import { Button } from 'reactstrap'; -import { seafileAPI } from '../../utils/seafile-api.js'; -import UserSelect from '../user-select'; -import DtableSharePermissionEditor from '../select-editor/dtable-share-permission-editor'; -import toaster from '../toast'; - -import '../../css/invitations.css'; - -const userItemPropTypes = { - item: PropTypes.object.isRequired, - deleteTableShare: PropTypes.func.isRequired, - updateTableShare: PropTypes.func.isRequired, -}; - -class UserItem extends React.Component { - - constructor(props) { - super(props); - this.state = { - isOperationShow: false - }; - } - - onMouseEnter = () => { - this.setState({isOperationShow: true}); - }; - - onMouseLeave = () => { - this.setState({isOperationShow: false}); - }; - - deleteTableShare = () => { - this.props.deleteTableShare(this.props.item.email); - }; - - updateTableShare = (permission) => { - this.props.updateTableShare(this.props.item.email, permission); - }; - - render() { - let item = this.props.item; - let currentPermission = item.permission; - return ( - - {item.name} - - - - - - - - - ); - } -} - -UserItem.propTypes = userItemPropTypes; - -const propTypes = { - currentTable: PropTypes.object.isRequired, -}; - -class ShareTableToUser extends React.Component { - - constructor(props) { - super(props); - this.state = { - selectedOptions: null, - permission: 'rw', - userList: [] - }; - this.workspaceID = this.props.currentTable.workspace_id; - this.tableName = this.props.currentTable.name; - } - - componentDidMount() { - seafileAPI.listTableShares(this.workspaceID, this.tableName).then((res) => { - this.setState({userList: res.data.user_list}); - }); - } - - handleSelectChange = (options) => { - this.setState({ selectedOptions: options }); - }; - - setPermission = (permission) => { - this.setState({permission: permission}); - }; - - handleError = (e) => { - if (e.response) { - toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3}); - } else { - toaster.danger(gettext('Please check the network.'), {duration: 3}); - } - }; - - addTableShare = () => { - const { selectedOptions, permission, userList } = this.state; - if (!selectedOptions || selectedOptions.length === 0) return; - for (let i = 0; i < selectedOptions.length; i++) { - let name = selectedOptions[i].value; - let email = selectedOptions[i].email; - seafileAPI.addTableShare(this.workspaceID, this.tableName, email, permission).then((res) => { - let userInfo = { - name: name, - email: email, - permission: permission, - }; - userList.push(userInfo); - this.setState({ userList: userList }); - }).catch(error => { - this.handleError(error); - }); - } - this.setState({ selectedOption: null }); - this.refs.userSelect.clearSelect(); - }; - - deleteTableShare = (email) => { - seafileAPI.deleteTableShare(this.workspaceID, this.tableName, email).then((res) => { - let userList = this.state.userList.filter(userInfo => { - return userInfo.email !== email; - }); - this.setState({ - userList: userList, - }); - }).catch(error => { - this.handleError(error); - }); - }; - - updateTableShare = (email, permission) => { - seafileAPI.updateTableShare(this.workspaceID, this.tableName, email, permission).then((res) => { - let userList = this.state.userList.filter(userInfo => { - if (userInfo.email === email) { - userInfo.permission = permission; - } - return userInfo; - }); - this.setState({ - userList: userList, - }); - }).catch(error => { - this.handleError(error); - }); - }; - - render() { - const renderUserList = this.state.userList.map((item, index) => { - return ( - - ); - }); - - return ( - - - - - - - - - - - - - - - - -
{gettext('User')}{gettext('Permission')}
- - - - - -
-
- - - - - - - - - - {renderUserList} - -
{gettext('User')}{gettext('Permission')}
- { canInvitePeople && - - - {gettext('Invite People')} - - } -
- - ); - } -} - -ShareTableToUser.propTypes = propTypes; - -export default ShareTableToUser; diff --git a/frontend/src/components/dialog/table-api-token-dialog.js b/frontend/src/components/dialog/table-api-token-dialog.js deleted file mode 100644 index 671416f3f0..0000000000 --- a/frontend/src/components/dialog/table-api-token-dialog.js +++ /dev/null @@ -1,310 +0,0 @@ -import React, {Fragment} from 'react'; -import PropTypes from 'prop-types'; -import {gettext} from '../../utils/constants'; -import {Modal, ModalHeader, ModalBody, Button, Input} from 'reactstrap'; -import DtableSharePermissionEditor from '../select-editor/dtable-share-permission-editor'; -import {seafileAPI} from '../../utils/seafile-api'; -import toaster from '../toast'; -import copy from 'copy-to-clipboard'; -import Loading from '../loading'; - -import '../../css/share-link-dialog.css'; - - -const apiTokenItemPropTypes = { - item: PropTypes.object.isRequired, - deleteAPIToken: PropTypes.func.isRequired, - updateAPIToken: PropTypes.func.isRequired, -}; - -class APITokenItem extends React.Component { - - constructor(props) { - super(props); - this.state = { - isOperationShow: false, - }; - } - - onMouseEnter = () => { - this.setState({isOperationShow: true}); - }; - - onMouseLeave = () => { - this.setState({isOperationShow: false}); - }; - - onDeleteAPIToken = () => { - this.props.deleteAPIToken(this.props.item.app_name); - }; - - onUpdateAPIToken = (permission) => { - this.props.updateAPIToken(this.props.item.app_name, permission); - }; - - onCopyAPIToken = () => { - let api_token = this.props.item.api_token; - copy(api_token); - toaster.success(gettext('API Token is copied to the clipboard.')); - }; - - render() { - let item = this.props.item; - - return ( - - {item.app_name} - - - - {item.api_token} - - - - - - - - ); - } -} - -APITokenItem.propTypes = apiTokenItemPropTypes; - -const propTypes = { - currentTable: PropTypes.object.isRequired, - onTableAPITokenToggle: PropTypes.func.isRequired, -}; - -class TableAPITokenDialog extends React.Component { - constructor(props) { - super(props); - this.state = { - apiTokenList: [], - permission: 'rw', - appName: '', - errorMsg: '', - loading: true, - isSubmitBtnActive: true, - }; - this.workspaceID = this.props.currentTable.workspace_id; - this.tableName = this.props.currentTable.name; - } - - listAPITokens = () => { - seafileAPI.listTableAPITokens(this.workspaceID, this.tableName).then((res) => { - this.setState({ - apiTokenList: res.data.api_tokens, - loading: false, - }); - }).catch(error => { - if (error.response.status === 403) { - this.setState({ - errorMsg: gettext('Permission denied'), - }); - } else { - this.handleError(error); - } - }); - }; - - onInputChange = (e) => { - let appName = e.target.value; - this.setState({ - appName: appName, - }); - }; - - onKeyDown = (e) => { - if (e.keyCode === 13) { - e.preventDefault(); - this.addAPIToken(); - } - }; - - setPermission = (permission) => { - this.setState({permission: permission}); - }; - - addAPIToken = () => { - if (!this.state.appName) { - return; - } - - this.setState({ - isSubmitBtnActive: false, - }); - const {appName, permission, apiTokenList} = this.state; - - seafileAPI.addTableAPIToken(this.workspaceID, this.tableName, appName, permission).then((res) => { - apiTokenList.push(res.data); - this.setState({ - apiTokenList: apiTokenList, - isSubmitBtnActive: true, - }); - }).catch(error => { - this.handleError(error); - this.setState({ - isSubmitBtnActive: true, - }); - }); - }; - - deleteAPIToken = (appName) => { - seafileAPI.deleteTableAPIToken(this.workspaceID, this.tableName, appName).then((res) => { - const apiTokenList = this.state.apiTokenList.filter(item => { - return item.app_name !== appName; - }); - this.setState({ - apiTokenList: apiTokenList, - }); - }).catch(error => { - this.handleError(error); - }); - }; - - updateAPIToken = (appName, permission) => { - seafileAPI.updateTableAPIToken(this.workspaceID, this.tableName, appName, permission).then((res) => { - let userList = this.state.apiTokenList.filter(item => { - if (item.app_name === appName) { - item.permission = permission; - } - return item; - }); - this.setState({ - userList: userList, - }); - }).catch(error => { - this.handleError(error); - }); - }; - - handleError = (e) => { - if (e.response) { - toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3}); - } else { - toaster.danger(gettext('Please check the network.'), {duration: 3}); - } - }; - - componentDidMount() { - this.listAPITokens(); - } - - renderContent = () => { - const renderAPITokenList = this.state.apiTokenList.map((item, index) => { - return ( - - ); - }); - - return ( - - {this.state.errorMsg && -
-

{this.state.errorMsg}

-
- } - {!this.state.errorMsg && -
- - - - - - - - - - - - - - - -
{gettext('App Name')}{gettext('Permission')}
- - - - - -
- {this.state.apiTokenList.length !== 0 && -
-
- - - - - - - - - - - - {renderAPITokenList} - -
{gettext('App Name')}{gettext('Permission')}{gettext('Access Token')}
-
-
- } - {this.state.loading && - - } -
- } - - ); - }; - - render() { - let currentTable = this.props.currentTable; - let name = currentTable.name; - - return ( - - - {gettext('API Token')} {name} - - {this.renderContent()} - - - ); - } -} - -TableAPITokenDialog.propTypes = propTypes; - -export default TableAPITokenDialog; diff --git a/frontend/src/components/select-editor/dtable-share-permission-editor.js b/frontend/src/components/select-editor/dtable-share-permission-editor.js deleted file mode 100644 index 835a69a4fd..0000000000 --- a/frontend/src/components/select-editor/dtable-share-permission-editor.js +++ /dev/null @@ -1,81 +0,0 @@ -import React, { Fragment } from 'react'; -import PropTypes from 'prop-types'; -import Select from 'react-select'; -import { gettext } from '../../utils/constants'; - -const propTypes = { - isTextMode: PropTypes.bool.isRequired, - isEditIconShow: PropTypes.bool.isRequired, - currentPermission: PropTypes.string.isRequired, - onPermissionChanged: PropTypes.func.isRequired, -}; - -class DtableSharePermissionEditor extends React.Component { - - constructor(props) { - super(props); - this.state = { - isEditing: false, - }; - this.options = [ - { value: 'rw', label:
{gettext('Read-Write')}
}, - { value: 'r', label:
{gettext('Read-Only')}
} - ]; - } - - componentDidMount() { - document.addEventListener('click', this.onHideSelect); - } - - componentWillUnmount() { - document.removeEventListener('click', this.onHideSelect); - } - - onHideSelect = () => { - this.setState({ isEditing: false }); - } - - onEditPermission = (e) => { - e.nativeEvent.stopImmediatePropagation(); - this.setState({ isEditing: true }); - } - - onPermissionChanged = (e) => { - if (e.value !== this.props.currentPermission) { - this.props.onPermissionChanged(e.value); - } - this.setState({ isEditing: false }); - } - - onSelectHandler = (e) => { - e.nativeEvent.stopImmediatePropagation(); - } - - render() { - const { currentPermission, isTextMode } = this.props; - let optionTranslation = currentPermission === 'r' ? gettext('Read-Only') : gettext('Read-Write'); - return ( -
- {(isTextMode && !this.state.isEditing) ? - - {optionTranslation} - {this.props.isEditIconShow && - - } - - : -