mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-05 08:53:14 +00:00
delete dtable code (#4144)
This commit is contained in:
@@ -199,11 +199,6 @@ module.exports = {
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/pages/sys-admin",
|
||||
],
|
||||
viewDataGrid: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/view-file-dtable.js",
|
||||
],
|
||||
viewCdoc: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
@@ -214,26 +209,6 @@ module.exports = {
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/pages/search",
|
||||
],
|
||||
appDTable: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/app-dtable",
|
||||
],
|
||||
dtableAssetFileView: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/dtable-asset-file-view.js",
|
||||
],
|
||||
dtableFormView: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/dtable-form-view.js",
|
||||
],
|
||||
sharedDTableRow: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
paths.appSrc + "/shared-dtable-row.js",
|
||||
],
|
||||
},
|
||||
|
||||
output: {
|
||||
|
@@ -88,13 +88,8 @@ module.exports = {
|
||||
repoFolderTrash: [require.resolve('./polyfills'), paths.appSrc + "/repo-folder-trash.js"],
|
||||
orgAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/org-admin"],
|
||||
sysAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/sys-admin"],
|
||||
viewDataGrid: [require.resolve('./polyfills'), paths.appSrc + "/view-file-dtable.js"],
|
||||
viewCdoc: [require.resolve('./polyfills'), paths.appSrc + "/view-file-cdoc.js"],
|
||||
search: [require.resolve('./polyfills'), paths.appSrc + "/pages/search"],
|
||||
appDTable: [require.resolve('./polyfills'), paths.appSrc + "/app-dtable"],
|
||||
dtableAssetFileView: [require.resolve('./polyfills'), paths.appSrc + "/dtable-asset-file-view.js"],
|
||||
dtableFormView: [require.resolve('./polyfills'), paths.appSrc + "/dtable-form-view.js"],
|
||||
sharedDTableRow: [require.resolve('./polyfills'), paths.appSrc + "/shared-dtable-row.js"],
|
||||
},
|
||||
|
||||
output: {
|
||||
|
5252
frontend/package-lock.json
generated
5252
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,6 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@reach/router": "^1.2.0",
|
||||
"@seafile/dtable": "0.0.177",
|
||||
"@seafile/resumablejs": "^1.1.13",
|
||||
"@seafile/seafile-editor": "^0.2.72",
|
||||
"MD5": "^1.3.0",
|
||||
|
@@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import SidePanel from './pages/dtable/side-panel';
|
||||
import MainPanel from './pages/dtable/main-panel';
|
||||
|
||||
import './css/layout.css';
|
||||
import './css/side-panel.css';
|
||||
import './css/dtable.css';
|
||||
|
||||
class AppDTable extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentTab: 'dtable',
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const seletedTabs = ['apps', 'templetes'];
|
||||
let paths = location.href.split('/');
|
||||
let tab = paths[paths.indexOf('dtable') + 1];
|
||||
let currentTab = seletedTabs.indexOf(tab) > -1 ? tab : 'dtable';
|
||||
this.setState({currentTab: currentTab});
|
||||
}
|
||||
|
||||
onTabClick = (tab) => {
|
||||
if (tab !== this.state.currentTab) {
|
||||
this.setState({currentTab: tab});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="main">
|
||||
<SidePanel currentTab={this.state.currentTab} onTabClick={this.onTabClick}></SidePanel>
|
||||
<MainPanel></MainPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<AppDTable />,
|
||||
document.getElementById('wrapper')
|
||||
);
|
@@ -1,169 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { seafileAPI } from './utils/seafile-api';
|
||||
import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
|
||||
import Loading from './components/loading';
|
||||
import Account from './components/common/account';
|
||||
import FileViewTip from './components/file-view/file-view-tip';
|
||||
import PDFViewer from './components/pdf-viewer';
|
||||
import Audio from './components/file-content-view/audio';
|
||||
import Image from './components/file-content-view/image';
|
||||
import Markdown from './components/file-content-view/markdown';
|
||||
import PDF from './components/file-content-view/pdf';
|
||||
import SVG from './components/file-content-view/svg';
|
||||
import Text from './components/file-content-view/text';
|
||||
import Video from './components/file-content-view/video';
|
||||
|
||||
import './css/shared-file-view.css';
|
||||
|
||||
let loginUser = window.app.pageOptions.name;
|
||||
const {
|
||||
fileType, err, fileName, filePath, repoID, commitID
|
||||
} = window.app.pageOptions;
|
||||
|
||||
class FileContent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let queryStatus = () => {
|
||||
seafileAPI.queryOfficeFileConvertStatus(repoID, commitID, filePath, fileType.toLowerCase()).then((res) => {
|
||||
const convertStatus = res.data['status'];
|
||||
switch (convertStatus) {
|
||||
case 'QUEUED':
|
||||
case 'PROCESSING':
|
||||
this.setState({
|
||||
isLoading: true
|
||||
});
|
||||
setTimeout(queryStatus, 2000);
|
||||
break;
|
||||
case 'ERROR':
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Document convertion failed.')
|
||||
});
|
||||
break;
|
||||
case 'DONE':
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: ''
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Document convertion failed.')
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Please check the network.')
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
queryStatus();
|
||||
}
|
||||
|
||||
setIframeHeight = (e) => {
|
||||
const iframe = e.currentTarget;
|
||||
iframe.height = iframe.contentDocument.body.scrollHeight;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoading, errorMsg } = this.state;
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
if (errorMsg) {
|
||||
return <FileViewTip errorMsg={errorMsg} />;
|
||||
}
|
||||
return (
|
||||
<Fragment>
|
||||
{
|
||||
fileType === 'Document' ?
|
||||
<div className="shared-file-view-body pdf-file-view">
|
||||
<PDFViewer />
|
||||
</div> :
|
||||
<div className="shared-file-view-body spreadsheet-file-view">
|
||||
<iframe id="spreadsheet-container" title={fileName} src={`${siteRoot}office-convert/static/${repoID}/${commitID}${encodeURIComponent(filePath)}/index.html`} onLoad={this.setIframeHeight}></iframe>
|
||||
</div>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DTableAssetFileView extends React.Component {
|
||||
|
||||
render() {
|
||||
let renderItem;
|
||||
|
||||
if (err) {
|
||||
renderItem = <FileViewTip />;
|
||||
} else {
|
||||
switch (fileType) {
|
||||
case 'Audio':
|
||||
renderItem = <Audio />;
|
||||
break;
|
||||
case 'Document':
|
||||
case 'SpreadSheet':
|
||||
renderItem = <FileContent />;
|
||||
break;
|
||||
case 'Image':
|
||||
renderItem = <Image />;
|
||||
break;
|
||||
case 'Markdown':
|
||||
renderItem = <Markdown />;
|
||||
break;
|
||||
case 'PDF':
|
||||
renderItem = <PDF />;
|
||||
break;
|
||||
case 'SVG':
|
||||
renderItem = <SVG />;
|
||||
break;
|
||||
case 'Text':
|
||||
renderItem = <Text />;
|
||||
break;
|
||||
case 'Video':
|
||||
renderItem = <Video />;
|
||||
break;
|
||||
default:
|
||||
renderItem = (
|
||||
<FileViewTip />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="shared-file-view-md">
|
||||
<div className="shared-file-view-md-header d-flex">
|
||||
<a href={siteRoot}>
|
||||
<img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
|
||||
</a>
|
||||
{ loginUser && <Account /> }
|
||||
</div>
|
||||
<div className="shared-file-view-md-main">
|
||||
<div className="shared-file-view-head">
|
||||
<div className="float-left">
|
||||
<h2 className="ellipsis" title={fileName}>{fileName}</h2>
|
||||
</div>
|
||||
</div>
|
||||
{renderItem}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render (
|
||||
<DTableAssetFileView />,
|
||||
document.getElementById('wrapper')
|
||||
);
|
@@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import CodeMirror from 'react-codemirror';
|
||||
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
import './css/text-file-view.css';
|
||||
|
||||
const { formContent } = window.shared.pageOptions;
|
||||
|
||||
class DTableFormView extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="shared-file-view-body text-file-view">
|
||||
<CodeMirror
|
||||
ref="code-mirror-editor"
|
||||
value={formContent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<DTableFormView />,
|
||||
document.getElementById('wrapper')
|
||||
);
|
@@ -1,122 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
|
||||
import Rename from '../../components/rename';
|
||||
|
||||
const gettext = window.gettext;
|
||||
const siteRoot = window.app.config.siteRoot;
|
||||
|
||||
const propTypes = {
|
||||
isItemFreezed: PropTypes.bool.isRequired,
|
||||
table: PropTypes.object.isRequired,
|
||||
renameTable: PropTypes.func.isRequired,
|
||||
onDeleteTableToggle: PropTypes.func.isRequired,
|
||||
onShareTableToggle: PropTypes.func.isRequired,
|
||||
onTableAPITokenToggle: PropTypes.func.isRequired,
|
||||
onFreezedItem: PropTypes.func.isRequired,
|
||||
onUnfreezedItem: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class DTableItemCommon extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isTableRenaming: false,
|
||||
dropdownOpen: false,
|
||||
active: false,
|
||||
};
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({active: true});
|
||||
}
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
if (!this.props.isItemFreezed) {
|
||||
this.setState({active: false});
|
||||
}
|
||||
}
|
||||
|
||||
onRenameTableConfirm = (newTableName) => {
|
||||
let oldTableName = this.props.table.name;
|
||||
this.props.renameTable(oldTableName, newTableName);
|
||||
this.onRenameTableToggle();
|
||||
}
|
||||
|
||||
onRenameTableToggle = () => {
|
||||
this.setState({isTableRenaming: !this.state.isTableRenaming});
|
||||
this.props.onUnfreezedItem();
|
||||
}
|
||||
|
||||
onDeleteTableToggle = () => {
|
||||
this.props.onDeleteTableToggle(this.props.table);
|
||||
}
|
||||
|
||||
onShareTableToggle = () => {
|
||||
this.props.onShareTableToggle(this.props.table);
|
||||
}
|
||||
|
||||
onTableAPITokenToggle = () => {
|
||||
this.props.onTableAPITokenToggle(this.props.table);
|
||||
}
|
||||
|
||||
dropdownToggle = () => {
|
||||
if (this.state.dropdownOpen) {
|
||||
this.props.onUnfreezedItem();
|
||||
} else {
|
||||
this.props.onFreezedItem();
|
||||
}
|
||||
this.setState({ dropdownOpen: !this.state.dropdownOpen });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let table = this.props.table;
|
||||
let tableHref = siteRoot + 'workspace/' + table.workspace_id + '/dtable/' + table.name + '/';
|
||||
|
||||
return (
|
||||
<div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={`table-item ${this.state.active ? 'tr-highlight' : ''}`}>
|
||||
<div className="table-icon"><span className="sf3-font sf3-font-table"></span></div>
|
||||
<div className="table-name">
|
||||
{this.state.isTableRenaming && (
|
||||
<Rename
|
||||
hasSuffix={true}
|
||||
name={table.name}
|
||||
onRenameConfirm={this.onRenameTableConfirm}
|
||||
onRenameCancel={this.onRenameTableToggle}
|
||||
/>
|
||||
)}
|
||||
{!this.state.isTableRenaming && <a href={tableHref} target="_blank">{table.name}</a>}
|
||||
</div>
|
||||
<div className="table-dropdown-menu">
|
||||
{this.state.active && (
|
||||
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="table-item-more-operation">
|
||||
<DropdownToggle
|
||||
tag='i'
|
||||
className='fa fa-ellipsis-v cursor-pointer attr-action-icon table-dropdown-menu-icon'
|
||||
title={gettext('More Operations')}
|
||||
data-toggle="dropdown"
|
||||
aria-expanded={this.state.dropdownOpen}
|
||||
>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu className="drop-list" right={true}>
|
||||
<DropdownItem onClick={this.onRenameTableToggle}>{gettext('Rename')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onDeleteTableToggle}>{gettext('Delete')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onShareTableToggle}>{gettext('Share')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onTableAPITokenToggle}>{gettext('API Token')}</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DTableItemCommon.propTypes = propTypes;
|
||||
|
||||
export default DTableItemCommon;
|
||||
|
@@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const gettext = window.gettext;
|
||||
const { siteRoot } = window.app.config;
|
||||
|
||||
const propTypes = {
|
||||
table: PropTypes.object.isRequired,
|
||||
leaveShareTable: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class DTableItemShared extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
active: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.setState({active: true});
|
||||
};
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({active: false});
|
||||
};
|
||||
|
||||
onLeaveShareTableSubmit = () => {
|
||||
let table = this.props.table;
|
||||
this.props.leaveShareTable(table);
|
||||
};
|
||||
|
||||
render() {
|
||||
let table = this.props.table;
|
||||
let tableHref = siteRoot + 'workspace/' + table.workspace_id + '/dtable/' + table.name + '/';
|
||||
|
||||
return (
|
||||
|
||||
<div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={ `table-item ${this.state.active ? 'tr-highlight' : ''}`}>
|
||||
<div className="table-icon"><span className="sf3-font sf3-font-table"></span></div>
|
||||
<div className="table-name">
|
||||
<a href={tableHref} target="_blank">{table.name}</a>
|
||||
</div>
|
||||
<div className="table-dropdown-menu">
|
||||
<i
|
||||
className="action-icon sf2-icon-x3"
|
||||
title={gettext('Leave Share')}
|
||||
style={!this.state.active ? {opacity: 0} : {}}
|
||||
onClick={this.onLeaveShareTableSubmit}>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DTableItemShared.propTypes = propTypes;
|
||||
|
||||
export default DTableItemShared;
|
@@ -1,209 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import Loading from '../../components/loading';
|
||||
import DTableItemCommon from './dtable-item-common';
|
||||
import CreateTableDialog from '../../components/dialog/create-table-dialog';
|
||||
import DeleteTableDialog from '../../components/dialog/delete-table-dialog';
|
||||
import ShareTableDialog from '../../components/dialog/share-table-dialog';
|
||||
import TableAPITokenDialog from '../../components/dialog/table-api-token-dialog';
|
||||
|
||||
const gettext = window.gettext;
|
||||
|
||||
const propTypes = {
|
||||
workspace: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
class DTableWorkspaceCommon extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tableList: [],
|
||||
isDataLoading: true,
|
||||
isItemFreezed: false,
|
||||
isShowCreateDialog: false,
|
||||
isShowDeleteDialog: false,
|
||||
isShowSharedDialog: false,
|
||||
isShowAPITokenDialog: false,
|
||||
currentTable: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let workspace = this.props.workspace;
|
||||
let tableList = workspace.table_list;
|
||||
this.setState({
|
||||
tableList: tableList,
|
||||
isDataLoading: false,
|
||||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.workspace !== this.props.workspace) {
|
||||
let workspace = nextProps.workspace;
|
||||
let tableList = workspace.table_list;
|
||||
this.setState({tableList: tableList});
|
||||
}
|
||||
}
|
||||
|
||||
onFreezedItem = () => {
|
||||
this.setState({isItemFreezed: true});
|
||||
}
|
||||
|
||||
onUnfreezedItem = () => {
|
||||
this.setState({isItemFreezed: false});
|
||||
}
|
||||
|
||||
onCreateTableToggle = () => {
|
||||
this.setState({isShowCreateDialog: !this.state.isShowCreateDialog});
|
||||
}
|
||||
|
||||
onDeleteTableToggle = (table) => {
|
||||
this.setState({
|
||||
isShowDeleteDialog: !this.state.isShowDeleteDialog,
|
||||
currentTable: table
|
||||
});
|
||||
this.onUnfreezedItem();
|
||||
}
|
||||
|
||||
onDeleteTableSubmit = () => {
|
||||
let tableName = this.state.currentTable.name;
|
||||
this.deleteTable(tableName);
|
||||
this.onDeleteTableToggle();
|
||||
}
|
||||
|
||||
onShareTableToggle = (table) => {
|
||||
this.setState({
|
||||
isShowSharedDialog: !this.state.isShowSharedDialog,
|
||||
currentTable: table
|
||||
});
|
||||
this.onUnfreezedItem();
|
||||
}
|
||||
|
||||
onTableAPITokenToggle = (table) => {
|
||||
this.setState({
|
||||
isShowAPITokenDialog: !this.state.isShowAPITokenDialog,
|
||||
currentTable: table
|
||||
});
|
||||
this.onUnfreezedItem();
|
||||
}
|
||||
|
||||
onCreateTable = (tableName, owner) => {
|
||||
seafileAPI.createTable(tableName, owner).then((res) => {
|
||||
this.state.tableList.push(res.data.table);
|
||||
this.setState({
|
||||
tableList: this.state.tableList
|
||||
});
|
||||
}).catch((error) => {
|
||||
if(error.response) {
|
||||
this.setState({errorMsg: gettext('Error')});
|
||||
}
|
||||
});
|
||||
|
||||
this.onCreateTableToggle();
|
||||
}
|
||||
|
||||
deleteTable = (tableName) => {
|
||||
let workspaceID = this.props.workspace.id;
|
||||
seafileAPI.deleteTable(workspaceID, tableName).then(() => {
|
||||
let tableList = this.state.tableList.filter(table => {
|
||||
return table.name !== tableName;
|
||||
});
|
||||
this.setState({tableList: tableList});
|
||||
}).catch((error) => {
|
||||
if(error.response) {
|
||||
this.setState({errorMsg: gettext('Error')});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renameTable = (oldTableName, newTableName) => {
|
||||
let workspaceID = this.props.workspace.id;
|
||||
seafileAPI.renameTable(workspaceID, oldTableName, newTableName).then((res) => {
|
||||
let tableList = this.state.tableList.map((table) => {
|
||||
if (table.name === oldTableName) {
|
||||
table = res.data.table;
|
||||
}
|
||||
return table;
|
||||
});
|
||||
this.setState({tableList: tableList});
|
||||
}).catch((error) => {
|
||||
if(error.response) {
|
||||
this.setState({errorMsg: gettext('Error')});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let { isDataLoading } = this.state;
|
||||
if (isDataLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
let { workspace } = this.props;
|
||||
let { tableList, isItemFreezed } = this.state;
|
||||
let isPersonal = workspace.owner_type === 'Personal';
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="workspace">
|
||||
<div className="table-heading">{isPersonal ? gettext('My Tables') : workspace.owner_name}</div>
|
||||
<div className="table-item-container">
|
||||
{tableList.map((table, index) => {
|
||||
return (
|
||||
<DTableItemCommon
|
||||
key={index}
|
||||
table={table}
|
||||
isItemFreezed={isItemFreezed}
|
||||
renameTable={this.renameTable}
|
||||
onShareTableToggle={this.onShareTableToggle}
|
||||
onDeleteTableToggle={this.onDeleteTableToggle}
|
||||
onTableAPITokenToggle={this.onTableAPITokenToggle}
|
||||
onFreezedItem={this.onFreezedItem}
|
||||
onUnfreezedItem={this.onUnfreezedItem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div className={`table-item ${isItemFreezed ? '' : 'add-table-range'}`}>
|
||||
<div className="table-icon"><span className="sf3-font sf3-font-add"></span></div>
|
||||
<div className="table-name"><a href="#" onClick={this.onCreateTableToggle}>{gettext('Add a table')}</a></div>
|
||||
<div className="table-dropdown-menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.isShowCreateDialog && (
|
||||
<CreateTableDialog
|
||||
createDTable={this.onCreateTable}
|
||||
onAddDTable={this.onCreateTableToggle}
|
||||
currentWorkspace={this.props.workspace}
|
||||
/>
|
||||
)}
|
||||
{this.state.isShowDeleteDialog && (
|
||||
<DeleteTableDialog
|
||||
currentTable={this.state.currentTable}
|
||||
deleteCancel={this.onDeleteTableToggle}
|
||||
handleSubmit={this.onDeleteTableSubmit}
|
||||
/>
|
||||
)}
|
||||
{this.state.isShowSharedDialog &&
|
||||
<ShareTableDialog
|
||||
currentTable={this.state.currentTable}
|
||||
ShareCancel={this.onShareTableToggle}
|
||||
/>
|
||||
}
|
||||
{this.state.isShowAPITokenDialog &&
|
||||
<TableAPITokenDialog
|
||||
currentTable={this.state.currentTable}
|
||||
onTableAPITokenToggle={this.onTableAPITokenToggle}
|
||||
/>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
DTableWorkspaceCommon.propTypes = propTypes;
|
||||
|
||||
export default DTableWorkspaceCommon;
|
@@ -1,78 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import DTableItemShared from './dtable-item-shared';
|
||||
import Loading from '../../components/loading';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
|
||||
const gettext = window.gettext;
|
||||
const username = window.app.pageOptions.username;
|
||||
|
||||
const propTypes = {
|
||||
tableList: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
class DTableWorkspaceShared extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isDataLoading: true,
|
||||
tableList: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let tableList = this.props.tableList;
|
||||
this.setState({
|
||||
isDataLoading: false,
|
||||
tableList: tableList,
|
||||
});
|
||||
}
|
||||
|
||||
leaveShareTable = (table) => {
|
||||
let email = username;
|
||||
let tableName = table.name;
|
||||
let workspaceID = table.workspace_id;
|
||||
seafileAPI.deleteTableShare(workspaceID, tableName, email).then(() => {
|
||||
let tableList = this.state.tableList.filter(table => {
|
||||
return table.name !== tableName;
|
||||
});
|
||||
this.setState({tableList: tableList});
|
||||
}).catch((error) => {
|
||||
if(error.response) {
|
||||
this.setState({errorMsg: gettext('Error')});
|
||||
} else {
|
||||
this.setState({
|
||||
errorMsg: gettext('Please check the network.')
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.isDataLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (!this.state.tableList.length) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="workspace">
|
||||
<div className="table-heading">{gettext('Shared with me')}</div>
|
||||
<div className="table-item-container">
|
||||
{this.state.tableList.map((table, index) => {
|
||||
return (
|
||||
<DTableItemShared key={index} table={table} leaveShareTable={this.leaveShareTable} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DTableWorkspaceShared.propTypes = propTypes;
|
||||
|
||||
export default DTableWorkspaceShared;
|
@@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
|
||||
};
|
||||
|
||||
class MainPanelApps extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>apps</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MainPanelApps.propTypes = propTypes;
|
||||
|
||||
export default MainPanelApps;
|
@@ -1,141 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Loading from '../../components/loading';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import Workspace from './model/workspace';
|
||||
import DTableWorkspaceCommon from './dtable-workspace-common';
|
||||
import DTableWorkspaceShared from './dtable-workspace-shared';
|
||||
import CreateTableDialog from '../../components/dialog/create-table-dialog';
|
||||
|
||||
const propTypes = {
|
||||
|
||||
};
|
||||
|
||||
class MainPanelDTables extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
errorMsg: null,
|
||||
workspaceList: [],
|
||||
sharedTableList: [],
|
||||
isWorkspaceListLoading: true,
|
||||
isSharedTableListLoading: true,
|
||||
isShowCreateDialog: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadWorkspaceList();
|
||||
this.loadSharedTableList();
|
||||
}
|
||||
|
||||
loadWorkspaceList = () => {
|
||||
seafileAPI.listWorkspaces().then((res) => {
|
||||
let workspaceList = res.data.workspace_list.map(item => {
|
||||
return new Workspace(item);
|
||||
});
|
||||
this.setState({
|
||||
isWorkspaceListLoading: false,
|
||||
workspaceList: workspaceList,
|
||||
});
|
||||
}).catch((error) => {
|
||||
this.errorCallbackHandle(error);
|
||||
});
|
||||
}
|
||||
|
||||
loadSharedTableList = () => {
|
||||
seafileAPI.listSharedTables().then((res) => {
|
||||
this.setState({
|
||||
isSharedTableListLoading: false,
|
||||
sharedTableList: res.data.table_list,
|
||||
});
|
||||
}).catch((error) => {
|
||||
this.errorCallbackHandle(error);
|
||||
});
|
||||
}
|
||||
|
||||
errorCallbackHandle = (error) => {
|
||||
if (error.response) {
|
||||
this.setState({
|
||||
loading: false,
|
||||
errorMsg: gettext('Error')
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
loading: false,
|
||||
errorMsg: gettext('Please check the network.')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onCreateTableToggle = () => {
|
||||
this.setState({isShowCreateDialog: !this.state.isShowCreateDialog});
|
||||
}
|
||||
|
||||
onCreateTable = (tableName, owner) => {
|
||||
seafileAPI.createTable(tableName, owner).then(() => {
|
||||
this.loadWorkspaceList();
|
||||
}).catch((error) => {
|
||||
if(error.response) {
|
||||
this.setState({errorMsg: gettext('Error')});
|
||||
}
|
||||
});
|
||||
|
||||
this.onCreateTableToggle();
|
||||
}
|
||||
|
||||
render() {
|
||||
let { isWorkspaceListLoading, isSharedTableListLoading } = this.state;
|
||||
if (isWorkspaceListLoading || isSharedTableListLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
let { workspaceList, sharedTableList } = this.state;
|
||||
let personalWorkspace = workspaceList.find(workspace => {
|
||||
return workspace.owner_type === 'Personal';
|
||||
});
|
||||
|
||||
let groupWorkspaceList = workspaceList.filter(workspace => {
|
||||
return workspace.owner_type === 'Group';
|
||||
});
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="main-panel-center dtable-center">
|
||||
<div className="cur-view-container d-flex flex-1 flex-column">
|
||||
<div className="cur-view-header">
|
||||
<div className="cur-view-title">DTable</div>
|
||||
</div>
|
||||
<div className="cur-view-content">
|
||||
{this.state.errorMsg &&
|
||||
<p className="error text-center">{this.state.errorMsg}</p>
|
||||
}
|
||||
{!this.state.errorMsg && (
|
||||
<Fragment>
|
||||
<DTableWorkspaceCommon workspace={personalWorkspace} />
|
||||
<DTableWorkspaceShared tableList={sharedTableList} />
|
||||
{groupWorkspaceList.length > 0 && groupWorkspaceList.map((workspace, index) => {
|
||||
return (<DTableWorkspaceCommon key={index} workspace={workspace} />);
|
||||
})}
|
||||
<button className="btn btn-secondary dtable-add-btn mb-4" onClick={this.onCreateTableToggle}>{gettext('New DTable')}</button>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.isShowCreateDialog && (
|
||||
<CreateTableDialog
|
||||
createDTable={this.onCreateTable}
|
||||
onAddDTable={this.onCreateTableToggle}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MainPanelDTables.propTypes = propTypes;
|
||||
|
||||
export default MainPanelDTables;
|
@@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
|
||||
};
|
||||
|
||||
class MainPanelTempletes extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>templetes</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MainPanelTempletes.propTypes = propTypes;
|
||||
|
||||
export default MainPanelTempletes;
|
@@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Router } from '@reach/router';
|
||||
import Notification from '../../components/common/notification';
|
||||
import Account from '../../components/common/account';
|
||||
import Search from './search/search';
|
||||
import MainPanelDTables from './main-panel-dtables';
|
||||
import MainPanelApps from './main-panel-apps';
|
||||
import MainPanelTempletes from './main-panel-templetes';
|
||||
|
||||
import '../../css/search.css';
|
||||
|
||||
const siteRoot = window.app.config.siteRoot;
|
||||
|
||||
|
||||
const propTypes = {
|
||||
|
||||
};
|
||||
|
||||
class MainPanel extends React.Component {
|
||||
|
||||
onSearchedClick = (item) => {
|
||||
let url = siteRoot + 'workspace/' + item.workspace_id + '/dtable/' + item.name + '/';
|
||||
window.open(url)
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let searchPlaceholder = this.props.searchPlaceholder || 'Search Dtables';
|
||||
|
||||
return (
|
||||
<div className="main-panel">
|
||||
<div className="main-panel-north dtable-header">
|
||||
<div className="common-toolbar">
|
||||
<Search
|
||||
placeholder={searchPlaceholder}
|
||||
onSearchedClick={this.onSearchedClick}
|
||||
/>
|
||||
<Notification />
|
||||
<Account />
|
||||
</div>
|
||||
</div>
|
||||
<Router className="reach-router">
|
||||
<MainPanelDTables path={siteRoot + 'dtable/'} />
|
||||
<MainPanelApps path={siteRoot + 'dtable/apps/'} />
|
||||
<MainPanelTempletes path={siteRoot + 'dtable/templetes/'} />
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MainPanel.propTypes = propTypes;
|
||||
|
||||
export default MainPanel;
|
@@ -1,12 +0,0 @@
|
||||
class Workspace {
|
||||
|
||||
constructor(obj) {
|
||||
this.id = obj.id || '';
|
||||
this.owner_name = obj.owner_name || '';
|
||||
this.owner_type = obj.owner_type || '';
|
||||
this.table_list = obj.table_list || [];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Workspace;
|
@@ -1,33 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
item: PropTypes.object.isRequired,
|
||||
onItemClickHandler: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class SearchResultItem extends React.Component {
|
||||
|
||||
onClickHandler = () => {
|
||||
var item = this.props.item;
|
||||
this.props.onItemClickHandler(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
let item = this.props.item;
|
||||
return (
|
||||
<li className="search-result-item" onClick={this.onClickHandler}>
|
||||
<span className="sf3-font sf3-font-table"></span>
|
||||
<div className="item-content">
|
||||
<div className="item-name ellipsis">{item.name}</div>
|
||||
{/* <div className="item-link ellipsis">{item.repo_name}/{item.link_content}</div> */}
|
||||
{/* <div className="item-text ellipsis" dangerouslySetInnerHTML={{__html: item.content}}></div> */}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SearchResultItem.propTypes = propTypes;
|
||||
|
||||
export default SearchResultItem;
|
@@ -1,272 +0,0 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import MediaQuery from 'react-responsive';
|
||||
import { seafileAPI } from '../../../utils/seafile-api';
|
||||
import { gettext, siteRoot, username } from '../../../utils/constants';
|
||||
import SearchResultItem from './search-result-item';
|
||||
import More from '../../../components/more';
|
||||
import Workspace from '../model/workspace';
|
||||
|
||||
const propTypes = {
|
||||
isPublic: PropTypes.bool,
|
||||
repoID: PropTypes.string,
|
||||
placeholder: PropTypes.string,
|
||||
onSearchedClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class Search extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
width: 'default',
|
||||
value: '',
|
||||
resultItems: [],
|
||||
isMaskShow: false,
|
||||
isResultShow: false,
|
||||
isResultGetted: false,
|
||||
isCloseShow: false,
|
||||
isSearchInputShow: false, // for mobile
|
||||
};
|
||||
this.inputValue = '';
|
||||
}
|
||||
|
||||
onFocusHandler = () => {
|
||||
this.setState({
|
||||
width: '30rem',
|
||||
isMaskShow: true,
|
||||
isCloseShow: true
|
||||
});
|
||||
}
|
||||
|
||||
onCloseHandler = () => {
|
||||
this.resetToDefault();
|
||||
}
|
||||
|
||||
onItemClickHandler = (item) => {
|
||||
this.resetToDefault();
|
||||
this.props.onSearchedClick(item);
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let _this = this;
|
||||
this.setState({value: event.target.value});
|
||||
let newValue = event.target.value;
|
||||
if (this.inputValue === newValue.trim()) {
|
||||
return false;
|
||||
}
|
||||
this.inputValue = newValue.trim();
|
||||
|
||||
if (this.inputValue === '' || _this.getValueLength(this.inputValue) < 3) {
|
||||
this.setState({
|
||||
isResultShow: false,
|
||||
isResultGetted: false
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let queryData = {
|
||||
q: newValue,
|
||||
};
|
||||
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
this.timer = setTimeout(_this.getSearchResult(queryData), 500);
|
||||
}
|
||||
|
||||
getSearchResult(queryData) {
|
||||
|
||||
this.setState({
|
||||
isResultShow: true,
|
||||
isResultGetted: false
|
||||
});
|
||||
|
||||
this.sendRequest(queryData);
|
||||
}
|
||||
|
||||
sendRequest(queryData) { //search dtable
|
||||
seafileAPI.listWorkspaces().then((res) => {
|
||||
let workspaceList = res.data.workspace_list.filter(item => {
|
||||
return new Workspace(item);
|
||||
});
|
||||
let dtableNameList = [];
|
||||
workspaceList.forEach(dtable => {
|
||||
let resultData = dtable.table_list.filter(item => {
|
||||
return item.name.indexOf(queryData.q) > -1;
|
||||
});
|
||||
if (resultData.length > 0) {
|
||||
dtableNameList.push(...resultData);
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
resultItems: dtableNameList,
|
||||
isResultGetted: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getValueLength(str) {
|
||||
var i = 0, code, len = 0;
|
||||
for (; i < str.length; i++) {
|
||||
code = str.charCodeAt(i);
|
||||
if (code == 10) { //solve enter problem
|
||||
len += 2;
|
||||
} else if (code < 0x007f) {
|
||||
len += 1;
|
||||
} else if (code >= 0x0080 && code <= 0x07ff) {
|
||||
len += 2;
|
||||
} else if (code >= 0x0800 && code <= 0xffff) {
|
||||
len += 3;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
}
|
||||
|
||||
resetToDefault() {
|
||||
this.inputValue = null;
|
||||
this.setState({
|
||||
width: '',
|
||||
value: '',
|
||||
isMaskShow: false,
|
||||
isCloseShow: false,
|
||||
isResultShow: false,
|
||||
isResultGetted: false,
|
||||
resultItems: [],
|
||||
isSearchInputShow: false,
|
||||
});
|
||||
}
|
||||
|
||||
onShowMore = () => {
|
||||
let repoID = this.props.repoID;
|
||||
let newValue = this.state.value;
|
||||
let queryData = {
|
||||
q: newValue,
|
||||
search_repo: repoID ? repoID : 'all',
|
||||
search_ftypes: 'all',
|
||||
};
|
||||
let params = '';
|
||||
for (let key in queryData) {
|
||||
params += key + '=' + queryData[key] + '&';
|
||||
}
|
||||
window.location = siteRoot + 'search/?' + params.slice(0, params.length - 1);
|
||||
}
|
||||
|
||||
renderSearchResult() {
|
||||
if (!this.state.isResultShow) {
|
||||
return;
|
||||
}
|
||||
if (!this.state.isResultGetted || this.getValueLength(this.inputValue) < 3) {
|
||||
return (
|
||||
<span className="loading-icon loading-tip"></span>
|
||||
);
|
||||
}
|
||||
if (!this.state.resultItems.length) {
|
||||
return (
|
||||
<div className="search-result-none">{gettext('No results matching.')}</div>
|
||||
);
|
||||
}
|
||||
let isShowMore = this.state.resultItems.length >= 5 ? true : false;
|
||||
return (
|
||||
<ul className="search-result-list">
|
||||
{this.state.resultItems.map(item => {
|
||||
return (
|
||||
<SearchResultItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
onItemClickHandler={this.onItemClickHandler}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{isShowMore && <More onShowMore={this.onShowMore}/>}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
onSearchToggle = () => {
|
||||
this.setState({
|
||||
isSearchInputShow: !this.state.isSearchInputShow,
|
||||
isMaskShow: !this.state.isMaskShow,
|
||||
});
|
||||
}
|
||||
|
||||
onSearchPage = () => {
|
||||
window.location.href = siteRoot + 'search/';
|
||||
}
|
||||
|
||||
render() {
|
||||
let width = this.state.width !== 'default' ? this.state.width : '';
|
||||
let style = {'width': width};
|
||||
return (
|
||||
<Fragment>
|
||||
<MediaQuery query="(min-width: 768px)">
|
||||
<div className="search">
|
||||
<div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
|
||||
<div className="search-container">
|
||||
<div className="input-icon">
|
||||
<i className="search-icon-left input-icon-addon fas fa-search"></i>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control search-input"
|
||||
name="query"
|
||||
placeholder={this.props.placeholder}
|
||||
style={style}
|
||||
value={this.state.value}
|
||||
onFocus={this.onFocusHandler}
|
||||
onChange={this.onChangeHandler}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{(this.state.isCloseShow && username) &&
|
||||
<i className='search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow'
|
||||
onClick={this.onSearchPage}></i>
|
||||
}
|
||||
{this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
|
||||
</div>
|
||||
<div className="search-result-container">
|
||||
{this.renderSearchResult()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery query="(max-width: 767.8px)">
|
||||
<div className="search-icon-container">
|
||||
<i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
|
||||
</div>
|
||||
{this.state.isSearchInputShow &&
|
||||
<div className="search">
|
||||
<div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
|
||||
<div className="search-container">
|
||||
<div className="input-icon">
|
||||
<i className="search-icon-left input-icon-addon fas fa-search"></i>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control search-input"
|
||||
name="query"
|
||||
placeholder={this.props.placeholder}
|
||||
style={style}
|
||||
value={this.state.value}
|
||||
onFocus={this.onFocusHandler}
|
||||
onChange={this.onChangeHandler}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{(this.state.isCloseShow && username) &&
|
||||
<i className='search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow'
|
||||
onClick={this.onSearchPage}></i>
|
||||
}
|
||||
{this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
|
||||
</div>
|
||||
<div className="search-result-container">
|
||||
{this.renderSearchResult()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</MediaQuery>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Search.propTypes = propTypes;
|
||||
|
||||
export default Search;
|
@@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from '@reach/router';
|
||||
|
||||
const gettext = window.gettext;
|
||||
const siteRoot = window.app.config.siteRoot;
|
||||
|
||||
const propTypes = {
|
||||
currentTab: PropTypes.string.isRequired,
|
||||
onTabClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class SidePanel extends React.Component {
|
||||
|
||||
onTabClick = (tab) => {
|
||||
this.props.onTabClick(tab);
|
||||
}
|
||||
|
||||
getActiveClass = (tab) => {
|
||||
return this.props.currentTab === tab ? 'active' : '';
|
||||
}
|
||||
|
||||
render() {
|
||||
let imgUrl = siteRoot + 'media/img/dtable-logo.png'
|
||||
return (
|
||||
<div className="side-panel">
|
||||
<div className="side-panel-north dtable-header">
|
||||
<div className="dtable-logo">
|
||||
<img src={imgUrl} height="32" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="side-panel-center">
|
||||
<div className="dtable-side-nav">
|
||||
<h3 className="dtable-nav-title">{gettext('Main')}</h3>
|
||||
<ul className="nav nav-pills flex-column dtable-nav-list">
|
||||
<li className={`nav-item dtable-nav-item ${this.getActiveClass('dtable')}`} title={gettext('DTable')} onClick={this.onTabClick.bind(this, 'dtable')}>
|
||||
<Link to={siteRoot + 'dtable/'} className="nav-link dtable-nav-link">
|
||||
<span className="sf3-font sf3-font-dtable-logo nav-icon"></span>
|
||||
<span className="nav-text">{gettext('DTable')}</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`nav-item dtable-nav-item ${this.getActiveClass('apps')}`} title={gettext('Apps')} onClick={this.onTabClick.bind(this, 'apps')}>
|
||||
<Link to={siteRoot + 'dtable/apps/'} className="nav-link dtable-nav-link">
|
||||
<span className="dtable-font dtable-icon-apps nav-icon"></span>
|
||||
<span className="nav-text">{gettext('Apps')}</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`nav-item dtable-nav-item ${this.getActiveClass('templetes')}`} title={gettext('Templetes')} onClick={this.onTabClick.bind(this, 'templetes')}>
|
||||
<Link to={siteRoot + 'dtable/templetes/'} className="nav-link dtable-nav-link">
|
||||
<span className="dtable-font dtable-icon-templates nav-icon"></span>
|
||||
<span className="nav-text">{gettext('Templetes')}</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SidePanel.propTypes = propTypes;
|
||||
|
||||
export default SidePanel;
|
@@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import CodeMirror from 'react-codemirror';
|
||||
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
import './css/text-file-view.css';
|
||||
|
||||
const { rowContent, columns } = window.shared.pageOptions;
|
||||
|
||||
class SharedDTableRowView extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="shared-file-view-body text-file-view">
|
||||
<CodeMirror
|
||||
ref="code-mirror-editor"
|
||||
value={rowContent + columns}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<SharedDTableRowView />,
|
||||
document.getElementById('wrapper')
|
||||
);
|
@@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { seafileAPI } from './utils/seafile-api';
|
||||
import ViewFileDtable from '@seafile/dtable/es';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import i18n from './i18n-dtable';
|
||||
import './css/view-file-dtable.css';
|
||||
|
||||
const { server, workspaceID, username, userNickName, contactEmail, fileName, filePath, dtableUuid, dtableServer, dtableSocket, mediaUrl, lang } = window.app.pageOptions;
|
||||
window.dtable = {};
|
||||
window.dtable = {
|
||||
workspaceID: workspaceID,
|
||||
username: username,
|
||||
name: userNickName,
|
||||
contactEmail: contactEmail,
|
||||
server: server,
|
||||
dtableServer: dtableServer,
|
||||
dtableSocket: dtableSocket,
|
||||
filePath: filePath,
|
||||
fileName: fileName,
|
||||
dtableUuid: dtableUuid,
|
||||
mediaUrl: mediaUrl,
|
||||
accessToken: '',
|
||||
lang: lang
|
||||
};
|
||||
|
||||
window.seafileAPI = seafileAPI;
|
||||
|
||||
class ViewFileSDB extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ViewFileDtable />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<I18nextProvider i18n={ i18n }>
|
||||
<ViewFileSDB />
|
||||
</I18nextProvider>,
|
||||
document.getElementById('wrapper')
|
||||
);
|
@@ -1,55 +0,0 @@
|
||||
{% extends "file_view_react.html" %}
|
||||
{% load seahub_tags i18n %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
{% block extra_ogp_tags %}
|
||||
<meta property="og:type" content="object" />
|
||||
<meta property="og:site_name" content="{{ site_name }}">
|
||||
<meta property="og:url" content="{{ service_url }}{{ file_share_link }}" />
|
||||
<meta property="og:title" content="{{ file_name }}" />
|
||||
<meta property="og:image" content="{{ service_url }}{{ MEDIA_URL }}img/file/{{ icon_path_for_ogp }}" />
|
||||
<meta property="og:description" content="{{ desc_for_ogp }}" />
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_style %}
|
||||
{% if file_type == 'PDF' or file_type == 'Document' %}
|
||||
<link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/locale/locale.properties" />
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_script %}
|
||||
<script type="text/javascript">
|
||||
window.app.pageOptions = {
|
||||
repoID: '{{ repo.id }}',
|
||||
commitID: '{{ repo.head_cmmt_id }}',
|
||||
fileName: '{{ filename|escapejs }}',
|
||||
filePath: '{{ file_path|escapejs }}',
|
||||
fileType: '{{ file_type }}',
|
||||
fileExt: '{{ file_ext }}',
|
||||
rawPath: '{{ raw_path|escapejs }}',
|
||||
fileContent: '{{ file_content|escapejs }}',
|
||||
err: {% if err %}'{{ err }}'{% else %}''{% endif %},
|
||||
name: '{{request.user.username|email2nickname|escapejs}}',
|
||||
};
|
||||
</script>
|
||||
{% render_bundle 'dtableAssetFileView' 'js' %}
|
||||
|
||||
{% if file_type == 'PDF' %}
|
||||
<script type="text/javascript">
|
||||
let sf_file_url = '{{ raw_path|escapejs }}';
|
||||
let sf_pdfworkerjs_url = '{{MEDIA_URL}}js/pdf/pdf.worker.min.js';
|
||||
let sf_pdf_images_path = '{{MEDIA_URL}}js/pdf/images/';
|
||||
</script>
|
||||
<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/pdf.min.js"></script>
|
||||
<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/viewer.js"></script>
|
||||
{% elif file_type == 'Document' %}
|
||||
<script type="text/javascript">
|
||||
let commit_id = '{{ repo.head_cmmt_id }}';
|
||||
let sf_file_url = '{{ SITE_ROOT }}office-convert/static/{{ repo.id }}/' + commit_id + '{{ file_path|urlencode }}/fake.pdf';
|
||||
let sf_pdfworkerjs_url = '{{MEDIA_URL}}js/pdf/pdf.worker.min.js';
|
||||
let sf_pdf_images_path = '{{MEDIA_URL}}js/pdf/images/';
|
||||
</script>
|
||||
<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/pdf.min.js"></script>
|
||||
<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/viewer.js"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
@@ -1,53 +0,0 @@
|
||||
{% load seahub_tags i18n staticfiles %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<title>{{ filename }}</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<link rel="shortcut icon" href="{{ MEDIA_URL }}{% if filetype == 'dtable' %}{{ dtable_favicon_path }}{% else %}{{ favicon_path }}{% endif %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/dtable-font.css" />
|
||||
{% render_bundle 'viewDataGrid' 'css' %}
|
||||
{% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
|
||||
{% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
<div id="modal-wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.app = {
|
||||
config: {
|
||||
siteRoot: '{{ SITE_ROOT }}',
|
||||
},
|
||||
pageOptions: {
|
||||
server: '{{ service_url }}',
|
||||
csrfToken: "{{ csrf_token }}",
|
||||
name: "{{request.user.username|email2nickname|escapejs}}",
|
||||
username: "{{request.user.username|escapejs}}",
|
||||
contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
|
||||
|
||||
fileName: '{{ filename|escapejs }}',
|
||||
workspaceID: '{{ workspace_id }}',
|
||||
dtableUuid: '{{ dtable_uuid }}',
|
||||
mediaUrl: '{{ media_url }}',
|
||||
dtableServer: '{{ dtable_server }}',
|
||||
dtableSocket: '{{ dtable_socket }}',
|
||||
lang: '{{ LANGUAGE_CODE }}'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
|
||||
{% render_bundle 'commons' %}
|
||||
{% render_bundle 'viewDataGrid' 'js' %}
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -1,34 +0,0 @@
|
||||
{% extends "base_for_react.html" %}
|
||||
{% load seahub_tags i18n staticfiles %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<title>{% block sub_title %}{% endblock %}{{ site_title }}</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<link rel="shortcut icon" href="{{ MEDIA_URL }}{{ favicon_path }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/dtable-font.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
<div id="modal-wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
{% block extra_script %}
|
||||
<script type="text/javascript">
|
||||
window.shared = {
|
||||
pageOptions: {
|
||||
formContent: '{{ form_content|escapejs }}',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% render_bundle 'dtableFormView' 'js' %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
@@ -1,54 +0,0 @@
|
||||
{% load seahub_tags i18n staticfiles %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<title>{{ filename }}</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<link rel="shortcut icon" href="{{ MEDIA_URL }}{% if filetype == 'dtable' %}{{ dtable_favicon_path }}{% else %}{{ favicon_path }}{% endif %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/dtable-font.css" />
|
||||
{% render_bundle 'viewDataGrid' 'css' %}
|
||||
{% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
|
||||
{% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
<div id="modal-wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.app = {
|
||||
config: {
|
||||
siteRoot: '{{ SITE_ROOT }}',
|
||||
},
|
||||
pageOptions: {
|
||||
server: '{{ service_url }}',
|
||||
csrfToken: "{{ csrf_token }}",
|
||||
name: "{{request.user.username|email2nickname|escapejs}}",
|
||||
username: "{{request.user.username|escapejs}}",
|
||||
|
||||
fileName: '{{ filename|escapejs }}',
|
||||
filePath: '{{ path|escapejs }}',
|
||||
workspaceID: '{{ workspace_id }}',
|
||||
dtableUuid: '{{ dtable_uuid }}',
|
||||
mediaUrl: '{{ media_url }}',
|
||||
dtableServer: '{{ dtable_server }}',
|
||||
dtableSocket: '{{ dtable_socket }}',
|
||||
lang: '{{ LANGUAGE_CODE }}',
|
||||
permission: '{{ permission }}',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
|
||||
{% render_bundle 'commons' %}
|
||||
{% render_bundle 'viewDataGrid' 'js' %}
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -1,59 +0,0 @@
|
||||
{% load seahub_tags i18n staticfiles %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<title>DTable</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<link rel="shortcut icon" href="{{ MEDIA_URL }}{% if filetype == 'dtable' %}{{ dtable_favicon_path }}{% else %}{{ favicon_path }}{% endif %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub_react.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/dtable-font.css" />
|
||||
{% render_bundle 'appDTable' 'css' %}
|
||||
{% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
|
||||
{% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
<div id="modal-wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.app = {
|
||||
config: {
|
||||
siteRoot: '{{ SITE_ROOT }}',
|
||||
avatarURL: '{{ avatar_url }}'
|
||||
},
|
||||
pageOptions: {
|
||||
server: '{{ service_url }}',
|
||||
csrfToken: "{{ csrf_token }}",
|
||||
name: "{{request.user.username|email2nickname|escapejs}}",
|
||||
username: "{{request.user.username|escapejs}}",
|
||||
contactEmail: "{{request.user.username|email2contact_email|escapejs}}",
|
||||
|
||||
fileName: '{{ filename|escapejs }}',
|
||||
filePath: '{{ path|escapejs }}',
|
||||
workspaceID: '{{ workspace_id }}',
|
||||
dtableUuid: '{{ dtable_uuid }}',
|
||||
mediaUrl: '{{ media_url }}',
|
||||
dtableServer: '{{ dtable_server }}',
|
||||
dtableSocket: '{{ dtable_socket }}',
|
||||
lang: '{{ LANGUAGE_CODE }}',
|
||||
shareLinkExpireDaysMin: '{{ share_link_expire_days_min }}',
|
||||
shareLinkExpireDaysMax: '{{ share_link_expire_days_max }}',
|
||||
shareLinkExpireDaysDefault: '{{ share_link_expire_days_default }}',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
|
||||
{% render_bundle 'commons' %}
|
||||
{% render_bundle 'appDTable' 'js' %}
|
||||
</body>
|
||||
</html>
|
||||
|
@@ -1,35 +0,0 @@
|
||||
{% extends "base_for_react.html" %}
|
||||
{% load seahub_tags i18n staticfiles %}
|
||||
{% load render_bundle from webpack_loader %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<title>{% block sub_title %}{% endblock %}{{ site_title }}</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<link rel="shortcut icon" href="{{ MEDIA_URL }}{{ favicon_path }}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/dtable-font.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
<div id="modal-wrapper" class="{{ LANGUAGE_CODE }}"></div>
|
||||
{% block extra_script %}
|
||||
<script type="text/javascript">
|
||||
window.shared = {
|
||||
pageOptions: {
|
||||
rowContent: '{{ row_content|escapejs }}',
|
||||
columns: '{{ columns|escapejs }}',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% render_bundle 'sharedDTableRow' 'js' %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user