add file ledger apis (#5507)

* add file ledger apis

* remove apis about export ledgers

* opt code struct

* feat: update api

* feat: update code

* rename init-ledger script -> init-extended-props

* remove useless code

* POST/PUT extended-props return row

* return default some fields when extended-row not exists

* feat: update seafile-js version

---------

Co-authored-by: er-pai-r <[email protected]>

Author: AlexCXC

.gitignore

@@ -64,3 +64,5 @@ frontend/package-lock.json
 frontend/.eslintcache
 
 /.idea
+
+.vscode

frontend/package-lock.json

@@ -20,6 +20,7 @@
     "i18next": "22.4.6",
     "i18next-browser-languagedetector": "7.0.1",
     "i18next-xhr-backend": "3.2.2",
+    "is-hotkey": "0.2.0",
     "MD5": "^1.3.0",
     "moment": "^2.22.2",
     "object-assign": "4.1.1",
@@ -38,7 +39,7 @@
     "react-select": "5.7.0",
     "react-transition-group": "4.4.5",
     "reactstrap": "8.9.0",
-    "seafile-js": "0.2.205",
+    "seafile-js": "0.2.206",
     "socket.io-client": "^2.2.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^3.0.1",

frontend/package.json

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Col } from 'reactstrap';
+
+function ColumnName(props) {
+  const { column } = props;
+  const { name } = column;
+
+  return (
+    <Col md={3} className="d-flex column-name">
+      <div className="w-100 text-truncate">
+        {name || ''}
+      </div>
+    </Col>
+  );
+}
+
+ColumnName.propTypes = {
+  column: PropTypes.object.isRequired,
+};
+
+export default ColumnName;

frontend/src/components/dialog/extra-attributes-dialog/column/column-name.js

@@ -0,0 +1,7 @@
+.extra-attributes-dialog .column-name {
+  padding-top: 9px;
+}
+
+.extra-attributes-dialog .column-item {
+  min-height: 56px;
+}

frontend/src/components/dialog/extra-attributes-dialog/column/index.css

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Col } from 'reactstrap';
+import ColumnName from './column-name';
+import CONFIG from '../editor';
+
+import './index.css';
+
+class Column extends Component {
+  render() {
+    const { column, row, columns } = this.props;
+    const Editor = CONFIG[column.type] || CONFIG['text'];
+
+    return (
+      <div className="pb-4 row column-item">
+        <ColumnName column={column} />
+        <Col md={9} className='d-flex align-items-center extra-attribute-item-info'>
+          <Editor
+            column={column}
+            row={row}
+            columns={columns}
+            onCommit={this.props.onCommit}
+          />
+        </Col>
+      </div>
+    );
+  }
+}
+
+Column.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+  columns: PropTypes.array,
+  onCommit: PropTypes.func,
+};
+
+export default Column;

frontend/src/components/dialog/extra-attributes-dialog/column/index.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getDateDisplayString } from '../../../../utils/extra-attributes';
+
+class CtimeFormatter extends Component {
+  render() {
+    const { column, row } = this.props;
+    const { key } = column;
+    const value = getDateDisplayString(row[key], 'YYYY-MM-DD HH:mm:ss') || '';
+
+    return (
+      <div className="form-control" style={{ width: 320 }}>{value}</div>
+    );
+  }
+}
+
+CtimeFormatter.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+};
+
+export default CtimeFormatter;

frontend/src/components/dialog/extra-attributes-dialog/editor/ctime-formatter.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getDateDisplayString } from '../../../../utils/extra-attributes';
+
+
+class DateEditor extends Component {
+  render() {
+    const { column, row } = this.props;
+    const { data, key } = column;
+    const value = getDateDisplayString(row[key], data ? data.format : '');
+
+    return (
+      <input
+        type="text"
+        className="form-control"
+        value={value}
+        disabled={true}
+      />
+    );
+  }
+}
+
+DateEditor.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+};
+
+export default DateEditor;

frontend/src/components/dialog/extra-attributes-dialog/editor/date-editor.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FORMULA_RESULT_TYPE } from '../../../../constants';
+import { getDateDisplayString } from '../../../../utils/extra-attributes';
+
+function FormulaFormatter(props) {
+  const { column, row } = props;
+  const value = row[column.key];
+
+  const { data } = column;
+  const { result_type, format } = data || {};
+  if (result_type === FORMULA_RESULT_TYPE.DATE) {
+    return (
+      <div className="form-control disabled">{getDateDisplayString(value, format)}</div>
+    );
+  }
+  if (result_type === FORMULA_RESULT_TYPE.STRING) {
+    return value;
+  }
+  if (typeof value === 'object') {
+    return null;
+  }
+  return <></>;
+}
+
+FormulaFormatter.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+};
+
+export default FormulaFormatter;

frontend/src/components/dialog/extra-attributes-dialog/editor/formula-formatter.js

@@ -0,0 +1,20 @@
+import SimpleText from './simple-text';
+import FormulaFormatter from './formula-formatter';
+import SingleSelect from './single-select';
+import NumberEditor from './number-editor';
+import DateEditor from './date-editor';
+import CtimeFormatter from './ctime-formatter';
+import { EXTRA_ATTRIBUTES_COLUMN_TYPE } from '../../../../constants';
+
+
+const CONFIG = {
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.TEXT]: SimpleText,
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.FORMULA]: FormulaFormatter,
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.SINGLE_SELECT]: SingleSelect,
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.NUMBER]: NumberEditor,
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.DATE]: DateEditor,
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.CTIME]: CtimeFormatter,
+  [EXTRA_ATTRIBUTES_COLUMN_TYPE.MTIME]: CtimeFormatter,
+};
+
+export default CONFIG;