Data grid module (#3210)

* Initialize the sdb file loading process

* add ctable view module

* change logo to name

* optimized code

frontend/config/webpack.config.dev.js

@@ -194,6 +194,11 @@ 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-ctable.js",
+    ],
   },
 
   output: {

frontend/config/webpack.config.prod.js

@@ -87,6 +87,7 @@ module.exports = {
     viewFileUnknown: [require.resolve('./polyfills'), paths.appSrc + "/view-file-unknown.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-ctable.js"],
   },
 
   output: {

frontend/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@reach/router": "^1.2.0",
+    "@seafile/react-data-grid": "^6.0.1",
+    "@seafile/react-data-grid-addons": "^6.0.1",
     "@seafile/seafile-editor": "^0.2.7",
     "@seafile/resumablejs": "^1.1.9",
     "MD5": "^1.3.0",
@@ -13,9 +15,11 @@
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
+    "faker": "^4.1.0",
     "file-loader": "1.1.5",
     "glamor": "^2.20.40",
     "html-webpack-plugin": "2.29.0",
+    "immutability-helper": "^3.0.0",
     "jest": "20.0.4",
     "merge": "^1.2.1",
     "moment": "^2.22.2",

frontend/src/css/file-view-data-grid.css

@@ -0,0 +1,14 @@
+#header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e8e8e8;
+  background-color: #f4f4f7;
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+#main {
+  display: flex;
+  flex: 1;
+}

frontend/src/pages/data-grid/app-header.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+
+const propTypes = {
+  onSave: PropTypes.func.isRequired,
+};
+
+const { fileName } = window.app.pageOptions;
+
+class AddHeader extends React.Component {
+
+  render() {
+    return (
+      <div id="header">
+        <div className="sf-font">{fileName}</div>
+        <Button color="primary" onClick={this.props.onSave}>保存</Button>
+      </div>
+    );
+  }
+}
+
+AddHeader.propTypes = propTypes;
+
+export default AddHeader;

frontend/src/pages/data-grid/app-main.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDataGrid from '@seafile/react-data-grid/dist/react-data-grid';
+import update from 'immutability-helper';
+
+const propTypes = {
+  initData: PropTypes.object.isRequired,
+};
+
+class AppMain extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this._columns = [
+      {
+        key: 'id',
+        name: 'ID',
+        width: 80,
+        resizable: true
+      }
+    ];
+
+    let initData = props.initData;
+
+    this.state = {
+      columns: initData.columns.length ? initData.columns : this._columns,
+      rows: initData.rows.length ? initData.rows : this.createRows(1)
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let data = nextProps.initData;
+    this.deseralizeGridData(data);
+  }
+
+  createRows = (numberOfRows) => {
+    let rows = [];
+    for (let i = 0; i < numberOfRows; i++) {
+      rows[i] = this.createFakeRowObjectData(i);
+    }
+    return rows;
+  };
+
+  createFakeRowObjectData = (index) => {
+    return {id: 'id_' + index};
+  };
+
+  getColumns = () => {
+    let clonedColumns = this.state.columns.slice();
+    return clonedColumns;
+  };
+
+  handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
+    let rows = this.state.rows.slice();
+
+    for (let i = fromRow; i <= toRow; i++) {
+      let rowToUpdate = rows[i];
+      let updatedRow = update(rowToUpdate, {$merge: updated});
+      rows[i] = updatedRow;
+    }
+
+    this.setState({ rows });
+  };
+
+  handleAddRow = ({ newRowIndex }) => {
+    const newRow = {
+      id: 'id_' + newRowIndex,
+    };
+
+    let rows = this.state.rows.slice();
+    rows = update(rows, {$push: [newRow]});
+    this.setState({ rows });
+  };
+
+  getRowAt = (index) => {
+    if (index < 0 || index > this.getSize()) {
+      return undefined;
+    }
+
+    return this.state.rows[index];
+  };
+
+  getSize = () => {
+    return this.state.rows.length;
+  };
+
+  onInsertRow = () => {
+    let newRowIndex = this.getSize();
+    this.handleAddRow({ newRowIndex });
+  }
+
+  onInsertColumn = () => {
+    var name = window.prompt('Place enter a column name', '');
+    if (!name || name.trim() === '') {
+      return;
+    }
+    let newColumn = {
+      key: name,
+      name: name,
+      editable: true,
+      width: 200,
+      resizable: true
+    };
+    let columns = this.state.columns.slice();
+    columns.push(newColumn);
+    this.setState({columns: columns});
+  }
+
+  serializeGridData = () => {
+    let gridData = {
+      columns: JSON.stringify(this.state.columns),
+      rows: JSON.stringify(this.state.rows),
+    };
+    return gridData;
+  }
+
+  deseralizeGridData = (data) => {
+    let columns = data.columns;
+    let rows = data.rows;
+    this.setState({
+      columns: JSON.parse(columns),
+      rows: JSON.parse(rows),
+    });
+  }
+
+  render() {
+    let columns = this.getColumns();
+    return (
+      <div id="main">
+        <ReactDataGrid
+          ref={ node => this.grid = node }
+          enableCellSelect={true}
+          columns={columns}
+          rowGetter={this.getRowAt}
+          rowsCount={this.getSize()}
+          onGridRowsUpdated={this.handleGridRowsUpdated}
+          enableRowSelect={true}
+          rowHeight={50}
+          minHeight={600}
+          rowScrollTimeout={200}
+          enableInsertColumn={true}
+          enableInsertRow={true}
+          onInsertRow={this.onInsertRow}
+          onInsertColumn={this.onInsertColumn}
+        />
+      </div>
+    );
+  }
+}
+
+AppMain.propTypes = propTypes;
+
+export default AppMain;

