can add and modify property

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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;
+}

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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;

frontend/src/components/dialog/extra-metadata-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);
+    }
+  }
+
+  UNSAFE_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;