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 <18335219360@163.com>
2025-09-20 02:48:51 +00:00 · 2023-07-27 15:11:35 +08:00
parent e97b0c264c
commit 0a7aeec2e2
32 changed files with 2330 additions and 36 deletions
--- a/frontend/src/components/dialog/extra-attributes-dialog/column/column-name.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/column/column-name.js
@@ -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;
--- a/frontend/src/components/dialog/extra-attributes-dialog/column/index.css
+++ b/frontend/src/components/dialog/extra-attributes-dialog/column/index.css
@@ -0,0 +1,7 @@
+.extra-attributes-dialog .column-name {
+  padding-top: 9px;
+}
+
+.extra-attributes-dialog .column-item {
+  min-height: 56px;
+}
--- a/frontend/src/components/dialog/extra-attributes-dialog/column/index.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/column/index.js
@@ -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;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/ctime-formatter.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/ctime-formatter.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;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/date-editor.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/date-editor.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;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/formula-formatter.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/formula-formatter.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;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/index.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/index.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;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/number-editor.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/number-editor.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getNumberDisplayString, replaceNumberNotAllowInput, formatStringToNumber, isMac } from '../../../../utils/extra-attributes';
+import { KeyCodes, DEFAULT_NUMBER_FORMAT } from '../../../../constants';
+
+class NumberEditor extends React.Component {
+
+  constructor(props) {
+    super(props);
+    const { row, column } = props;
+    const value = row[column.key];
+    this.state = {
+      value: getNumberDisplayString(value, column.data),
+    };
+  }
+
+  onChange = (event) => {
+    const { data } = this.props.column; // data maybe 'null'
+    const format = (data && data.format) ? data.format : DEFAULT_NUMBER_FORMAT;
+    let currency_symbol = null;
+    if (data && data.format === 'custom_currency') {
+      currency_symbol = data['currency_symbol'];
+    }
+    const initValue = event.target.value.trim();
+
+    //Prevent the repetition of periods bug in the Chinese input method of the Windows system
+    if (!isMac() && initValue.indexOf('.。') > -1) return;
+    let value = replaceNumberNotAllowInput(initValue, format, currency_symbol);
+    if (value === this.state.value) return;
+    this.setState({ value });
+  }
+
+  onKeyDown = (event) => {
+    let { selectionStart, selectionEnd, value } = event.currentTarget;
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Esc) {
+      event.preventDefault();
+      this.input.blur();
+    } else if ((event.keyCode === KeyCodes.LeftArrow && selectionStart === 0) ||
+      (event.keyCode === KeyCodes.RightArrow && selectionEnd === value.length)
+    ) {
+      event.stopPropagation();
+    }
+  }
+
+  onBlur = () => {
+    const { value } = this.state;
+    const { column } = this.props;
+    this.props.onCommit({ [column.key]: formatStringToNumber(value, column.data) }, column);
+  }
+
+  setInputRef = (input) => {
+    this.input = input;
+    return this.input;
+  };
+
+  onPaste = (e) => {
+    e.stopPropagation();
+  }
+
+  onCut = (e) => {
+    e.stopPropagation();
+  }
+
+  render() {
+    const { column } = this.props;
+
+    return (
+      <input
+        ref={this.setInputRef}
+        type="text"
+        className="form-control"
+        value={this.state.value}
+        onBlur={this.onBlur}
+        onPaste={this.onPaste}
+        onCut={this.onCut}
+        onKeyDown={this.onKeyDown}
+        onChange={this.onChange}
+        disabled={!column.editable}
+      />
+    );
+  }
+}
+
+NumberEditor.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+  onCommit: PropTypes.func,
+};
+
+export default NumberEditor;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/search-input.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/search-input.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+class SearchInput extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchValue: props.value,
+    };
+    this.isInputtingChinese = false;
+    this.timer = null;
+    this.inputRef = null;
+  }
+
+  componentDidMount() {
+    if (this.props.autoFocus && this.inputRef && this.inputRef !== document.activeElement) {
+      setTimeout(() => {
+        this.inputRef.focus();
+      }, 0);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({searchValue: nextProps.value});
+    }
+  }
+
+  componentWillUnmount() {
+    this.timer && clearTimeout(this.timer);
+    this.timer = null;
+    this.inputRef = null;
+  }
+
+  onCompositionStart = () => {
+    this.isInputtingChinese = true;
+  }
+
+  onChange = (e) => {
+    this.timer && clearTimeout(this.timer);
+    const { onChange, wait } = this.props;
+    let text = e.target.value;
+    this.setState({searchValue: text || ''}, () => {
+      if (this.isInputtingChinese) return;
+      this.timer = setTimeout(() => {
+        onChange && onChange(this.state.searchValue.trim());
+      }, wait);
+    });
+  }
+
+  onCompositionEnd = (e) => {
+    this.isInputtingChinese = false;
+    this.onChange(e);
+  }
+
+  setFocus = (isSelectAllText) => {
+    if (this.inputRef === document.activeElement) return;
+    this.inputRef.focus();
+    if (isSelectAllText) {
+      const txtLength = this.state.searchValue.length;
+      this.inputRef.setSelectionRange(0, txtLength);
+    }
+  }
+
+  render() {
+    const { placeholder, autoFocus, className, onKeyDown, disabled, style } = this.props;
+    const { searchValue } = this.state;
+
+    return (
+      <input
+        type="text"
+        value={searchValue}
+        className={classnames('form-control', className)}
+        onChange={this.onChange}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        onCompositionStart={this.onCompositionStart}
+        onCompositionEnd={this.onCompositionEnd}
+        onKeyDown={onKeyDown}
+        disabled={disabled}
+        style={style}
+        ref={ref => this.inputRef = ref}
+      />
+    );
+  }
+}
+
+SearchInput.propTypes = {
+  placeholder: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  wait: PropTypes.number,
+  disabled: PropTypes.bool,
+  style: PropTypes.object,
+  value: PropTypes.string,
+};
+
+SearchInput.defaultProps = {
+  wait: 100,
+  disabled: false,
+  value: '',
+};
+
+export default SearchInput;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/simple-text.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/simple-text.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { KeyCodes } from '../../../../constants';
+
+class SimpleText extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.row[props.column.key] || '',
+    };
+    this.inputRef = React.createRef();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const nextValue = nextProps.row[nextProps.column.key];
+    if (nextValue !== this.state.value) {
+      this.setState({ value: nextValue });
+    }
+  }
+
+  blurInput = () => {
+    setTimeout(() => {
+      this.inputRef.current && this.inputRef.current.blur();
+    }, 1);
+  }
+
+  onBlur = () => {
+    let { column, onCommit } = this.props;
+    const updated = {};
+    updated[column.key] = this.state.value.trim();
+    onCommit(updated, column);
+  }
+
+  onChange = (e) => {
+    let value = e.target.value;
+    if (value === this.state.value) return;
+    this.setState({value});
+  }
+
+  onCut = (e) => {
+    e.stopPropagation();
+  }
+
+  onPaste = (e) => {
+    e.stopPropagation();
+  }
+
+  onKeyDown = (e) => {
+    if (e.keyCode === KeyCodes.Esc) {
+      e.stopPropagation();
+      this.blurInput();
+      return;
+    }
+    let { selectionStart, selectionEnd, value } = e.currentTarget;
+    if (
+      (e.keyCode === KeyCodes.ChineseInputMethod) ||
+      (e.keyCode === KeyCodes.LeftArrow && selectionStart === 0) ||
+      (e.keyCode === KeyCodes.RightArrow && selectionEnd === value.length)
+    ) {
+      e.stopPropagation();
+    }
+  }
+
+  render() {
+    const { column } = this.props;
+    const { value } = this.state;
+
+    return (
+      <input
+        type="text"
+        onBlur={this.onBlur}
+        onCut={this.onCut}
+        onPaste={this.onPaste}
+        onChange={this.onChange}
+        className="form-control"
+        value={value || ''}
+        onKeyDown={this.onKeyDown}
+        disabled={!column.editable}
+        ref={this.inputRef}
+      />
+    );
+  }
+}
+
+SimpleText.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+  onCommit: PropTypes.func.isRequired,
+};
+
+export default SimpleText;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.css
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.css
@@ -0,0 +1,101 @@
+.extra-attributes-dialog .selected-single-select-container {
+  height: 38px;
+  width: 100%;
+  padding: 0 10px;
+  border-radius: 3px;
+  user-select: none;
+  border: 1px solid rgba(0, 40, 100, .12);
+  appearance: none;
+  background: #fff;
+}
+
+.extra-attributes-dialog .selected-single-select-container.disable {
+  background-color: #f8f9fa;
+}
+
+.extra-attributes-dialog .selected-single-select-container.focus {
+  border-color: #1991eb!important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, .25);
+}
+
+.extra-attributes-dialog .selected-single-select-container:not(.disable):hover {
+  cursor: pointer;
+}
+
+.extra-attributes-dialog .selected-single-select-container .fa-caret-down {
+  font-size: 16px;
+  color: #949494;
+}
+
+.extra-attributes-dialog .selected-single-select-container .single-select-option {
+  text-align: center;
+  width: min-content;
+  max-width: 250px;
+  line-height: 20px;
+  border-radius: 10px;
+  padding: 0 10px;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* editor */
+.single-select-editor-container {
+  min-height: 160px;
+  width: 320px;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.single-select-editor-container .search-single-selects {
+  padding: 10px 10px 0;
+}
+
+.single-select-editor-container .search-single-selects input {
+  max-height: 30px;
+  font-size: 14px;
+}
+
+.single-select-editor-container .single-select-editor-content {
+  max-height: 200px;
+  min-height: 100px;
+  padding: 10px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.single-select-editor-container .single-select-editor-content .single-select-option-container {
+  width: 100%;
+  height: 30px;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #212529;
+  padding-left: 12px;
+}
+
+.single-select-editor-container .single-select-editor-content .single-select-option-container:hover {
+  background-color: #f5f5f5;
+  cursor: pointer;
+}
+
+.single-select-editor-container .single-select-editor-content .single-select-option {
+  padding: 0 10px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 10px;
+  margin-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.single-select-editor-container .single-select-editor-content .single-select-option-selected {
+  width: 20px;
+  text-align: center;
+}
+
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS } from '../../../../../constants';
+import { gettext } from '../../../../../utils/constants';
+import SingleSelectEditor from './single-select-editor';
+import { getSelectColumnOptions } from '../../../../../utils/extra-attributes';
+
+import './index.css';
+
+class SingleSelect extends Component {
+
+  constructor(props) {
+    super(props);
+    const { column } = props;
+    this.options = getSelectColumnOptions(column);
+    this.state = {
+      isShowSingleSelect: false,
+    };
+    this.editorKey = `single-select-editor-${column.key}`;
+  }
+
+  updateState = () => {
+    // this.setState({ isShowSingleSelect: !this.state.isShowSingleSelect });
+  }
+
+  onCommit = (value, column) => {
+    this.props.onCommit(value, column);
+  }
+
+  render() {
+    const { isShowSingleSelect } = this.state;
+    const { column, row } = this.props;
+    const currentOptionID = row[column.key];
+    const option = this.options.find(option => option.id === currentOptionID);
+    const optionStyle = option ?
+      { backgroundColor: option.color, color: option.textColor || null } :
+      { backgroundColor: DELETED_OPTION_BACKGROUND_COLOR };
+    const optionName = option ? option.name : gettext(DELETED_OPTION_TIPS);
+
+    return (
+      <>
+        <div
+          id={this.editorKey}
+          className={classnames('selected-single-select-container', { 'disable': !column.editable, 'focus': isShowSingleSelect })}
+        >
+          <div className="single-select-inner w-100 h-100 d-flex align-items-center justify-content-between">
+            <div>
+              {currentOptionID && (
+                <div
+                  className="single-select-option"
+                  style={optionStyle}
+                  title={optionName}
+                >{optionName}</div>
+              )}
+            </div>
+            {column.editable && (
+              <i className="fas fa-caret-down"></i>
+            )}
+          </div>
+        </div>
+        {column.editable && (
+          <SingleSelectEditor
+            column={column}
+            row={this.props.row}
+            columns={this.props.columns}
+            onCommit={this.onCommit}
+            onUpdateState={this.updateState}
+          />
+        )}
+      </>
+    );
+  }
+}
+
+SingleSelect.propTypes = {
+  column: PropTypes.object,
+  row: PropTypes.object,
+  columns: PropTypes.array,
+  onCommit: PropTypes.func,
+};
+
+export default SingleSelect;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/single-select-editor.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/single-select-editor.js
@@ -0,0 +1,126 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledPopover } from 'reactstrap';
+import { gettext } from '../../../../../utils/constants';
+import SearchInput from '../search-input';
+import { getSelectColumnOptions } from '../../../../../utils/extra-attributes';
+
+class SingleSelectEditor extends Component {
+
+  constructor(props) {
+    super(props);
+    const options = this.getSelectColumnOptions();
+    this.state = {
+      value: props.row[props.column.key],
+      searchVal: '',
+      highlightIndex: -1,
+      maxItemNum: 0,
+      itemHeight: 0
+    };
+    this.options = options;
+    this.filteredOptions = options;
+    this.timer = null;
+    this.editorKey = `single-select-editor-${props.column.key}`;
+  }
+
+  getSelectColumnOptions = () => {
+    const { column, row, columns } = this.props;
+    let options = getSelectColumnOptions(column);
+    const { data } = column;
+    const { cascade_column_key, cascade_settings } = data || {};
+    if (cascade_column_key) {
+      const cascadeColumn = columns.find(item => item.key === cascade_column_key);
+      if (cascadeColumn) {
+        const cascadeColumnValue = row[cascade_column_key];
+        if (!cascadeColumnValue) return [];
+        const cascadeSetting = cascade_settings[cascadeColumnValue];
+        if (!cascadeSetting || !Array.isArray(cascadeSetting) || cascadeSetting.length === 0) return [];
+        return options.filter(option => cascadeSetting.includes(option.id));
+      }
+    }
+    return options;
+  }
+
+  setRef = (ref) => {
+    this.ref = ref;
+    if (!this.ref) return;
+    const { toggle } = this.ref;
+    this.ref.toggle = () => {
+      toggle && toggle();
+      this.props.onUpdateState();
+    };
+  }
+
+  onChangeSearch = (searchVal) => {
+    const { searchVal: oldSearchVal } = this.state;
+    if (oldSearchVal === searchVal) return;
+    const val = searchVal.toLowerCase();
+    this.filteredOptions = val ?
+      this.options.filter((item) => item.name && item.name.toLowerCase().indexOf(val) > -1) : this.options;
+    this.setState({ searchVal });
+  }
+
+  onSelectOption = (optionID) => {
+    const { column } = this.props;
+    this.setState({ value: optionID }, () => {
+      this.props.onCommit({ [column.key]: optionID }, column);
+      this.ref.toggle();
+    });
+  }
+
+  render() {
+    const { value } = this.state;
+    const { column } = this.props;
+
+    return (
+      <UncontrolledPopover
+        target={this.editorKey}
+        className="single-select-editor-popover"
+        trigger="legacy"
+        placement="bottom-start"
+        hideArrow={true}
+        ref={this.setRef}
+      >
+        <div className="single-select-editor-container">
+          <div className="search-single-selects">
+            <SearchInput
+              placeholder={gettext('Find an option')}
+              onKeyDown={this.onKeyDown}
+              onChange={this.onChangeSearch}
+              autoFocus={true}
+            />
+          </div>
+          <div className="single-select-editor-content">
+            {this.filteredOptions.map(option => {
+              const isSelected = value === option.id;
+              const style = {
+                backgroundColor: option.color,
+                color: option.textColor || null,
+                maxWidth: Math.max(200 - 62,  column.width ? column.width  -62 : 0)
+              };
+              return (
+                <div className="single-select-option-container" key={option.id} onClick={this.onSelectOption.bind(this, isSelected ? null : option.id)}>
+                  <div className="single-select-option" style={style}>{option.name}</div>
+                  <div className="single-select-option-selected">
+                    {isSelected && (<i ></i>)}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </UncontrolledPopover>
+    );
+  }
+}
+
+SingleSelectEditor.propTypes = {
+  value: PropTypes.string,
+  row: PropTypes.object,
+  column: PropTypes.object,
+  columns: PropTypes.array,
+  onUpdateState: PropTypes.func,
+  onCommit: PropTypes.func,
+};
+
+export default SingleSelectEditor;
--- a/frontend/src/components/dialog/extra-attributes-dialog/index.css
+++ b/frontend/src/components/dialog/extra-attributes-dialog/index.css
@@ -0,0 +1,17 @@
+.extra-attributes-dialog {
+  margin: 28px 0 0 0;
+}
+
+.extra-attributes-dialog .extra-attributes-content-container {
+  height: 100%;
+  overflow: hidden;
+}
+
+.extra-attributes-dialog .modal-body {
+  overflow-y: scroll;
+  padding: 30px;
+}
+
+.extra-attributes-dialog .modal-body .form-control.disabled {
+  background-color: #f8f9fa;
+}
--- a/frontend/src/components/dialog/extra-attributes-dialog/index.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/index.js
@@ -0,0 +1,250 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import isHotkey from 'is-hotkey';
+import { zIndexes, DIALOG_MAX_HEIGHT, EXTRA_ATTRIBUTES_COLUMN_TYPE } from '../../../constants';
+import { gettext } from '../../../utils/constants';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { Utils } from '../../../utils/utils';
+import { getSelectColumnOptions, getValidColumns } from '../../../utils/extra-attributes';
+import Column from './column';
+import Loading from '../../loading';
+import toaster from '../../toast';
+
+import './index.css';
+
+class ExtraAttributesDialog extends Component {
+
+  constructor(props) {
+    super(props);
+    const { direntDetail } = props;
+    this.state = {
+      animationEnd: false,
+      isLoading: true,
+      update: {},
+      row: {},
+      columns: [],
+      errorMsg: '',
+    };
+    const direntDetailId = direntDetail.id;
+    this.isEmptyFile = direntDetailId === '0'.repeat(direntDetailId.length);
+    this.isExist = false;
+    this.modalRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.startAnimation(this.getData);
+    window.addEventListener('keydown', this.onHotKey);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onHotKey);
+  }
+
+  startAnimation = (callback) => {
+    if (this.state.animationEnd === true) {
+      callback && callback();
+    }
+
+    // use setTimeout to make sure real dom rendered
+    setTimeout(() => {
+      let dom = this.modalRef.current.firstChild;
+      const { width, maxWidth, marginLeft, height } = this.getDialogStyle();
+      dom.style.width = `${width}px`;
+      dom.style.maxWidth = `${maxWidth}px`;
+      dom.style.marginLeft = `${marginLeft}px`;
+      dom.style.height = `${height}px`;
+      dom.style.marginRight = 'unset';
+      dom.style.marginTop = '28px';
+
+      // after animation, change style and run callback
+      setTimeout(() => {
+        this.setState({ animationEnd: true }, () => {
+          dom.style.transition = 'none';
+          callback && callback();
+        });
+      }, 280);
+    }, 1);
+  }
+
+  getFormatUpdateData = (update = {}) => {
+    const { columns } = this.state;
+    const updateData = {};
+    for (let key in update) {
+      const column = columns.find(column => column.key === key);
+      if (column && column.editable) {
+        const { type, name } = column;
+        const value = update[key];
+        if (type === EXTRA_ATTRIBUTES_COLUMN_TYPE.SINGLE_SELECT) {
+          const options = getSelectColumnOptions(column);
+          const option = options.find(item => item.id === value);
+          updateData[name] = option ? option.name : '';
+        } else {
+          updateData[column.name] = update[key];
+        }
+      }
+    }
+    return updateData;
+  }
+
+  getData = () => {
+    const { repoID, filePath } = this.props;
+    seafileAPI.getFileExtendedProperties(repoID, filePath).then(res => {
+      const { row, metadata, editable_columns } = res.data;
+      this.isExist = Boolean(row._id);
+      this.setState({ row: row, columns: getValidColumns(metadata, editable_columns, this.isEmptyFile), isLoading: false, errorMsg: '' });
+    }).catch(error => {
+      const errorMsg =Utils.getErrorMsg(error);
+      this.setState({ isLoading: false, errorMsg });
+    });
+  }
+
+  createData = (data) => {
+    const { repoID, filePath } = this.props;
+    seafileAPI.newFileExtendedProperties(repoID, filePath, data).then(res => {
+      this.isExist = true;
+      const { row } = res.data;
+      this.setState({ row: row, isLoading: false, errorMsg: '' });
+    }).catch(error => {
+      const errorMsg =Utils.getErrorMsg(error);
+      toaster.danger(gettext(errorMsg));
+    });
+  };
+
+  updateData = (update, column) => {
+    const newRow = { ...this.state.row, ...update };
+    this.setState({ row: newRow }, () => {
+      const data = this.getFormatUpdateData(update);
+      const { repoID, filePath } = this.props;
+      if (this.isExist) {
+        seafileAPI.updateFileExtendedProperties(repoID, filePath, data).then(res => {
+          this.setState({ update: {}, row: res.data.row });
+        }).catch(error => {
+          const errorMsg = Utils.getErrorMsg(error);
+          toaster.danger(gettext(errorMsg));
+        });
+      } else {
+        this.createData(data);
+      }
+    });
+  }
+
+  onHotKey = (event) => {
+    if (isHotkey('esc', event)) {
+      this.onToggle();
+      return;
+    }
+  }
+
+  onToggle = () => {
+    this.props.onToggle();
+  }
+
+  getDialogStyle = () => {
+    const width = 800;
+    return {
+      width,
+      maxWidth: width,
+      marginLeft: (window.innerWidth - width) / 2,
+      height: DIALOG_MAX_HEIGHT,
+    };
+  }
+
+  getInitStyle = () => {
+    const transition = 'all .3s';
+    const defaultMargin = 80; // sequence cell width
+    const defaultHeight = 100;
+    const marginTop = '30%';
+    const width = window.innerWidth;
+    return {
+      width: `${width - defaultMargin}px`,
+      maxWidth: `${width - defaultMargin}px`,
+      marginLeft: `${defaultMargin}px`,
+      height: `${defaultHeight}px`,
+      marginRight: `${defaultMargin}px`,
+      marginTop,
+      transition,
+    };
+  }
+
+  renderColumns = () => {
+    const { isLoading, errorMsg, columns, row, update } = this.state;
+    if (isLoading) {
+      return (
+        <div className="w-100 h-100 d-flex align-items-center justify-content-center">
+          <Loading />
+        </div>
+      );
+    }
+
+    if (errorMsg) {
+      return (
+        <div className="w-100 h-100 d-flex align-items-center justify-content-center error-message">
+          {gettext(errorMsg)}
+        </div>
+      );
+    }
+
+    const newRow = { ...row, ...update };
+
+    return (
+      <>
+        {columns.map(column => {
+          return (
+            <Column
+              key={column.key}
+              column={column}
+              row={newRow}
+              columns={columns}
+              onCommit={this.updateData}
+            />
+          );
+        })}
+      </>
+    );
+
+  }
+
+  renderContent = () => {
+    if (!this.state.animationEnd) return null;
+
+    return (
+      <>
+        <ModalHeader toggle={this.onToggle}>{gettext('Edit extra attributes')}</ModalHeader>
+        <ModalBody>
+          {this.renderColumns()}
+        </ModalBody>
+      </>
+    );
+  }
+
+  render() {
+    const { animationEnd } = this.state;
+
+    return (
+      <Modal
+        isOpen={true}
+        className="extra-attributes-dialog"
+        style={animationEnd ? this.getDialogStyle() : this.getInitStyle()}
+        zIndex={zIndexes.EXTRA_ATTRIBUTES_DIALOG_MODAL}
+        contentClassName="extra-attributes-content-container"
+        modalClassName="extra-attributes-modal"
+        wrapClassName="extra-attributes"
+        fade={false}
+        innerRef={this.modalRef}
+        toggle={this.onToggle}
+      >
+        {this.renderContent()}
+      </Modal>
+    );
+  }
+}
+
+ExtraAttributesDialog.propTypes = {
+  repoID: PropTypes.string,
+  filePath: PropTypes.string,
+  direntDetail: PropTypes.object,
+  onToggle: PropTypes.func,
+};
+
+export default ExtraAttributesDialog;
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -5,6 +5,7 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
+import ExtraAttributesDialog from '../dialog/extra-attributes-dialog';

 const propTypes = {
  repoInfo: PropTypes.object.isRequired,
@@ -22,11 +23,12 @@ class DetailListView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      isEditFileTagShow: false
+      isEditFileTagShow: false,
+      isShowExtraAttributes: false,
    };
  }

-  getDirentPostion = () => {
+  getDirentPosition = () => {
    let { repoInfo } = this.props;
    let direntPath = this.getDirentPath();
    let position = repoInfo.repo_name;
@@ -57,9 +59,13 @@ class DetailListView extends React.Component {
    return Utils.joinPath(path, dirent.name);
  }

+  toggleExtraAttributesDialog = () => {
+    this.setState({ isShowExtraAttributes: !this.state.isShowExtraAttributes });
+  }
+
  render() {
    let { direntType, direntDetail, fileTagList } = this.props;
-    let position = this.getDirentPostion();
+    let position = this.getDirentPosition();
    let direntPath = this.getDirentPath();
    if (direntType === 'dir') {
      return (
@@ -100,6 +106,15 @@ class DetailListView extends React.Component {
                  <i className='fa fa-pencil-alt attr-action-icon' onClick={this.onEditFileTagToggle}></i>
                </td>
              </tr>
+              {direntDetail.permission === 'rw' && (
+                <tr className="file-extra-attributes">
+                  <th colSpan={2}>
+                    <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraAttributesDialog}>
+                      {gettext('Edit extra attributes')}
+                    </div>
+                  </th>
+                </tr>
+              )}
            </tbody>
          </table>
          {this.state.isEditFileTagShow &&
@@ -113,6 +128,14 @@ class DetailListView extends React.Component {
              />
            </ModalPortal>
          }
+          {this.state.isShowExtraAttributes && (
+            <ExtraAttributesDialog
+              repoID={this.props.repoID}
+              filePath={direntPath}
+              direntDetail={direntDetail}
+              onToggle={this.toggleExtraAttributesDialog}
+            />
+          )}
        </Fragment>
      );
    }
--- a/frontend/src/constants/index.js
+++ b/frontend/src/constants/index.js
@@ -0,0 +1,112 @@
+import * as zIndexes from './zIndexes';
+import KeyCodes from './keyCodes';
+
+export const DIALOG_MAX_HEIGHT = window.innerHeight - 56; // Dialog margin is 3.5rem (56px)
+
+export const EXTRA_ATTRIBUTES_COLUMN_TYPE = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  DATE: 'date',
+  FORMULA: 'formula',
+  SINGLE_SELECT: 'single-select',
+  CTIME: 'ctime',
+  MTIME: 'mtime'
+};
+
+export const EXTRA_ATTRIBUTES_NOT_DISPLAY_COLUMN_KEY = [
+  '_id',
+  '_locked',
+  '_locked_by',
+  '_archived',
+  '_creator',
+  '_last_modifier',
+  '_ctime',
+  '_mtime',
+];
+
+export const EXTRA_ATTRIBUTES_NOT_DISPLAY_COLUMN_NAME = [
+  'Repo ID',
+  'UUID',
+];
+
+export const FORMULA_RESULT_TYPE = {
+  NUMBER: 'number',
+  STRING: 'string',
+  DATE: 'date',
+  BOOL: 'bool',
+  ARRAY: 'array',
+};
+
+export const DELETED_OPTION_BACKGROUND_COLOR = '#eaeaea';
+
+export const DELETED_OPTION_TIPS = 'Deleted option';
+
+export const DEFAULT_NUMBER_FORMAT = 'number';
+
+export const ERROR = 'ERROR';
+export const ERROR_DIV_ZERO = 'DIV/0';
+export const ERROR_NAME = 'NAME';
+export const ERROR_NOT_AVAILABLE = 'N/A';
+export const ERROR_NULL = 'NULL';
+export const ERROR_NUM = 'NUM';
+export const ERROR_REF = 'REF';
+export const ERROR_VALUE = 'VALUE';
+export const GETTING_DATA = 'GETTING_DATA';
+
+const errors = {
+  [ERROR]: '#ERROR!',
+  [ERROR_DIV_ZERO]: '#DIV/0!',
+  [ERROR_NAME]: '#NAME?',
+  [ERROR_NOT_AVAILABLE]: '#N/A',
+  [ERROR_NULL]: '#NULL!',
+  [ERROR_NUM]: '#NUM!',
+  [ERROR_REF]: '#REF!',
+  [ERROR_VALUE]: '#VALUE!',
+  [GETTING_DATA]: '#GETTING_DATA',
+};
+
+export const DISPLAY_INTERNAL_ERRORS = [
+  errors[ERROR],
+  errors[ERROR_DIV_ZERO],
+  errors[ERROR_NAME],
+  errors[ERROR_NOT_AVAILABLE],
+  errors[ERROR_NULL],
+  errors[ERROR_NUM],
+  errors[ERROR_REF],
+  errors[ERROR_VALUE],
+  errors[GETTING_DATA],
+];
+
+export const DURATION_FORMATS_MAP = {
+  H_MM: 'h:mm',
+  H_MM_SS: 'h:mm:ss',
+  H_MM_SS_S: 'h:mm:ss.s',
+  H_MM_SS_SS: 'h:mm:ss.ss',
+  H_MM_SS_SSS: 'h:mm:ss.sss'
+};
+
+export const DURATION_FORMATS = [
+  { name: DURATION_FORMATS_MAP.H_MM, type: DURATION_FORMATS_MAP.H_MM },
+  { name: DURATION_FORMATS_MAP.H_MM_SS, type: DURATION_FORMATS_MAP.H_MM_SS }
+];
+
+export const DURATION_ZERO_DISPLAY = {
+  [DURATION_FORMATS_MAP.H_MM]: '0:00',
+  [DURATION_FORMATS_MAP.H_MM_SS]: '0:00',
+  [DURATION_FORMATS_MAP.H_MM_SS_S]: '0:00.0',
+  [DURATION_FORMATS_MAP.H_MM_SS_SS]: '0:00.00',
+  [DURATION_FORMATS_MAP.H_MM_SS_SSS]: '0:00.000',
+};
+
+export const DURATION_DECIMAL_DIGITS = {
+  [DURATION_FORMATS_MAP.H_MM]: 0,
+  [DURATION_FORMATS_MAP.H_MM_SS]: 0,
+  [DURATION_FORMATS_MAP.H_MM_SS_S]: 1,
+  [DURATION_FORMATS_MAP.H_MM_SS_SS]: 2,
+  [DURATION_FORMATS_MAP.H_MM_SS_SSS]: 3,
+};
+
+export {
+  KeyCodes,
+  zIndexes,
+};
--- a/frontend/src/constants/keyCodes.js
+++ b/frontend/src/constants/keyCodes.js
@@ -0,0 +1,104 @@
+const KeyCodes = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+  Shift: 16,
+  Ctrl: 17,
+  Alt: 18,
+  PauseBreak: 19,
+  CapsLock: 20,
+  Escape: 27,
+  Esc: 27,
+  Space: 32,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40,
+  Insert: 45,
+  Delete: 46,
+  0: 48,
+  1: 49,
+  2: 50,
+  3: 51,
+  4: 52,
+  5: 53,
+  6: 54,
+  7: 55,
+  8: 56,
+  9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  LeftWindowKey: 91,
+  RightWindowKey: 92,
+  SelectKey: 93,
+  NumPad0: 96,
+  NumPad1: 97,
+  NumPad2: 98,
+  NumPad3: 99,
+  NumPad4: 100,
+  NumPad5: 101,
+  NumPad6: 102,
+  NumPad7: 103,
+  NumPad8: 104,
+  NumPad9: 105,
+  Multiply: 106,
+  Add: 107,
+  Subtract: 109,
+  DecimalPoint: 110,
+  Divide: 111,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F12: 123,
+  NumLock: 144,
+  ScrollLock: 145,
+  SemiColon: 186,
+  EqualSign: 187,
+  Comma: 188,
+  Dash: 189,
+  Period: 190,
+  ForwardSlash: 191,
+  GraveAccent: 192,
+  OpenBracket: 219,
+  BackSlash: 220,
+  CloseBracket: 221,
+  SingleQuote: 222,
+  ChineseInputMethod: 229,
+};
+
+export default KeyCodes;
--- a/frontend/src/constants/zIndexes.js
+++ b/frontend/src/constants/zIndexes.js
@@ -0,0 +1 @@
+export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -174,3 +174,24 @@
 .detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i {
  margin: 0 auto;
 }
+
+.detail-container .edit-file-extra-attributes-btn {
+  min-width: 80px;
+  width: fit-content;
+  max-width: 100%;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 10px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  color: #929292;
+  font-size: 14px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.detail-container .edit-file-extra-attributes-btn:hover {
+  cursor: pointer;
+  background-color: #dbdbdb;
+  color: #666;
+}
--- a/frontend/src/pages/sdoc-file-history/history-version.js
+++ b/frontend/src/pages/sdoc-file-history/history-version.js
@@ -107,7 +107,7 @@ class HistoryVersion extends React.Component {
              alt={gettext('More Operations')}
            />
            <DropdownMenu>
-              {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>}
+              {/* {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>} */}
              <DropdownItem tag='a' href={url} onClick={this.onItemDownLoad}>{gettext('Download')}</DropdownItem>
              {(this.props.index !== 0) && <DropdownItem onClick={this.onItemCopy}>{gettext('Copy')}</DropdownItem>}
              <DropdownItem onClick={this.toggleRename}>{gettext('Rename')}</DropdownItem>
--- a/frontend/src/utils/extra-attributes.js
+++ b/frontend/src/utils/extra-attributes.js
@@ -0,0 +1,351 @@
+import moment from 'moment';
+import { EXTRA_ATTRIBUTES_NOT_DISPLAY_COLUMN_KEY, DEFAULT_NUMBER_FORMAT, DISPLAY_INTERNAL_ERRORS, DURATION_FORMATS_MAP,
+  DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS, EXTRA_ATTRIBUTES_NOT_DISPLAY_COLUMN_NAME } from '../constants';
+import NP from './number-precision';
+
+NP.enableBoundaryChecking(false);
+
+export const getValidColumns = (columns, editableColumns = [], isEmptyFile = false) => {
+  if (!Array.isArray(columns) || columns.length === 0) return [];
+  return columns
+    .map(column => {
+      let validColumn = column;
+      const canEdit = isEmptyFile ? false : editableColumns.includes(column.name);
+      if (column.type === 'single-select') {
+        if (!(column.data && column.data.options)) {
+          validColumn.data = { options: [] };
+        }
+      }
+      validColumn.editable = canEdit;
+      return validColumn;
+    })
+    .filter(column => !EXTRA_ATTRIBUTES_NOT_DISPLAY_COLUMN_KEY.includes(column.key))
+    .filter(column => !EXTRA_ATTRIBUTES_NOT_DISPLAY_COLUMN_NAME.includes(column.name));
+};
+
+export const getDateDisplayString = (value, format) => {
+  if (value === '' || !value || typeof value !== 'string') {
+    return '';
+  }
+  // Compatible with older versions: if format is null, use defaultFormat
+  const validValue = value.replace(/-/g, '/').replace('T', ' ').replace('Z', '');
+  const date = moment(validValue);
+
+  if (!date.isValid()) return value;
+  switch(format) {
+    case 'D/M/YYYY':
+    case 'DD/MM/YYYY': {
+      const formatValue = date.format('YYYY-MM-DD');
+      const formatValueList = formatValue.split('-');
+      return `${formatValueList[2]}/${formatValueList[1]}/${formatValueList[0]}`;
+    }
+    case 'D/M/YYYY HH:mm':
+    case 'DD/MM/YYYY HH:mm': {
+      const formatValues = date.format('YYYY-MM-DD HH:mm');
+      const formatValuesList = formatValues.split(' ');
+      const formatDateList = formatValuesList[0].split('-');
+      return `${formatDateList[2]}/${formatDateList[1]}/${formatDateList[0]} ${formatValuesList[1]}`;
+    }
+    case 'M/D/YYYY':
+      return date.format('M/D/YYYY');
+    case 'M/D/YYYY HH:mm':
+      return date.format('M/D/YYYY HH:mm');
+    case 'YYYY-MM-DD':
+      return date.format('YYYY-MM-DD');
+    case 'YYYY-MM-DD HH:mm':
+      return date.format('YYYY-MM-DD HH:mm');
+    case 'YYYY-MM-DD HH:mm:ss': {
+      return date.format('YYYY-MM-DD HH:mm:ss');
+    }
+    case 'DD.MM.YYYY':
+      return date.format('DD.MM.YYYY');
+    case 'DD.MM.YYYY HH:mm':
+      return date.format('DD.MM.YYYY HH:mm');
+    default:
+      return date.format('YYYY-MM-DD');
+  }
+};
+
+export const getSelectColumnOptions = (column) => {
+  if (!column || !column.data || !Array.isArray(column.data.options)) {
+    return [];
+  }
+  return column.data.options;
+};
+
+const _getMathRoundedDuration = (num, duration_format) => {
+  const decimalDigits = DURATION_DECIMAL_DIGITS[duration_format];
+  if (decimalDigits < 1) {
+    return num;
+  }
+  const ratio = Math.pow(10, decimalDigits);
+  return Math.round(num * ratio) / ratio;
+};
+
+const _getDurationDecimalSuffix = (duration_format, decimal) => {
+  if (duration_format === DURATION_FORMATS_MAP.H_MM_SS_S) {
+    return decimal === 0 ? '.0' : '';
+  } else if (duration_format === DURATION_FORMATS_MAP.H_MM_SS_SS) {
+    if (decimal === 0) {
+      return '.00';
+    } else if (decimal < 10) {
+      return '0';
+    }
+  } else if (duration_format === DURATION_FORMATS_MAP.H_MM_SS_SSS) {
+    if (decimal === 0) {
+      return '.000';
+    } else if (decimal < 10) {
+      return '00';
+    } else if (decimal < 100) {
+      return '0';
+    }
+  }
+  return '';
+};
+
+export const getDurationDisplayString = (value, data) => {
+  if (!value && value !== 0) return '';
+  let { duration_format } = data || {};
+  duration_format = duration_format || DURATION_FORMATS_MAP.H_MM;
+  if (DURATION_FORMATS.findIndex((format) => format.type === duration_format) < 0) {
+    return '';
+  }
+  if (value === 0) {
+    return DURATION_ZERO_DISPLAY[duration_format];
+  }
+  const includeDecimal = duration_format.indexOf('.') > -1;
+  let positiveValue = Math.abs(value);
+  if (!includeDecimal) {
+    positiveValue = Math.round(positiveValue);
+  }
+
+  positiveValue = _getMathRoundedDuration(positiveValue, duration_format);
+  const decimalParts = (positiveValue + '').split('.');
+  const decimalPartsLen = decimalParts.length;
+  let decimal = 0;
+  if (decimalPartsLen > 1) {
+    decimal = decimalParts[decimalPartsLen - 1];
+    decimal = decimal ? decimal - 0 : 0;
+  }
+  const decimalDigits = DURATION_DECIMAL_DIGITS[duration_format];
+  const decimalSuffix = _getDurationDecimalSuffix(duration_format, decimal);
+  let displayString = value < 0 ? '-' : '';
+  let hours = parseInt(positiveValue / 3600);
+  let minutes = parseInt((positiveValue - hours * 3600) / 60);
+  if (duration_format === DURATION_FORMATS_MAP.H_MM) {
+    displayString += `${hours}:${minutes > 9 ? minutes : '0' + minutes}`;
+    return displayString;
+  }
+  let seconds = Number.parseFloat((positiveValue - hours * 3600 - minutes * 60).toFixed(decimalDigits));
+  minutes = minutes > 9 ? minutes : `0${minutes}`;
+  seconds = seconds > 9 ? seconds : `0${seconds}`;
+  displayString += `${hours}:${minutes}:${seconds}${decimalSuffix}`;
+  return displayString;
+};
+
+const _separatorMap = {
+  'comma': ',',
+  'dot': '.',
+  'no': '',
+  'space': ' ',
+};
+
+const _toThousands = (num, isCurrency, formatData) => {
+  let { decimal = 'dot', thousands = 'no', precision = 2, enable_precision = false } = formatData || {};
+  const decimalString = _separatorMap[decimal];
+  const thousandsString = _separatorMap[thousands];
+  if ((num + '').indexOf('e') > -1) {
+    if (num < 1 && num > -1) {
+      // 1.convert to non-scientific number
+      let numericString = num.toFixed(enable_precision ? precision : 8);
+
+      // 2.remove 0 from end of the number which not set precision. e.g. 0.100000
+      if (!enable_precision) {
+        numericString = removeZerosFromEnd(numericString);
+      }
+
+      // 3.remove minus from number which equal to 0. e.g. '-0.00'
+      if (parseFloat(numericString) === 0) {
+        return numericString.startsWith('-') ? numericString.substring(1) : numericString;
+      }
+      return numericString;
+    }
+    return num;
+  }
+  const decimalDigits = enable_precision ? precision : _getDecimalDigits(num);
+  let value = parseFloat(num.toFixed(decimalDigits));
+  const isMinus = value < 0;
+  let integer = Math.trunc(value);
+  // format decimal value
+  let decimalValue = String(Math.abs(NP.minus(value, integer)).toFixed(decimalDigits)).slice(1);
+  if (!enable_precision) {
+    decimalValue = removeZerosFromEnd(decimalValue);
+  }
+  if (isCurrency) {
+    if (!enable_precision) {
+      if (decimalValue.length === 2) {
+        decimalValue = decimalValue.padEnd(3, '0');
+      } else {
+        decimalValue = (decimalValue.substring(0, 3) || '.').padEnd(3, '0');
+      }
+    }
+  }
+  decimalValue = decimalValue.replace(/./, decimalString);
+  // format integer value
+  let result = [], counter = 0;
+  integer = Math.abs(integer).toString();
+  for (var i = integer.length - 1; i >= 0; i--) {
+    counter++;
+    result.unshift(integer[i]);
+    if (!(counter % 3) && i !== 0) {
+      result.unshift(thousandsString);
+    }
+  }
+  return (isMinus ? '-' : '') + result.join('') + decimalValue;
+};
+
+const _getDecimalDigits = (num) => {
+  if (Number.isInteger(num)) {
+    return 0;
+  }
+  let valueArr = (num + '').split('.');
+  let digitsLength = valueArr[1] ? valueArr[1].length : 8;
+  return digitsLength > 8 ? 8 : digitsLength;
+};
+
+/**
+ * @param {string} value
+ * e.g. removeZerosFromEnd('0.0100') // '0.01'
+ */
+const removeZerosFromEnd = (value) => {
+  if (value.endsWith('0')) {
+    return value.replace(/(?:\.0*|(\.\d+?)0+)$/, '$1');
+  }
+  return value;
+};
+
+export const getPrecisionNumber = (num, formatData) => {
+  let { precision = 2, enable_precision = false } = formatData || {};
+  let type = Object.prototype.toString.call(num);
+  if (type !== '[object Number]') {
+    if (type === '[object String]' && DISPLAY_INTERNAL_ERRORS.includes(num)) {
+      return num;
+    }
+    return null;
+  }
+  let decimalDigits = enable_precision ? precision : _getDecimalDigits(num);
+  return num.toFixed(decimalDigits);
+};
+
+export const getNumberDisplayString = (value, formatData) => {
+  // formatData: old version maybe 'null'
+  const type = Object.prototype.toString.call(value);
+  if (type !== '[object Number]') {
+    // return formula internal errors directly.
+    if (type === '[object String]' && value.startsWith('#')) {
+      return value;
+    }
+    return '';
+  }
+  if (isNaN(value) || value === Infinity || value === -Infinity) return value + '';
+  const { format = DEFAULT_NUMBER_FORMAT } = formatData || {};
+  switch(format) {
+    case 'number': {
+      return _toThousands(value, false, formatData);
+    }
+    case 'percent': {
+      return `${_toThousands(Number.parseFloat((value * 100).toFixed(8)), false, formatData)}%`;
+    }
+    case 'yuan': {
+      return `￥${_toThousands(value, true, formatData)}`;
+    }
+    case 'dollar': {
+      return `$${_toThousands(value, true, formatData)}`;
+    }
+    case 'euro': {
+      return `€${_toThousands(value, true, formatData)}`;
+    }
+    case 'duration': {
+      return getDurationDisplayString(value, formatData);
+    }
+    case 'custom_currency': {
+      if (formatData.currency_symbol_position === 'after') {
+        return `${_toThousands(value, true, formatData)}${formatData.currency_symbol || ''}`;
+      } else {
+        return `${formatData.currency_symbol || ''}${_toThousands(value, true, formatData)}`;
+      }
+    }
+    default:
+      return '' + value;
+  }
+};
+
+export const replaceNumberNotAllowInput = (value, format = DEFAULT_NUMBER_FORMAT, currency_symbol = null) => {
+  if (!value) {
+    return '';
+  }
+  value = value.replace(/。/g, '.');
+  switch(format) {
+    case 'number': {
+      return value.replace(/[^.-\d,]/g,'');
+    }
+    case 'percent': {
+      return value.replace(/[^.-\d,%]/g, '');
+    }
+    case 'yuan': {
+      return value.replace(/[^.-\d¥￥,]/g, '');
+    }
+    case 'dollar': {
+      return value.replace(/[^.-\d$,]/g, '');
+    }
+    case 'euro': {
+      return value.replace(/[^.-\d€,]/g, '');
+    }
+    case 'custom_currency': {
+      // eslint-disable-next-line
+      const reg = new RegExp('[^.-\d' + currency_symbol + ',]', 'g');
+      return value.replace(reg, '');
+    }
+    default:
+      return value.replace(/[^.-\d,]/g, '');
+  }
+};
+
+export const getFloatNumber = (data, format) =>  {
+  if (!data && data !== 0) {
+    return null;
+  }
+  let newData = parseFloat(data.replace(/[^.-\d]/g, ''));
+  if (format === 'percent' && !isNaN(newData)) {
+    return NP.divide(newData, 100);
+  }
+  return isNaN(newData) ? null : newData;
+};
+
+export const formatStringToNumber = (numberString, formatData) => {
+  let { format, decimal, thousands, enable_precision, precision } = formatData || {};
+  let value = numberString;
+  if (decimal && thousands && decimal === 'comma') {
+    if (thousands === 'dot') {
+      value = value.replace(/,/, '@');
+      value = value.replace(/\./g, ',');
+      value = value.replace(/@/, '.');
+    } else {
+      value = value.replace(/\./g, '');
+      value = value.replace(/,/, '.');
+    }
+  }
+  value = getFloatNumber(value, format);
+  if (enable_precision && value) {
+    if (format === 'percent') {
+      precision += 2;
+    }
+    value = Number(parseFloat(value).toFixed(precision));
+  }
+  return value;
+};
+
+export const isMac = () => {
+  const platform = navigator.platform;
+  return (platform == 'Mac68K') || (platform == 'MacPPC') || (platform == 'Macintosh') || (platform == 'MacIntel');
+};
--- a/frontend/src/utils/number-precision.js
+++ b/frontend/src/utils/number-precision.js
@@ -0,0 +1,122 @@
+/**
+ * @desc Solve the problem of floating calculation, avoid multiple digits after the decimal point and loss of calculation accuracy.
+ * example: 3 + 2.4 = 4.699999999999999，1.0 - 0.9 = 0.09999999999999998
+ */
+
+/**
+ * Correct wrong data
+ * strip(0.09999999999999998)=0.1
+ */
+function strip(num, precision = 12) {
+  return +parseFloat(num.toPrecision(precision));
+}
+
+/**
+ * Return digits length of a number
+ * @param {*number} num Input number
+ */
+function digitLength(num) {
+  // Get digit length of e
+  const eSplit = num.toString().split(/[eE]/);
+  const len = (eSplit[0].split('.')[1] || '').length - (+(eSplit[1] || 0));
+  return len > 0 ? len : 0;
+}
+
+/**
+ * Convert decimals to integers and support scientific notation. If it is a decimal, it is enlarged to an integer
+ * @param {*number} num Number of inputs
+ */
+function float2Fixed(num) {
+  if (num.toString().indexOf('e') === -1) {
+    return Number(num.toString().replace('.', ''));
+  }
+  const dLen = digitLength(num);
+  return dLen > 0 ? strip(num * Math.pow(10, dLen)) : num;
+}
+
+/**
+ * Check whether the number is out of range, and give a prompt if it is out of range
+ * @param {*number} num Number of inputs
+ */
+function checkBoundary(num) {
+  if (_boundaryCheckingState) {
+    if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
+      // eslint-disable-next-line no-console
+      console.warn(`${num} is beyond boundary when transfer to integer, the results may not be accurate`);
+    }
+  }
+}
+
+/**
+ * Exact multiplication
+ */
+function times(num1, num2, ...others) {
+  if (others.length > 0) {
+    return times(times(num1, num2), others[0], ...others.slice(1));
+  }
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  const baseNum = digitLength(num1) + digitLength(num2);
+  const leftValue = num1Changed * num2Changed;
+
+  checkBoundary(leftValue);
+
+  return leftValue / Math.pow(10, baseNum);
+}
+
+/**
+ * Exact addition
+ */
+function plus(num1, num2, ...others) {
+  if (others.length > 0) {
+    return plus(plus(num1, num2), others[0], ...others.slice(1));
+  }
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  return (times(num1, baseNum) + times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * Exact subtraction
+ */
+function minus(num1, num2, ...others) {
+  if (others.length > 0) {
+    return minus(minus(num1, num2), others[0], ...others.slice(1));
+  }
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  return (times(num1, baseNum) - times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * Exact division
+ */
+function divide(num1, num2, ...others) {
+  if (others.length > 0) {
+    return divide(divide(num1, num2), others[0], ...others.slice(1));
+  }
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  checkBoundary(num1Changed);
+  checkBoundary(num2Changed);
+  // fix: Similar to 10 ** -4 is 0.00009999999999999999, strip correction
+  return times((num1Changed / num2Changed), strip(Math.pow(10, digitLength(num2) - digitLength(num1))));
+}
+
+/**
+ * rounding
+ */
+function round(num, ratio) {
+  const base = Math.pow(10, ratio);
+  return divide(Math.round(times(num, base)), base);
+}
+
+let _boundaryCheckingState = true;
+/**
+ * Whether to perform boundary check, default true
+ * @param flag Mark switch, true is on, false is off, default is true
+ */
+function enableBoundaryChecking(flag = true) {
+  _boundaryCheckingState = flag;
+}
+export { strip, plus, minus, times, divide, round, digitLength, float2Fixed, enableBoundaryChecking };
+export default { strip, plus, minus, times, divide, round, digitLength, float2Fixed, enableBoundaryChecking };
+
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -1560,6 +1560,11 @@ export const Utils = {
    if (!siteRoot || !repoID || !path) return '';
    console.log(siteRoot + 'repo/sdoc_revisions/' + repoID + '/?p=' + this.encodePath(path))
    return siteRoot + 'repo/sdoc_revisions/' + repoID + '/?p=' + this.encodePath(path);
-  }
+  },
+
+  isFunction: function(functionToCheck) {
+    const getType = {};
+    return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+  },

 };
				`@@ -0,0 +1 @@`
				`export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;`