frontend/src/view-file-ctable.js

@@ -0,0 +1,67 @@
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import AppHeader from './pages/data-grid/app-header';
+import AppMain from './pages/data-grid/app-main';
+import { seafileAPI } from './utils/seafile-api';
+import { Utils } from './utils/utils';
+import { gettext } from './utils/constants';
+import toaster from './components/toast';
+
+import './css/layout.css';
+import './css/file-view-data-grid.css';
+
+const { repoID, fileName, filePath, err, enableWatermark, userNickName } = window.app.pageOptions;
+
+class ViewFileSDB extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      initData: {
+        columns: [],
+        rows: [],
+      },
+    };
+
+  }
+
+  componentDidMount() {
+    seafileAPI.getFileDownloadLink(repoID, filePath).then(res => {
+      let url = res.data;
+      seafileAPI.getFileContent(url).then(res => {
+        let data = res.data;
+        if (data) {
+          this.setState({initData: data});
+        }
+      });
+    });
+  }
+
+  onSave = () => {
+    let data = this.refs.data_grid.serializeGridData();
+    let dirPath = Utils.getDirName(filePath);
+    seafileAPI.getUpdateLink(repoID, dirPath).then(res => {
+      let updateLink = res.data;
+      let updateData = JSON.stringify(data);
+      seafileAPI.updateFile(updateLink, filePath, fileName, updateData).then(res => {
+        toaster.success(gettext('File saved.'));
+      }).catch(() => {
+        toaster.success(gettext('File save failed.'));
+      });
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <AppHeader onSave={this.onSave}/>
+        <AppMain initData={this.state.initData} ref="data_grid"/>
+      </Fragment>
+    );
+  }
+}
+
+ReactDOM.render(
+  <ViewFileSDB />,
+  document.getElementById('wrapper')
+);

seahub/templates/ctable_file_view_react.html

@@ -0,0 +1,11 @@
+{% extends 'file_view_react.html' %}
+{% load render_bundle from webpack_loader %}
+{% load seahub_tags %}
+
+{% block extra_style %}
+{% render_bundle 'viewDataGrid' 'css' %}
+{% endblock %}
+
+{% block render_bundle %}
+{% render_bundle 'viewDataGrid' 'js' %}
+{% endblock %}

seahub/utils/__init__.py

@@ -141,6 +141,8 @@ PREVIEW_FILEEXT = {
     AUDIO: ('mp3', 'oga', 'ogg'),
     #'3D': ('stl', 'obj'),
     XMIND: ('xmind',),
+    XMIND: ('xmind',),
+    CTABLE: ('ctable',),
 }
 
 def gen_fileext_type_map():

seahub/utils/file_types.py

@@ -10,3 +10,4 @@ AUDIO = 'Audio'
 SPREADSHEET = 'SpreadSheet'
 DRAW = 'Draw'
 XMIND = 'XMind'
+CTABLE = 'ctable'

seahub/views/file.py

@@ -61,7 +61,7 @@ from seahub.utils import render_error, is_org_context, \
 from seahub.utils.ip import get_remote_ip
 from seahub.utils.timeutils import utc_to_local
 from seahub.utils.file_types import (IMAGE, PDF, SVG,
-        DOCUMENT, SPREADSHEET, AUDIO, MARKDOWN, TEXT, VIDEO, DRAW, XMIND)
+        DOCUMENT, SPREADSHEET, AUDIO, MARKDOWN, TEXT, VIDEO, DRAW, XMIND, CTABLE)
 from seahub.utils.star import is_file_starred
 from seahub.utils.http import json_response, \
         BadRequestException, RequestForbbiddenException
@@ -726,6 +726,9 @@ def view_lib_file(request, repo_id, path):
 
         return render(request, template, return_dict)
         
+    elif filetype == CTABLE:
+        return render(request, template, return_dict)
+
     elif filetype == IMAGE:
 
         if file_size > FILE_PREVIEW_MAX_SIZE: