{gettext('File does not exist.')}
);
}
+
+ if (this.props.content === '__sf-metadata') {
+ window.sfMetadata = {
+ siteRoot,
+ lang,
+ mediaUrl,
+ };
+
+ return (
+
+
+
+ );
+ }
+
return (
-
- );
-};
-
-MetadataViews.propTypes = {
- repoID: PropTypes.string.isRequired,
-};
-
-export default MetadataViews;
diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.js
index 62960ffb5b..12c5633eee 100644
--- a/frontend/src/constants/index.js
+++ b/frontend/src/constants/index.js
@@ -106,6 +106,10 @@ export const DURATION_DECIMAL_DIGITS = {
[DURATION_FORMATS_MAP.H_MM_SS_SSS]: 3,
};
+export const PRIVATE_FILE_TYPE = {
+ FILE_EXTENDED_PROPERTIES: '__file_extended_properties'
+};
+
const TAG_COLORS = ['#FBD44A', '#EAA775', '#F4667C', '#DC82D2', '#9860E5', '#9F8CF1', '#59CB74', '#ADDF84',
'#89D2EA', '#4ECCCB', '#46A1FD', '#C2C2C2'];
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 5f798ac980..eb6acd4b44 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -11,6 +11,7 @@
width: 100%;
height: calc(100% - 48px);
border-top: 1px solid #e8e8e8;
+ transform: translateZ(10px);
}
.view-mode-container {
diff --git a/frontend/src/components/metadata-manage/api.js b/frontend/src/metadata/api.js
similarity index 76%
rename from frontend/src/components/metadata-manage/api.js
rename to frontend/src/metadata/api.js
index 50394363c6..95efb72242 100644
--- a/frontend/src/components/metadata-manage/api.js
+++ b/frontend/src/metadata/api.js
@@ -1,6 +1,6 @@
import axios from 'axios';
import cookie from 'react-cookies';
-import { siteRoot } from '../../utils/constants';
+import { siteRoot } from '../utils/constants';
class MetadataManagerAPI {
init({ server, username, password, token }) {
@@ -43,22 +43,22 @@ class MetadataManagerAPI {
}
}
- getRepoMetadataManagementEnabledStatus(repoID) {
+ getMetadataStatus(repoID) {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/';
return this.req.get(url);
}
- openRepoMetadataManagement(repoID) {
+ createMetadata(repoID) {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/';
return this.req.put(url);
}
- closeRepoMetadataManagement(repoID) {
+ deleteMetadata(repoID) {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/';
return this.req.delete(url);
}
- getMetadataRecords(repoID, params) {
+ getMetadata(repoID, params) {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/records/';
return this.req.get(url, {params: params});
}
@@ -72,7 +72,7 @@ class MetadataManagerAPI {
return this.req.post(url, data);
}
- updateMetadataRecord(repoID, recordID, creator, createTime, modifier, modifyTime, parentDir, name) {
+ updateMetadataRecord = (repoID, recordID, creator, createTime, modifier, modifyTime, parentDir, name) => {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/records/' + recordID + '/';
const data = {
'creator': creator,
@@ -83,16 +83,23 @@ class MetadataManagerAPI {
'name': name,
};
return this.req.put(url, data);
- }
+ };
- deleteMetadataRecord(repoID, recordID) {
+ deleteMetadataRecord = (repoID, recordID) => {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/records/' + recordID + '/';
return this.req.delete(url);
- }
+ };
+
+ listUserInfo = (userIds) => {
+ const url = this.server + '/api/v2.1/user-list/';
+ const params = { user_id_list: userIds };
+ return this._sendPostRequest(url, params, { headers: { 'Content-type': 'application/json' } });
+ };
+
}
-const metadataManagerAPI = new MetadataManagerAPI();
+const metadataAPI = new MetadataManagerAPI();
const xcsrfHeaders = cookie.load('sfcsrftoken');
-metadataManagerAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
+metadataAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
-export default metadataManagerAPI;
+export default metadataAPI;
diff --git a/frontend/src/metadata/index.js b/frontend/src/metadata/index.js
new file mode 100644
index 0000000000..321bae7f08
--- /dev/null
+++ b/frontend/src/metadata/index.js
@@ -0,0 +1,9 @@
+import SeafileMetadata from './metadata-view';
+import MetadataStatusManagementDialog from './metadata-status-manage-dialog';
+import MetadataTreeView from './metadata-tree-view';
+
+export {
+ SeafileMetadata,
+ MetadataStatusManagementDialog,
+ MetadataTreeView,
+};
diff --git a/frontend/src/components/metadata-manage/metadata-status-manage-dialog/index.css b/frontend/src/metadata/metadata-status-manage-dialog/index.css
similarity index 100%
rename from frontend/src/components/metadata-manage/metadata-status-manage-dialog/index.css
rename to frontend/src/metadata/metadata-status-manage-dialog/index.css
diff --git a/frontend/src/components/metadata-manage/metadata-status-manage-dialog/index.js b/frontend/src/metadata/metadata-status-manage-dialog/index.js
similarity index 86%
rename from frontend/src/components/metadata-manage/metadata-status-manage-dialog/index.js
rename to frontend/src/metadata/metadata-status-manage-dialog/index.js
index 5f4f3e3b1d..19381d5a49 100644
--- a/frontend/src/components/metadata-manage/metadata-status-manage-dialog/index.js
+++ b/frontend/src/metadata/metadata-status-manage-dialog/index.js
@@ -1,11 +1,11 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import Switch from '../../common/switch';
-import metadataManagerAPI from '../api';
-import { Utils } from '../../../utils/utils';
-import toaster from '../../toast';
+import { gettext } from '../../utils/constants';
+import Switch from '../../components/common/switch';
+import metadataAPI from '../api';
+import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
import './index.css';
@@ -20,8 +20,8 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
const onSubmit = useCallback(() => {
setSubmitting(true);
- const apiName = value ? 'openRepoMetadataManagement' : 'closeRepoMetadataManagement';
- metadataManagerAPI[apiName](repoID).then(res => {
+ const apiName = value ? 'createMetadata' : 'deleteMetadata';
+ metadataAPI[apiName](repoID).then(res => {
submit(value);
toggle();
}).catch(error => {
diff --git a/frontend/src/components/metadata-manage/metadata-views/index.css b/frontend/src/metadata/metadata-tree-view/index.css
similarity index 100%
rename from frontend/src/components/metadata-manage/metadata-views/index.css
rename to frontend/src/metadata/metadata-tree-view/index.css
diff --git a/frontend/src/metadata/metadata-tree-view/index.js b/frontend/src/metadata/metadata-tree-view/index.js
new file mode 100644
index 0000000000..2258ebf5d1
--- /dev/null
+++ b/frontend/src/metadata/metadata-tree-view/index.js
@@ -0,0 +1,74 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { gettext } from '../../utils/constants';
+import Icon from '../../components/icon';
+import { PRIVATE_FILE_TYPE } from '../../constants';
+
+import './index.css';
+
+const MetadataTreeView = ({ repoID, currentPath, onNodeClick }) => {
+ const node = useMemo(() => {
+ return {
+ children: [],
+ path: '/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES,
+ isExpanded: false,
+ isLoaded: true,
+ isPreload: true,
+ object: {
+ file_tags: [],
+ id: PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES,
+ name: gettext('File extended properties'),
+ type: PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES,
+ isDir: () => false,
+ },
+ parentNode: {},
+ key: repoID,
+ };
+ }, [repoID]);
+ const [highlight, setHighlight] = useState(false);
+
+ const onMouseEnter = useCallback(() => {
+ setHighlight(true);
+ }, []);
+
+ const onMouseOver = useCallback(() => {
+ setHighlight(true);
+ }, []);
+
+ const onMouseLeave = useCallback(() => {
+ setHighlight(false);
+ }, []);
+
+ return (
+
-
-
-
-
-
- {gettext('File extended properties')}
-
-
-
-
-
+
+ );
+};
+
+MetadataTreeView.propTypes = {
+ repoID: PropTypes.string.isRequired,
+ currentPath: PropTypes.string,
+ onNodeClick: PropTypes.func,
+};
+
+export default MetadataTreeView;
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/format.js b/frontend/src/metadata/metadata-view/_basic/constants/column/format.js
new file mode 100644
index 0000000000..f5331cd69a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/column/format.js
@@ -0,0 +1,82 @@
+import CellType from './type';
+
+const DATE_COLUMN_OPTIONS = [
+ CellType.CTIME, CellType.MTIME,
+];
+const NUMERIC_COLUMNS_TYPES = [
+
+];
+const COLLABORATOR_COLUMN_TYPES = [
+ CellType.CREATOR, CellType.LAST_MODIFIER,
+];
+
+// date
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
+const UTC_FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
+const DATE_UNIT = {
+ YEAR: 'year',
+ MONTH: 'month',
+ WEEK: 'week',
+ DAY: 'day',
+ HOUR: 'hour',
+ HOURS: 'hours',
+ MINUTE: 'minute',
+ MINUTES: 'minutes',
+ SECOND: 'second',
+};
+const DATE_FORMAT_MAP = {
+ YYYY_MM_DD: 'YYYY-MM-DD',
+ YYYY_MM_DD_HH_MM: 'YYYY-MM-DD HH:mm',
+ YYYY_MM_DD_HH_MM_SS: 'YYYY-MM-DD HH:mm:ss',
+};
+
+// number
+const DEFAULT_NUMBER_FORMAT = 'number';
+
+const NOT_SUPPORT_EDIT_COLUMN_TYPE = [
+ CellType.CTIME,
+ CellType.MTIME,
+ CellType.CREATOR,
+ CellType.LAST_MODIFIER,
+];
+
+const NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP = {
+ [CellType.CTIME]: true,
+ [CellType.MTIME]: true,
+ [CellType.CREATOR]: true,
+ [CellType.LAST_MODIFIER]: true,
+};
+
+const MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP = {
+
+};
+const SINGLE_CELL_VALUE_COLUMN_TYPE_MAP = {
+ [CellType.TEXT]: true,
+ [CellType.CTIME]: true,
+ [CellType.MTIME]: true,
+ [CellType.CREATOR]: true,
+ [CellType.LAST_MODIFIER]: true,
+};
+
+const DATE_DEFAULT_TYPES = {
+ SPECIFIC_DATE: 'specific_date',
+ CURRENT_DATE: 'current_date',
+ DAYS_BEFORE: 'days_before',
+ DAYS_AFTER: 'days_after',
+};
+
+export {
+ COLLABORATOR_COLUMN_TYPES,
+ DATE_COLUMN_OPTIONS,
+ NUMERIC_COLUMNS_TYPES,
+ DEFAULT_DATE_FORMAT,
+ UTC_FORMAT_DEFAULT,
+ DATE_UNIT,
+ DATE_FORMAT_MAP,
+ DEFAULT_NUMBER_FORMAT,
+ DATE_DEFAULT_TYPES,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
+ MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
+ SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/icon.js b/frontend/src/metadata/metadata-view/_basic/constants/column/icon.js
new file mode 100644
index 0000000000..99b1c55da7
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/column/icon.js
@@ -0,0 +1,24 @@
+import CellType from './type';
+
+const COLUMNS_ICON_CONFIG = {
+ [CellType.CREATOR]: 'creator',
+ [CellType.LAST_MODIFIER]: 'creator',
+ [CellType.CTIME]: 'creation-time',
+ [CellType.MTIME]: 'creation-time',
+ [CellType.DEFAULT]: 'text',
+ [CellType.TEXT]: 'text',
+};
+
+const COLUMNS_ICON_NAME = {
+ [CellType.CREATOR]: 'Creator',
+ [CellType.LAST_MODIFIER]: 'Last_modifier',
+ [CellType.CTIME]: 'CTime',
+ [CellType.MTIME]: 'Last_modified_time',
+ [CellType.DEFAULT]: 'Text',
+ [CellType.TEXT]: 'Text',
+};
+
+export {
+ COLUMNS_ICON_CONFIG,
+ COLUMNS_ICON_NAME,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/index.js b/frontend/src/metadata/metadata-view/_basic/constants/column/index.js
new file mode 100644
index 0000000000..51a8e8d493
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/column/index.js
@@ -0,0 +1,27 @@
+import CellType from './type';
+import {
+ COLUMNS_ICON_CONFIG,
+ COLUMNS_ICON_NAME,
+} from './icon';
+
+export {
+ COLLABORATOR_COLUMN_TYPES,
+ DATE_COLUMN_OPTIONS,
+ NUMERIC_COLUMNS_TYPES,
+ DEFAULT_DATE_FORMAT,
+ UTC_FORMAT_DEFAULT,
+ DATE_UNIT,
+ DATE_FORMAT_MAP,
+ DEFAULT_NUMBER_FORMAT,
+ DATE_DEFAULT_TYPES,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
+ MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
+ SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
+} from './format';
+
+export {
+ CellType,
+ COLUMNS_ICON_CONFIG,
+ COLUMNS_ICON_NAME,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/type.js b/frontend/src/metadata/metadata-view/_basic/constants/column/type.js
new file mode 100644
index 0000000000..6b04be5e40
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/column/type.js
@@ -0,0 +1,10 @@
+const CellType = {
+ DEFAULT: 'default',
+ TEXT: 'text',
+ CREATOR: 'creator',
+ CTIME: 'ctime',
+ LAST_MODIFIER: 'last-modifier',
+ MTIME: 'mtime',
+};
+
+export default CellType;
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-column-options.js b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-column-options.js
new file mode 100644
index 0000000000..3b967fb2d9
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-column-options.js
@@ -0,0 +1,84 @@
+import { CellType } from '../column';
+import { FILTER_TERM_MODIFIER_TYPE } from './filter-modifier';
+import { FILTER_PREDICATE_TYPE } from './filter-predicate';
+
+const textPredicates = [
+ FILTER_PREDICATE_TYPE.CONTAINS,
+ FILTER_PREDICATE_TYPE.NOT_CONTAIN,
+ FILTER_PREDICATE_TYPE.IS,
+ FILTER_PREDICATE_TYPE.IS_NOT,
+ FILTER_PREDICATE_TYPE.EMPTY,
+ FILTER_PREDICATE_TYPE.NOT_EMPTY,
+ FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID,
+];
+
+const datePredicates = [
+ FILTER_PREDICATE_TYPE.IS,
+ FILTER_PREDICATE_TYPE.IS_WITHIN,
+ FILTER_PREDICATE_TYPE.IS_BEFORE,
+ FILTER_PREDICATE_TYPE.IS_AFTER,
+ FILTER_PREDICATE_TYPE.IS_ON_OR_BEFORE,
+ FILTER_PREDICATE_TYPE.IS_ON_OR_AFTER,
+ FILTER_PREDICATE_TYPE.IS_NOT,
+ FILTER_PREDICATE_TYPE.EMPTY,
+ FILTER_PREDICATE_TYPE.NOT_EMPTY,
+];
+
+const dateTermModifiers = [
+ FILTER_TERM_MODIFIER_TYPE.TODAY,
+ FILTER_TERM_MODIFIER_TYPE.TOMORROW,
+ FILTER_TERM_MODIFIER_TYPE.YESTERDAY,
+ FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_AGO,
+ FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_AGO,
+ FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.EXACT_DATE,
+];
+
+const FILTER_COLUMN_OPTIONS = {
+ [CellType.TEXT]: {
+ filterPredicateList: textPredicates,
+ },
+ [CellType.CTIME]: {
+ filterPredicateList: datePredicates,
+ filterTermModifierList: dateTermModifiers,
+ },
+ [CellType.MTIME]: {
+ filterPredicateList: datePredicates,
+ filterTermModifierList: dateTermModifiers,
+ },
+ [CellType.CREATOR]: {
+ filterPredicateList: [
+ FILTER_PREDICATE_TYPE.CONTAINS,
+ FILTER_PREDICATE_TYPE.NOT_CONTAIN,
+ FILTER_PREDICATE_TYPE.INCLUDE_ME,
+ FILTER_PREDICATE_TYPE.IS,
+ FILTER_PREDICATE_TYPE.IS_NOT,
+ ],
+ },
+ [CellType.LAST_MODIFIER]: {
+ filterPredicateList: [
+ FILTER_PREDICATE_TYPE.CONTAINS,
+ FILTER_PREDICATE_TYPE.NOT_CONTAIN,
+ FILTER_PREDICATE_TYPE.INCLUDE_ME,
+ FILTER_PREDICATE_TYPE.IS,
+ FILTER_PREDICATE_TYPE.IS_NOT,
+ ],
+ },
+ [CellType.URL]: {
+ filterPredicateList: [
+ FILTER_PREDICATE_TYPE.CONTAINS,
+ FILTER_PREDICATE_TYPE.NOT_CONTAIN,
+ FILTER_PREDICATE_TYPE.IS,
+ FILTER_PREDICATE_TYPE.IS_NOT,
+ FILTER_PREDICATE_TYPE.EMPTY,
+ FILTER_PREDICATE_TYPE.NOT_EMPTY,
+ ],
+ },
+};
+
+export {
+ FILTER_COLUMN_OPTIONS,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-is-within.js b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-is-within.js
new file mode 100644
index 0000000000..cb2f89f2b9
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-is-within.js
@@ -0,0 +1,30 @@
+import { FILTER_TERM_MODIFIER_TYPE } from './filter-modifier';
+
+const filterTermModifierNotWithin = [
+ FILTER_TERM_MODIFIER_TYPE.EXACT_DATE,
+ FILTER_TERM_MODIFIER_TYPE.TODAY,
+ FILTER_TERM_MODIFIER_TYPE.TOMORROW,
+ FILTER_TERM_MODIFIER_TYPE.YESTERDAY,
+ FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_AGO,
+ FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_AGO,
+ FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW,
+];
+
+const filterTermModifierIsWithin = [
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_WEEK,
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_MONTH,
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_YEAR,
+ FILTER_TERM_MODIFIER_TYPE.THIS_WEEK,
+ FILTER_TERM_MODIFIER_TYPE.THIS_MONTH,
+ FILTER_TERM_MODIFIER_TYPE.THIS_YEAR,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_WEEK,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_MONTH,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_YEAR,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS,
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS,
+];
+
+export { filterTermModifierNotWithin, filterTermModifierIsWithin };
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-modifier.js b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-modifier.js
new file mode 100644
index 0000000000..0e4d5f0248
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-modifier.js
@@ -0,0 +1,54 @@
+import { gettext } from '../../../../../utils/constants';
+
+const FILTER_TERM_MODIFIER_TYPE = {
+ TODAY: 'today',
+ TOMORROW: 'tomorrow',
+ YESTERDAY: 'yesterday',
+ ONE_WEEK_AGO: 'one_week_ago',
+ ONE_WEEK_FROM_NOW: 'one_week_from_now',
+ ONE_MONTH_AGO: 'one_month_ago',
+ ONE_MONTH_FROM_NOW: 'one_month_from_now',
+ NUMBER_OF_DAYS_AGO: 'number_of_days_ago',
+ NUMBER_OF_DAYS_FROM_NOW: 'number_of_days_from_now',
+ EXACT_DATE: 'exact_date',
+ THE_PAST_WEEK: 'the_past_week',
+ THE_PAST_MONTH: 'the_past_month',
+ THE_PAST_YEAR: 'the_past_year',
+ THE_NEXT_WEEK: 'the_next_week',
+ THE_NEXT_MONTH: 'the_next_month',
+ THE_NEXT_YEAR: 'the_next_year',
+ THE_NEXT_NUMBERS_OF_DAYS: 'the_next_numbers_of_days',
+ THE_PAST_NUMBERS_OF_DAYS: 'the_past_numbers_of_days',
+ THIS_WEEK: 'this_week',
+ THIS_MONTH: 'this_month',
+ THIS_YEAR: 'this_year',
+};
+
+const FILTER_TERM_MODIFIER_SHOW = {
+ [FILTER_TERM_MODIFIER_TYPE.TODAY]: gettext('Today'),
+ [FILTER_TERM_MODIFIER_TYPE.TOMORROW]: gettext('Tomorrow'),
+ [FILTER_TERM_MODIFIER_TYPE.YESTERDAY]: gettext('Yesterday'),
+ [FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_AGO]: gettext('One_week_ago'),
+ [FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_FROM_NOW]: gettext('One_week_from_now'),
+ [FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_AGO]: gettext('One_month_ago'),
+ [FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_FROM_NOW]: gettext('One_month_from_now'),
+ [FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO]: gettext('Number_of_days_ago'),
+ [FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW]: gettext('Number_of_days_from_now'),
+ [FILTER_TERM_MODIFIER_TYPE.EXACT_DATE]: gettext('Exact_date'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_PAST_WEEK]: gettext('The_past_week'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_PAST_MONTH]: gettext('The_past_month'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_PAST_YEAR]: gettext('The_past_year'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_NEXT_WEEK]: gettext('The_next_week'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_NEXT_MONTH]: gettext('The_next_month'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_NEXT_YEAR]: gettext('The_next_year'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS]: gettext('The_next_numbers_of_days'),
+ [FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS]: gettext('The_past_numbers_of_days'),
+ [FILTER_TERM_MODIFIER_TYPE.THIS_WEEK]: gettext('This_week'),
+ [FILTER_TERM_MODIFIER_TYPE.THIS_MONTH]: gettext('This_month'),
+ [FILTER_TERM_MODIFIER_TYPE.THIS_YEAR]: gettext('This_year'),
+};
+
+export {
+ FILTER_TERM_MODIFIER_TYPE,
+ FILTER_TERM_MODIFIER_SHOW,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-predicate.js b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-predicate.js
new file mode 100644
index 0000000000..b999ca1063
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-predicate.js
@@ -0,0 +1,57 @@
+const FILTER_PREDICATE_TYPE = {
+ CONTAINS: 'contains',
+ NOT_CONTAIN: 'does_not_contain',
+ IS: 'is',
+ IS_NOT: 'is_not',
+ EQUAL: 'equal',
+ NOT_EQUAL: 'not_equal',
+ LESS: 'less',
+ GREATER: 'greater',
+ LESS_OR_EQUAL: 'less_or_equal',
+ GREATER_OR_EQUAL: 'greater_or_equal',
+ EMPTY: 'is_empty',
+ NOT_EMPTY: 'is_not_empty',
+ IS_WITHIN: 'is_within',
+ IS_BEFORE: 'is_before',
+ IS_AFTER: 'is_after',
+ IS_ON_OR_BEFORE: 'is_on_or_before',
+ IS_ON_OR_AFTER: 'is_on_or_after',
+ HAS_ANY_OF: 'has_any_of',
+ HAS_ALL_OF: 'has_all_of',
+ HAS_NONE_OF: 'has_none_of',
+ IS_EXACTLY: 'is_exactly',
+ INCLUDE_ME: 'include_me',
+ IS_CURRENT_USER_ID: 'is_current_user_ID',
+ IS_ANY_OF: 'is_any_of',
+ IS_NONE_OF: 'is_none_of',
+};
+
+const FILTER_PREDICATE_SHOW = {
+ [FILTER_PREDICATE_TYPE.CONTAINS]: 'contains',
+ [FILTER_PREDICATE_TYPE.NOT_CONTAIN]: 'does not contain',
+ [FILTER_PREDICATE_TYPE.IS]: 'is',
+ [FILTER_PREDICATE_TYPE.IS_NOT]: 'is not',
+ [FILTER_PREDICATE_TYPE.EQUAL]: '\u003d',
+ [FILTER_PREDICATE_TYPE.NOT_EQUAL]: '\u2260',
+ [FILTER_PREDICATE_TYPE.LESS]: '\u003C',
+ [FILTER_PREDICATE_TYPE.GREATER]: '\u003E',
+ [FILTER_PREDICATE_TYPE.LESS_OR_EQUAL]: '\u2264',
+ [FILTER_PREDICATE_TYPE.GREATER_OR_EQUAL]: '\u2265',
+ [FILTER_PREDICATE_TYPE.EMPTY]: 'is empty',
+ [FILTER_PREDICATE_TYPE.NOT_EMPTY]: 'is not empty',
+ [FILTER_PREDICATE_TYPE.IS_WITHIN]: 'is within...',
+ [FILTER_PREDICATE_TYPE.IS_BEFORE]: 'is before...',
+ [FILTER_PREDICATE_TYPE.IS_AFTER]: 'is after...',
+ [FILTER_PREDICATE_TYPE.IS_ON_OR_BEFORE]: 'is on or before...',
+ [FILTER_PREDICATE_TYPE.IS_ON_OR_AFTER]: 'is on or after...',
+ [FILTER_PREDICATE_TYPE.HAS_ANY_OF]: 'has any of...',
+ [FILTER_PREDICATE_TYPE.HAS_ALL_OF]: 'has all of...',
+ [FILTER_PREDICATE_TYPE.HAS_NONE_OF]: 'has none of...',
+ [FILTER_PREDICATE_TYPE.IS_EXACTLY]: 'is exactly...',
+ [FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID]: 'is current user\'s ID',
+};
+
+export {
+ FILTER_PREDICATE_TYPE,
+ FILTER_PREDICATE_SHOW,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/filter/index.js b/frontend/src/metadata/metadata-view/_basic/constants/filter/index.js
new file mode 100644
index 0000000000..4d68d723ae
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/filter/index.js
@@ -0,0 +1,36 @@
+const FILTER_CONJUNCTION_TYPE = {
+ AND: 'And',
+ OR: 'Or',
+};
+
+const FILTER_ERR_MSG = {
+ INVALID_FILTER: 'invalid filter',
+ INCOMPLETE_FILTER: 'incomplete filter',
+ COLUMN_MISSING: 'the column to filter does not exist',
+ COLUMN_NOT_SUPPORTED: 'the column to filter is not supported',
+ UNMATCHED_PREDICATE: 'unmatched filter predicate',
+ UNMATCHED_MODIFIER: 'unmatched filter modifier',
+ INVALID_TERM: 'invalid filter term',
+};
+
+export {
+ FILTER_CONJUNCTION_TYPE,
+ FILTER_ERR_MSG,
+};
+
+export { FILTER_COLUMN_OPTIONS } from './filter-column-options';
+
+export {
+ FILTER_TERM_MODIFIER_TYPE,
+ FILTER_TERM_MODIFIER_SHOW,
+} from './filter-modifier';
+
+export {
+ FILTER_PREDICATE_TYPE,
+ FILTER_PREDICATE_SHOW,
+} from './filter-predicate';
+
+export {
+ filterTermModifierIsWithin,
+ filterTermModifierNotWithin,
+} from './filter-is-within';
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/grid-header.js b/frontend/src/metadata/metadata-view/_basic/constants/grid-header.js
new file mode 100644
index 0000000000..a107585872
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/grid-header.js
@@ -0,0 +1,8 @@
+const HEADER_HEIGHT_TYPE = {
+ DEFAULT: 'default',
+ DOUBLE: 'double',
+};
+
+export {
+ HEADER_HEIGHT_TYPE,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/group.js b/frontend/src/metadata/metadata-view/_basic/constants/group.js
new file mode 100644
index 0000000000..f0ed73d6ad
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/group.js
@@ -0,0 +1,58 @@
+import { CellType } from './column';
+
+const MAX_GROUP_LEVEL = 3;
+
+const GROUP_DATE_GRANULARITY = {
+ DAY: 'day',
+ WEEK: 'week',
+ MONTH: 'month',
+ QUARTAR: 'quartar',
+ YEAR: 'year',
+};
+
+const DISPLAY_GROUP_DATE_GRANULARITY = {
+ [GROUP_DATE_GRANULARITY.DAY]: 'By_day',
+ [GROUP_DATE_GRANULARITY.WEEK]: 'By_week',
+ [GROUP_DATE_GRANULARITY.MONTH]: 'By_month',
+ [GROUP_DATE_GRANULARITY.QUARTAR]: 'By_quarter',
+ [GROUP_DATE_GRANULARITY.YEAR]: 'By_year',
+};
+
+const GROUP_GEOLOCATION_GRANULARITY = {
+ PROVINCE: 'province',
+ CITY: 'city',
+ DISTRICT: 'district',
+ COUNTRY: 'country',
+};
+
+const DISPLAY_GROUP_GEOLOCATION_GRANULARITY = {
+ [GROUP_GEOLOCATION_GRANULARITY.PROVINCE]: 'By_province',
+ [GROUP_GEOLOCATION_GRANULARITY.CITY]: 'By_city',
+ [GROUP_GEOLOCATION_GRANULARITY.DISTRICT]: 'By_district',
+};
+
+const SUPPORT_GROUP_COLUMN_TYPES = [
+ CellType.TEXT,
+ CellType.CTIME,
+ CellType.MTIME,
+ CellType.CREATOR,
+ CellType.LAST_MODIFIER,
+];
+
+const GROUPBY_DATE_GRANULARITY_LIST = [
+ GROUP_DATE_GRANULARITY.DAY,
+ GROUP_DATE_GRANULARITY.WEEK,
+ GROUP_DATE_GRANULARITY.MONTH,
+ GROUP_DATE_GRANULARITY.QUARTAR,
+ GROUP_DATE_GRANULARITY.YEAR,
+];
+
+export {
+ MAX_GROUP_LEVEL,
+ GROUP_DATE_GRANULARITY,
+ DISPLAY_GROUP_DATE_GRANULARITY,
+ GROUP_GEOLOCATION_GRANULARITY,
+ DISPLAY_GROUP_GEOLOCATION_GRANULARITY,
+ SUPPORT_GROUP_COLUMN_TYPES,
+ GROUPBY_DATE_GRANULARITY_LIST,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/index.js b/frontend/src/metadata/metadata-view/_basic/constants/index.js
new file mode 100644
index 0000000000..040dfff621
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/index.js
@@ -0,0 +1,63 @@
+import KeyCodes from './key-codes';
+import * as Z_INDEX from './z-index';
+
+export {
+ CellType,
+ COLUMNS_ICON_CONFIG,
+ COLUMNS_ICON_NAME,
+ COLLABORATOR_COLUMN_TYPES,
+ DATE_COLUMN_OPTIONS,
+ NUMERIC_COLUMNS_TYPES,
+ DEFAULT_DATE_FORMAT,
+ UTC_FORMAT_DEFAULT,
+ DATE_UNIT,
+ DATE_FORMAT_MAP,
+ DEFAULT_NUMBER_FORMAT,
+ DATE_DEFAULT_TYPES,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
+ MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
+ SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
+} from './column';
+export {
+ FILTER_CONJUNCTION_TYPE,
+ FILTER_ERR_MSG,
+ FILTER_COLUMN_OPTIONS,
+ FILTER_TERM_MODIFIER_TYPE,
+ FILTER_TERM_MODIFIER_SHOW,
+ FILTER_PREDICATE_TYPE,
+ FILTER_PREDICATE_SHOW,
+ filterTermModifierIsWithin,
+ filterTermModifierNotWithin,
+} from './filter';
+export {
+ MAX_GROUP_LEVEL,
+ GROUP_DATE_GRANULARITY,
+ DISPLAY_GROUP_DATE_GRANULARITY,
+ GROUP_GEOLOCATION_GRANULARITY,
+ DISPLAY_GROUP_GEOLOCATION_GRANULARITY,
+ SUPPORT_GROUP_COLUMN_TYPES,
+ GROUPBY_DATE_GRANULARITY_LIST,
+} from './group';
+export {
+ HEADER_HEIGHT_TYPE
+} from './grid-header';
+export {
+ REG_STRING_NUMBER_PARTS,
+ REG_NUMBER_DIGIT,
+} from './reg';
+export {
+ SELECT_OPTION_COLORS,
+ HIGHLIGHT_COLORS,
+} from './select-option';
+export {
+ SORT_TYPE,
+ SORT_COLUMN_OPTIONS,
+ TEXT_SORTER_COLUMN_TYPES,
+ NUMBER_SORTER_COLUMN_TYPES,
+} from './sort';
+
+export {
+ KeyCodes,
+ Z_INDEX,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/key-codes.js b/frontend/src/metadata/metadata-view/_basic/constants/key-codes.js
new file mode 100644
index 0000000000..5aed77093a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/key-codes.js
@@ -0,0 +1,102 @@
+module.exports = {
+ 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,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/reg.js b/frontend/src/metadata/metadata-view/_basic/constants/reg.js
new file mode 100644
index 0000000000..f63ea51536
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/reg.js
@@ -0,0 +1,7 @@
+const REG_STRING_NUMBER_PARTS = /\d+|\D+/g;
+const REG_NUMBER_DIGIT = /\d/;
+
+export {
+ REG_STRING_NUMBER_PARTS,
+ REG_NUMBER_DIGIT,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/select-option.js b/frontend/src/metadata/metadata-view/_basic/constants/select-option.js
new file mode 100644
index 0000000000..aebae56e03
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/select-option.js
@@ -0,0 +1,62 @@
+const SELECT_OPTION_COLORS = [
+ { COLOR: '#FFFCB5', BORDER_COLOR: '#E8E79D', TEXT_COLOR: '#212529' },
+ { COLOR: '#FFEAB6', BORDER_COLOR: '#ECD084', TEXT_COLOR: '#212529' },
+ { COLOR: '#FFD9C8', BORDER_COLOR: '#EFBAA3', TEXT_COLOR: '#212529' },
+ { COLOR: '#FFDDE5', BORDER_COLOR: '#EDC4C1', TEXT_COLOR: '#212529' },
+ { COLOR: '#FFD4FF', BORDER_COLOR: '#E6B6E6', TEXT_COLOR: '#212529' },
+ { COLOR: '#DAD7FF', BORDER_COLOR: '#C3BEEF', TEXT_COLOR: '#212529' },
+ { COLOR: '#DDFFE6', BORDER_COLOR: '#BBEBCD', TEXT_COLOR: '#212529' },
+ { COLOR: '#DEF7C4', BORDER_COLOR: '#C5EB9E', TEXT_COLOR: '#212529' },
+ { COLOR: '#D8FAFF', BORDER_COLOR: '#B4E4E9', TEXT_COLOR: '#212529' },
+ { COLOR: '#D7E8FF', BORDER_COLOR: '#BAD1E9', TEXT_COLOR: '#212529' },
+ { COLOR: '#B7CEF9', BORDER_COLOR: '#96B2E1', TEXT_COLOR: '#212529' },
+ { COLOR: '#E9E9E9', BORDER_COLOR: '#DADADA', TEXT_COLOR: '#212529' },
+ { COLOR: '#FBD44A', BORDER_COLOR: '#E5C142', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#EAA775', BORDER_COLOR: '#D59361', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#F4667C', BORDER_COLOR: '#DC556A', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#DC82D2', BORDER_COLOR: '#D166C5', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#9860E5', BORDER_COLOR: '#844BD2', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#9F8CF1', BORDER_COLOR: '#8F75E2', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#59CB74', BORDER_COLOR: '#4EB867', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#ADDF84', BORDER_COLOR: '#9CCF72', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#89D2EA', BORDER_COLOR: '#7BC0D6', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#4ECCCB', BORDER_COLOR: '#45BAB9', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#46A1FD', BORDER_COLOR: '#3C8FE4', TEXT_COLOR: '#FFFFFF' },
+ { COLOR: '#C2C2C2', BORDER_COLOR: '#ADADAD', TEXT_COLOR: '#FFFFFF' },
+];
+
+const HIGHLIGHT_COLORS = {
+ '#FFE8E6': '#FF6052',
+ '#FFDED5': '#FF714A',
+ '#FFE7D1': '#FF851A',
+ '#EED5FF': '#B64DFD',
+ '#DAD7FF': '#5F4CFF',
+ '#D7E8FF': '#3C8FFF',
+ '#D8FAFF': '#41E7FF',
+ '#DDFFE6': '#16BA51',
+ '#E9E9E9': '#999999',
+ '#FBD44A': '#E5C142',
+ '#EAA775': '#D59361',
+ '#F4667C': '#DC556A',
+ '#DC82D2': '#D166C5',
+ '#9860E5': '#844BD2',
+ '#9F8CF1': '#8F75E2',
+ '#59CB74': '#4EB867',
+ '#ADDF84': '#9CCF72',
+ '#89D2EA': '#7BC0D6',
+ '#4ECCCB': '#45BAB9',
+ '#46A1FD': '#3C8FE4',
+ '#C2C2C2': '#ADADAD',
+ '#FFFCB5': '#E8E79D',
+ '#FFEAB6': '#ECD084',
+ '#FFD9C8': '#EFBAA3',
+ '#FFDDE5': '#EDC4C1',
+ '#FFD4FF': '#E6B6E6',
+ '#DEF7C4': '#C5EB9E',
+ '#B7CEF9': '#96B2E1',
+};
+
+export {
+ SELECT_OPTION_COLORS,
+ HIGHLIGHT_COLORS,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/sort.js b/frontend/src/metadata/metadata-view/_basic/constants/sort.js
new file mode 100644
index 0000000000..e20d62245f
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/sort.js
@@ -0,0 +1,22 @@
+import { CellType } from './column';
+
+const SORT_TYPE = {
+ UP: 'up',
+ DOWN: 'down',
+};
+
+const SORT_COLUMN_OPTIONS = [
+ CellType.CTIME,
+ CellType.MTIME,
+ CellType.TEXT,
+];
+
+const TEXT_SORTER_COLUMN_TYPES = [CellType.TEXT];
+const NUMBER_SORTER_COLUMN_TYPES = [];
+
+export {
+ SORT_TYPE,
+ SORT_COLUMN_OPTIONS,
+ TEXT_SORTER_COLUMN_TYPES,
+ NUMBER_SORTER_COLUMN_TYPES,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/z-index.js b/frontend/src/metadata/metadata-view/_basic/constants/z-index.js
new file mode 100644
index 0000000000..6f82782770
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/constants/z-index.js
@@ -0,0 +1,135 @@
+// copy from sf-metadata
+// Drop Target of top row's z-index is -1.
+export const DEFAULT_DROP_TARGET = -1;
+
+// CellMasks should render in front of the cells
+// Unfrozen cells do not have a zIndex specifed
+export const CELL_MASK = 1;
+export const TABLE_MAIN_INTERVAL = 1;
+export const RESIZE_HANDLE = 1;
+
+export const SEQUENCE_COLUMN = 1;
+
+// higher than unfrozen header cell(0), RESIZE_HANDLE
+export const FROZEN_HEADER_CELL = 2;
+
+export const GROUP_FROZEN_HEADER = 2;
+
+export const SCROLL_BAR = 2;
+
+// In front of CELL_MASK/non-frozen cell(1)、back of the frozen cells (2)
+export const GROUP_BACKDROP = 2;
+
+export const MOBILE_RECORDS_COLUMN_NAMES = 2;
+
+export const FROZEN_GROUP_CELL = 2;
+
+// Frozen cells have a zIndex value of 2 so CELL_MASK should have a higher value
+export const FROZEN_CELL_MASK = 3;
+
+// GALLERY_MAIN_HEADER, TABLE_MAIN_INTERVAL is 3 to hide first freeze column
+export const GALLERY_MAIN_HEADER = 3;
+
+// APP_HEADER is 8 than TABLE_HEADER because Logout Popover need to be at the top
+export const APP_HEADER = 8;
+
+// higher than frozen cells(2)
+export const GRID_HORIZONTAL_SCROLLBAR = 3;
+
+// In mobile list mode, row name fixed, so upper components z-index is 3
+export const SEARCH_ALL_TABLES = 3;
+
+export const MOBILE_TABLES_TABS_CONTAINER = 3;
+
+export const MOBILE_TABLE_TOOLBAR = 3;
+
+export const MOBILE_HEADER = 3;
+
+// need higher than the doms(etc. cell, cell_mask) which behind of the grid header
+export const GRID_HEADER = 4;
+
+export const GRID_FOOTER = 4;
+
+export const UPLOAD_PROGRESS = 4;
+
+// frozen column header z-index is 3，row drop target horizontal line shoule appear so z-index is 4
+export const ROW_DROP_TARGET = 4;
+
+export const VIEW_SIDEBAR_RESIZE_HANDLER = 4;
+
+// need higher or equal to GRID_HEADER(frozen): 4
+export const TABLE_SETTING_PANEL = 4;
+
+// higher than PANE_DIVIDER(4)
+export const TABLE_TOOLBAR = 5;
+
+export const TABLE_RIGHT_PANEL = 5;
+
+// higher than TABLE_TOOLBAR(5)
+export const TABLES_TABS_CONTAINER = 6;
+
+// higher than TABLES_TABS_CONTAINER(6)
+export const TABLE_HEADER = 7;
+
+export const TABLE_COMMENT_CONTAINER = 7;
+
+// higher than TABLE_HEADER(7)
+export const PANE_DIVIDER = 8;
+
+// EditorContainer is rendered outside the grid and it higher FROZEN_GROUP_CELL(2) and PANE_DIVIDER(8)
+export const EDITOR_CONTAINER = 9;
+
+// APP_LEFT_BAR_COLLAPSE z-index should taller than the APP_HEADER and the PANE_DIVIDER(8)
+export const APP_LEFT_BAR_COLLAPSE = 9;
+
+export const EXPAND_ROW_ICON = 99;
+
+export const MOBILE_MASK = 100;
+
+export const ROW_EXPAND_VIEW = 100;
+
+export const APP_NAV_SLIDER = 100;
+
+// LINK_RECORDS z-index should higher than EXPAND_ROW_ICON
+export const LINK_RECORDS = 100;
+
+// APP_LEFT_BAR is higher than APP_NAV_SLIDER
+export const APP_LEFT_BAR = 101;
+
+export const MOBILE_APP_NAV = 101;
+
+export const STATISTIC_DIALOG_MODAL = 800;
+
+export const STATISTIC_ENLARGE_DIALOG_MODAL = 900;
+
+export const STATISTIC_RECORDS_DIALOG_MODAL = 1000;
+
+export const SEARCH_TABLES_DIALOG_MODAL = 1000;
+
+export const DATE_EDITOR = 1001;
+
+export const NOTIFICATION_LIST_MODAL = 1046;
+
+export const TRIGGER_ROWS_MODAL = 1047;
+
+export const TRIGGER_ROWS_VIEW = 1047;
+
+export const RECORD_DETAILS_DIALOG = 1048;
+
+export const CALENDAR_DIALOG_MODAL = 1048;
+
+export const PRINT_ROW_TYPE_MODAL = 1049;
+
+export const IMAGE_PREVIEW_LIGHTBOX = 1051;
+
+export const DROPDOWN_MENU = 1051;
+
+export const RC_CALENDAR = 1053;
+
+export const EDIT_COLUMN_POPOVER = 1060;
+
+export const LARGE_MAP_EDITOR_DIALOG_MODAL = 1061;
+
+export const TOAST_MANAGER = 999999;
+
+export const LINK_PICKER = 10;
diff --git a/frontend/src/metadata/metadata-view/_basic/index.js b/frontend/src/metadata/metadata-view/_basic/index.js
new file mode 100644
index 0000000000..6773942b37
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/index.js
@@ -0,0 +1,114 @@
+export {
+ UserService
+} from './services';
+export {
+ CellType,
+ COLUMNS_ICON_CONFIG,
+ COLUMNS_ICON_NAME,
+ COLLABORATOR_COLUMN_TYPES,
+ DATE_COLUMN_OPTIONS,
+ NUMERIC_COLUMNS_TYPES,
+ DEFAULT_DATE_FORMAT,
+ UTC_FORMAT_DEFAULT,
+ DATE_UNIT,
+ DATE_FORMAT_MAP,
+ DEFAULT_NUMBER_FORMAT,
+ DATE_DEFAULT_TYPES,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE,
+ NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
+ MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
+ SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
+ FILTER_CONJUNCTION_TYPE,
+ FILTER_ERR_MSG,
+ FILTER_COLUMN_OPTIONS,
+ FILTER_TERM_MODIFIER_TYPE,
+ FILTER_TERM_MODIFIER_SHOW,
+ FILTER_PREDICATE_TYPE,
+ FILTER_PREDICATE_SHOW,
+ filterTermModifierIsWithin,
+ filterTermModifierNotWithin,
+ MAX_GROUP_LEVEL,
+ GROUP_DATE_GRANULARITY,
+ DISPLAY_GROUP_DATE_GRANULARITY,
+ GROUP_GEOLOCATION_GRANULARITY,
+ DISPLAY_GROUP_GEOLOCATION_GRANULARITY,
+ SUPPORT_GROUP_COLUMN_TYPES,
+ REG_STRING_NUMBER_PARTS,
+ REG_NUMBER_DIGIT,
+ SELECT_OPTION_COLORS,
+ HIGHLIGHT_COLORS,
+ SORT_TYPE,
+ SORT_COLUMN_OPTIONS,
+ TEXT_SORTER_COLUMN_TYPES,
+ NUMBER_SORTER_COLUMN_TYPES,
+ KeyCodes,
+ Z_INDEX,
+ GROUPBY_DATE_GRANULARITY_LIST,
+ HEADER_HEIGHT_TYPE,
+} from './constants';
+
+export {
+ getColumnType,
+ getColumnsByType,
+ isDateColumn,
+ isSupportDateColumnFormat,
+ getValidFilters,
+ getValidFiltersWithoutError,
+ deleteInvalidFilter,
+ otherDate,
+ getFormattedFilterOtherDate,
+ getFormattedFilter,
+ getFormattedFilters,
+ creatorFilter,
+ dateFilter,
+ textFilter,
+ filterRow,
+ filterRows,
+ deleteInvalidGroupby,
+ isValidGroupby,
+ getValidGroupbys,
+ groupTableRows,
+ groupViewRows,
+ isTableRows,
+ updateTableRowsWithRowsData,
+ isValidSort,
+ getValidSorts,
+ deleteInvalidSort,
+ getMultipleIndexesOrderbyOptions,
+ sortDate,
+ sortText,
+ sortRowsWithMultiSorts,
+ sortTableRows,
+ getTableById,
+ getTableByName,
+ getTableByIndex,
+ getTableColumnByKey,
+ getTableColumnByName,
+ getRowById,
+ getRowsByIds,
+ isValidEmail,
+ ValidateFilter,
+ DATE_MODIFIERS_REQUIRE_TERM,
+ getViewById,
+ getViewByName,
+ isDefaultView,
+ isFilterView,
+ isGroupView,
+ isSortView,
+ isHiddenColumnsView,
+ getViewShownColumns,
+ getGroupByPath,
+ getType,
+ isMac,
+ base64ToFile,
+ bytesToSize,
+ getErrorMsg,
+ DateUtils,
+ CommonlyUsedHotkey,
+ LocalStorage,
+ isFunction,
+ isEmpty,
+ isEmptyObject,
+ debounce,
+ throttle,
+} from './utils';
diff --git a/frontend/src/metadata/metadata-view/_basic/services/index.js b/frontend/src/metadata/metadata-view/_basic/services/index.js
new file mode 100644
index 0000000000..b3945491d1
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/services/index.js
@@ -0,0 +1,5 @@
+import UserService from './user-service';
+
+export {
+ UserService,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/services/user-service.js b/frontend/src/metadata/metadata-view/_basic/services/user-service.js
new file mode 100644
index 0000000000..b5b64c511d
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/services/user-service.js
@@ -0,0 +1,68 @@
+const PENDING_INTERVAL = 1000; // 1s
+
+class UserService {
+
+ constructor({ api, mediaUrl = '' }) {
+ this.api = api;
+ this.defaultAvatarUrl = `${mediaUrl}/avatars/default.png`;
+ this.waitingQueryEmails = [];
+ this.waitingExecCallbacks = [];
+ this.emailUserMap = {};
+ }
+
+ queryUser = (email, callback) => {
+ if (!email) return;
+ this.waitingExecCallbacks.push(callback);
+ if (this.emailUserMap[email] || this.waitingQueryEmails.includes(email)) return;
+ this.waitingQueryEmails.push(email);
+ this.startQueryUsers();
+ };
+
+ queryUsers = (emails, callback) => {
+ if (!Array.isArray(emails) || emails.length === 0) return;
+ let validEmails = [];
+ emails.forEach(email => {
+ this.waitingExecCallbacks.push(callback);
+ if (this.emailUserMap[email] || this.waitingQueryEmails.includes(email)) return;
+ validEmails.push(email);
+ });
+ if (validEmails.length === 0) return;
+ this.waitingQueryEmails.push(...validEmails);
+ this.startQueryUsers();
+ };
+
+ startQueryUsers = () => {
+ if (this.pendingTimer || this.waitingQueryEmails.length === 0) return;
+ this.pendingTimer = setTimeout(() => {
+ this.api(this.waitingQueryEmails).then(res => {
+ const { user_list } = res.data;
+ user_list.forEach(user => {
+ this.emailUserMap[user.email] = user;
+ });
+ this.queryUserCallback();
+ }).catch(() => {
+ this.waitingQueryEmails.forEach(email => {
+ this.emailUserMap[email] = {
+ email: email,
+ name: email,
+ avatar_url: this.defaultAvatarUrl,
+ };
+ });
+ this.queryUserCallback();
+ });
+ clearTimeout(this.pendingTimer);
+ this.pendingTimer = null;
+ }, PENDING_INTERVAL);
+ };
+
+ queryUserCallback = () => {
+ this.waitingExecCallbacks.forEach(callback => {
+ callback(this.emailUserMap);
+ });
+ this.waitingQueryEmails = [];
+ this.waitingExecCallbacks = [];
+ };
+
+}
+
+export default UserService;
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/column/core.js b/frontend/src/metadata/metadata-view/_basic/utils/column/core.js
new file mode 100644
index 0000000000..db50c776b8
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/column/core.js
@@ -0,0 +1,27 @@
+/**
+ * Get column type.
+ * @param {object} column { type, ... }
+ * @returns column type
+ */
+const getColumnType = (column) => {
+ const { type } = column;
+ return type;
+};
+
+/**
+ * Get columns by type.
+ * @param {array} columns
+ * @param {string} columnType
+ * @returns the target type columns, array
+ */
+const getColumnsByType = (columns, columnType) => {
+ if (!Array.isArray(columns) || !columnType) {
+ return [];
+ }
+ return columns.filter((column) => column.type === columnType);
+};
+
+export {
+ getColumnType,
+ getColumnsByType,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/column/date.js b/frontend/src/metadata/metadata-view/_basic/utils/column/date.js
new file mode 100644
index 0000000000..7aa1217726
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/column/date.js
@@ -0,0 +1,30 @@
+import { getColumnType } from './core';
+import { DATE_COLUMN_OPTIONS, DATE_FORMAT_MAP } from '../../constants/column';
+
+/**
+ * Check whether is date column:
+ * - column type is date, ctime or mtime etc.
+ * - column type is formula and result_type is date
+ * - column type is link/link_fromula and array_type is date, ctime or mtime etc.
+ * @param {object} column e.g. { type, data }
+ * @returns true/false, bool
+ */
+const isDateColumn = (column) => DATE_COLUMN_OPTIONS.includes(getColumnType(column));
+
+/**
+ * Check whether the format is supported in date column
+ * @param {string} format
+ * @returns bool
+ */
+const isSupportDateColumnFormat = (format) => {
+ if (!format) {
+ return false;
+ }
+ return (
+ format === DATE_FORMAT_MAP.YYYY_MM_DD
+ || format === DATE_FORMAT_MAP.YYYY_MM_DD_HH_MM
+ || format === DATE_FORMAT_MAP.YYYY_MM_DD_HH_MM_SS
+ );
+};
+
+export { isDateColumn, isSupportDateColumnFormat };
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/column/index.js b/frontend/src/metadata/metadata-view/_basic/utils/column/index.js
new file mode 100644
index 0000000000..f58880095f
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/column/index.js
@@ -0,0 +1,8 @@
+export {
+ getColumnType,
+ getColumnsByType,
+} from './core';
+export {
+ isDateColumn,
+ isSupportDateColumnFormat,
+} from './date';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/common.js b/frontend/src/metadata/metadata-view/_basic/utils/common.js
new file mode 100644
index 0000000000..7c845c0add
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/common.js
@@ -0,0 +1,113 @@
+export const getType = (value) => {
+ return Object.prototype.toString.call(value).slice(8, -1);
+};
+
+export const isMac = () => {
+ const platform = navigator.platform;
+ return (platform === 'Mac68K') || (platform === 'MacPPC') || (platform === 'Macintosh') || (platform === 'MacIntel');
+};
+
+export const base64ToFile = (data, fileName) => {
+ const parts = data.split(';base64,');
+ const contentType = parts[0].split(':')[1];
+ const raw = window.atob(parts[1]);
+ const rawLength = raw.length;
+ const uInt8Array = new Uint8Array(rawLength);
+
+ for (let i = 0; i < rawLength; ++i) {
+ uInt8Array[i] = raw.charCodeAt(i);
+ }
+
+ const blob = new Blob([uInt8Array], { type: contentType });
+ const file = new File([blob], fileName, { type: contentType });
+ return file;
+};
+
+export const bytesToSize = (bytes) => {
+ if (typeof(bytes) == 'undefined') return ' ';
+
+ if (bytes < 0) return '--';
+ const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+ if (bytes === 0) return bytes + ' ' + sizes[0];
+
+ const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)), 10);
+ if (i === 0) return bytes + ' ' + sizes[i];
+ return (bytes / (1000 ** i)).toFixed(1) + ' ' + sizes[i];
+};
+
+export const getErrorMsg = (error) => {
+ let errorMsg = '';
+ if (error.response) {
+ if (error.response.status === 403) {
+ errorMsg = 'Permission_denied';
+ } else if (error.response.data &&
+ error.response.data['error_msg']) {
+ errorMsg = error.response.data['error_msg'];
+ } else {
+ errorMsg = 'Error';
+ }
+ } else {
+ errorMsg = 'Please_check_the_network';
+ }
+ return errorMsg;
+};
+
+export const isFunction = (functionToCheck) => {
+ const getType = {};
+ return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};
+
+/**
+ * Check whether the given value is empty
+ * @param {any} val
+ * @returns bool
+ */
+export const isEmpty = (val) => {
+ if (val === null || val === undefined) return true;
+ if (val.length !== undefined) return val.length === 0;
+ if (val instanceof Date) return false;
+ if (typeof val === 'object') return Object.keys(val).length === 0;
+ return false;
+};
+
+/**
+ * Check whether the object is empty.
+ * The true will be returned if the "obj" is invalid.
+ * @param {object} obj
+ * @returns bool
+ */
+export const isEmptyObject = (obj) => {
+ let name;
+ // eslint-disable-next-line
+ for (name in obj) {
+ return false;
+ }
+ return true;
+};
+
+export const debounce = (fn, wait) => {
+ let timeout = null;
+ return function () {
+ if (timeout !== null) clearTimeout(timeout);
+ timeout = setTimeout(fn, wait);
+ };
+};
+
+export const throttle = (func, delay) => {
+ let timer = null;
+ let startTime = Date.now();
+ return function () {
+ let curTime = Date.now();
+ let remaining = delay - (curTime - startTime);
+ let context = this;
+ let args = arguments;
+ clearTimeout(timer);
+ if (remaining <= 0) {
+ func.apply(context, args);
+ startTime = Date.now();
+ } else {
+ timer = setTimeout(func, remaining);
+ }
+ };
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/date.js b/frontend/src/metadata/metadata-view/_basic/utils/date.js
new file mode 100644
index 0000000000..e1f809b09c
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/date.js
@@ -0,0 +1,207 @@
+import {
+ DEFAULT_DATE_FORMAT,
+ DATE_UNIT,
+} from '../constants';
+
+const MONTH_QUARTERS = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4];
+const FORMATTING_TOKENS = /(\[[^[]*\])|([-:/.()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
+const MATCH_1_2 = /\d\d?/; // 0 - 99
+const MATCH2 = /\d\d/; // 00 - 99
+const MATCH4 = /\d{4}/; // 0000 - 9999
+
+const MATCHER_EXPRESSIONS = {
+ mm: [MATCH_1_2, DATE_UNIT.MINUTES],
+ HH: [MATCH_1_2, DATE_UNIT.HOURS],
+ D: [MATCH_1_2, DATE_UNIT.DAY],
+ DD: [MATCH2, DATE_UNIT.DAY],
+ M: [MATCH_1_2, DATE_UNIT.MONTH],
+ MM: [MATCH2, DATE_UNIT.MONTH],
+ YYYY: [MATCH4, DATE_UNIT.YEAR],
+};
+
+const MATCHER_DATE_PARTS = ['YYYY', 'MM', 'M', 'DD', 'D'];
+
+class DateUtils {
+ /**
+ * return the formatted date with target format.
+ * @param {string|date object} date
+ * @param {string} format
+ * @returns formatted date
+ */
+ static format(date, format) {
+ const dateObject = this.getValidDate(date);
+ if (!dateObject) {
+ return '';
+ }
+ const upperCaseFormat = format && format.toUpperCase();
+ const year = dateObject.getFullYear();
+ const month = dateObject.getMonth() + 1;
+ const day = dateObject.getDate();
+ const displayMonth = month < 10 ? `0${month}` : month;
+ const displayDay = day < 10 ? `0${day}` : day;
+ switch (upperCaseFormat) {
+ case 'YYYY-MM-DD HH:MM:SS': {
+ const hours = dateObject.getHours();
+ const minutes = dateObject.getMinutes();
+ const seconds = dateObject.getSeconds();
+ const disPlayHours = hours < 10 ? `0${hours}` : hours;
+ const disPlayMinutes = minutes < 10 ? `0${minutes}` : minutes;
+ const disPlaySeconds = seconds < 10 ? `0${seconds}` : seconds;
+ return `${year}-${displayMonth}-${displayDay} ${disPlayHours}:${disPlayMinutes}:${disPlaySeconds}`;
+ }
+ case 'YYYY-MM-DD HH:MM': {
+ const hours = dateObject.getHours();
+ const minutes = dateObject.getMinutes();
+ const disPlayHours = hours < 10 ? `0${hours}` : hours;
+ const disPlayMinutes = minutes < 10 ? `0${minutes}` : minutes;
+ return `${year}-${displayMonth}-${displayDay} ${disPlayHours}:${disPlayMinutes}`;
+ }
+ default: {
+ return `${year}-${displayMonth}-${displayDay}`;
+ }
+ }
+ }
+
+ /**
+ * returns the formatted date with granularity.
+ * @param {string|date object} date
+ * @param {string} granularity
+ * @returns formatted date
+ */
+ static getDateByGranularity(date, granularity) {
+ const dateObject = this.getValidDate(date);
+ if (!dateObject) {
+ return '';
+ }
+ const upperCaseGranularity = granularity && granularity.toUpperCase();
+ const year = dateObject.getFullYear();
+ switch (upperCaseGranularity) {
+ case 'YEAR': {
+ return `${year}`;
+ }
+ case 'QUARTAR': {
+ const month = dateObject.getMonth();
+ const quarter = MONTH_QUARTERS[month];
+ return `${year}-Q${quarter}`;
+ }
+ case 'MONTH': {
+ const month = dateObject.getMonth() + 1;
+ const displayMonth = month < 10 ? `0${month}` : month;
+ return `${year}-${displayMonth}`;
+ }
+ case 'WEEK': {
+ const weekNum = dateObject.getDay();
+ const startOfWeekDay = dateObject.getDate() + (weekNum === 0 ? -6 : 1 - weekNum);
+ const startOfWeekDate = new Date(year, dateObject.getMonth(), startOfWeekDay);
+ const month = startOfWeekDate.getMonth() + 1;
+ const day = startOfWeekDate.getDate();
+ const displayMonth = month < 10 ? `0${month}` : month;
+ const displayDay = day < 10 ? `0${day}` : day;
+ return `${startOfWeekDate.getFullYear()}-${displayMonth}-${displayDay}`;
+ }
+ case 'DAY': {
+ const month = dateObject.getMonth() + 1;
+ const day = dateObject.getDate();
+ const displayMonth = month < 10 ? `0${month}` : month;
+ const displayDay = day < 10 ? `0${day}` : day;
+ return `${year}-${displayMonth}-${displayDay}`;
+ }
+ default: {
+ return '';
+ }
+ }
+ }
+
+ static isValidDateObject(dateObject) {
+ return dateObject instanceof Date && !isNaN(dateObject.getTime());
+ }
+
+ static getValidDate(date) {
+ if (!date) {
+ return null;
+ }
+ const isDateTypeString = typeof date === 'string';
+ let dateString = date;
+ let dateObject = date;
+ if (isDateTypeString) {
+ if (dateString.split(' ').length > 1 || dateString.includes('T')) {
+ dateObject = new Date(date);
+ } else {
+ // given date is without time precision
+ dateString = `${date} 00:00:00`;
+ dateObject = new Date(dateString);
+ }
+ }
+ if (this.isValidDateObject(dateObject)) return dateObject;
+ if (!isDateTypeString) return null;
+
+ // ios phone and safari browser not support use '2021-09-10 12:30', support '2021/09/10 12:30'
+ dateObject = new Date(dateString.replace(/-/g, '/'));
+ if (this.isValidDateObject(dateObject)) return dateObject;
+ return null;
+ }
+
+ /**
+ * @param {string} dateString
+ * @param {string} format
+ * @returns Date Object
+ */
+ static parseDateWithFormat(dateString, format) {
+ if (dateString.includes('T')) {
+ // ISO 8601 format with "T" separator directly using Date object
+ const dateObj = new Date(dateString);
+ return this.isValidDateObject(dateObj) ? dateObj : this.getValidDate(dateString);
+ }
+ try {
+ const parser = this.makeParser(format);
+ let {
+ year, month, day, hours, minutes,
+ } = parser(dateString);
+ if (!year) {
+ const nowDate = new Date();
+ year = nowDate.getFullYear();
+ }
+ let dateObj = new Date(`${year}-${month}-${day} ${hours || '00'}:${minutes || '00'}`);
+ if (!this.isValidDateObject(dateObj)) {
+ return this.getValidDate(dateString);
+ }
+ return dateObj;
+ } catch (err) {
+ return this.getValidDate(dateString);
+ }
+ }
+
+ static makeParser(format) {
+ // 'YYYY-MM-DD HH:mm'.match(formattingTokens):
+ // ['YYYY', '-', 'MM', '-', 'DD', ' ', 'HH', ':', 'mm']
+ const tokens = (format || DEFAULT_DATE_FORMAT).match(FORMATTING_TOKENS);
+ const { length: formatPartsLength } = tokens;
+ return (dateString) => {
+ const dateParts = dateString.split(' ');
+ let datePart = dateParts[0] || '';
+ let timePart = dateParts[1] || '';
+ let time = {};
+ for (let i = 0; i < formatPartsLength; i++) {
+ const token = tokens[i];
+ const parseTo = MATCHER_EXPRESSIONS[token];
+ if (!parseTo) continue;
+ const regex = parseTo[0];
+ const parserType = parseTo[1];
+ if (!parserType) continue;
+ const isDatePart = MATCHER_DATE_PARTS.includes(token);
+ let match = isDatePart ? regex.exec(datePart) : regex.exec(timePart);
+ if (!match) continue;
+ const value = match[0];
+ time[parserType] = value;
+ if (isDatePart) {
+ datePart = datePart.replace(value, '');
+ } else {
+ timePart = timePart.replace(value, '');
+ }
+ }
+ return time;
+ };
+ }
+}
+
+export { DateUtils };
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/core.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/core.js
new file mode 100644
index 0000000000..b62dccda37
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/core.js
@@ -0,0 +1,273 @@
+import { ValidateFilter } from '../validate/filter';
+import { DateUtils } from '../date';
+import {
+ FILTER_ERR_MSG,
+ FILTER_TERM_MODIFIER_TYPE,
+} from '../../constants/filter';
+import { CellType } from '../../constants/column';
+
+const EXACT_DATE_TERM_MODIFIER_TYPES = [
+ FILTER_TERM_MODIFIER_TYPE.TODAY,
+ FILTER_TERM_MODIFIER_TYPE.TOMORROW,
+ FILTER_TERM_MODIFIER_TYPE.YESTERDAY,
+ FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_AGO,
+ FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_AGO,
+ FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.EXACT_DATE,
+];
+
+/**
+ * Get filters which excludes incomplete
+ * @param {array} filters e.g. [{ column_key, filter_predicate, ... }]
+ * @param {array} columns
+ * @returns valid filters, array
+ */
+const getValidFilters = (filters, columns) => {
+ if (!Array.isArray(filters) || !Array.isArray(columns)) {
+ return [];
+ }
+
+ return filters.filter((filter) => {
+ const { error_message } = ValidateFilter.validate(filter, columns);
+ return !error_message || error_message !== FILTER_ERR_MSG.INCOMPLETE_FILTER;
+ });
+};
+
+/**
+ * Get filters without error messages
+ * @param {array} filters e.g. [{ column_key, filter_predicate, ... }]
+ * @param {array} columns
+ * @returns valid filters, array
+ */
+const getValidFiltersWithoutError = (filters, columns) => {
+ if (!Array.isArray(filters) || !Array.isArray(columns)) {
+ return [];
+ }
+
+ return filters.filter((filter) => !ValidateFilter.validate(filter, columns).error_message);
+};
+
+/**
+ * Generate date for filter
+ * @param {string} filterTermModifier
+ * @param {any} filterTerm
+ * @returns date | date range, object
+ */
+const otherDate = (filterTermModifier, filterTerm) => {
+ const today = new Date();
+ const year = today.getFullYear();
+ const month = today.getMonth(); // use js month representation: 0 - 11
+ const day = today.getDate();
+
+ // 0 1 2 3 4 5 6 7 8 9 10 11 days in every month
+ let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+ days[1] = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0) ? 29 : 28; // is leap year
+ switch (filterTermModifier) {
+ case FILTER_TERM_MODIFIER_TYPE.TODAY: {
+ // today, should start at 0:00 and end at 24:00
+ return new Date(year, month, day, 0, 0, 0);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.TOMORROW: {
+ return new Date(year, month, day + 1);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.YESTERDAY: {
+ return new Date(year, month, day - 1);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_AGO: {
+ return new Date(year, month, day - 7);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.ONE_WEEK_FROM_NOW: {
+ return new Date(year, month, day + 7);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_AGO: {
+ const pastMonth = month - 1;
+ const monthDaysIndex = month === 0 ? 11 : pastMonth;
+ const currentDay = day > days[monthDaysIndex] ? days[monthDaysIndex] : day;
+ return new Date(year, pastMonth, currentDay);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.ONE_MONTH_FROM_NOW: {
+ const nextMonth = month + 1;
+ const monthDaysIndex = month === 11 ? 0 : nextMonth;
+ const currentDay = day > days[monthDaysIndex] ? days[monthDaysIndex] : day;
+ return new Date(year, nextMonth, currentDay);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO: {
+ return new Date(year, month, day - Number(filterTerm));
+ }
+ case FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW: {
+ return new Date(year, month, day + Number(filterTerm));
+ }
+ case FILTER_TERM_MODIFIER_TYPE.EXACT_DATE: {
+ return new Date(filterTerm);
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_PAST_WEEK: {
+ const weekDay = today.getDay() !== 0 ? today.getDay() : 7;
+ return {
+ startDate: new Date(year, month, day - weekDay - 6),
+ endDate: new Date(year, month, day - weekDay),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THIS_WEEK: {
+ const weekDay = today.getDay() !== 0 ? today.getDay() : 7;
+ return {
+ startDate: new Date(year, month, day - weekDay + 1),
+ endDate: new Date(year, month, day - weekDay + 7),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_NEXT_WEEK: {
+ const weekDay = today.getDay() !== 0 ? today.getDay() : 7;
+ return {
+ startDate: new Date(year, month, day - weekDay + 8),
+ endDate: new Date(year, month, day - weekDay + 14),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_PAST_MONTH: {
+ const pastMonth = month - 1;
+ return {
+ startDate: new Date(year, pastMonth, 1),
+ endDate: new Date(year, pastMonth, days[month === 0 ? 11 : pastMonth]),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THIS_MONTH: {
+ return {
+ startDate: new Date(year, month, 1),
+ endDate: new Date(year, month, days[month]),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_NEXT_MONTH: {
+ const nextMonth = month + 1;
+ return {
+ startDate: new Date(year, nextMonth, 1),
+ endDate: new Date(year, nextMonth, month === 11 ? days[0] : days[nextMonth]),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_PAST_YEAR: {
+ const pastYear = year - 1;
+ return {
+ startDate: new Date(pastYear, 0, 1), // The computer's month starts at 0.
+ endDate: new Date(pastYear, 11, 31),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THIS_YEAR: {
+ return {
+ startDate: new Date(year, 0, 1),
+ endDate: new Date(year, 11, 31),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_NEXT_YEAR: {
+ const nextYear = year + 1;
+ return {
+ startDate: new Date(nextYear, 0, 1),
+ endDate: new Date(nextYear, 11, 31),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS: {
+ return {
+ startDate: new Date(year, month, day + 1, 0, 0, 0),
+ endDate: new Date(year, month, day + Number(filterTerm)),
+ };
+ }
+ case FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS: {
+ return {
+ startDate: new Date(year, month, day - Number(filterTerm)),
+ endDate: new Date(year, month, day, 0, 0, 0),
+ };
+ }
+ default: {
+ return {};
+ }
+ }
+};
+
+/**
+ * Generate formatted date for filter
+ * @param {string} filterTermModifier
+ * @param {any} filterTerm
+ * @returns formatted date | date range, object
+ */
+const getFormattedFilterOtherDate = (filterTermModifier, filterTerm) => {
+ const _otherDate = otherDate(filterTermModifier, filterTerm);
+ if (EXACT_DATE_TERM_MODIFIER_TYPES.includes(filterTermModifier)) {
+ return DateUtils.format(_otherDate);
+ }
+
+ const { startDate, endDate } = _otherDate;
+ return {
+ startDate: startDate ? DateUtils.format(startDate) : '',
+ endDate: endDate ? DateUtils.format(endDate) : '',
+ };
+};
+
+/**
+ * Format filter with other_date, linked_column etc.
+ * @param {object} filter e.g. { filter_term, filter_term_modifier, ... }
+ * @param {object} column
+ * @returns formatted filter
+ */
+const getFormattedFilter = (filter, column) => {
+ const { filter_term, filter_term_modifier } = filter;
+ let { type: columnType } = column;
+ let formattedFilter = filter;
+ switch (columnType) {
+ case CellType.CTIME:
+ case CellType.MTIME: {
+ formattedFilter.other_date = getFormattedFilterOtherDate(filter_term_modifier, filter_term);
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+ return formattedFilter;
+};
+
+/**
+ * Get formatted filters with other_date, linked_column etc.
+ * @param {array} filters [{ filter_term, filter_term_modifier, column, ... }]
+ * @returns formatted filters, array
+ */
+const getFormattedFilters = (filters) => (
+ filters.map((filter) => (
+ getFormattedFilter(filter, filter.column)
+ ))
+);
+
+/**
+ * Get filters without error messages and formatted with filter column
+ * @param {array} filters e.g. [{ column_key, filter_predicate, ... }]
+ * @param {array} columns
+ * @returns filters, array
+ */
+const deleteInvalidFilter = (filters, columns) => {
+ if (!Array.isArray(filters) || filters.length === 0) {
+ return [];
+ }
+ let cleanFilters = [];
+ filters.forEach((filter) => {
+ const { column_key } = filter;
+ const { error_message } = ValidateFilter.validate(filter, columns);
+ if (error_message) {
+ if (error_message !== FILTER_ERR_MSG.INCOMPLETE_FILTER) {
+ throw new Error(error_message);
+ }
+ } else {
+ const filterColumn = columns.find((column) => column.key === column_key);
+ const newFilter = { ...filter, column: filterColumn };
+ cleanFilters.push(newFilter);
+ }
+ });
+ return cleanFilters;
+};
+
+export {
+ getValidFilters,
+ getValidFiltersWithoutError,
+ deleteInvalidFilter,
+ otherDate,
+ getFormattedFilterOtherDate,
+ getFormattedFilter,
+ getFormattedFilters,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/creator.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/creator.js
new file mode 100644
index 0000000000..b47891e803
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/creator.js
@@ -0,0 +1,49 @@
+import { FILTER_PREDICATE_TYPE } from '../../../constants/filter/filter-predicate';
+
+/**
+ * Filter creator
+ * @param {string} email
+ * @param {string} filter_predicate
+ * @param {array} filter_term e.g. [ collaborator.email, ... ]
+ * @param {string} username
+ * @returns bool
+ */
+const creatorFilter = (email, { filter_predicate, filter_term }, username) => {
+ switch (filter_predicate) {
+ case FILTER_PREDICATE_TYPE.CONTAINS: {
+ if (!Array.isArray(filter_term)) {
+ return true;
+ }
+ if (!email) {
+ return false;
+ }
+ return filter_term.findIndex((filterEmail) => filterEmail === email) > -1;
+ }
+ case FILTER_PREDICATE_TYPE.NOT_CONTAIN: {
+ if (!Array.isArray(filter_term) || !email) {
+ return true;
+ }
+ return filter_term.findIndex((filterEmail) => filterEmail === email) < 0;
+ }
+ case FILTER_PREDICATE_TYPE.INCLUDE_ME: {
+ return email === username;
+ }
+ case FILTER_PREDICATE_TYPE.IS: {
+ if (!filter_term) return true;
+ if (!Array.isArray(filter_term)) return email === filter_term;
+ return email === filter_term[0];
+ }
+ case FILTER_PREDICATE_TYPE.IS_NOT: {
+ if (!filter_term) return true;
+ if (!Array.isArray(filter_term)) return email !== filter_term;
+ return email !== filter_term[0];
+ }
+ default: {
+ return false;
+ }
+ }
+};
+
+export {
+ creatorFilter,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/date.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/date.js
new file mode 100644
index 0000000000..ae852a0c9a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/date.js
@@ -0,0 +1,95 @@
+import { DateUtils } from '../../date';
+import { FILTER_PREDICATE_TYPE } from '../../../constants/filter/filter-predicate';
+import { FILTER_TERM_MODIFIER_TYPE } from '../../../constants/filter/filter-modifier';
+
+/**
+ * Filter date
+ * @param {string} date
+ * @param {string} filter_predicate
+ * @param {string} filter_term_modifier
+ * @param {any} filter_term date string or number etc.
+ * @param {string|object} other_date date string or { startDate, endDate }
+ * @returns bool
+ */
+const dateFilter = (date, {
+ filter_predicate, filter_term_modifier, filter_term, other_date,
+}) => {
+ switch (filter_predicate) {
+ case FILTER_PREDICATE_TYPE.IS: {
+ return (
+ (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term)
+ || DateUtils.format(date) === other_date
+ );
+ }
+ case FILTER_PREDICATE_TYPE.IS_WITHIN: {
+ if (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term) {
+ return true;
+ }
+ if (!date) {
+ return false;
+ }
+ const { startDate, endDate } = other_date;
+ const currentDate = DateUtils.format(date);
+ return currentDate >= startDate && currentDate <= endDate;
+ }
+ case FILTER_PREDICATE_TYPE.IS_BEFORE: {
+ if (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term) {
+ return true;
+ }
+ if (!date || !DateUtils.getValidDate(date)) {
+ return false;
+ }
+
+ return DateUtils.format(date) < other_date;
+ }
+ case FILTER_PREDICATE_TYPE.IS_AFTER: {
+ if (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term) {
+ return true;
+ }
+ if (!date || !DateUtils.getValidDate(date)) {
+ return false;
+ }
+ return DateUtils.format(date) > other_date;
+ }
+ case FILTER_PREDICATE_TYPE.IS_ON_OR_BEFORE: {
+ if (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term) {
+ return true;
+ }
+ if (!date || !DateUtils.getValidDate(date)) {
+ return false;
+ }
+ return DateUtils.format(date) <= other_date;
+ }
+ case FILTER_PREDICATE_TYPE.IS_ON_OR_AFTER: {
+ if (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term) {
+ return true;
+ }
+ if (!date || !DateUtils.getValidDate(date)) {
+ return false;
+ }
+ return DateUtils.format(date) >= other_date;
+ }
+ case FILTER_PREDICATE_TYPE.IS_NOT: {
+ if (filter_term_modifier === FILTER_TERM_MODIFIER_TYPE.EXACT_DATE && !filter_term) {
+ return true;
+ }
+ if (!date || !DateUtils.getValidDate(date)) {
+ return false;
+ }
+ return DateUtils.format(date) !== other_date;
+ }
+ case FILTER_PREDICATE_TYPE.EMPTY: {
+ return !(date && DateUtils.getValidDate(date));
+ }
+ case FILTER_PREDICATE_TYPE.NOT_EMPTY: {
+ return !!(date && DateUtils.getValidDate(date));
+ }
+ default: {
+ return false;
+ }
+ }
+};
+
+export {
+ dateFilter,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/index.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/index.js
new file mode 100644
index 0000000000..e0ec6fa562
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/index.js
@@ -0,0 +1,3 @@
+export { creatorFilter } from './creator';
+export { dateFilter } from './date';
+export { textFilter } from './text';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/text.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/text.js
new file mode 100644
index 0000000000..a02b25528e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/text.js
@@ -0,0 +1,52 @@
+import { FILTER_PREDICATE_TYPE } from '../../../constants/filter/filter-predicate';
+
+/**
+ * Filter text
+ * @param {string} text
+ * @param {string} filter_predicate
+ * @param {string} filter_term
+ * @param {string} userId
+ * @returns bool
+ */
+const textFilter = (text, { filter_predicate, filter_term }, userId) => {
+ switch (filter_predicate) {
+ case FILTER_PREDICATE_TYPE.CONTAINS: {
+ if (!filter_term) {
+ return true;
+ }
+ if (!text) {
+ return false;
+ }
+ return text.toString().toLowerCase().indexOf(filter_term.toLowerCase()) > -1;
+ }
+ case FILTER_PREDICATE_TYPE.NOT_CONTAIN: {
+ if (!filter_term || !text) {
+ return true;
+ }
+ return text.toString().toLowerCase().indexOf(filter_term.toLowerCase()) < 0;
+ }
+ case FILTER_PREDICATE_TYPE.IS: {
+ return !filter_term || text === filter_term;
+ }
+ case FILTER_PREDICATE_TYPE.IS_NOT: {
+ return !filter_term || text !== filter_term;
+ }
+ case FILTER_PREDICATE_TYPE.EMPTY: {
+ return !text;
+ }
+ case FILTER_PREDICATE_TYPE.NOT_EMPTY: {
+ return !!text;
+ }
+ case FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID: {
+ if (!userId) return false;
+ return text === userId;
+ }
+ default: {
+ return false;
+ }
+ }
+};
+
+export {
+ textFilter,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-row.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-row.js
new file mode 100644
index 0000000000..c5bfd6bf94
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-row.js
@@ -0,0 +1,86 @@
+import {
+ getFormattedFilters,
+} from './core';
+import {
+ creatorFilter,
+ dateFilter,
+ textFilter,
+} from './filter-column';
+import {
+ FILTER_CONJUNCTION_TYPE,
+} from '../../constants/filter';
+import { DateUtils } from '../date';
+import { CellType, DATE_FORMAT_MAP } from '../../constants/column';
+
+const getFilterResult = (row, filter, { username, userId }) => {
+ const { column_key, column } = filter;
+ let cellValue = row[column_key];
+ switch (column.type) {
+ case CellType.CTIME:
+ case CellType.MTIME: {
+ cellValue = DateUtils.format(cellValue, DATE_FORMAT_MAP.YYYY_MM_DD_HH_MM_SS);
+ return dateFilter(cellValue, filter);
+ }
+ case CellType.TEXT: {
+ return textFilter(cellValue, filter, userId);
+ }
+ case CellType.LAST_MODIFIER:
+ case CellType.CREATOR: {
+ return creatorFilter(cellValue, filter, username);
+ }
+ default: {
+ return false;
+ }
+ }
+};
+
+/**
+ * Filter row
+ * @param {object} row e.g. { _id, .... }
+ * @param {string} filterConjunction e.g. 'And' | 'Or'
+ * @param {array} filters e.g. [{ column_key, filter_predicate, ... }, ...]
+ * @param {object} formulaRow
+ * @param {string} username
+ * @param {string} userId
+ * @param {object} userDepartmentIdsMap e.g. { current_user_department_ids: [8, 10], current_user_department_and_sub_ids: [8, 10, 12, 34] }
+ * @returns filter result, bool
+ */
+const filterRow = (row, filterConjunction, filters, { username = '', userId } = {}) => {
+ if (filterConjunction === FILTER_CONJUNCTION_TYPE.AND) {
+ return filters.every((filter) => (
+ getFilterResult(row, filter, { username, userId })
+ ));
+ }
+ if (filterConjunction === FILTER_CONJUNCTION_TYPE.OR) {
+ return filters.some((filter) => (
+ getFilterResult(row, filter, { username, userId })
+ ));
+ }
+ return false;
+};
+
+/**
+ * Filter rows
+ * @param {string} filterConjunction e.g. 'And' | 'Or'
+ * @param {array} filters e.g. [{ column_key, filter_predicate, ... }, ...]
+ * @param {array} rows e.g. [{ _id, .... }, ...]
+ * @param {string} username
+ * @param {string} userId
+ * @returns filtered rows ids, array
+ */
+const filterRows = (filterConjunction, filters, rows, { username, userId }) => {
+ let filteredRows = [];
+ const formattedFilters = getFormattedFilters(filters);
+ rows.forEach((row) => {
+ const rowId = row._id;
+ if (filterRow(row, filterConjunction, formattedFilters, { username, userId })) {
+ filteredRows.push(rowId);
+ }
+ });
+ return filteredRows;
+};
+
+export {
+ filterRow,
+ filterRows,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/index.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/index.js
new file mode 100644
index 0000000000..4badc1bde5
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/filter/index.js
@@ -0,0 +1,20 @@
+export {
+ getValidFilters,
+ getValidFiltersWithoutError,
+ deleteInvalidFilter,
+ otherDate,
+ getFormattedFilterOtherDate,
+ getFormattedFilter,
+ getFormattedFilters,
+} from './core';
+
+export {
+ creatorFilter,
+ dateFilter,
+ textFilter,
+} from './filter-column';
+
+export {
+ filterRow,
+ filterRows,
+} from './filter-row';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/group/core.js b/frontend/src/metadata/metadata-view/_basic/utils/group/core.js
new file mode 100644
index 0000000000..925bc68fb2
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/group/core.js
@@ -0,0 +1,74 @@
+import { CellType } from '../../constants/column';
+import {
+ GROUP_DATE_GRANULARITY,
+ SUPPORT_GROUP_COLUMN_TYPES,
+} from '../../constants/group';
+
+/**
+ * Check is valid groupby
+ * @param {object} groupby e.g. { column_key, count_type, sort_type, ... }
+ * @param {array} columns
+ * @returns bool
+ */
+const isValidGroupby = (groupby, columns) => {
+ if (!groupby || !Array.isArray(columns)) return false;
+
+ const { column_key } = groupby;
+ const groupbyColumn = columns.find((column) => column.key === column_key);
+ if (!groupbyColumn) {
+ return false;
+ }
+
+ return SUPPORT_GROUP_COLUMN_TYPES.includes(groupbyColumn.type);
+};
+
+/**
+ * Get valid groupbys
+ * @param {array} groupbys e.g. [{ column_key, count_type, ... }, ...]
+ * @param {array} columns
+ * @returns valid groupbys, array
+ */
+const getValidGroupbys = (groupbys, columns) => {
+ if (!Array.isArray(groupbys) || !Array.isArray(columns)) {
+ return [];
+ }
+
+ return groupbys.filter((groupby) => isValidGroupby(groupby, columns));
+};
+
+/**
+ * Get valid and formatted groupbys
+ * @param {array} groupbys e.g. [{ column_key, count_type, ... }, ...]
+ * @param {array} columns
+ * @param {object} currentTable e.g. { _id, ... }
+ * @param {object} value e.g. { tables, collaborators }
+ * @returns valid and formatted groupbys
+ */
+const deleteInvalidGroupby = (groupbys, columns) => {
+ const validGroupbys = getValidGroupbys(groupbys, columns);
+ let cleanGroupbys = [];
+ validGroupbys.forEach((groupby) => {
+ const { column_key: groupbyColumnKey, count_type } = groupby;
+ const groupbyColumn = columns.find((column) => groupbyColumnKey === column.key);
+ const { type: columnType } = groupbyColumn;
+ let newGroupby = { ...groupby, column: groupbyColumn };
+ switch (columnType) {
+ case CellType.CTIME:
+ case CellType.MTIME: {
+ newGroupby.count_type = count_type || GROUP_DATE_GRANULARITY.MONTH;
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+ cleanGroupbys.push(newGroupby);
+ });
+ return cleanGroupbys;
+};
+
+export {
+ deleteInvalidGroupby,
+ isValidGroupby,
+ getValidGroupbys,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/group/group-row.js b/frontend/src/metadata/metadata-view/_basic/utils/group/group-row.js
new file mode 100644
index 0000000000..9ea0dd913e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/group/group-row.js
@@ -0,0 +1,250 @@
+import { getRowsByIds } from '../table/row';
+import { DateUtils } from '../date';
+import {
+ sortDate,
+ sortText,
+} from '../sort/sort-column';
+import { MAX_GROUP_LEVEL } from '../../constants/group';
+import {
+ CellType,
+ DATE_COLUMN_OPTIONS,
+ MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP,
+ SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
+} from '../../constants/column';
+import {
+ SORT_COLUMN_OPTIONS,
+ SORT_TYPE,
+ TEXT_SORTER_COLUMN_TYPES,
+} from '../../constants/sort';
+
+const _getCellValue = (row, groupby) => {
+ const { column_key } = groupby;
+ let cellValue = row[column_key];
+ return cellValue;
+};
+
+const _getFormattedCellValue = (cellValue, groupby) => {
+ const { column, count_type: countType } = groupby;
+ const { type: columnType } = column;
+ switch (columnType) {
+ case CellType.TEXT:
+ case CellType.LAST_MODIFIER:
+ case CellType.CREATOR: {
+ return cellValue || null;
+ }
+ case CellType.CTIME:
+ case CellType.MTIME: {
+ return DateUtils.getDateByGranularity(cellValue, countType) || null;
+ }
+ default: {
+ return null;
+ }
+ }
+};
+
+const _getStrCellValue = (cellValue, columnType) => {
+ let sCellValue = null;
+ if (SINGLE_CELL_VALUE_COLUMN_TYPE_MAP[columnType]) {
+ sCellValue = typeof cellValue === 'string' ? cellValue : String(cellValue);
+ } else if (MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnType]) {
+ sCellValue = [...cellValue].sort().toString();
+ }
+ return sCellValue;
+};
+
+const _findGroupIndexWithMultipleGroupbys = (sCellValue, cellValue2GroupIndexMap, groupsLength) => {
+ const target = cellValue2GroupIndexMap[sCellValue];
+ if (target && target.index > -1) {
+ return target.index;
+ }
+
+ // eslint-disable-next-line
+ cellValue2GroupIndexMap[sCellValue] = {};
+
+ // eslint-disable-next-line
+ cellValue2GroupIndexMap[sCellValue].subgroups = {};
+
+ // eslint-disable-next-line
+ cellValue2GroupIndexMap[sCellValue].index = groupsLength;
+ return -1;
+};
+
+const _findGroupIndex = (sCellValue, cellValue2GroupIndexMap, groupsLength) => {
+ const index = cellValue2GroupIndexMap[sCellValue];
+ if (index > -1) {
+ return index;
+ }
+
+ // eslint-disable-next-line
+ cellValue2GroupIndexMap[sCellValue] = groupsLength;
+ return -1;
+};
+
+const getSortedGroups = (groups, groupbys, level) => {
+ const sortFlag = 0;
+ const { column, sort_type } = groupbys[level];
+ const { type: columnType } = column;
+ const normalizedSortType = sort_type || SORT_TYPE.UP;
+ groups.sort((currGroupRow, nextGroupRow) => {
+ let { cell_value: currCellVal } = currGroupRow;
+ let { cell_value: nextCellVal } = nextGroupRow;
+ if (SORT_COLUMN_OPTIONS.includes(columnType)) {
+ let sortResult;
+ if (TEXT_SORTER_COLUMN_TYPES.includes(columnType)) {
+ sortResult = sortText(currCellVal, nextCellVal, normalizedSortType);
+ } else if (DATE_COLUMN_OPTIONS.includes(columnType)) {
+ sortResult = sortDate(currCellVal, nextCellVal, normalizedSortType);
+ }
+ return sortFlag || sortResult;
+ }
+ if (currCellVal === '') return 1;
+ if (nextCellVal === '') return -1;
+ return 0;
+ });
+
+ // for nested group.
+ const isNestedGroup = Array.isArray(groups[0].subgroups) && groups[0].subgroups.length > 0;
+ if (isNestedGroup) {
+ const nextLevel = level + 1;
+
+ // eslint-disable-next-line
+ groups = groups.map((group) => {
+ const sortedSubgroups = getSortedGroups(group.subgroups, groupbys, nextLevel);
+ return {
+ ...group,
+ subgroups: sortedSubgroups,
+ };
+ });
+ }
+ return groups;
+};
+
+const groupRowsWithMultipleGroupbys = (groupbys, rows, value) => {
+ const validGroupbys = groupbys.length > MAX_GROUP_LEVEL
+ ? groupbys.slice(0, MAX_GROUP_LEVEL)
+ : [...groupbys];
+ let groups = [];
+ let cellValue2GroupIndexMap = {};
+ rows.forEach((row) => {
+ const rowId = row._id;
+ let updatedGroup;
+ let updateCellValue2GroupIndexMap;
+ for (let level = 0; level < validGroupbys.length; level++) {
+ const currentGroupby = validGroupbys[level];
+ const { column, column_key } = currentGroupby;
+ const { type: columnType } = column;
+ const cellValue = _getCellValue(row, currentGroupby);
+ const formattedValue = _getFormattedCellValue(cellValue, currentGroupby);
+ const sCellValue = _getStrCellValue(formattedValue, columnType);
+ const group = {
+ cell_value: formattedValue,
+ original_cell_value: cellValue,
+ row_ids: null,
+ column_key,
+ subgroups: [],
+ summaries: {},
+ };
+ if (level === 0) {
+ let groupedRowIndex = _findGroupIndexWithMultipleGroupbys(sCellValue, cellValue2GroupIndexMap, groups.length);
+ updateCellValue2GroupIndexMap = cellValue2GroupIndexMap[sCellValue].subgroups;
+ if (groupedRowIndex < 0) {
+ groups.push(group);
+ updatedGroup = groups[groups.length - 1];
+ } else {
+ updatedGroup = groups[groupedRowIndex];
+ }
+ } else {
+ let groupedRowIndex = _findGroupIndexWithMultipleGroupbys(sCellValue, updateCellValue2GroupIndexMap, updatedGroup.subgroups.length);
+ updateCellValue2GroupIndexMap = updateCellValue2GroupIndexMap[sCellValue].subgroups;
+ if (groupedRowIndex < 0) {
+ updatedGroup.subgroups.push(group);
+ updatedGroup = updatedGroup.subgroups[updatedGroup.subgroups.length - 1];
+ } else {
+ updatedGroup = updatedGroup.subgroups[groupedRowIndex];
+ }
+
+ // update row_ids in the deepest group.
+ if (level === validGroupbys.length - 1) {
+ if (!updatedGroup.row_ids) {
+ updatedGroup.row_ids = [rowId];
+ } else {
+ updatedGroup.row_ids.push(rowId);
+ }
+ }
+ }
+ }
+ });
+
+ groups = getSortedGroups(groups, validGroupbys, value, 0);
+
+ return groups;
+};
+
+/**
+ * Group table rows
+ * @param {array} groupbys e.g. [{ column_key, count_type, column, ... }, ...]
+ * @param {array} rows e.g. [{ _id, ... }, ...]
+ * @param {object} value e.g. { collaborators, ... }
+ * @returns groups: [{
+ * cell_value, original_cell_value, column_key,
+ row_ids, subgroups, summaries, ...}, ...], array
+ */
+const groupTableRows = (groupbys, rows) => {
+ if (groupbys.length === 0) {
+ return [];
+ }
+ if (groupbys.length > 1) {
+ return groupRowsWithMultipleGroupbys(groupbys, rows);
+ }
+ const groupby = groupbys[0];
+ const { column_key, column } = groupby;
+ const { type: columnType } = column;
+ let groups = [];
+ let cellValue2GroupIndexMap = {};
+ rows.forEach((r) => {
+ const cellValue = _getCellValue(r, groupby);
+ const formattedValue = _getFormattedCellValue(cellValue, groupby);
+ const sCellValue = _getStrCellValue(formattedValue, columnType);
+ let groupedRowIndex = _findGroupIndex(sCellValue, cellValue2GroupIndexMap, groups.length);
+ if (groupedRowIndex > -1) {
+ groups[groupedRowIndex].row_ids.push(r._id);
+ } else {
+ groups.push({
+ cell_value: formattedValue,
+ original_cell_value: cellValue,
+ column_key,
+ row_ids: [r._id],
+ subgroups: null,
+ summaries: {},
+ });
+ }
+ });
+
+ // sort groups
+ groups = getSortedGroups(groups, groupbys, 0);
+
+ return groups;
+};
+
+/**
+ * Group view rows
+ * @param {array} groupbys e.g. [{ column_key, count_type, column, ... }, ...]
+ * @param {object} table e.g. { id_row_map, ... }
+ * @param {array} rowsIds e.g. [ row._id, ...]
+ * @param {object} value e.g. { collaborators, ... }
+ * @returns groups: [{
+ * cell_value, original_cell_value, column_key,
+ row_ids, subgroups, summaries, ...}, ...], array
+ */
+const groupViewRows = (groupbys, table, rowsIds) => {
+ if (rowsIds.length === 0) {
+ return [];
+ }
+ let rowsData = getRowsByIds(table, rowsIds);
+ return groupTableRows(groupbys, rowsData);
+};
+
+export {
+ groupTableRows,
+ groupViewRows,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/group/index.js b/frontend/src/metadata/metadata-view/_basic/utils/group/index.js
new file mode 100644
index 0000000000..d0b85a63e3
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/group/index.js
@@ -0,0 +1,10 @@
+export {
+ deleteInvalidGroupby,
+ isValidGroupby,
+ getValidGroupbys,
+} from './core';
+
+export {
+ groupTableRows,
+ groupViewRows,
+} from './group-row';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/hotkey.js b/frontend/src/metadata/metadata-view/_basic/utils/hotkey.js
new file mode 100644
index 0000000000..f6d483bac5
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/hotkey.js
@@ -0,0 +1,27 @@
+import isHotkey from 'is-hotkey';
+
+export const isModS = isHotkey('mod+s');
+export const isModZ = isHotkey('mod+z');
+export const isModL = isHotkey('mod+l');
+export const isModF = isHotkey('mod+f');
+export const isModP = isHotkey('mod+p');
+export const isModG = isHotkey('mod+g');
+export const isModDot = isHotkey('mod+.');
+export const isModComma = isHotkey('mod+,');
+export const isModSlash = isHotkey('mod+/');
+export const isModBackslash = isHotkey('mod+\'');
+export const isModSemicolon = isHotkey('mod+;');
+export const isModUp = isHotkey('mod+up');
+export const isModDown = isHotkey('mod+down');
+export const isModLeft = isHotkey('mod+left');
+export const isModRight = isHotkey('mod+right');
+export const isModShiftZ = isHotkey('mod+shift+z');
+export const isModShiftG = isHotkey('mod+shift+g');
+export const isModShiftDot = isHotkey('mod+shift+.');
+export const isModShiftComma = isHotkey('mod+shift+,');
+export const isShiftEnter = isHotkey('shift+enter');
+export const isShiftModEnter = isHotkey('shift+mod+enter');
+export const isOptPageUp = isHotkey('opt+pageup');
+export const isOptPageDown = isHotkey('opt+pagedown');
+export const isSpace = isHotkey('space');
+export const isEnter = isHotkey('enter');
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/index.js b/frontend/src/metadata/metadata-view/_basic/utils/index.js
new file mode 100644
index 0000000000..533340f0cb
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/index.js
@@ -0,0 +1,88 @@
+import * as CommonlyUsedHotkey from './hotkey';
+import LocalStorage from './local-storage';
+
+export {
+ getColumnType,
+ getColumnsByType,
+ isDateColumn,
+ isSupportDateColumnFormat,
+} from './column';
+export {
+ getValidFilters,
+ getValidFiltersWithoutError,
+ deleteInvalidFilter,
+ otherDate,
+ getFormattedFilterOtherDate,
+ getFormattedFilter,
+ getFormattedFilters,
+ creatorFilter,
+ dateFilter,
+ textFilter,
+ filterRow,
+ filterRows,
+} from './filter';
+export {
+ deleteInvalidGroupby,
+ isValidGroupby,
+ getValidGroupbys,
+ groupTableRows,
+ groupViewRows,
+} from './group';
+export {
+ isTableRows,
+ updateTableRowsWithRowsData,
+} from './row';
+export {
+ isValidSort,
+ getValidSorts,
+ deleteInvalidSort,
+ getMultipleIndexesOrderbyOptions,
+ sortDate,
+ sortText,
+ sortRowsWithMultiSorts,
+ sortTableRows,
+} from './sort';
+export {
+ getTableById,
+ getTableByName,
+ getTableByIndex,
+ getTableColumnByKey,
+ getTableColumnByName,
+ getRowById,
+ getRowsByIds,
+} from './table';
+export {
+ isValidEmail,
+ ValidateFilter,
+ DATE_MODIFIERS_REQUIRE_TERM,
+} from './validate';
+export {
+ getViewById,
+ getViewByName,
+ isDefaultView,
+ isFilterView,
+ isGroupView,
+ isSortView,
+ isHiddenColumnsView,
+ getViewShownColumns,
+ getGroupByPath,
+} from './view';
+export {
+ getType,
+ isMac,
+ base64ToFile,
+ bytesToSize,
+ getErrorMsg,
+ isFunction,
+ isEmpty,
+ isEmptyObject,
+ debounce,
+ throttle,
+} from './common';
+export {
+ DateUtils
+} from './date';
+export {
+ CommonlyUsedHotkey,
+ LocalStorage,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/local-storage.js b/frontend/src/metadata/metadata-view/_basic/utils/local-storage.js
new file mode 100644
index 0000000000..33e1cccd9f
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/local-storage.js
@@ -0,0 +1,28 @@
+class LocalStorage {
+
+ constructor(baseName) {
+ this.baseName = baseName || 'sf-metadata';
+ }
+
+ getStorage() {
+ try {
+ return JSON.parse(window.localStorage.getItem(this.baseName) || '{}');
+ } catch (error) {
+ return '';
+ }
+ }
+
+ setItem(key, value) {
+ const storage = this.getStorage();
+ const newValue = { ...storage, [key]: value };
+ return window.localStorage.setItem(this.baseName, JSON.stringify(newValue));
+ }
+
+ getItem(key) {
+ const storage = this.getStorage();
+ return storage[key];
+ }
+
+}
+
+export default LocalStorage;
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/row/core.js b/frontend/src/metadata/metadata-view/_basic/utils/row/core.js
new file mode 100644
index 0000000000..a93aff0905
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/row/core.js
@@ -0,0 +1,31 @@
+import { getTableById } from '../table/core';
+
+/**
+ * Check is table rows
+ * @param {array} rows e.g. table rows: [{ _id, xxx }, ...] | view rows: [ row._id, ... ]
+ * @returns bool
+ */
+const isTableRows = (rows) => (
+ Array.isArray(rows) && typeof rows[0] === 'object'
+);
+
+const updateTableRowsWithRowsData = (tables, tableId, rowsData = []) => {
+ let table = getTableById(tables, tableId);
+ let idRowDataMap = {};
+ rowsData.forEach((rowData) => idRowDataMap[rowData._id] = rowData);
+ table.rows.forEach((row, index) => {
+ const rowId = row._id;
+ const newRowData = idRowDataMap[rowId];
+ if (!newRowData) {
+ return;
+ }
+ const newRow = Object.assign({}, row, newRowData);
+ table.rows[index] = newRow;
+ table.id_row_map[rowId] = newRow;
+ });
+};
+
+export {
+ isTableRows,
+ updateTableRowsWithRowsData,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/row/index.js b/frontend/src/metadata/metadata-view/_basic/utils/row/index.js
new file mode 100644
index 0000000000..cd8b4b64b9
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/row/index.js
@@ -0,0 +1,4 @@
+export {
+ isTableRows,
+ updateTableRowsWithRowsData,
+} from './core';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/sort/core.js b/frontend/src/metadata/metadata-view/_basic/utils/sort/core.js
new file mode 100644
index 0000000000..02bc4a5c29
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/sort/core.js
@@ -0,0 +1,70 @@
+import { SORT_COLUMN_OPTIONS } from '../../constants/sort';
+
+/**
+ * Check is valid sort
+ * @param {object} sort e.g. { column_key, sort_type, ... }
+ * @param {array} columns
+ * @returns bool
+ */
+const isValidSort = (sort, columns) => {
+ const sortByColumn = sort && columns.find((column) => column.key === sort.column_key);
+ if (!sortByColumn) return false;
+
+ return SORT_COLUMN_OPTIONS.includes(sortByColumn.type);
+};
+
+/**
+ * Get valid sorts
+ * 1. sort column is exist or not
+ * 2. valid sort type
+ * @param {array} sorts e.g. [{ column_key, sort_type, ... }, ...]
+ * @param {array} columns
+ * @returns valid sorts, array
+ */
+const getValidSorts = (sorts, columns) => {
+ if (!Array.isArray(sorts) || !Array.isArray(columns)) return [];
+
+ return sorts.filter((sort) => isValidSort(sort, columns));
+};
+
+/**
+ * Get sorted option index of the "optionIds"
+ * @param {array} optionIds
+ * @param {object} option_id_index_map e.g. {[option.id]: 0, ...}
+ * @returns sorted options index, array
+ */
+const getMultipleIndexesOrderbyOptions = (optionIds, option_id_index_map) => {
+ let indexArr = [];
+ optionIds.forEach((optionId) => {
+ const index = option_id_index_map[optionId];
+ if (index > -1) {
+ indexArr.push(index);
+ }
+ });
+ return indexArr.sort();
+};
+
+/**
+ * Get valid and formatted sorts
+ * @param {array} sorts e.g. [{ column_key, sort_type, ... }, ...]
+ * @param {array} columns
+ * @returns valid and formatted sorts, array
+ */
+const deleteInvalidSort = (sorts, columns) => {
+ const validSorts = getValidSorts(sorts, columns);
+ let cleanSorts = [];
+ validSorts.forEach((sort) => {
+ const { column_key } = sort;
+ const sortColumn = columns.find((column) => column.key === column_key);
+ let newSort = { ...sort, column: sortColumn };
+ cleanSorts.push(newSort);
+ });
+ return cleanSorts;
+};
+
+export {
+ isValidSort,
+ getValidSorts,
+ deleteInvalidSort,
+ getMultipleIndexesOrderbyOptions,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/sort/index.js b/frontend/src/metadata/metadata-view/_basic/utils/sort/index.js
new file mode 100644
index 0000000000..c10224914a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/sort/index.js
@@ -0,0 +1,16 @@
+export {
+ isValidSort,
+ getValidSorts,
+ deleteInvalidSort,
+ getMultipleIndexesOrderbyOptions,
+} from './core';
+
+export {
+ sortDate,
+ sortText,
+} from './sort-column';
+
+export {
+ sortRowsWithMultiSorts,
+ sortTableRows,
+} from './sort-row';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/date.js b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/date.js
new file mode 100644
index 0000000000..17adc2fb76
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/date.js
@@ -0,0 +1,30 @@
+import { SORT_TYPE } from '../../../constants/sort';
+
+/**
+ * Sort date
+ * @param {string} leftDate e.g. '2023-07-31'
+ * @param {string} nextDate
+ * @param {string} sortType e.g. 'up' | 'down'
+ * @returns number
+ */
+const sortDate = (leftDate, rightDate, sortType) => {
+ const emptyLeftDate = !leftDate;
+ const emptyRightDate = !rightDate;
+ if (emptyLeftDate && emptyRightDate) return 0;
+ if (emptyLeftDate) return 1;
+ if (emptyRightDate) return -1;
+
+ if (leftDate > rightDate) {
+ return sortType === SORT_TYPE.UP ? 1 : -1;
+ }
+
+ if (leftDate < rightDate) {
+ return sortType === SORT_TYPE.UP ? -1 : 1;
+ }
+
+ return 0;
+};
+
+export {
+ sortDate,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/index.js b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/index.js
new file mode 100644
index 0000000000..c310d38dd5
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/index.js
@@ -0,0 +1,6 @@
+
+export { sortDate } from './date';
+export {
+ compareString,
+ sortText,
+} from './text';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/text.js b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/text.js
new file mode 100644
index 0000000000..aecebf2f6a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-column/text.js
@@ -0,0 +1,77 @@
+import {
+ REG_NUMBER_DIGIT,
+ REG_STRING_NUMBER_PARTS,
+} from '../../../constants/reg';
+import { SORT_TYPE } from '../../../constants/sort';
+
+/**
+ * Compare strings
+ * @param {string} leftString
+ * @param {string} rightString
+ * @returns number
+ */
+const compareString = (leftString, rightString) => {
+ if (!leftString && !rightString) return 0;
+ if (!leftString) return -1;
+ if (!rightString) return 1;
+ if (typeof leftString !== 'string' || typeof rightString !== 'string') return 0;
+
+ let leftStringParts = leftString.match(REG_STRING_NUMBER_PARTS);
+ let rightStringParts = rightString.match(REG_STRING_NUMBER_PARTS);
+ let len = Math.min(leftStringParts.length, rightStringParts.length);
+ let isDigitPart;
+ let leftStringPart;
+ let rightStringPart;
+
+ // Loop through each substring part to canCompare the overall strings.
+ for (let i = 0; i < len; i++) {
+ leftStringPart = leftStringParts[i];
+ rightStringPart = rightStringParts[i];
+ isDigitPart = REG_NUMBER_DIGIT.test(leftStringPart) && REG_NUMBER_DIGIT.test(rightStringPart);
+
+ if (isDigitPart) {
+ leftStringPart = parseInt(leftStringPart);
+ rightStringPart = parseInt(rightStringPart);
+ if (leftStringPart > rightStringPart) {
+ return 1;
+ }
+ if (leftStringPart < rightStringPart) {
+ return -1;
+ }
+ }
+ if (leftStringPart !== rightStringPart) {
+ return leftString.localeCompare(rightString);
+ }
+ }
+ return leftString.localeCompare(rightString);
+};
+
+/**
+ * Sort text
+ * @param {string} leftText
+ * @param {string} rightText
+ * @param {string} sortType e.g. 'up' | 'down
+ * @returns number
+ */
+const sortText = (leftText, rightText, sortType) => {
+ const emptyLeftText = !leftText;
+ const emptyRightText = !rightText;
+ if (emptyLeftText && emptyRightText) {
+ return 0;
+ }
+ if (emptyLeftText) {
+ return 1;
+ }
+ if (emptyRightText) {
+ return -1;
+ }
+ if (rightText === leftText) {
+ return 0;
+ }
+ return sortType === SORT_TYPE.UP ? compareString(leftText, rightText) : -1 * compareString(leftText, rightText);
+};
+
+export {
+ compareString,
+ sortText,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-row.js b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-row.js
new file mode 100644
index 0000000000..aab69321ff
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/sort/sort-row.js
@@ -0,0 +1,51 @@
+import { deleteInvalidSort } from './core';
+import {
+ sortDate,
+ sortText,
+} from './sort-column';
+import { DATE_COLUMN_OPTIONS } from '../../constants/column';
+
+/**
+ * Sort rows with multiple sorts
+ * @param {array} tableRows e.g. [{ _id, [column.key]: '', ...}, ...]
+ * @param {array} sorts e.g. [{ column_key, sort_type, column, ... }, ...]
+ * @param {object} value e.g. { collaborators, ... }
+ */
+const sortRowsWithMultiSorts = (tableRows, sorts) => {
+ tableRows.sort((currentRow, nextRow) => {
+ let initValue = 0;
+ sorts.forEach((sort) => {
+ const { column_key, sort_type, column } = sort;
+ const { type: columnType } = column;
+ let currCellVal = currentRow[column_key];
+ let nextCellVal = nextRow[column_key];
+ if (DATE_COLUMN_OPTIONS.includes(columnType)) {
+ initValue = initValue || sortDate(currCellVal, nextCellVal, sort_type);
+ } else {
+ initValue = initValue || sortText(currCellVal, nextCellVal, sort_type);
+ }
+ });
+ return initValue;
+ });
+};
+
+/**
+ * Get sorted rows ids from table rows with multiple sorts
+ * @param {array} sorts e.g. [{ column_key, sort_type, column, ... }, ...]
+ * @param {array} rows e.g. [{ _id, [column.key]: '', ...}, ...]
+ * @param {array} columns e.g. [{ key, type, ... }, ...]
+ * @param {object} value e.g. { collaborators, ... }
+ * @returns sorted rows ids, array
+ */
+const sortTableRows = (sorts, rows, columns) => {
+ if (!Array.isArray(rows) || rows.length === 0) return [];
+ const sortRows = rows.slice(0);
+ const validSorts = deleteInvalidSort(sorts, columns);
+ sortRowsWithMultiSorts(sortRows, validSorts);
+ return sortRows.map((row) => row._id);
+};
+
+export {
+ sortRowsWithMultiSorts,
+ sortTableRows,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/table/column.js b/frontend/src/metadata/metadata-view/_basic/utils/table/column.js
new file mode 100644
index 0000000000..1d9393b542
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/table/column.js
@@ -0,0 +1,26 @@
+/**
+ * Get column by key from table
+ * @param {object} table
+ * @param {string} columnKey
+ * @returns column, object
+ */
+const getTableColumnByKey = (table, columnKey) => {
+ if (!table || !Array.isArray(table.columns) || !columnKey) return null;
+ return table.columns.find((column) => column.key === columnKey);
+};
+
+/**
+ * Get table column by name
+ * @param {object} table
+ * @param {string} columnName
+ * @returns column, object
+ */
+const getTableColumnByName = (table, columnName) => {
+ if (!table || !Array.isArray(table.columns) || !columnName) return null;
+ return table.columns.find((column) => column.name === columnName);
+};
+
+export {
+ getTableColumnByKey,
+ getTableColumnByName,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/table/core.js b/frontend/src/metadata/metadata-view/_basic/utils/table/core.js
new file mode 100644
index 0000000000..fbe44db1de
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/table/core.js
@@ -0,0 +1,32 @@
+/**
+ * Get table by id
+ * @param {array} tables
+ * @param {string} tableId
+ * @returns table, object
+ */
+const getTableById = (tables, tableId) => {
+ if (!Array.isArray(tables) || !tableId) return null;
+ return tables.find((table) => table._id === tableId);
+};
+
+/**
+ * Get table by name
+ * @param {array} tables
+ * @param {string} tableName
+ * @returns table, object
+ */
+const getTableByName = (tables, tableName) => {
+ if (!Array.isArray(tables) || !tableName) return null;
+ return tables.find((table) => table.name === tableName);
+};
+
+const getTableByIndex = (tables, tableIndex) => {
+ if (!Array.isArray(tables) || tableIndex < 0) return null;
+ return tables[tableIndex];
+};
+
+export {
+ getTableById,
+ getTableByName,
+ getTableByIndex,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/table/index.js b/frontend/src/metadata/metadata-view/_basic/utils/table/index.js
new file mode 100644
index 0000000000..413e4923f2
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/table/index.js
@@ -0,0 +1,5 @@
+export {
+ getTableById, getTableByName, getTableByIndex,
+} from './core';
+export { getTableColumnByKey, getTableColumnByName } from './column';
+export { getRowById, getRowsByIds } from './row';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/table/row.js b/frontend/src/metadata/metadata-view/_basic/utils/table/row.js
new file mode 100644
index 0000000000..a20131ee72
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/table/row.js
@@ -0,0 +1,26 @@
+/**
+ * Get table row by id
+ * @param {object} table
+ * @param {string} rowId the id of row
+ * @returns row, object
+ */
+const getRowById = (table, rowId) => {
+ if (!table || !table.id_row_map || !rowId) return null;
+ return table.id_row_map[rowId];
+};
+
+/**
+ * Get table rows by ids
+ * @param {object} table { id_row_map, ... }
+ * @param {array} rowsIds [ row._id, ... ]
+ * @returns rows, array
+ */
+const getRowsByIds = (table, rowsIds) => {
+ if (!table || !table.id_row_map || !Array.isArray(rowsIds)) return [];
+ return rowsIds.map((rowId) => table.id_row_map[rowId]).filter(Boolean);
+};
+
+export {
+ getRowById,
+ getRowsByIds,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/validate/email.js b/frontend/src/metadata/metadata-view/_basic/utils/validate/email.js
new file mode 100644
index 0000000000..602f879511
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/validate/email.js
@@ -0,0 +1,10 @@
+/**
+ * Check email format is valid.
+ * @param {string} email
+ * @returns true/false, bool
+ */
+const isValidEmail = (email) => (
+ /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,20}$/.test(email)
+);
+
+export { isValidEmail };
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/validate/filter.js b/frontend/src/metadata/metadata-view/_basic/utils/validate/filter.js
new file mode 100644
index 0000000000..1144551227
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/validate/filter.js
@@ -0,0 +1,297 @@
+import { CellType, COLLABORATOR_COLUMN_TYPES } from '../../constants/column';
+import {
+ FILTER_COLUMN_OPTIONS,
+ FILTER_TERM_MODIFIER_TYPE,
+ FILTER_PREDICATE_TYPE,
+ filterTermModifierIsWithin,
+ filterTermModifierNotWithin,
+ FILTER_ERR_MSG,
+} from '../../constants/filter';
+import { isDateColumn } from '../column/date';
+
+const TERM_TYPE_MAP = {
+ NUMBER: 'number',
+ STRING: 'string',
+ BOOLEAN: 'boolean',
+ ARRAY: 'array',
+};
+
+const TEXT_COLUMN_TYPES = [CellType.TEXT, CellType.STRING];
+
+const CHECK_EMPTY_PREDICATES = [FILTER_PREDICATE_TYPE.EMPTY, FILTER_PREDICATE_TYPE.NOT_EMPTY];
+
+const DATE_MODIFIERS_REQUIRE_TERM = [
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS,
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS,
+ FILTER_TERM_MODIFIER_TYPE.EXACT_DATE,
+];
+
+const MODIFIERS_REQUIRE_NUMERIC_TERM = [
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS,
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS,
+];
+
+class ValidateFilter {
+ /**
+ * Check filter is valid. The error_message from returns will be null if the filter is valid.
+ * 1.incomplete filter which should be ignored
+ * - column_key: required
+ * - filter_predicate: required
+ * - filter_term_modifier: determined by the column to filter with
+ * - filter_term: determined by filter_predicate / the column to filter with
+ * 2.illegal filter
+ * - column missing: cannot find the column to filter
+ * - column not support: the column to filter is not support
+ * - mismatch: filter_predicate, filter_term_modifier mismatch
+ * - wrong data type: filter_term with wrong data type
+ * @param {object} filter e.g. { column_key, filter_term, ... }
+ * @param {array} columns e.g. [{ key, name, ... }, ...]
+ * @param {bool} isValidTerm No longer to validate filter term if false. default as false
+ * @returns { error_message }, object
+ */
+ static validate(filter, columns, isValidTerm = true) {
+ const {
+ column_key, filter_predicate, filter_term_modifier, filter_term,
+ } = filter;
+ const { error_message: column_error_message } = this.validateColumn(column_key, columns);
+ if (column_error_message) {
+ return { error_message: column_error_message };
+ }
+
+ const filterColumn = columns.find((column) => column.key === column_key);
+ const {
+ error_message: predicate_error_message,
+ } = this.validatePredicate(filter_predicate, filterColumn);
+ if (predicate_error_message) {
+ return { error_message: predicate_error_message };
+ }
+
+ if (this.isFilterOnlyWithPredicate(filter_predicate, filterColumn)) {
+ return { error_message: null };
+ }
+
+ const {
+ error_message: modifier_error_message,
+ } = this.validateModifier(filter_term_modifier, filter_predicate, filterColumn);
+ if (modifier_error_message) {
+ return { error_message: modifier_error_message };
+ }
+
+ if (this.isFilterOnlyWithModifier(filter_term_modifier, filterColumn)) {
+ return { error_message: null };
+ }
+
+ if (isValidTerm) {
+ const {
+ error_message: term_error_message,
+ } = this.validateTerm(filter_term, filter_predicate, filter_term_modifier, filterColumn);
+ if (term_error_message) {
+ return { error_message: term_error_message };
+ }
+ }
+
+ return { error_message: null };
+ }
+
+ static validateColumn(column_key, columns) {
+ if (!column_key) {
+ return { error_message: FILTER_ERR_MSG.INCOMPLETE_FILTER };
+ }
+ const filterColumn = columns.find((column) => column.key === column_key);
+
+ if (!filterColumn) {
+ return { error_message: FILTER_ERR_MSG.COLUMN_MISSING };
+ }
+
+ if (!this.isValidColumnType(filterColumn)) {
+ return { error_message: FILTER_ERR_MSG.COLUMN_NOT_SUPPORTED };
+ }
+ return { error_message: null };
+ }
+
+ /**
+ * the column to filter must be available
+ */
+ static validatePredicate(predicate, filterColumn) {
+ if (!predicate) {
+ return { error_message: FILTER_ERR_MSG.INCOMPLETE_FILTER };
+ }
+ const { type: columnType } = filterColumn;
+ const filterConfigs = FILTER_COLUMN_OPTIONS[columnType];
+ const { filterPredicateList: predicateList } = filterConfigs;
+ if (!predicateList.includes(predicate)) {
+ return { error_message: FILTER_ERR_MSG.UNMATCHED_PREDICATE };
+ }
+ return { error_message: null };
+ }
+
+ static validatePredicateWithArrayType(predicate, filterColumn) {
+ const { data } = filterColumn;
+ const { array_type } = data;
+
+ // Only support: is
+ if (array_type === CellType.CHECKBOX || array_type === CellType.BOOL) {
+ return this.validatePredicate(predicate, { type: CellType.CHECKBOX });
+ }
+
+ // Filter predicate should support: is_empty/is_not_empty(excludes checkbox and bool)
+ if (CHECK_EMPTY_PREDICATES.includes(predicate)) {
+ return true;
+ }
+ if (array_type === CellType.SINGLE_SELECT || array_type === CellType.DEPARTMENT_SINGLE_SELECT) {
+ return this.validatePredicate(predicate, { type: CellType.MULTIPLE_SELECT });
+ }
+ if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+ return this.validatePredicate(predicate, { type: CellType.COLLABORATOR });
+ }
+ return this.validatePredicate(predicate, { type: array_type });
+ }
+
+ /**
+ * filter predicate must be available.
+ * filterColumn the column to filter must be available
+ */
+ static isFilterOnlyWithPredicate(predicate, filterColumn) {
+ if (CHECK_EMPTY_PREDICATES.includes(predicate)) {
+ return true;
+ }
+
+ const { type: columnType } = filterColumn;
+ const { IS_CURRENT_USER_ID, INCLUDE_ME } = FILTER_PREDICATE_TYPE;
+ if (predicate === IS_CURRENT_USER_ID && TEXT_COLUMN_TYPES.includes(columnType)) {
+ return true;
+ }
+ if (predicate === INCLUDE_ME && COLLABORATOR_COLUMN_TYPES.includes(columnType)) {
+ return true;
+ }
+ return false;
+ }
+
+ /**
+ * filter predicate must be available.
+ * the column to filter must be available
+ */
+ static validateModifier(modifier, predicate, filterColumn) {
+ if (!isDateColumn(filterColumn)) {
+ return { error_message: null };
+ }
+ if (!modifier) {
+ return { error_message: FILTER_ERR_MSG.INCOMPLETE_FILTER };
+ }
+ if (predicate === FILTER_PREDICATE_TYPE.IS_WITHIN) {
+ if (filterTermModifierIsWithin.includes(modifier)) {
+ return { error_message: null };
+ }
+ } else if (filterTermModifierNotWithin.includes(modifier)) {
+ return { error_message: null };
+ }
+ return { error_message: FILTER_ERR_MSG.UNMATCHED_MODIFIER };
+ }
+
+ /**
+ * filter predicate must be available.
+ * filter modifier must be available.
+ * the column to filter must be available
+ */
+ static isFilterOnlyWithModifier(modifier, filterColumn) {
+ if (isDateColumn(filterColumn)) {
+ return !DATE_MODIFIERS_REQUIRE_TERM.includes(modifier);
+ }
+ return false;
+ }
+
+ static validateTerm(term, predicate, modifier, filterColumn) {
+ if (this.isTermMissing(term)) {
+ return { error_message: FILTER_ERR_MSG.INCOMPLETE_FILTER };
+ }
+
+ if (!this.isValidTerm(term, predicate, modifier, filterColumn)) {
+ return { error_message: FILTER_ERR_MSG.INVALID_TERM };
+ }
+ return { error_message: null };
+ }
+
+ static isTermMissing(term) {
+ return (!term && term !== 0 && term !== false)
+ || (Array.isArray(term) && term.length === 0);
+ }
+
+ static isValidTerm(term, predicate, modifier, filterColumn) {
+ switch (filterColumn.type) {
+ case CellType.TEXT: {
+ return this.isValidTermType(term, TERM_TYPE_MAP.STRING);
+ }
+
+ case CellType.CHECKBOX:
+ case CellType.BOOL: {
+ return this.isValidTermType(term, TERM_TYPE_MAP.BOOLEAN);
+ }
+ case CellType.COLLABORATOR:
+ case CellType.CREATOR:
+ case CellType.LAST_MODIFIER: {
+ return this.isValidTermType(term, TERM_TYPE_MAP.ARRAY);
+ }
+ case CellType.DATE:
+ case CellType.CTIME:
+ case CellType.MTIME: {
+ if (MODIFIERS_REQUIRE_NUMERIC_TERM.includes(modifier)) {
+ return this.isValidTermType(term, TERM_TYPE_MAP.NUMBER);
+ }
+ return this.isValidTermType(term, TERM_TYPE_MAP.STRING);
+ }
+ default: {
+ return false;
+ }
+ }
+ }
+
+ static isValidTermType(term, type) {
+ if (type === TERM_TYPE_MAP.ARRAY) {
+ return Array.isArray(term) && term.length > 0;
+ }
+ if (type === CellType.NUMBER) {
+ // is a number or a number string
+ // eslint-disable-next-line
+ return typeof term === type || !isNaN(Number(term));
+ }
+ // eslint-disable-next-line
+ return typeof term === type;
+ }
+
+ static isValidTermWithArrayType(term, predicate, modifier, filterColumn) {
+ const { data } = filterColumn;
+ const { array_type, array_data } = data;
+ if (array_type === CellType.SINGLE_SELECT) {
+ return this.isValidTerm(term, predicate, modifier, {
+ type: CellType.MULTIPLE_SELECT, data: array_data,
+ });
+ }
+ if (array_type === CellType.DEPARTMENT_SINGLE_SELECT) {
+ return this.isValidTermType(term, TERM_TYPE_MAP.ARRAY);
+ }
+ if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+ return this.isValidTerm(term, predicate, modifier, { type: CellType.COLLABORATOR });
+ }
+ return this.isValidTerm(term, predicate, modifier, { type: array_type, data: array_data });
+ }
+
+ static isValidColumnType(filterColumn) {
+ const { type: columnType } = filterColumn;
+ // eslint-disable-next-line
+ return FILTER_COLUMN_OPTIONS.hasOwnProperty(columnType);
+ }
+
+ static isValidSelectedOptions(selectedOptionIds, options) {
+ const validSelectedOptions = options.filter((option) => selectedOptionIds.includes(option.id));
+ return selectedOptionIds.length === validSelectedOptions.length;
+ }
+}
+
+export {
+ ValidateFilter,
+ DATE_MODIFIERS_REQUIRE_TERM,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/validate/index.js b/frontend/src/metadata/metadata-view/_basic/utils/validate/index.js
new file mode 100644
index 0000000000..45cd4da56f
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/validate/index.js
@@ -0,0 +1,5 @@
+export { isValidEmail } from './email';
+export {
+ ValidateFilter,
+ DATE_MODIFIERS_REQUIRE_TERM,
+} from './filter';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/view/core.js b/frontend/src/metadata/metadata-view/_basic/utils/view/core.js
new file mode 100644
index 0000000000..6293f2fe6a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/view/core.js
@@ -0,0 +1,98 @@
+import {
+ getValidFilters,
+} from '../filter/core';
+import { getValidGroupbys } from '../group/core';
+import { getValidSorts } from '../sort/core';
+
+/**
+ * Get view by id
+ * @param {array} views e.g. [{ _id, ... }, ...]
+ * @param {string} viewId
+ * @returns view, object
+ */
+const getViewById = (views, viewId) => {
+ if (!Array.isArray(views) || !viewId) return null;
+ return views.find((view) => view._id === viewId);
+};
+
+/**
+ * Get view by name
+ * @param {array} views
+ * @param {string} viewName
+ * @returns view, object
+ */
+const getViewByName = (views, viewName) => {
+ if (!Array.isArray(views) || !viewName) return null;
+ return views.find((view) => view.name === viewName);
+};
+
+/**
+ * Check whether the view contains filters
+ * @param {object} view e.g. { filters, ... }
+ * @param {array} columns
+ * @returns bool
+ */
+const isFilterView = (view, columns) => {
+ const validFilters = getValidFilters(view.filters, columns);
+ return validFilters.length > 0;
+};
+
+/**
+ * Check whether the view contains groupbys
+ * @param {object} view e.g. { groupbys, ... }
+ * @param {array} columns
+ * @returns bool
+ */
+const isGroupView = (view, columns) => {
+ const validGroupbys = getValidGroupbys(view.groupbys, columns);
+ return validGroupbys.length > 0;
+};
+
+/**
+ * Check whether the view contains sorts
+ * @param {object} view e.g. { sorts, ... }
+ * @param {array} columns
+ * @returns bool
+ */
+const isSortView = (view, columns) => {
+ const validSorts = getValidSorts(view.sorts, columns);
+ return validSorts.length > 0;
+};
+
+/**
+ * Check whether the view has hidden columns
+ * @param {object} view e.g. { hidden_columns, ... }
+ * @returns bool
+ */
+const isHiddenColumnsView = (view) => {
+ const { hidden_columns } = view || {};
+ return Array.isArray(hidden_columns) && hidden_columns.length > 0;
+};
+
+/**
+ * Check is default view which no contains filters, sorts, groupbys etc.
+ * @param {object} view e.g. { filters, groupbys, sorts, ... }
+ * @param {array} columns
+ * @returns bool
+ */
+const isDefaultView = (view, columns) => (
+ !isFilterView(view, columns) && !isSortView(view, columns) && !isGroupView(view, columns)
+);
+
+const getViewShownColumns = (view, columns) => {
+ if (!Array.isArray(columns)) return [];
+ if (!isHiddenColumnsView(view)) return columns;
+ const { hidden_columns } = view;
+ return columns.filter((column) => !hidden_columns.includes(column.key));
+};
+
+export {
+ getViewById,
+ getViewByName,
+ isDefaultView,
+ isFilterView,
+ isGroupView,
+ isSortView,
+ isHiddenColumnsView,
+ getViewShownColumns,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/view/group.js b/frontend/src/metadata/metadata-view/_basic/utils/view/group.js
new file mode 100644
index 0000000000..28a0de0577
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/view/group.js
@@ -0,0 +1,39 @@
+/**
+ * Get group by paths
+ * @param {array} paths e.g. [ 0, 1, 2 ]
+ * @param {array} groups grouped rows
+ * @returns group, object
+ */
+const getGroupByPath = (paths, groups) => {
+ if (!Array.isArray(paths) || !Array.isArray(groups)) {
+ return null;
+ }
+
+ const level0GroupIndex = paths[0];
+ if (level0GroupIndex < 0 || level0GroupIndex >= groups.length) {
+ return null;
+ }
+
+ let level = 1;
+ let foundGroup = groups[level0GroupIndex];
+ while (level < paths.length) {
+ if (!foundGroup) {
+ break;
+ }
+ const subGroups = foundGroup.subgroups;
+ const currentLevelGroupIndex = paths[level];
+ if (
+ !Array.isArray(subGroups)
+ || (currentLevelGroupIndex < 0 || currentLevelGroupIndex >= subGroups.length)
+ ) {
+ break;
+ }
+ foundGroup = subGroups[currentLevelGroupIndex];
+ level += 1;
+ }
+ return foundGroup;
+};
+
+export {
+ getGroupByPath,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/view/index.js b/frontend/src/metadata/metadata-view/_basic/utils/view/index.js
new file mode 100644
index 0000000000..194b522f70
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/_basic/utils/view/index.js
@@ -0,0 +1,14 @@
+export {
+ getViewById,
+ getViewByName,
+ isDefaultView,
+ isFilterView,
+ isGroupView,
+ isSortView,
+ isHiddenColumnsView,
+ getViewShownColumns,
+} from './core';
+
+export {
+ getGroupByPath,
+} from './group';
diff --git a/frontend/src/metadata/metadata-view/components/cell-formatter/index.js b/frontend/src/metadata/metadata-view/components/cell-formatter/index.js
new file mode 100644
index 0000000000..3c230c2f03
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/cell-formatter/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formatter } from '@seafile/sf-metadata-ui-component';
+import { useCollaborators } from '../../hooks';
+
+const CellFormatter = ({ readonly, value, field, }) => {
+ const { collaborators, collaboratorsCache, updateCollaboratorsCache } = useCollaborators();
+ return (
+
+
+
+
+ onNodeClick(node)}
+ >
+
+ {gettext('File extended properties')}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+FilterSetter.propTypes = propTypes;
+
+export default FilterSetter;
diff --git a/frontend/src/metadata/metadata-view/components/data-process-setter/groupby-setter.jsx b/frontend/src/metadata/metadata-view/components/data-process-setter/groupby-setter.jsx
new file mode 100644
index 0000000000..46fc8c7d9b
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/data-process-setter/groupby-setter.jsx
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { CommonlyUsedHotkey } from '../../_basic';
+import { gettext } from '../../utils';
+
+class GroupbySetter extends Component {
+
+ static defaultProps = {
+ target: 'sf-metadata-groupby-popover',
+ isNeedSubmit: false,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isShowGroupbySetter: false,
+ };
+ }
+
+ onKeyDown = (e) => {
+ if (CommonlyUsedHotkey.isEnter(e) || CommonlyUsedHotkey.isSpace(e)) this.onGroupbySetterToggle();
+ };
+
+ onGroupbySetterToggle = () => {
+ this.setState({ isShowGroupbySetter: !this.state.isShowGroupbySetter });
+ };
+
+ render() {
+ const { columns, groupbys, wrapperClass } = this.props;
+ if (!columns) return null;
+
+ const groupbysLength = groupbys ? groupbys.length : 0;
+ const activated = groupbysLength > 0;
+ let groupbyMessage = gettext('Group');
+ if (groupbysLength === 1) {
+ groupbyMessage = gettext('Grouped by 1 column');
+ } else if (groupbysLength > 1) {
+ groupbyMessage = gettext('Grouped by xxx columns').replace('xxx', groupbysLength);
+ }
+ let labelClass = wrapperClass || '';
+ labelClass = (labelClass && activated) ? labelClass + ' active' : labelClass;
+
+ return (
+ <>
+
+
+
+
+
+ );
+ }
+}
+
+GroupbySetter.propTypes = {
+ wrapperClass: PropTypes.string,
+ columns: PropTypes.array,
+ groupbys: PropTypes.array, // valid groupbys
+ modifyGroupbys: PropTypes.func,
+ target: PropTypes.string,
+ isNeedSubmit: PropTypes.bool,
+};
+
+export default GroupbySetter;
diff --git a/frontend/src/metadata/metadata-view/components/data-process-setter/hide-column-setter.jsx b/frontend/src/metadata/metadata-view/components/data-process-setter/hide-column-setter.jsx
new file mode 100644
index 0000000000..ffe2203e25
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/data-process-setter/hide-column-setter.jsx
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { CommonlyUsedHotkey } from '../../_basic';
+import { gettext } from '../../utils';
+
+class HideColumnSetter extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isHideColumnSetterShow: false,
+ };
+ }
+
+ onKeyDown = (e) => {
+ if (CommonlyUsedHotkey.isEnter(e) || CommonlyUsedHotkey.isSpace(e)) this.onHideColumnToggle();
+ };
+
+ onHideColumnToggle = () => {
+ this.setState({ isHideColumnSetterShow: !this.state.isHideColumnSetterShow });
+ };
+
+ render() {
+ const { columns, wrapperClass, target, localShownColumnKeys } = this.props;
+ if (!columns) return null;
+ let message = gettext('Hide columns');
+ const hiddenColumns = columns.filter((column) => !localShownColumnKeys.includes(column.key));
+ const hiddenColumnsLength = hiddenColumns.length;
+ if (hiddenColumnsLength === 1) {
+ message = gettext('1 hidden column');
+ } else if (hiddenColumnsLength > 1) {
+ message = gettext('xxx hidden columns').replace('xxx', hiddenColumnsLength);
+ }
+ let labelClass = wrapperClass || '';
+ labelClass = (labelClass && hiddenColumnsLength > 0) ? labelClass + ' active' : labelClass;
+
+ return (
+ <>
+
+
+
+
+
+ );
+ }
+}
+
+HideColumnSetter.propTypes = {
+ wrapperClass: PropTypes.string,
+ target: PropTypes.string,
+ page: PropTypes.object,
+ shownColumnKeys: PropTypes.array,
+ localShownColumnKeys: PropTypes.array,
+ columns: PropTypes.array,
+ modifyHiddenColumns: PropTypes.func,
+};
+
+export default HideColumnSetter;
diff --git a/frontend/src/metadata/metadata-view/components/data-process-setter/index.js b/frontend/src/metadata/metadata-view/components/data-process-setter/index.js
new file mode 100644
index 0000000000..89cbfa66d3
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/data-process-setter/index.js
@@ -0,0 +1,13 @@
+import FilterSetter from './filter-setter';
+import SortSetter from './sort-setter';
+import GroupbySetter from './groupby-setter';
+import PreHideColumnSetter from './pre-hide-column-setter';
+import HideColumnSetter from './hide-column-setter';
+
+export {
+ FilterSetter,
+ SortSetter,
+ GroupbySetter,
+ PreHideColumnSetter,
+ HideColumnSetter,
+};
diff --git a/frontend/src/metadata/metadata-view/components/data-process-setter/pre-hide-column-setter.jsx b/frontend/src/metadata/metadata-view/components/data-process-setter/pre-hide-column-setter.jsx
new file mode 100644
index 0000000000..347b565d72
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/data-process-setter/pre-hide-column-setter.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { gettext } from '../../utils';
+
+class PreHideColumnSetter extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isShowHideColumnSetter: false,
+ shownColumnKeys: props.shownColumnKeys || [],
+ };
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ const { shownColumnKeys } = nextProps;
+ if (shownColumnKeys !== this.props.shownColumnKeys) {
+ this.setState({
+ isShowHideColumnSetter: false,
+ shownColumnKeys,
+ });
+ }
+ }
+
+ onHideColumnToggle = () => {
+ const { isShowHideColumnSetter } = this.state;
+ if (isShowHideColumnSetter) {
+ const { shownColumnKeys } = this.state;
+ this.props.onSettingUpdate(shownColumnKeys);
+ }
+ this.setState({ isShowHideColumnSetter: !isShowHideColumnSetter });
+ };
+
+ modifyHiddenColumns = (shownColumnKeys) => {
+ this.setState({ shownColumnKeys });
+ };
+
+ render() {
+ const { columns, wrapperClass } = this.props;
+ if (!columns) return null;
+ const { shownColumnKeys } = this.state;
+ const shown_column_keys = shownColumnKeys || [];
+ const hiddenColumns = columns.filter((column) => !shown_column_keys.includes(column.key));
+ const hiddenColumnsLength = hiddenColumns.length;
+ let message = gettext('Preset hide columns');
+ if (hiddenColumnsLength === 1) {
+ message = gettext('1 preset hidden column');
+ } else if (hiddenColumnsLength > 1) {
+ message = gettext('xxx preset hidden columns').replace('xxx', hiddenColumnsLength);
+ }
+ let settingClass = wrapperClass || '';
+ settingClass = (settingClass && hiddenColumnsLength > 0) ? settingClass + ' active' : settingClass;
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+PreHideColumnSetter.propTypes = {
+ shownColumnKeys: PropTypes.array,
+ columns: PropTypes.array,
+ onSettingUpdate: PropTypes.func.isRequired,
+ wrapperClass: PropTypes.string,
+};
+
+export default PreHideColumnSetter;
diff --git a/frontend/src/metadata/metadata-view/components/data-process-setter/sort-setter.jsx b/frontend/src/metadata/metadata-view/components/data-process-setter/sort-setter.jsx
new file mode 100644
index 0000000000..11327dcd46
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/data-process-setter/sort-setter.jsx
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { getValidSorts, CommonlyUsedHotkey } from '../../_basic';
+import { gettext } from '../../utils';
+
+const propTypes = {
+ wrapperClass: PropTypes.string,
+ target: PropTypes.string,
+ isNeedSubmit: PropTypes.bool,
+ sorts: PropTypes.array,
+ columns: PropTypes.array,
+ onSortsChange: PropTypes.func,
+};
+
+class SortSetter extends Component {
+
+ static defaultProps = {
+ target: 'sf-metadata-sort-popover',
+ isNeedSubmit: false,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isSortPopoverShow: false,
+ };
+ }
+
+ onSortToggle = () => {
+ this.setState({ isSortPopoverShow: !this.state.isSortPopoverShow });
+ };
+
+ onKeyDown = (e) => {
+ e.stopPropagation();
+ if (CommonlyUsedHotkey.isEnter(e) || CommonlyUsedHotkey.isSpace(e)) this.onSortToggle();
+ };
+
+ update = (update) => {
+ const { sorts } = update || {};
+ this.props.onSortsChange(sorts);
+ };
+
+ render() {
+ const { sorts, columns, isNeedSubmit, wrapperClass } = this.props;
+ if (!columns) return null;
+ const validSorts = getValidSorts(sorts || [], columns);
+ const sortsLength = validSorts ? validSorts.length : 0;
+
+ let sortMessage = isNeedSubmit ? gettext('Preset sort') : gettext('Sort');
+ if (sortsLength === 1) {
+ sortMessage = isNeedSubmit ? gettext('1 preset sort') : gettext('1 sort');
+ } else if (sortsLength > 1) {
+ sortMessage = isNeedSubmit ? gettext('xxx preset sorts') : gettext('xxx sorts');
+ sortMessage = sortMessage.replace('xxx', sortsLength);
+ }
+ let labelClass = wrapperClass || '';
+ labelClass = (labelClass && sortsLength > 0) ? labelClass + ' active' : labelClass;
+
+ return (
+ <>
+
+
+
+ );
+ }
+}
+
+SortSetter.propTypes = propTypes;
+
+export default SortSetter;
diff --git a/frontend/src/metadata/metadata-view/components/delete-confirm-dialog/index.js b/frontend/src/metadata/metadata-view/components/delete-confirm-dialog/index.js
new file mode 100644
index 0000000000..464908b9bc
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/delete-confirm-dialog/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext } from '../../utils';
+
+const DeleteConfirmDialog = ({ title, content, onToggle, onSubmit }) => {
+ return (
+
+
+ {gettext('Are you sure to delete ') + content}
+ this.dtablePopoverRef = ref} onClick={this.onPopoverInsideClick} className={this.props.filtersClassName}>
+ this.addFilter(scheduleUpdate) : () => {}}
+ footerName={gettext('Add filter')}
+ addIconClassName="popover-add-icon"
+ />
+ {this.isNeedSubmit() && (
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+
+ 
+
+ {collaborator.name}
+
+
+
+ {isSelected && }
+
+
+
+
+
+ {collaborator.name}
+
+
+ {
+ this.onClick(e, collaborator);
+ }}>
+
+
+
+
+ );
+ });
+ let value = selectedCollaborators ? { label: (<>{selectedCollaborators}) } : {};
+ let options = Array.isArray(filterTerm) ? this.createCollaboratorOptions(filterIndex, collaborators, filterTerm) : [];
+ return (
+
+
+ {
+ ({ value }) => {
+ return (
+
+
+
+
+ );
+ }
+ }
+
+
+ );
+ }
+}
+
+FilterCalendar.propTypes = propTypes;
+
+export default FilterCalendar;
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js
new file mode 100644
index 0000000000..4d22c32501
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js
@@ -0,0 +1,91 @@
+import React, { Fragment } from 'react';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { COLUMNS_ICON_CONFIG, FILTER_TERM_MODIFIER_SHOW } from '../../../../_basic';
+import { gettext } from '../../../../utils';
+
+class FilterItemUtils {
+
+ static generatorColumnOption(column) {
+ if (!column) return null;
+ const { type, name } = column;
+ return {
+ value: { column },
+ label: (
+
+
+ )
+ };
+ }
+
+ static generatorMultipleSelectOption(option, filterTerm) {
+ return {
+ value: { columnOption: option },
+ label: (
+ {option.name}
+
+ {selectedOption?.id === option.id && }
+
+
+
+ )
+ };
+ }
+
+ static generatorConjunctionOptions() {
+ return [
+ {
+ value: { filterConjunction: 'And' },
+ label: ({gettext('And')})
+ },
+ {
+ value: { filterConjunction: 'Or' },
+ label: ({gettext('Or')})
+ }
+ ];
+ }
+
+ static getActiveConjunctionOption(conjunction) {
+ if (conjunction === 'And') {
+ return {
+ value: { filterConjunction: 'And' },
+ label: ({gettext('And')})
+ };
+ }
+ return {
+ value: { filterConjunction: 'Or' },
+ label: ({gettext('Or')})
+ };
+ }
+}
+
+export default FilterItemUtils;
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
new file mode 100644
index 0000000000..0077bc2f01
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
@@ -0,0 +1,512 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
+import { CustomizeSelect, IconBtn, SearchInput } from '@seafile/sf-metadata-ui-component';
+import {
+ CellType,
+ FILTER_PREDICATE_TYPE,
+ FILTER_TERM_MODIFIER_TYPE,
+ filterTermModifierIsWithin,
+ isDateColumn,
+ FILTER_ERR_MSG,
+} from '../../../../_basic';
+import CollaboratorFilter from './collaborator-filter';
+import FilterCalendar from './filter-calendar';
+import FilterItemUtils from './filter-item-utils';
+import {
+ getFilterByColumn, getUpdatedFilterBySelectSingle, getUpdatedFilterBySelectMultiple,
+ getUpdatedFilterByCreator, getUpdatedFilterByCollaborator, getColumnOptions, getUpdatedFilterByPredicate,
+} from '../../../../utils/filters-utils';
+import { isCheckboxColumn } from '../../../../utils/column-utils';
+import { gettext } from '../../../../utils';
+import { DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS } from '../../../../constants';
+
+const propTypes = {
+ index: PropTypes.number.isRequired,
+ filter: PropTypes.object.isRequired,
+ filterColumn: PropTypes.object.isRequired,
+ filterConjunction: PropTypes.string.isRequired,
+ conjunctionOptions: PropTypes.array.isRequired,
+ filterColumnOptions: PropTypes.array.isRequired,
+ value: PropTypes.object,
+ deleteFilter: PropTypes.func.isRequired,
+ updateFilter: PropTypes.func.isRequired,
+ updateConjunction: PropTypes.func.isRequired,
+ collaborators: PropTypes.array,
+ errMsg: PropTypes.string,
+};
+
+const EMPTY_PREDICATE = [FILTER_PREDICATE_TYPE.EMPTY, FILTER_PREDICATE_TYPE.NOT_EMPTY];
+
+class FilterItem extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ filterTerm: props.filter.filter_term,
+ enterRateItemIndex: 0,
+ };
+ this.filterPredicateOptions = null;
+ this.filterTermModifierOptions = null;
+
+ this.filterToolTip = React.createRef();
+ this.invalidFilterTip = React.createRef();
+
+ this.initSelectOptions(props);
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ const { filter } = this.props;
+ if (nextProps.filter !== filter) {
+ this.initSelectOptions(nextProps);
+ this.setState({
+ filterTerm: nextProps.filter.filter_term,
+ });
+ }
+ }
+
+ shouldComponentUpdate(nextProps) {
+ const currentProps = this.props;
+ const shouldUpdated = (
+ nextProps.index !== currentProps.index ||
+ nextProps.filter !== currentProps.filter ||
+ nextProps.filterColumn !== currentProps.filterColumn ||
+ nextProps.filterConjunction !== currentProps.filterConjunction ||
+ nextProps.conjunctionOptions !== currentProps.conjunctionOptions ||
+ nextProps.filterColumnOptions !== currentProps.filterColumnOptions
+ );
+ return shouldUpdated;
+ }
+
+ initSelectOptions = (props) => {
+ const { filter, filterColumn, value } = props;
+ let { filterPredicateList, filterTermModifierList } = getColumnOptions(filterColumn, value);
+ // The value of the calculation formula column does not exist in the shared view
+ this.filterPredicateOptions = filterPredicateList ? filterPredicateList.map(predicate => {
+ return FilterItemUtils.generatorPredicateOption(predicate);
+ }).filter(item => item) : [];
+
+ const { filter_predicate } = filter;
+ if (isDateColumn(filterColumn)) {
+ if (filter_predicate === FILTER_PREDICATE_TYPE.IS_WITHIN) {
+ filterTermModifierList = filterTermModifierIsWithin;
+ }
+ this.filterTermModifierOptions = filterTermModifierList.map(termModifier => {
+ return FilterItemUtils.generatorTermModifierOption(termModifier);
+ });
+ }
+ };
+
+ onDeleteFilter = (event) => {
+ event.nativeEvent.stopImmediatePropagation();
+ const { index } = this.props;
+ this.props.deleteFilter(index);
+ };
+
+ resetState = (filter) => {
+ this.setState({ filterTerm: filter.filter_term });
+ };
+
+ onSelectConjunction = (value) => {
+ const { filterConjunction } = this.props;
+ if (filterConjunction === value.filterConjunction) {
+ return;
+ }
+ this.props.updateConjunction(value.filterConjunction);
+ };
+
+ onSelectColumn = (value) => {
+ const { index, filter } = this.props;
+ const { column } = value;
+ if (column.key === filter.column_key) return;
+
+ let newFilter = getFilterByColumn(column, filter);
+ if (!newFilter) return;
+
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+ };
+
+ onSelectPredicate = (value) => {
+ const { index, filter, filterColumn } = this.props;
+ const { filterPredicate } = value;
+ if (filter.filter_predicate === filterPredicate) {
+ return;
+ }
+ let newFilter = getUpdatedFilterByPredicate(filter, filterColumn, filterPredicate);
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+ };
+
+ onSelectTermModifier = (value) => {
+ const { index, filter } = this.props;
+ const { filterTermModifier } = value;
+ const inputRangeLabel = [
+ FILTER_TERM_MODIFIER_TYPE.EXACT_DATE,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO,
+ FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW,
+ FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS,
+ FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS
+ ];
+ if (filter.filter_term_modifier === filterTermModifier) {
+ return;
+ }
+ let filter_term = filter.filter_term;
+ if (inputRangeLabel.indexOf(filter.filter_term_modifier) > -1) {
+ filter_term = '';
+ }
+ let newFilter = Object.assign({}, filter, { filter_term_modifier: filterTermModifier, filter_term });
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+ };
+
+ onSelectSingle = (value) => {
+ const { index, filter } = this.props;
+ const { columnOption: option } = value;
+ if (filter.filter_term === option.id) {
+ return;
+ }
+
+ let newFilter = getUpdatedFilterBySelectSingle(filter, option);
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+ };
+
+ onSelectMultiple = (value) => {
+ const { index, filter } = this.props;
+ const { columnOption: option } = value;
+
+ let newFilter = getUpdatedFilterBySelectMultiple(filter, option);
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+ };
+
+ onSelectCollaborator = (value) => {
+ const { index, filter } = this.props;
+ const { columnOption: collaborator } = value;
+ let newFilter = getUpdatedFilterByCollaborator(filter, collaborator);
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+ };
+
+ onSelectCreator = (value) => {
+ const { index, filter } = this.props;
+ const { columnOption: collaborator } = value;
+ let newFilter = getUpdatedFilterByCreator(filter, collaborator);
+ // the predicate is 'is' or 'is not'
+ if (!newFilter) {
+ return;
+ }
+ this.resetState(newFilter);
+ this.props.updateFilter(index, newFilter);
+
+ };
+
+ onFilterTermCheckboxChanged = (e) => {
+ this.onFilterTermChanged(e.target.checked);
+ };
+
+ onFilterTermTextChanged = (value) => {
+ this.onFilterTermChanged(value);
+ };
+
+ onFilterTermNumberChanged = () => {
+ const value = this.numberEditor.getValue();
+ this.onFilterTermChanged(Object.values(value)[0]);
+ };
+
+ onFilterTermChanged = (newFilterTerm) => {
+ const { index, filter } = this.props;
+ const { filterTerm } = this.state;
+ if (newFilterTerm !== filterTerm) {
+ this.setState({ filterTerm: newFilterTerm });
+ let newFilter = Object.assign({}, filter, { filter_term: newFilterTerm });
+ this.props.updateFilter(index, newFilter);
+ }
+ };
+
+ onMouseEnterRateItem = (index) => {
+ this.setState({ enterRateItemIndex: index });
+ };
+
+ onMouseLeaveRateItem = () => {
+ this.setState({ enterRateItemIndex: 0 });
+ };
+
+ onChangeRateNumber = (index) => {
+ this.onFilterTermChanged(index);
+ };
+
+ getInputComponent = (type) => {
+ const { filterTerm } = this.state;
+ if (type === 'text') {
+ return (
+ {option.name}
+
+ {filterTerm.indexOf(option.id) > -1 && }
+
+
+
+ {gettext('Invalid filter')}
+
+
+ );
+ };
+
+ render() {
+ const { filterPredicateOptions, filterTermModifierOptions } = this;
+ const { filter, filterColumn, filterColumnOptions } = this.props;
+ const { filter_predicate, filter_term_modifier } = filter;
+ const activeColumn = FilterItemUtils.generatorColumnOption(filterColumn);
+ const activePredicate = FilterItemUtils.generatorPredicateOption(filter_predicate);
+ let activeTermModifier = null;
+ let _isCheckboxColumn = false;
+ if (isDateColumn(filterColumn)) {
+ activeTermModifier = FilterItemUtils.generatorTermModifierOption(filter_term_modifier);
+ } else if (isCheckboxColumn(filterColumn)) {
+ _isCheckboxColumn = true;
+ }
+ const isContainPredicate = [FILTER_PREDICATE_TYPE.CONTAINS, FILTER_PREDICATE_TYPE.NOT_CONTAIN].includes(filter_predicate);
+ const isRenderErrorTips = this.isRenderErrorTips();
+ const showToolTip = isContainPredicate && !isRenderErrorTips;
+
+ // current predicate is not empty
+ const isNeedShowTermModifier = !EMPTY_PREDICATE.includes(filter_predicate);
+
+ return (
+
+
+ );
+ }
+}
+
+FilterItem.propTypes = propTypes;
+
+export default FilterItem;
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
new file mode 100644
index 0000000000..0591e2031a
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
@@ -0,0 +1,321 @@
+.filters-list {
+ min-height: 120px;
+ max-height: 100%;
+ padding: 15px;
+}
+
+.filters-list.empty-filters-container {
+ min-height: 80px;
+ padding: 16px;
+}
+
+.filters-list.empty-filters-container .empty-filters-list {
+ padding-left: 0;
+}
+
+.filters-list .empty-filters-list {
+ padding: 0.25rem;
+ font-size: 14px;
+ color: #666666;
+}
+
+.filters-list .filter-item {
+ display: flex;
+ align-items: center;
+ padding: 0.25rem 0;
+}
+
+.filters-list .filter-item .condition {
+ display: flex;
+ flex: 1;
+}
+
+.filters-list .filter-item .condition > div {
+ height: 38px;
+ line-height: 38px;
+ margin-left: 0.5rem;
+}
+
+.filters-list .filter-item .condition > div:first-child {
+ margin-left: 0;
+}
+
+.filters-list .filter-item .filter-term {
+ max-width: 300px;
+}
+
+.filters-list .filter-item .filter-term .option-group-content .option.option-active .sf-metadata-font {
+ color: #798d99;
+}
+
+.filters-list .filter-conjunction {
+ width: 72px;
+}
+
+.filters-list .filter-conjunction-readonly {
+ width: 52px;
+}
+
+.filters-list .filter-container {
+ width: calc(100% - 72px);
+ display: flex;
+}
+
+.filters-list .sf-metadata-select .selected-option-show {
+ width: calc(100% - 20px);
+ height: 20px;
+}
+
+.filters-list .sf-metadata-select .selected-option {
+ width: auto;
+ overflow-x: auto;
+}
+
+.filters-list .sf-metadata-select .sf-metadata-icon-drop-down {
+ margin-left: 0.5rem;
+}
+
+.filters-list .selected-conjunction-show {
+ padding: 0 10px;
+ color: #666666;
+}
+
+.filters-list .filter-column {
+ max-width: 150px;
+}
+
+.filter-term .selector-multiple-select .option,
+.filter-term .selector-single-select .option {
+ height: 30px;
+ padding: 0 10px;
+}
+
+.filter-term .selector-multiple-select .select-option-name,
+.filter-term .selector-single-select .select-option-name {
+ margin-top: 5px;
+}
+
+.filter-term .selector-single-select .option:hover {
+ color: #212529;
+ background-color: #f7f7f7;
+}
+
+.filter-term .selector-single-select .option:hover .select-option-name,
+.filter-term .selector-multiple-select .option:hover .select-option-name,
+.filter-term .selector-collaborator .option:hover .select-option-name {
+ color: unset;
+}
+
+.filter-term .selector-collaborator .sf-metadata-icon-drop-down {
+ padding-left: 5px;
+}
+
+.filters-list .selector-collaborator .selected-option-show {
+ text-overflow: unset;
+}
+
+.filters-list .selector-multiple-select .option:hover,
+.filters-list .selector-multiple-select .option.option-active,
+.filters-list .selector-collaborator .option:hover,
+.filters-list .selector-collaborator .option.option-active {
+ color: #212529;
+ background-color: #f7f7f7;
+}
+
+.filters-list .selector-multiple-select .option.option-active .select-option-name,
+.filters-list .selector-collaborator .option.option-active .select-option-name {
+ color: #212529;
+}
+
+.filters-list .selected-option .multiple-select-option,
+.filters-list .selected-option .single-select-option {
+ margin: 0;
+ display: inline-block;
+}
+
+.filters-list .filter-term input {
+ display: flex;
+ width: 100%;
+ height: 38px;
+ background-color: #ffffff;
+ padding-left: 8px;
+ padding-right: 8px;
+ outline: none;
+ border-radius: 3px;
+ font-size: 0.875rem;
+}
+
+.filters-list .filter-term input:hover {
+ border-color: rgb(179, 179, 179);
+}
+
+.filters-list .filter-term input.disabled:hover {
+ border-color: rgba(0, 40, 100, 0.12);
+}
+
+.filters-list .filter-term input:hover:focus {
+ border-color: #1991eb;
+}
+
+.filters-list .filter-term input:focus {
+ color: #495057;
+ background-color: #fff;
+ border-color: #1991eb;
+ outline: 0;
+ box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.filters-list .filter-term .date-picker-container input:focus {
+ color: #495057;
+ background-color: #fff;
+ border: 1px solid #fff;
+ outline: 0;
+}
+
+.filters-list .filter-term .date-picker-container table tr {
+ height: 30px;
+}
+
+.filters-list .filter-term input[type='checkbox'] {
+ width: inherit;
+}
+
+.filters-list .filter-term input[type='checkbox']:focus {
+ border: 0;
+ box-shadow: none;
+}
+
+.filter-term .filter-rate-list {
+ display: flex;
+ padding: 0 5px;
+ border: 1px solid rgba(0, 40, 100, 0.12);
+}
+
+.filters-list .delete-filter {
+ width: 12px;
+ height: 20px;
+ margin-right: 14px;
+ text-align: center;
+}
+
+.filters-list .delete-filter:hover {
+ cursor: pointer;
+}
+
+.filters-list .delete-filter .sf-metadata-icon-fork-number {
+ display: inline-block;
+ font-size: 12px;
+ color: #999;
+}
+
+.filters-list .multiple-option-name {
+ display: flex;
+ align-items: center;
+}
+
+.filters-list .multiple-check-icon,
+.filters-list .collaborator-check-icon {
+ display: inline-flex;
+ width: 20px;
+ height: 20px;
+ align-items: center;
+ text-align: center;
+}
+
+.filters-list .multiple-check-icon .sf-metadata-icon-check-mark,
+.filters-list .collaborator-check-icon .sf-metadata-icon-check-mark {
+ font-size: 12px;
+ color: #798d99;
+}
+
+.user-select-item,
+.collaborator {
+ display: inline-flex;
+ align-items: center;
+ height: 20px;
+ margin-right: 10px;
+ padding: 0 8px 0 2px;
+ font-size: 13px;
+ border-radius: 10px;
+ background: #eaeaea;
+}
+
+.filters-list .collaborator-show {
+ flex: 1;
+}
+
+.filters-list .collaborator-avatar-container {
+ width: 16px;
+}
+
+.filters-list .collaborator-avatar {
+ width: 16px;
+ height: 16px;
+ transform: translateY(-1px);
+ border-radius: 50%;
+}
+
+.filters-list .option .collaborator-avatar {
+ transform: translateY(-2px);
+}
+
+.filters-list .collaborator-name {
+ margin-left: 5px;
+ max-width: 200px;
+}
+
+.filters-list .option-collaborator {
+ display: flex;
+}
+
+.filters-list .collaborator-container {
+ flex: 1;
+}
+
+.filters-list .popover-add-tool {
+ border-top: none;
+ color: #666666;
+}
+
+.filters-list .popover-add-tool .popover-add-icon {
+ margin-right: 14px;
+}
+
+.filters-list .option-group {
+ max-height: 360px;
+ overflow: auto;
+}
+
+.filters-list .filter-item .sf-metadata-icon-fork-number:hover {
+ color: #666666;
+}
+
+.filters-list .filter-container-readonly .sf-metadata-select .selected-option-show,
+.filters-list .filter-conjunction-readonly .sf-metadata-select .selected-option-show {
+ width: 100%;
+}
+
+.filters-list .filter-checkbox-predicate .sf-metadata-select .selected-option-show {
+ width: 100%;
+}
+
+.dropdown-item .collaborator,
+.filters-list .option-group .option-group-content .collaborator {
+ background-color: unset;
+}
+
+.filters-list .sf-metadata-select .selected-option-show .remove-container {
+ display: none;
+}
+
+.filter-header-icon {
+ display: inline-block;
+ padding: 0 0.3125rem;
+ margin-left: -0.3125rem;
+}
+
+.filter-header-icon .sf-metadata-font {
+ font-size: 14px;
+ color: #aaa;
+ cursor: default;
+}
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js
new file mode 100644
index 0000000000..83cc771601
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import {
+ FILTER_COLUMN_OPTIONS,
+ ValidateFilter,
+} from '../../../../_basic';
+import FilterItemUtils from './filter-item-utils';
+import FilterItem from './filter-item';
+import { getColumnByKey } from '../../../../utils/column-utils';
+
+import './index.css';
+
+const propTypes = {
+ isLocked: PropTypes.bool,
+ className: PropTypes.string,
+ filters: PropTypes.array,
+ columns: PropTypes.array.isRequired,
+ filterConjunction: PropTypes.string.isRequired,
+ updateFilter: PropTypes.func.isRequired,
+ deleteFilter: PropTypes.func.isRequired,
+ updateFilterConjunction: PropTypes.func,
+ emptyPlaceholder: PropTypes.string,
+ value: PropTypes.object,
+ collaborators: PropTypes.array,
+ scheduleUpdate: PropTypes.func,
+ isPre: PropTypes.bool,
+};
+
+class FiltersList extends Component {
+
+ constructor(props) {
+ super(props);
+ this.conjunctionOptions = null;
+ this.columnOptions = null;
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ if (nextProps.columns !== this.props.columns) {
+ this.columnOptions = null;
+ }
+ }
+
+ updateFilter = (filterIndex, updatedFilter) => {
+ if (!updatedFilter) return;
+ this.props.updateFilter(filterIndex, updatedFilter);
+ };
+
+ deleteFilter = (index) => {
+ const { scheduleUpdate } = this.props;
+ this.props.deleteFilter(index, scheduleUpdate);
+ };
+
+ updateConjunction = (filterConjunction) => {
+ this.props.updateFilterConjunction(filterConjunction);
+ };
+
+ getConjunctionOptions = () => {
+ if (!this.conjunctionOptions) {
+ this.conjunctionOptions = FilterItemUtils.generatorConjunctionOptions();
+ }
+ return this.conjunctionOptions;
+ };
+
+ getFilterColumns = () => {
+ const { columns } = this.props;
+ return columns.filter(column => {
+ let { type } = column;
+ return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, type);
+ });
+ };
+
+ getColumnOptions = () => {
+ if (!this.columnOptions) {
+ const filterColumns = this.getFilterColumns();
+ this.columnOptions = filterColumns.map(column => {
+ return FilterItemUtils.generatorColumnOption(column);
+ });
+ }
+ return this.columnOptions;
+ };
+
+ renderFilterItem = (filter, index, errMsg, filterColumn) => {
+ const { filterConjunction, value } = this.props;
+ const conjunctionOptions = this.getConjunctionOptions();
+ const columnOptions = this.getColumnOptions();
+ return (
+
+
+
+
+
+
+ {this.renderConjunction()}
+
+
+
+
+
+
+
+ {isDateColumn(filterColumn) && isNeedShowTermModifier && (
+
+
+ )}
+
+ {this.renderFilterTerm(filterColumn)}
+
+ {showToolTip &&
+
+
+
+ {gettext('Filter tip message')}
+
+
+ }
+ {this.renderErrorMessage()}
+
+ {isEmpty &&
+ );
+ }
+}
+
+FiltersList.propTypes = propTypes;
+
+export default FiltersList;
diff --git a/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.css b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.css
new file mode 100644
index 0000000000..2edda2c52e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.css
@@ -0,0 +1,110 @@
+.groupby-popover .popover {
+ max-width: none;
+ min-width: 400px;
+}
+
+.groupby-popover .groupbys {
+ min-height: 80px;
+ max-height: 300px;
+ padding: 15px;
+}
+
+.groupby-popover .empty-groupbys-container {
+ min-height: 80px;
+ padding: 16px;
+}
+
+.groupby-popover .groupbys .groupby-item {
+ display: flex;
+ align-items: center;
+ padding: 0.25rem 0;
+}
+
+.groupby-popover .groupby-item .option-group {
+ overflow: auto;
+ max-height: 360px;
+}
+
+.groupby-popover .groupby-item .condition {
+ display: flex;
+ flex: 1 1;
+}
+
+.groupby-popover .groupby-item .condition > div {
+ height: 38px;
+ line-height: 38px;
+}
+
+.groupby-popover .groupby-item .groupby-column {
+ width: 150px;
+}
+
+.groupby-popover .groupby-item .groupby-count-type,
+.groupby-popover .groupby-item .groupby-predicate {
+ width: 130px;
+}
+
+.groupby-popover .groupby-item .sf-metadata-icon-exclamation-triangle {
+ color: rgb(205, 32, 31);
+}
+
+.groupby-popover .column-icon {
+ display: inline-block;
+ padding: 0 0.3125rem;
+ margin-left: -0.3125rem;
+}
+
+.groupby-popover .column-icon .sf-metadata-font {
+ font-size: 14px;
+ color: #aaa;
+ cursor: default;
+}
+
+.groupby-popover .delete-groupby {
+ width: 12px;
+ height: 20px;
+ margin-right: 14px;
+ text-align: center;
+}
+
+.groupby-popover .empty-groupbys {
+ color: #666666;
+}
+
+.groupby-popover .delete-groupby .sf-metadata-icon-fork-number {
+ display: inline-block;
+ font-size: 12px;
+ color: #999;
+ cursor: pointer;
+}
+
+.groupby-popover .delete-groupby .sf-metadata-icon-fork-number:hover {
+ color: #666666;
+}
+
+.groupby-popover .popover-add-tool {
+ border-top: none;
+ color: #666666;
+}
+
+.groupby-popover .popover-add-tool .popover-add-icon {
+ margin-right: 14px;
+}
+
+.groupby-popover .groupbys-tools {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+ padding: 0 15px 15px;
+ font-size: 14px;
+ color: #666666;
+}
+
+.groupby-popover .groupbys-tools .groupbys-tool-item:first-child {
+ margin-right: 20px;
+}
+
+.groupby-popover .groupbys-tools .groupbys-tool-item:hover {
+ cursor: pointer;
+ color: #666666;
+}
diff --git a/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx
new file mode 100644
index 0000000000..20c3c722ca
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/index.jsx
@@ -0,0 +1,317 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+import { UncontrolledPopover, Button } from 'reactstrap';
+import {
+ COLUMNS_ICON_CONFIG,
+ DISPLAY_GROUP_DATE_GRANULARITY,
+ DISPLAY_GROUP_GEOLOCATION_GRANULARITY,
+ MAX_GROUP_LEVEL,
+ SORT_TYPE,
+} from 'sf-metadata-utils';
+import CommonAddTool from '../../common/common-add-tool';
+import GroupbyItem from '../groupby-popover-widgets/groupby-item';
+import GroupbyService from '../../services/groupby-service';
+import { isEsc } from '../../utils/hotkey';
+import { getColumnByKey } from '../../../utils/column-utils';
+import { getEventClassName } from '../../utils/utils';
+import { generateDefaultGroupby, getDefaultCountType, getGroupbyColumns } from '../../../utils/groupby-utils';
+import eventBus from '../../../utils/event-bus';
+import { GROUPBY_ACTION_TYPE, GROUPBY_DATE_GRANULARITY_LIST, GROUPBY_GEOLOCATION_GRANULARITY_LIST } from '../../constants/groupby';
+import { EVENT_BUS_TYPE } from '../../../constants';
+
+import './index.css';
+
+class GroupbyPopover extends Component {
+
+ constructor(props) {
+ super(props);
+ const { groupbys, columns } = this.props;
+ this.groupbyService = new GroupbyService({ groupbys });
+ this.columnsOptions = this.createColumnsOptions(columns);
+ this.geoCountTypeOptions = this.createGeoCountTypeOptions();
+ this.dateCountTypeOptions = this.createDateCountTypeOptions();
+ this.sortTypeOptions = this.createSortTypeOptions();
+ this.state = {
+ groupbys: this.groupbyService.getGroupbys(),
+ };
+ this.isSelectOpen = false;
+ }
+
+ componentDidMount() {
+ document.addEventListener('click', this.hideDTablePopover, true);
+ document.addEventListener('keydown', this.onHotKey);
+ this.unsubscribeOpenSelect = eventBus.subscribe(EVENT_BUS_TYPE.OPEN_SELECT, this.setSelectStatus);
+ }
+
+ componentDidUpdate(prevProps) {
+ const { columns } = this.props;
+ if (columns !== prevProps.columns) {
+ this.columnsOptions = this.createColumnsOptions(columns);
+ }
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('click', this.hideDTablePopover, true);
+ document.removeEventListener('keydown', this.onHotKey);
+ this.unsubscribeOpenSelect();
+ }
+
+ hideDTablePopover = (e) => {
+ if (this.groupbysWrapper && !getEventClassName(e).includes('popover') && !this.groupbysWrapper.contains(e.target)) {
+ this.props.onGroupbyPopoverToggle();
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+ };
+
+ onHotKey = (e) => {
+ if (isEsc(e) && !this.isSelectOpen) {
+ e.preventDefault();
+ this.props.onGroupbyPopoverToggle();
+ }
+ };
+
+ setSelectStatus = (status) => {
+ this.isSelectOpen = status;
+ };
+
+ createColumnsOptions = (columns = []) => {
+ const validColumns = getGroupbyColumns(columns);
+ return validColumns.map((column) => {
+ const { type, name } = column;
+ return {
+ value: { column },
+ label: (
+ {emptyPlaceholder}
}
+ {!isEmpty &&
+ filters.map((filter, index) => {
+ const { column_key } = filter;
+ const { error_message } = ValidateFilter.validate(filter, columns);
+ const filterColumn = getColumnByKey(column_key, columns) || {};
+ return this.renderFilterItem(filter, index, error_message, filterColumn);
+ })
+ }
+ this.groupbysWrapper = ref}
+ onClick={this.onPopoverInsideClick}
+ >
+ this.addGroupby(scheduleUpdate)}
+ footerName={intl.get('Add_group')}
+ className='popover-add-tool'
+ addIconClassName='popover-add-icon'
+ />
+ }
+ {!isEmpty &&
+
+ )}
+
+ {isEmpty ?
+
+ {groupbysLen < MAX_GROUP_LEVEL &&
+ {intl.get('No_groupings')}
:
+ this.renderGroupbys(scheduleUpdate)
+ }
+
+ {intl.get('Collapse_all')}
+ {intl.get('Expand_all')}
+
+ }
+ {this.isNeedSubmit() && (
+
+
+
+
+ )}
+
+
+
+ {gettext('Group tip message')}
+
+
+ );
+ };
+
+ render() {
+ const { index, column, groupby, columnsOptions, sortTypeOptions, scheduleUpdate } = this.props;
+ const { name, type: columnType } = column;
+ const { sort_type } = groupby;
+ const selectedColumn = {
+ label: (
+
+
+ );
+ }
+}
+
+GroupbyItem.propTypes = {
+ index: PropTypes.number,
+ column: PropTypes.object,
+ groupby: PropTypes.object,
+ columnsOptions: PropTypes.array,
+ geoCountTypeOptions: PropTypes.array,
+ dateCountTypeOptions: PropTypes.array,
+ sortTypeOptions: PropTypes.array,
+ onDeleteGroupby: PropTypes.func,
+ onSelectColumn: PropTypes.func,
+ onSelectCountType: PropTypes.func,
+ onSelectSortType: PropTypes.func,
+ scheduleUpdate: PropTypes.func,
+};
+
+export default GroupbyItem;
diff --git a/frontend/src/metadata/metadata-view/components/popover/hidden-column-popover/hide-column-item.js b/frontend/src/metadata/metadata-view/components/popover/hidden-column-popover/hide-column-item.js
new file mode 100644
index 0000000000..71ddff8c79
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/popover/hidden-column-popover/hide-column-item.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon, Switch } from '@seafile/sf-metadata-ui-component';
+
+class HideColumnItem extends React.PureComponent {
+
+ static defaultProps = {
+ readonly: false,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ setting: null
+ };
+ }
+
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if (JSON.stringify(nextProps.setting) !== JSON.stringify(prevState.setting)) {
+ return { setting: nextProps.setting };
+ }
+ return null;
+ }
+
+ onUpdateFieldSetting = (event) => {
+ event.nativeEvent.stopImmediatePropagation();
+ const value = event.target.checked;
+ const { setting } = this.state;
+ if (setting.isChecked === value) {
+ return;
+ }
+ const newSetting = Object.assign({}, setting, { isChecked: value });
+ this.setState({ setting: newSetting }, () => {
+ this.props.onUpdateFieldSetting(newSetting);
+ });
+ };
+
+ render() {
+ const { setting } = this.state;
+ const { readonly } = this.props;
+ const placeholder = (
+ <>
+ this.props.onDeleteGroupby(index, e, scheduleUpdate)}>
+
+
+
+
+
+ this.props.onSelectColumn(value, index)}
+ options={columnsOptions}
+ searchable={true}
+ searchPlaceholder={gettext('Search column')}
+ noOptionsPlaceholder={gettext('No results')}
+ />
+
+ {isShowGroupCountType(column) && (
+
+ {gettext(selectedCountType)} } : ''}
+ onSelectOption={(value) => this.props.onSelectCountType(value, index)}
+ options={countTypeOptions}
+ />
+
+ )}
+
+ {(!column.key || SORT_COLUMN_OPTIONS.includes(columnType)) &&
+ this.props.onSelectSortType(value, index)}
+ options={sortTypeOptions}
+ />
+ }
+
+ {this.renderTipMessage()}
+ this.popoverRef = ref} onClick={this.onPopoverInsideClick}>
+
+
+
+
+
+
+ {isEmpty &&
+
+
+ }
+ {!isEmpty &&
+ <>
+ {intl.get('No_columns_available_to_be_hidden')}
+
+ {fieldSettings.map(setting => {
+ return (
+
+ {(!this.state.searchVal && !readonly) &&
+
+
+ }
+
+ }
+ {intl.get('Hide_all')}
+ {intl.get('Show_all')}
+
+ {!readonly &&
+
+ );
+ };
+
+ onPopoverInsideClick = (e) => {
+ e.stopPropagation();
+ };
+
+ render() {
+ const { target, readonly } = this.props;
+ const { sorts } = this.state;
+ const isEmpty = isSortsEmpty(sorts);
+ return (
+ this.deleteSort(event, index)}>
+
+
+ }
+
+
+
+ this.onSelectColumn(value, index)}
+ options={this.columnsOptions}
+ searchable={true}
+ searchPlaceholder={intl.get('Search_column')}
+ noOptionsPlaceholder={intl.get('No_results')}
+ />
+
+
+ this.onSelectSortType(value, index)}
+ options={this.sortTypeOptions}
+ />
+
+ this.sortPopoverRef = ref} onClick={this.onPopoverInsideClick}>
+
+
+ {isEmpty ?
+
+ {!readonly &&
+ {intl.get('No_sorts')}
:
+ this.renderSortsList()
+ }
+
+
+
+
+ )}
+
+
+
+ );
+ }
+}
+
+HorizontalScrollbar.propTypes = propTypes;
+
+export default HorizontalScrollbar;
diff --git a/frontend/src/metadata/metadata-view/components/scrollbar/index.js b/frontend/src/metadata/metadata-view/components/scrollbar/index.js
new file mode 100644
index 0000000000..b866e9c69e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/scrollbar/index.js
@@ -0,0 +1,8 @@
+import RightScrollbar from './right-scrollbar';
+import HorizontalScrollbar from './horizontal-scrollbar';
+import './scrollbar.css';
+
+export {
+ RightScrollbar,
+ HorizontalScrollbar,
+};
diff --git a/frontend/src/metadata/metadata-view/components/scrollbar/right-scrollbar.js b/frontend/src/metadata/metadata-view/components/scrollbar/right-scrollbar.js
new file mode 100644
index 0000000000..668adc6bd2
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/scrollbar/right-scrollbar.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HEADER_HEIGHT_TYPE, isEmptyObject, Z_INDEX } from '../../_basic';
+import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT } from '../../constants';
+
+const propTypes = {
+ table: PropTypes.object.isRequired,
+ onScrollbarScroll: PropTypes.func.isRequired,
+ onScrollbarMouseUp: PropTypes.func.isRequired,
+};
+
+class RightScrollbar extends React.Component {
+
+ isSelfScroll = true;
+
+ setScrollTop = (scrollTop) => {
+ this.isSelfScroll = false;
+ this.rightScrollContainer.scrollTop = scrollTop;
+ };
+
+ onScroll = (event) => {
+ event.stopPropagation();
+
+ // only update canvas's scrollTop via scroll by itself.
+ // e.g. forbid to update canvas's scrollTop when the scrollbar's scrollTop changed by other component
+ if (!this.isSelfScroll) {
+ this.isSelfScroll = true;
+ return;
+ }
+ const { scrollTop } = event.target;
+ this.props.onScrollbarScroll(scrollTop);
+ };
+
+ onMouseUp = (event) => {
+ if (this.props.onScrollbarMouseUp) {
+ this.props.onScrollbarMouseUp(event);
+ }
+ };
+
+ getScrollbarStyle = () => {
+ const component = window.sfMetadataBody;
+ if (component && component.resultRef) {
+ const resultRef = component.resultRef;
+ return { height: resultRef.scrollHeight };
+ }
+ return {};
+ };
+
+ getGridHeaderHeight = () => {
+ const headerSettings = this.props.table.header_settings || {};
+ const headerHeight = isEmptyObject(headerSettings) ? HEADER_HEIGHT_TYPE.DEFAULT : headerSettings.header_height;
+ const height = headerHeight === HEADER_HEIGHT_TYPE.DOUBLE ? GRID_HEADER_DOUBLE_HEIGHT : GRID_HEADER_DEFAULT_HEIGHT;
+ return height;
+ };
+
+ getContainerStyle = () => {
+ const style = {};
+ const component = window.sfMetadataBody;
+ if (component && component.resultContentRef) {
+ style.height = component.resultContentRef.clientHeight;
+ style.zIndex = Z_INDEX.SCROLL_BAR;
+ }
+ /* page-header + seatable-app-header + table-header-top + first row(grid-header) */
+ style.top = 50 + 10 + 48 + this.getGridHeaderHeight();
+ /* sf-metadata-wrapper have 10px margin */
+ style.right = '10px';
+ return style;
+ };
+
+ setScrollbarRef = (ref) => {
+ this.scrollbar = ref;
+ };
+
+ setContainerRef = (ref) => {
+ this.rightScrollContainer = ref;
+ };
+
+ render() {
+ const containerStyle = this.getContainerStyle();
+ const scrollbarStyle = this.getScrollbarStyle();
+
+ return (
+
+
+
+ );
+ }
+}
+
+RightScrollbar.propTypes = propTypes;
+
+export default RightScrollbar;
diff --git a/frontend/src/metadata/metadata-view/components/scrollbar/scrollbar.css b/frontend/src/metadata/metadata-view/components/scrollbar/scrollbar.css
new file mode 100644
index 0000000000..e46971423e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/scrollbar/scrollbar.css
@@ -0,0 +1,32 @@
+.sf-metadata-result-container.windows-browser::-webkit-scrollbar,
+.sf-metadata-result-table-content::-webkit-scrollbar {
+ display: none;
+ width: 0;
+ height: 0;
+}
+
+.horizontal-scrollbar-container {
+ height: 20px;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 30px;
+ background-color: transparent;
+ overflow: auto;
+}
+
+.horizontal-scrollbar-inner {
+ height: 1px;
+}
+
+.right-scrollbar-container {
+ width: 20px;
+ position: fixed;
+ overflow: auto;
+ transition: right 0.25s ease-in-out 0s;
+}
+
+.right-scrollbar-container .right-scrollbar-inner {
+ width: 1px;
+}
diff --git a/frontend/src/metadata/metadata-view/components/table/container.js b/frontend/src/metadata/metadata-view/components/table/container.js
new file mode 100644
index 0000000000..bf4232c1f0
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/container.js
@@ -0,0 +1,187 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toaster } from '@seafile/sf-metadata-ui-component';
+import { EVENT_BUS_TYPE } from '../../constants';
+import { CommonlyUsedHotkey, getErrorMsg } from '../../_basic';
+import { gettext } from '../../utils';
+import { useMetadata } from '../../hooks';
+import TableTool from './table-tool';
+import TableMain from './table-main';
+import RecordDetailsDialog from '../record-details-dialog';
+
+import './index.css';
+
+const Container = () => {
+ const [isLoadingMore, setLoadingMore] = useState(false);
+ const { metadata, errorMsg, extendMetadataRows } = useMetadata();
+ const containerRef = useRef(null);
+
+ const onKeyDown = useCallback((event) => {
+ if (event.target.className.includes('editor-main')) return;
+ if (CommonlyUsedHotkey.isModF(event)) {
+ event.preventDefault();
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SEARCH_CELLS);
+ return;
+ }
+ }, []);
+
+ const isGroupView = useCallback(() => {
+ // todo
+ return false;
+ }, []);
+
+ const onSelectCell = useCallback(() => {
+ // todo
+ }, []);
+
+ const tableChanged = useCallback(() => {
+ // todo
+ }, []);
+
+ const handleTableError = useCallback((error) => {
+ const errorMsg = getErrorMsg(error);
+ toaster.danger(gettext(errorMsg));
+ }, []);
+
+ const updateMetadata = useCallback(() => {
+ // todo
+ }, []);
+
+ const loadMore = useCallback(() => {
+ if (!metadata.hasMore) return;
+ setLoadingMore(true);
+ extendMetadataRows((flag) => {
+ setLoadingMore(false);
+ });
+ }, [metadata, extendMetadataRows]);
+
+ const modifyRecords = useCallback((rowIds, idRowUpdates, idOriginalRowUpdates, idOldRowData, idOriginalOldRowData, isCopyPaste = false) => {
+ // todo: store op
+ }, []);
+
+ const modifyRecord = useCallback((rowId, updates, oldRowData, originalUpdates, originalOldRowData) => {
+ const rowIds = [rowId];
+ const idRowUpdates = { [rowId]: updates };
+ const idOriginalRowUpdates = { [rowId]: originalUpdates };
+ const idOldRowData = { [rowId]: oldRowData };
+ const idOriginalOldRowData = { [rowId]: originalOldRowData };
+ modifyRecords(rowIds, idRowUpdates, idOriginalRowUpdates, idOldRowData, idOriginalOldRowData);
+ }, [modifyRecords]);
+
+ const getAdjacentRowsIds = useCallback((rowIds) => {
+ const rowIdsLen = metadata.row_ids.length;
+ let rowIdsInOrder = [];
+ let upperRowIds = [];
+ let belowRowIds = [];
+ let rowIdMap = {};
+ rowIds.forEach(rowId => rowIdMap[rowId] = rowId);
+ metadata.row_ids.forEach((rowId, index) => {
+ if (!rowIdMap[rowId]) {
+ return;
+ }
+ const upperRowId = index === 0 ? null : metadata.row_ids[index - 1];
+ const belowRowId = index === rowIdsLen - 1 ? null : metadata.row_ids[index + 1];
+ rowIdsInOrder.push(rowId);
+ upperRowIds.push(upperRowId);
+ belowRowIds.push(belowRowId);
+ });
+ return { rowIdsInOrder, upperRowIds, belowRowIds };
+ }, [metadata]);
+
+ const modifyFilters = useCallback((filters, filterConjunction) => {
+ // modifyFilters
+ }, []);
+
+ const modifySorts = useCallback((sorts) => {
+ // modifySorts
+ }, []);
+
+ const modifyGroupbys = useCallback(() => {
+ // modifyGroupbys
+ }, []);
+
+ const modifyHiddenColumns = useCallback(() => {
+ // modifyHiddenColumns
+ }, []);
+
+ const recordGetterById = useCallback((recordId) => {
+ return metadata.id_row_map[recordId];
+ }, [metadata]);
+
+ const recordGetter = useCallback((recordIndex) => {
+ const recordId = metadata.row_ids[recordIndex];
+ return recordId && recordGetterById(recordId);
+ }, [metadata, recordGetterById]);
+
+ const groupRecordGetter = useCallback((groupRecordIndex) => {
+ if (!window.sfMetadataBody || !window.sfMetadataBody.getGroupRecordByIndex) {
+ return null;
+ }
+ const groupRecord = window.sfMetadataBody.getGroupRecordByIndex(groupRecordIndex);
+ const recordId = groupRecord.rowId;
+ return recordId && recordGetterById(recordId);
+ }, [recordGetterById]);
+
+ const recordGetterByIndex = useCallback(({ isGroupView, groupRecordIndex, recordIndex }) => {
+ if (isGroupView) groupRecordGetter(groupRecordIndex);
+ return recordGetter(recordIndex);
+ }, [groupRecordGetter, recordGetter]);
+
+ const getTableContentWidth = useCallback(() => {
+ return containerRef?.current?.offsetWidth || 0;
+ }, [containerRef]);
+
+ const getTableContentLeft = useCallback(() => {
+ return containerRef?.current?.getBoundingClientRect()?.left || 0;
+ }, [containerRef]);
+
+ useEffect(() => {
+ document.addEventListener('keydown', onKeyDown);
+ const unsubscribeSelectCell = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SELECT_CELL, onSelectCell);
+ const unsubscribeServerTableChanged = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SERVER_TABLE_CHANGED, tableChanged);
+ const unsubscribeTableChanged = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_TABLE_CHANGED, tableChanged);
+ const unsubscribeHandleTableError = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TABLE_ERROR, handleTableError);
+ const unsubscribeUpdateRows = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.UPDATE_TABLE_ROWS, updateMetadata);
+ return () => {
+ document.removeEventListener('keydown', onKeyDown);
+ unsubscribeSelectCell();
+ unsubscribeServerTableChanged();
+ unsubscribeTableChanged();
+ unsubscribeHandleTableError();
+ unsubscribeUpdateRows();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+ <>
+
+
+
+ {errorMsg && (
+ {gettext(errorMsg)}
)}
+ {!errorMsg && (
+
+
+ )}
+ 0 })}>
+
+ );
+
+};
+
+TableMain.propTypes = {
+ metadata: PropTypes.object.isRequired,
+ modifyRecord: PropTypes.func,
+ modifyRecords: PropTypes.func,
+ loadMore: PropTypes.func,
+ loadAll: PropTypes.func,
+ searchResult: PropTypes.object,
+};
+
+export default TableMain;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/actions-cell.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/actions-cell.jsx
new file mode 100644
index 0000000000..fd6508e75e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/actions-cell.jsx
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Tooltip } from 'reactstrap';
+import { SEQUENCE_COLUMN_WIDTH } from '../../../../constants';
+import { isMobile, gettext } from '../../../../utils';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+
+class ActionsCell extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isLockedRowTooltipShow: false,
+ };
+ }
+
+ onCellMouseEnter = () => {
+ const { isLocked } = this.props;
+ if (!isLocked || isMobile) return;
+ this.timer = setTimeout(() => {
+ this.setState({ isLockedRowTooltipShow: true });
+ }, 500);
+ };
+
+ onCellMouseLeave = () => {
+ const { isLocked } = this.props;
+ if (!isLocked || isMobile) return;
+ if (this.timer) {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ this.setState({ isLockedRowTooltipShow: false });
+ };
+
+ getLockedRowTooltip = () => {
+ const { recordId } = this.props;
+ return (
+
+ {!isSelected &&
+ );
+ }
+}
+
+ActionsCell.propTypes = {
+ isLocked: PropTypes.bool,
+ isSelected: PropTypes.bool,
+ isLastFrozenCell: PropTypes.bool,
+ recordId: PropTypes.string,
+ index: PropTypes.number,
+ height: PropTypes.number,
+ onSelectRecord: PropTypes.func,
+ onRowExpand: PropTypes.func,
+};
+
+export default ActionsCell;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/btn-add-record.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/btn-add-record.jsx
new file mode 100644
index 0000000000..8ef42af51b
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/btn-add-record.jsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
+import { SEQUENCE_COLUMN } from '../../../../_basic';
+import { gettext } from '../../../../utils';
+
+class BtnAddRecord extends React.Component {
+
+ componentDidMount() {
+ this.initFrozenColumnsStyle();
+ }
+
+ shouldComponentUpdate(nextProps) {
+ return (
+ nextProps.isGroupView !== this.props.isGroupView ||
+ nextProps.groupPathString !== this.props.groupPathString ||
+ nextProps.height !== this.props.height ||
+ nextProps.width !== this.props.width ||
+ nextProps.top !== this.props.top ||
+ nextProps.left !== this.props.left ||
+ nextProps.iconWidth !== this.props.iconWidth ||
+ nextProps.lastFrozenColumnKey !== this.props.lastFrozenColumnKey ||
+ nextProps.scrollLeft !== this.props.scrollLeft
+ );
+ }
+
+ initFrozenColumnsStyle = () => {
+ const { isGroupView, lastFrozenColumnKey, scrollLeft } = this.props;
+ let style = {
+ position: 'absolute',
+ marginLeft: scrollLeft > 0 ? scrollLeft + 'px' : '0px',
+ };
+ if (isGroupView) {
+ if (!lastFrozenColumnKey) {
+ style.marginLeft = '0px';
+ }
+ }
+ this.frozenColumns.style.position = style.position;
+ this.frozenColumns.style.marginLeft = style.marginLeft;
+ };
+
+ renderBtn = () => {
+ const { height, iconWidth, lastFrozenColumnKey, isGroupView, groupPathString } = this.props;
+ let iconStyle = {
+ height,
+ width: iconWidth,
+ zIndex: SEQUENCE_COLUMN,
+ };
+ if (isGroupView) {
+ if (!lastFrozenColumnKey) {
+ iconStyle.marginLeft = '0px';
+ }
+ }
+ const btnClassName = classnames('table-btn-add-record', { 'table-last--frozen': isGroupView || !lastFrozenColumnKey });
+ let btnId = 'btn_table_add_record__frozen';
+ if (isGroupView) {
+ btnId += groupPathString;
+ }
+ return (
+ <>
+ {index + 1}
}
+
+
+
+
+
+
+
+ this.frozenColumns = ref}
+ onClick={this.props.onAddRecord}
+ id={btnId}
+ >
+ +
+
+ {gettext('Add record')}
+
+
+
+ +
+
+
+ );
+ };
+
+ render() {
+ const { isGroupView, height, top, left, width } = this.props;
+ let btnStyle = {
+ height,
+ width,
+ };
+ if (isGroupView) {
+ btnStyle.top = top;
+ btnStyle.left = left;
+ }
+ return (
+
+ {this.renderBtn()}
+
+
+ );
+ }
+}
+
+BtnAddRecord.propTypes = {
+ isGroupView: PropTypes.bool,
+ groupPathString: PropTypes.string,
+ height: PropTypes.number,
+ width: PropTypes.number,
+ iconWidth: PropTypes.number,
+ top: PropTypes.number,
+ left: PropTypes.number,
+ scrollLeft: PropTypes.number,
+ lastFrozenColumnKey: PropTypes.string,
+ onAddRecord: PropTypes.func,
+};
+
+export default BtnAddRecord;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/column-dropdown-item.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/column-dropdown-item.jsx
new file mode 100644
index 0000000000..11ba4c6e36
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/column-dropdown-item.jsx
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledTooltip, DropdownItem } from 'reactstrap';
+import { Icon } from 'seafile/sf-metadata-ui-component';
+
+export default class ColumnDropdownItem extends Component {
+
+ static propTypes = {
+ onClick: PropTypes.func.isRequired,
+ onMouseEnter: PropTypes.func.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ id: PropTypes.string.isRequired,
+ iconSvg: PropTypes.string,
+ iconClassName: PropTypes.string,
+ menuText: PropTypes.string.isRequired,
+ disabledText: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ };
+
+ static defaultProps = {
+ onClick: () => {},
+ onMouseEnter: () => {},
+ disabled: false,
+ className: '',
+ };
+
+ state = {
+ canToolTip: false,
+ };
+
+ componentDidMount() {
+ if (this.props.disabled) {
+ this.setState({ canToolTip: true });
+ }
+ }
+
+ onClick = (e) => {
+ e.preventDefault();
+ };
+
+ renderIcon = () => {
+ const { iconSvg, iconClassName } = this.props;
+ if (iconClassName) {
+ return ;
+ }
+ if (iconSvg) {
+ return
+ this.leftHeader = ref}
+ isExpanded={isExpanded}
+ firstColumnFrozen={firstColumnFrozen}
+ lastColumnFrozen={lastColumnFrozen}
+ firstColumnKey={firstColumnKey}
+ width={leftPaneWidth}
+ maxLevel={maxLevel}
+ group={group}
+ formulaRow={formulaRow}
+ onExpandGroupToggle={this.props.onExpandGroupToggle}
+ />
+
+ );
+ }
+}
+
+GroupContainerLeft.propTypes = {
+ isExpanded: PropTypes.bool,
+ firstColumnFrozen: PropTypes.bool,
+ lastColumnFrozen: PropTypes.bool,
+ firstColumnKey: PropTypes.string,
+ maxLevel: PropTypes.number,
+ group: PropTypes.object,
+ formulaRow: PropTypes.object,
+ leftPaneWidth: PropTypes.number,
+ height: PropTypes.number,
+ onExpandGroupToggle: PropTypes.func,
+};
+
+export default GroupContainerLeft;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js
new file mode 100644
index 0000000000..5f6a8fe052
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import GroupHeaderRight from './group-header-right';
+
+class GroupContainerRight extends Component {
+
+ fixedFrozenDOMs = (scrollLeft, scrollTop) => {
+ this.rightHeader && this.rightHeader.fixedFrozenDOMs(scrollLeft, scrollTop);
+ };
+
+ cancelFixFrozenDOMs = (scrollLeft) => {
+ this.rightHeader && this.rightHeader.cancelFixFrozenDOMs(scrollLeft);
+ };
+
+ render() {
+ const {
+ group, isExpanded, columns, summaryConfigs, rightPaneWidth, leftPaneWidth, height,
+ groupOffsetLeft, lastFrozenColumnKey,
+ } = this.props;
+ const groupContainerRightStyle = {
+ left: leftPaneWidth,
+ width: rightPaneWidth,
+ height,
+ };
+
+ return (
+
+ this.rightHeader = ref}
+ groupOffsetLeft={groupOffsetLeft}
+ lastFrozenColumnKey={lastFrozenColumnKey}
+ group={group}
+ isExpanded={isExpanded}
+ columns={columns}
+ summaryConfigs={summaryConfigs}
+ getTableContentLeft={this.props.getTableContentLeft}
+ />
+
+ );
+ }
+}
+
+GroupContainerRight.propTypes = {
+ group: PropTypes.object,
+ isExpanded: PropTypes.bool,
+ columns: PropTypes.array,
+ summaryConfigs: PropTypes.object,
+ rightPaneWidth: PropTypes.number,
+ leftPaneWidth: PropTypes.number,
+ height: PropTypes.number,
+ groupOffsetLeft: PropTypes.number,
+ lastFrozenColumnKey: PropTypes.string,
+ getTableContentLeft: PropTypes.func,
+};
+
+export default GroupContainerRight;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.css b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.css
new file mode 100644
index 0000000000..828f03d97b
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.css
@@ -0,0 +1,464 @@
+.canvas-groups-rows {
+ position: relative;
+ overflow: hidden;
+}
+
+.canvas-groups-rows .sf-metadata-result-table-cell {
+ background-color: #fff;
+}
+
+.canvas-groups-rows .group-item {
+ position: absolute;
+ overflow: hidden;
+}
+
+.canvas-groups-rows .group-container-left,
+.canvas-groups-rows .group-container-right {
+ position: absolute;
+ height: 100%;
+}
+
+/* border-radius of group container */
+.canvas-groups-rows .group-item .group-container-left {
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+
+.canvas-groups-rows .group-item .group-container-right {
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+/* background of group container */
+.canvas-groups-rows .group-level-1 .group-container-left,
+.canvas-groups-rows .group-level-1 .group-container-right {
+ background-color: #f7f7f7;
+}
+
+.canvas-groups-rows .group-level-2 .group-container-left,
+.canvas-groups-rows .group-level-2 .group-container-right {
+ background-color: #ededed;
+}
+
+.canvas-groups-rows .group-level-3 .group-container-left,
+.canvas-groups-rows .group-level-3 .group-container-right {
+ background-color: #e3e3e3;
+}
+
+/* border-color of group container */
+.canvas-groups-rows .group-level-2 .group-container-left {
+ border-left: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .group-level-3 .group-container-left {
+ border-left: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .group-level-2 .group-container-right {
+ border-right: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .group-level-3 .group-container-right {
+ border-right: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .expanded-group.group-level-2 .group-container-left,
+.canvas-groups-rows .expanded-group.group-level-2 .group-container-right {
+ border-bottom: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .expanded-group.group-level-3 .group-container-left,
+.canvas-groups-rows .expanded-group.group-level-3 .group-container-right {
+ border-bottom: 1px solid #c1c1c1;
+}
+
+/* border-color of group header */
+.canvas-groups-rows .group-level-1 .group-header-left {
+ border-left: 1px solid #cacaca;
+}
+
+.canvas-groups-rows .group-level-1 .group-header-right {
+ border-right: 1px solid #cacaca;
+}
+
+.canvas-groups-rows .group-level-1 .group-header-left,
+.canvas-groups-rows .group-level-1 .group-header-right {
+ border-top: 1px solid #cacaca;
+ border-bottom: 1px solid #cacaca;
+}
+
+.canvas-groups-rows .group-level-2 .group-header-left,
+.canvas-groups-rows .group-level-2 .group-header-right {
+ border-top: 1px solid #c1c1c1;
+ border-bottom: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .group-level-3 .group-header-left,
+.canvas-groups-rows .group-level-3 .group-header-right {
+ border-top: 1px solid #c1c1c1;
+ border-bottom: 1px solid #c1c1c1;
+}
+
+.canvas-groups-rows .expanded-group .group-header-left,
+.canvas-groups-rows .expanded-group .group-header-right {
+ border-bottom: none;
+}
+
+/* group backdrop */
+.canvas-groups-rows .group-item .group-backdrop {
+ position: absolute;
+ left: 0;
+}
+
+.group-level-2 .canvas-groups-rows .group-item .group-backdrop {
+ background-color: #ededed;
+}
+
+.group-level-3 .canvas-groups-rows .group-item .group-backdrop {
+ background-color: #e3e3e3;
+}
+
+.group-level-4 .canvas-groups-rows .group-item .group-backdrop {
+ background-color: #dedede;
+}
+
+/* group-header-left */
+.canvas-groups-rows .group-header-left {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ border-top-left-radius: 5px;
+ background-color: inherit;
+ overflow: hidden;
+}
+
+.canvas-groups-rows .folded-group .group-header-left {
+ border-bottom-left-radius: 5px;
+}
+
+.canvas-groups-rows.single-column .group-level-1 .group-container-left,
+.canvas-groups-rows.single-column .group-level-1 .group-header-cell {
+ border-top-right-radius: 5px;
+}
+
+.canvas-groups-rows.single-column .group-level-1 .group-header-cell {
+ border-right: 1px solid #cacaca !important;
+}
+
+.canvas-groups-rows.single-column .folded-group .group-container-left,
+.canvas-groups-rows.single-column .folded-group .group-header-cell,
+.canvas-groups-rows.single-column.frozen .table-btn-add-record {
+ border-bottom-right-radius: 5px;
+}
+
+/* group header cell */
+.canvas-groups-rows .group-level-1 .group-header-cell {
+ border-right: 1px solid #ededed;
+}
+
+.canvas-groups-rows .group-level-2 .group-header-cell {
+ border-right: 1px solid #e5e5e5;
+}
+
+.canvas-groups-rows .group-level-3 .group-header-cell {
+ border-right: 1px solid #dadada;
+}
+
+.canvas-groups-rows .group-container-right .group-header-cell:last-child {
+ border-right: none;
+}
+
+.canvas-groups-rows.all-columns-frozen .group-level-2 .table-last--frozen,
+.canvas-groups-rows.all-columns-frozen .group-level-3 .table-last--frozen {
+ border-right: none !important;
+}
+
+/* group expand */
+.canvas-groups-rows .group-expand {
+ padding: 0 0.5rem;
+}
+
+.canvas-groups-rows .group-expand span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ height: 18px;
+}
+
+.canvas-groups-rows .group-expand span:hover {
+ cursor: pointer;
+}
+
+.canvas-groups-rows .group-expand-icon {
+ font-size: 12px;
+ color: #666666;
+}
+
+/* group title */
+.canvas-groups-rows .group-title {
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.canvas-groups-rows .group-title .group-column-name {
+ font-size: 12px;
+ color: #666666;
+ font-weight: 500;
+}
+
+.canvas-groups-rows .group-title .group-cell-value {
+ display: flex;
+ font-weight: 500;
+ width: min-content;
+}
+
+.canvas-groups-rows .group-title .links-formatter .formatter-show {
+ min-height: unset;
+}
+
+.group-title .links-formatter .link {
+ max-width: unset;
+}
+
+.group-title .links-formatter .link-name {
+ padding-right: 0.25rem;
+}
+
+.canvas-groups-rows .group-title .multiple-select-option,
+.canvas-groups-rows .group-title .single-select-option {
+ margin: 0 10px 0 0;
+}
+
+.canvas-groups-rows .group-title .multiple-select-option:last-child,
+.canvas-groups-rows .group-title .single-select-option:last-child {
+ margin-right: 0;
+}
+
+.canvas-groups-rows .collaborator-avatar,
+.canvas-groups-rows .sf-metadata-ui.collaborator-item .collaborator-avatar {
+ height: 16px;
+ width: 16px;
+ margin-left: 0;
+ transform: translateY(0px);
+}
+
+.canvas-groups-rows .sf-metadata-ui.cell-formatter-container {
+ overflow: unset;
+}
+
+/* group rows count */
+.canvas-groups-rows .group-rows-count {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.group-rows-count-content {
+ display: inline-flex;
+ align-items: center;
+ margin: 0 15px 0 20px;
+ height: 100%;
+}
+
+.canvas-groups-rows .group-item.group-level-1 .group-rows-count {
+ background: linear-gradient(to right, hsla(0, 0%, 97%, 0), hsl(0, 0%, 97%) 18%);
+}
+
+.canvas-groups-rows .group-item.group-level-2 .group-rows-count {
+ background: linear-gradient(to right, hsla(0, 0%, 93%, 0), hsl(0, 0%, 93%) 18%);
+}
+
+.canvas-groups-rows .group-item.group-level-3 .group-rows-count {
+ background: linear-gradient(to right, hsla(0, 0%, 89%, 0), hsl(0, 0%, 89%) 18%);
+}
+
+.canvas-groups-rows .group-rows-count .count-title {
+ margin-right: 4px;
+ color: #666666;
+}
+
+/* group-header-right */
+.canvas-groups-rows .group-header-right {
+ width: 100%;
+ position: absolute;
+ display: inline-flex;
+ overflow: hidden;
+ border-top-right-radius: 5px;
+ background-color: inherit;
+ overflow: hidden;
+}
+
+.canvas-groups-rows .folded-group .group-header-right {
+ border-bottom-right-radius: 5px;
+}
+
+.canvas-groups-rows:not(.single-column) .group-level-2 .group-header-right {
+ border-left: 1px solid #e5e5e5;
+}
+
+.canvas-groups-rows:not(.single-column) .group-level-3 .group-header-right {
+ border-left: 1px solid #dadada;
+}
+
+/* group summary */
+.canvas-groups-rows .summary-item {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ height: 100%;
+ background-color: inherit;
+}
+
+/* group-row-cell */
+.canvas-groups-rows .sf-metadata-result-table-row {
+ position: absolute;
+ border-top: none;
+ border-bottom: none;
+}
+
+.sf-metadata-result-table-content .canvas-groups-rows .sf-metadata-result-table-row {
+ background-color: transparent;
+ overflow: hidden;
+}
+
+.canvas-groups-rows .sf-metadata-result-table-row .sf-metadata-result-table-cell {
+ border-top: 1px solid #ddd;
+}
+
+/* border color of last cell within group view */
+.canvas-groups-rows.disabled-add-record .sf-metadata-result-table-row.sf-metadata-last-table-row .sf-metadata-result-table-cell {
+ border-bottom: 1px solid #cacaca;
+}
+
+.canvas-groups-rows .table-btn-add-record-row .table-btn-add-record,
+.canvas-groups-rows .table-btn-add-record-row .table-btn-add-record-row-filler {
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #cacaca;
+}
+
+.canvas-groups-rows .table-btn-add-record-row {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background-color: #fff;
+}
+
+.canvas-groups-rows .table-btn-add-record-row .table-btn-add-record {
+ border-left: 1px solid #cacaca;
+ border-bottom-left-radius: 5px;
+ background-color: #fff;
+}
+
+.canvas-groups-rows.frozen .frozen-btn-add-record-wrapper,
+.canvas-groups-rows.frozen .table-btn-add-record.frozen-columns,
+.canvas-groups-rows.frozen .table-result-table-cell.actions-cell {
+ z-index: 2 !important;
+}
+
+.canvas-groups-rows .table-btn-add-record-row-filler {
+ border-right: 1px solid #cacaca;
+ border-bottom-right-radius: 5px;
+}
+
+.frozen-columns.table-btn-add-record {
+ border-radius: 0;
+}
+
+.canvas-groups-rows .actions-cell {
+ border-left: 1px solid #cacaca;
+}
+
+.canvas-groups-rows .sf-metadata-result-table-row .last-cell {
+ border-right: 1px solid #cacaca;
+}
+
+.canvas-groups-rows.disabled-add-record .sf-metadata-last-table-row,
+.canvas-groups-rows.disabled-add-record .sf-metadata-last-table-row .actions-cell {
+ border-bottom-left-radius: 5px;
+}
+
+.canvas-groups-rows.disabled-add-record .sf-metadata-last-table-row,
+.canvas-groups-rows.disabled-add-record .sf-metadata-last-table-row .last-cell {
+ border-bottom-right-radius: 5px;
+}
+
+/* animation */
+.canvas-groups-rows.animation {
+ transition-property: height;
+ -webkit-transition-property: height;
+ -moz-transition-property: height;
+ transition-duration: 0.3s;
+ -webkit-transition-duration: 0.3s;
+ -moz-transition-duration: 0.3s;
+ transition-timing-function: ease-out;
+ -webkit-transition-timing-function: ease-out;
+ -moz-transition-timing-function: ease-out;
+ transition-delay: 0s;
+ -webkit-transition-delay: 0s;
+ -moz-transition-delay: 0s;
+}
+
+.canvas-groups-rows.animation .group-item,
+.canvas-groups-rows.animation .sf-metadata-result-table-row {
+ transition-property: top;
+ -webkit-transition-property: top;
+ -moz-transition-property: top;
+ transition-duration: 0.3s;
+ -webkit-transition-duration: 0.3s;
+ -moz-transition-duration: 0.3s;
+ transition-timing-function: ease-out;
+ -webkit-transition-timing-function: ease-out;
+ -moz-transition-timing-function: ease-out;
+ transition-delay: 0s;
+ -webkit-transition-delay: 0s;
+ -moz-transition-delay: 0s;
+}
+
+.canvas-groups-rows.animation .group-item,
+.canvas-groups-rows.animation .sf-metadata-result-table-row,
+.canvas-groups-rows.animation .sf-metadata-result-table-row .table-btn-add-record .canvas-groups-rows.animation .sf-metadata-result-table-row .table-btn-add-record-row-filler {
+ transition-property: height, top;
+ -webkit-transition-property: height, top;
+ -moz-transition-property: height, top;
+}
+
+.canvas-groups-rows .group-item.folding {
+ transition-property: none;
+ -webkit-transition-property: none;
+ -moz-transition-property: none;
+}
+
+.canvas-groups-rows.single-column .group-item {
+ border-radius: 5px;
+}
+
+.canvas-groups-rows.animation .group-item .group-backdrop,
+.canvas-groups-rows.animation .group-item .group-container-left,
+.canvas-groups-rows.animation .group-item .group-container-right {
+ transition-property: height;
+ -webkit-transition-property: height;
+ -moz-transition-property: height;
+ transition-duration: 0.3s;
+ -webkit-transition-duration: 0.3s;
+ -moz-transition-duration: 0.3s;
+ transition-timing-function: ease-out;
+ -webkit-transition-timing-function: ease-out;
+ -moz-transition-timing-function: ease-out;
+ transition-delay: 0s;
+ -webkit-transition-delay: 0s;
+ -moz-transition-delay: 0s;
+}
+
+.canvas-groups-rows .group-item.folding .group-container-left,
+.canvas-groups-rows .group-item.folding .group-container-right {
+ transition-property: none;
+ -webkit-transition-property: none;
+ -moz-transition-property: none;
+}
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js
new file mode 100644
index 0000000000..fb2d1f4cbe
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js
@@ -0,0 +1,166 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import joinClasses from 'classnames';
+import GroupContainerLeft from '../group-container-left';
+import GroupContainerRight from '../group-container-right';
+import { isMobile } from '../../../../../../utils';
+import { isFrozen } from '../../../../../../utils/column-utils';
+import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
+import { Z_INDEX } from '../../../../../../_basic';
+
+import './index.css';
+
+class GroupContainer extends Component {
+
+ shouldComponentUpdate(nextProps) {
+ return (
+ nextProps.groupPathString !== this.props.groupPathString ||
+ nextProps.group !== this.props.group ||
+ nextProps.width !== this.props.width ||
+ nextProps.height !== this.props.height ||
+ nextProps.top !== this.props.top ||
+ nextProps.columns !== this.props.columns ||
+ nextProps.rowHeight !== this.props.rowHeight ||
+ nextProps.isExpanded !== this.props.isExpanded ||
+ nextProps.scrollLeft !== this.props.scrollLeft ||
+ nextProps.lastFrozenColumnKey !== this.props.lastFrozenColumnKey ||
+ nextProps.summaryConfigs !== this.props.summaryConfigs
+ );
+ }
+
+ componentDidMount() {
+ if (this.props.lastFrozenColumnKey && !isMobile) {
+ this.checkScroll();
+ }
+ }
+
+ checkScroll() {
+ const { scrollLeft } = this.props;
+ this.cancelFixFrozenDOMs(scrollLeft);
+ }
+
+ fixedFrozenDOMs = (scrollLeft, scrollTop) => {
+ if (this.backDrop) {
+ const tableContentLeft = this.props.getTableContentLeft();
+ this.backDrop.style.position = 'fixed';
+ this.backDrop.style.marginLeft = tableContentLeft + 'px';
+ this.backDrop.style.marginTop = (-scrollTop) + 'px';
+ }
+
+ this.leftContainer && this.leftContainer.fixedFrozenDOMs(scrollLeft, scrollTop);
+ this.rightContainer && this.rightContainer.fixedFrozenDOMs(scrollLeft, scrollTop);
+ };
+
+ cancelFixFrozenDOMs = (scrollLeft) => {
+ if (this.backDrop) {
+ this.backDrop.style.position = 'absolute';
+ this.backDrop.style.marginLeft = scrollLeft - GROUP_VIEW_OFFSET + 'px';
+ this.backDrop.style.marginTop = '0px';
+ }
+
+ this.leftContainer && this.leftContainer.cancelFixFrozenDOMs(scrollLeft);
+ this.rightContainer && this.rightContainer.cancelFixFrozenDOMs(scrollLeft);
+ };
+
+ setContainer = (node) => {
+ this.group = node;
+ };
+
+ setBackDrop = (node) => {
+ this.backDrop = node;
+ };
+
+ onExpandGroupToggle = () => {
+ const { groupPathString } = this.props;
+ this.props.onExpandGroupToggle(groupPathString);
+ };
+
+ render() {
+ const {
+ group, columns, width, isExpanded, folding, summaryConfigs, height, backdropHeight, top,
+ groupOffsetLeft, lastFrozenColumnKey, maxLevel,
+ } = this.props;
+ const { left, level } = group;
+ const firstLevelGroup = level === 1;
+ const groupClassName = joinClasses(
+ 'group-item',
+ `group-level-${level}`,
+ isExpanded ? 'expanded-group' : 'folded-group',
+ folding ? 'folding' : '',
+ );
+
+ const firstColumn = columns[0] || {};
+ const firstColumnFrozen = isFrozen(firstColumn);
+ const firstColumnWidth = firstColumn.width || 0;
+ const leftPaneWidth = SEQUENCE_COLUMN_WIDTH + firstColumnWidth + (firstLevelGroup ? 0 : ((level - 1) * GROUP_VIEW_OFFSET - 1));
+ const rightPaneWidth = width - leftPaneWidth;
+ const groupItemStyle = {
+ height,
+ width,
+ top,
+ left
+ };
+ let backDropStyle = {
+ height: backdropHeight,
+ width: leftPaneWidth + GROUP_VIEW_OFFSET,
+ zIndex: Z_INDEX.GROUP_BACKDROP
+ };
+
+ return (
+
+ {(level === maxLevel && firstColumnFrozen && !isMobile) &&
+
+ }
+ this.leftContainer = ref}
+ group={group}
+ firstColumnFrozen={firstColumnFrozen}
+ lastColumnFrozen={firstColumn.key === lastFrozenColumnKey}
+ leftPaneWidth={leftPaneWidth}
+ height={height}
+ isExpanded={isExpanded}
+ firstColumnKey={firstColumn.key}
+ maxLevel={maxLevel}
+ onExpandGroupToggle={this.onExpandGroupToggle}
+ />
+ this.rightContainer = ref}
+ group={group}
+ isExpanded={isExpanded}
+ leftPaneWidth={leftPaneWidth}
+ rightPaneWidth={rightPaneWidth}
+ height={height}
+ groupOffsetLeft={groupOffsetLeft}
+ lastFrozenColumnKey={lastFrozenColumnKey}
+ columns={columns}
+ summaryConfigs={summaryConfigs}
+ getTableContentLeft={this.props.getTableContentLeft}
+ />
+
+ );
+ }
+}
+
+GroupContainer.propTypes = {
+ group: PropTypes.object,
+ groupPathString: PropTypes.string,
+ folding: PropTypes.bool,
+ columns: PropTypes.array,
+ rowHeight: PropTypes.number,
+ width: PropTypes.number,
+ height: PropTypes.number,
+ backdropHeight: PropTypes.number,
+ top: PropTypes.number,
+ groupOffsetLeft: PropTypes.number,
+ formulaRow: PropTypes.object,
+ lastFrozenColumnKey: PropTypes.string,
+ isExpanded: PropTypes.bool,
+ scrollLeft: PropTypes.number,
+ maxLevel: PropTypes.number,
+ summaryConfigs: PropTypes.object,
+ getTableContentLeft: PropTypes.func,
+ onExpandGroupToggle: PropTypes.func,
+ updateSummaryConfig: PropTypes.func,
+};
+
+export default GroupContainer;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js
new file mode 100644
index 0000000000..98b2237480
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { isFrozen } from '../../../../../utils/column-utils';
+import { GROUP_HEADER_HEIGHT, SEQUENCE_COLUMN_WIDTH } from '../../../../../constants';
+import { Z_INDEX } from '../../../../../_basic';
+
+class GroupHeaderCell extends React.PureComponent {
+
+ fixedFrozenDOMs = (scrollLeft, scrollTop) => {
+ if (this.headerCell) {
+ const { firstColumnWidth, groupOffsetLeft } = this.props;
+ const tableContentLeft = this.props.getTableContentLeft();
+ this.headerCell.style.position = 'fixed';
+ this.headerCell.style.marginLeft = (SEQUENCE_COLUMN_WIDTH + firstColumnWidth + groupOffsetLeft + tableContentLeft) + 'px';
+ this.headerCell.style.marginTop = (-scrollTop) + 'px';
+ }
+ };
+
+ cancelFixFrozenDOMs = (scrollLeft) => {
+ if (this.headerCell) {
+ this.headerCell.style.position = 'absolute';
+ this.headerCell.style.marginLeft = scrollLeft + 'px';
+ this.headerCell.style.marginTop = 0;
+ }
+ };
+
+ getStyle = () => {
+ let { offsetLeft, column, isExpanded } = this.props;
+ const style = {
+ position: 'absolute',
+ width: column.width,
+ height: GROUP_HEADER_HEIGHT - (isExpanded ? 1 : 2), // header height - border-top(1px) - !isExpanded && border-bottom(1px)
+ left: offsetLeft
+ };
+ if (isFrozen(column)) {
+ style.zIndex = Z_INDEX.GROUP_FROZEN_HEADER;
+ }
+ return style;
+ };
+
+ render() {
+ const { column, isLastFrozenColumn } = this.props;
+ return (
+ this.headerCell = ref}
+ className={classnames('summary-item group-header-cell', {
+ 'table-last--frozen': isLastFrozenColumn
+ })}
+ style={this.getStyle()}
+ data-column_key={column.key}
+ >
+
+ );
+ }
+}
+
+GroupHeaderCell.propTypes = {
+ column: PropTypes.object.isRequired,
+ isExpanded: PropTypes.bool,
+ isLastFrozenColumn: PropTypes.bool,
+ firstColumnWidth: PropTypes.number,
+ offsetLeft: PropTypes.number.isRequired,
+ groupOffsetLeft: PropTypes.number,
+ summary: PropTypes.object,
+ summaryMethod: PropTypes.string,
+ getTableContentLeft: PropTypes.func,
+};
+
+export default GroupHeaderCell;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-left.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-left.js
new file mode 100644
index 0000000000..4141a4b18d
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-left.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import GroupTitle from './group-title';
+import { Z_INDEX } from '../../../../../_basic';
+import { GROUP_HEADER_HEIGHT } from '../../../../../constants';
+import { gettext } from '../../../../../utils';
+
+class GroupHeaderLeft extends Component {
+
+ render() {
+ const {
+ isExpanded, firstColumnFrozen, lastColumnFrozen, firstColumnKey, maxLevel,
+ group, width,
+ } = this.props;
+ const { column, count, level, cell_value, original_cell_value } = group;
+ const expandIconClassName = classnames(
+ 'group-expand-icon',
+ 'sf-metadata-font',
+ isExpanded ? 'sf-metadata-icon-drop-down' : 'sf-metadata-icon-right-slide',
+ );
+ const groupHeaderLeftStyle = {
+ zIndex: firstColumnFrozen && Z_INDEX.GROUP_FROZEN_HEADER,
+ height: GROUP_HEADER_HEIGHT,
+ width,
+ };
+
+ return (
+ this.groupHeaderLeft = ref}
+ className={classnames('group-header-left group-header-cell', { 'table-last--frozen': lastColumnFrozen })}
+ style={groupHeaderLeftStyle}
+ data-column_key={firstColumnKey}
+ >
+
+ );
+ }
+}
+
+GroupHeaderLeft.propTypes = {
+ isExpanded: PropTypes.bool,
+ firstColumnFrozen: PropTypes.bool,
+ lastColumnFrozen: PropTypes.bool,
+ firstColumnKey: PropTypes.string,
+ maxLevel: PropTypes.number,
+ group: PropTypes.object,
+ formulaRow: PropTypes.object,
+ width: PropTypes.number,
+ onExpandGroupToggle: PropTypes.func,
+};
+
+export default GroupHeaderLeft;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js
new file mode 100644
index 0000000000..6bcd895ddd
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import GroupHeaderCell from './group-header-cell';
+import { isFrozen } from '../../../../../utils/column-utils';
+import { GROUP_HEADER_HEIGHT } from '../../../../../constants';
+
+class GroupHeaderRight extends Component {
+
+ headerCells = {};
+
+ setHeaderCellRef = (key) => (node) => {
+ this.headerCells[key] = node;
+ };
+
+ fixedFrozenDOMs = (scrollLeft, scrollTop) => {
+ this.props.columns.forEach((column) => {
+ const headerCell = this.headerCells[column.key];
+ if (isFrozen(column) && headerCell) {
+ headerCell.fixedFrozenDOMs(scrollLeft, scrollTop);
+ }
+ });
+ };
+
+ cancelFixFrozenDOMs = (scrollLeft) => {
+ this.props.columns.forEach((column) => {
+ const headerCell = this.headerCells[column.key];
+ if (isFrozen(column) && headerCell) {
+ headerCell.cancelFixFrozenDOMs(scrollLeft);
+ }
+ });
+ };
+
+ getGroupSummaries = () => {
+ const {
+ group, isExpanded, columns, groupOffsetLeft, lastFrozenColumnKey, summaryConfigs,
+ } = this.props;
+ const summaryColumns = columns.slice(1); // get column from 2 index
+ const firstColumnWidth = columns[0] ? columns[0].width : 0;
+ let offsetLeft = 0;
+ return summaryColumns.map((column, index) => {
+ const { key } = column;
+ const summaryMethod = summaryConfigs && summaryConfigs[key] ? summaryConfigs[key] : 'Sum';
+ const summary = group.summaries[key];
+ if (index !== 0) {
+ offsetLeft += summaryColumns[index - 1].width;
+ }
+
+ return (
+
+
+
+
+
+
+ {level === maxLevel && {gettext('Count')}}
+ {count}
+
+
+ {this.getGroupSummaries()}
+
+ );
+ }
+}
+
+GroupHeaderRight.propTypes = {
+ group: PropTypes.object,
+ isExpanded: PropTypes.bool,
+ groupOffsetLeft: PropTypes.number,
+ lastFrozenColumnKey: PropTypes.string,
+ columns: PropTypes.array,
+ summaryConfigs: PropTypes.object,
+ getTableContentLeft: PropTypes.func,
+};
+
+export default GroupHeaderRight;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js
new file mode 100644
index 0000000000..0efba7ff60
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+ CellType
+} from '../../../../../_basic';
+import { DELETED_OPTION_TIPS } from '../../../../../constants';
+import { gettext } from '../../../../../utils';
+import CellFormatter from '../../../../cell-formatter';
+
+class GroupTitle extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ creator: null,
+ };
+ this.EmptyDOM = `(${gettext('Empty')})`;
+ this.deletedOptionTips = gettext(DELETED_OPTION_TIPS);
+ this.collaborators = window.sfMetadataContext.getCollaboratorsFromCache();
+ }
+
+ getOptionColors = () => {
+ const { dtableUtils } = window.app;
+ return dtableUtils.getOptionColors();
+ };
+
+ renderCollaborator = (collaborator) => {
+ const { email, avatar_url, name } = collaborator || {};
+ return (
+
+
+ 
+
+ {name}
+
+ );
+ };
+
+ renderGroupCellVal = (column, cellValue, originalCellValue = null) => {
+ const { type } = column;
+ switch (type) {
+ case CellType.CREATOR:
+ case CellType.LAST_MODIFIER: {
+ if (!originalCellValue) return this.EmptyDOM;
+ return (
+
+
+ );
+ }
+}
+
+GroupTitle.propTypes = {
+ originalCellValue: PropTypes.any,
+ cellValue: PropTypes.any,
+ column: PropTypes.object,
+};
+
+export default GroupTitle;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/header-actions-cell.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/header-actions-cell.jsx
new file mode 100644
index 0000000000..1e5124b566
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/header-actions-cell.jsx
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import SelectAll from './select-all';
+import { SEQUENCE_COLUMN_WIDTH } from '../../../../constants';
+
+class HeaderActionsCell extends Component {
+
+ render() {
+ const {
+ isMobile, hasSelectedRecord, isSelectedAll, isLastFrozenCell, groupOffsetLeft, height
+ } = this.props;
+ const columnCellClass = 'sf-metadata-result-table-cell column';
+ const columnCellStyle = {
+ height,
+ width: SEQUENCE_COLUMN_WIDTH + groupOffsetLeft,
+ minWidth: SEQUENCE_COLUMN_WIDTH + groupOffsetLeft,
+ };
+ return (
+ {column.name}
+ {this.renderGroupCellVal(column, cellValue, originalCellValue)}
+
+
+ );
+ }
+}
+
+HeaderActionsCell.propTypes = {
+ isMobile: PropTypes.bool,
+ hasSelectedRecord: PropTypes.bool,
+ isSelectedAll: PropTypes.bool,
+ isLastFrozenCell: PropTypes.bool,
+ height: PropTypes.number,
+ groupOffsetLeft: PropTypes.number,
+ selectNoneRecords: PropTypes.func,
+ selectAllRecords: PropTypes.func,
+};
+
+export default HeaderActionsCell;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/header-cell.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/header-cell.js
new file mode 100644
index 0000000000..59c55e4bcb
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/header-cell.js
@@ -0,0 +1,164 @@
+import React, { createRef, Component } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { UncontrolledTooltip, Tooltip } from 'reactstrap';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { COLUMNS_ICON_CONFIG, COLUMNS_ICON_NAME } from '../../../../_basic';
+import ResizeColumnHandle from './resize-column-handle';
+import { SUPPORT_BATCH_DOWNLOAD_TYPES, TABLE_SUPPORT_EDIT_TYPE_MAP, EVENT_BUS_TYPE } from '../../../../constants';
+import HeaderDropdownMenu from './header-dropdown-menu';
+import { gettext } from '../../../../utils';
+
+class HeaderCell extends Component {
+
+ static defaultProps = {
+ style: null,
+ };
+
+ static propTypes = {
+ groupOffsetLeft: PropTypes.number,
+ height: PropTypes.number,
+ column: PropTypes.object,
+ style: PropTypes.object,
+ frozen: PropTypes.bool,
+ isLastFrozenCell: PropTypes.bool,
+ isHideTriangle: PropTypes.bool,
+ resizeColumnWidth: PropTypes.func,
+ downloadColumnAllFiles: PropTypes.func,
+ };
+
+ constructor(props) {
+ super(props);
+ this.descriptionRef = createRef();
+ this.uneditableTip = createRef();
+ this.eventBus = window.sfMetadataContext.eventBus;
+ this.state = {
+ tooltipOpen: false,
+ isMenuShow: false,
+ };
+ }
+
+ headerCellRef = (node) => this.headerCell = node;
+
+ getWidthFromMouseEvent = (e) => {
+ let right = e.pageX || (e.touches && e.touches[0] && e.touches[0].pageX) || (e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX);
+ if (e.pageX === 0) {
+ right = 0;
+ }
+ const left = ReactDOM.findDOMNode(this.headerCell).getBoundingClientRect().left;
+ return right - left;
+ };
+
+ onDrag = (e) => {
+ const width = this.getWidthFromMouseEvent(e);
+ if (width > 0) {
+ this.props.resizeColumnWidth(this.props.column, width);
+ }
+ };
+
+ onIconTooltipToggle = () => {
+ this.setState({ tooltipOpen: !this.state.tooltipOpen });
+ };
+
+ handleHeaderCellClick = (column) => {
+ this.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_COLUMN, column);
+ };
+
+ checkDropdownAvailable = () => {
+ const { isHideTriangle, column } = this.props;
+ if (isHideTriangle) {
+ return false;
+ }
+ if (SUPPORT_BATCH_DOWNLOAD_TYPES.includes(column.type)) {
+ return true;
+ }
+ return false;
+ };
+
+ toggleHeaderDropDownMenu = () => {
+ this.setState({ isMenuShow: !this.state.isMenuShow });
+ };
+
+ render() {
+ const { frozen, groupOffsetLeft, column, isLastFrozenCell, height } = this.props;
+ const { left, width, description, key, name, type } = column;
+ const canEditable = window.sfMetadataContext.canModifyCell(column);
+ const style = Object.assign({ width, maxWidth: width, minWidth: width, height }, this.props.style);
+ if (!frozen) {
+ style.left = left + groupOffsetLeft;
+ }
+ const headerIconTooltip = COLUMNS_ICON_NAME[type];
+
+ return (
+
+
+ );
+ }
+}
+
+export default HeaderCell;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/header-dropdown-menu.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/header-dropdown-menu.jsx
new file mode 100644
index 0000000000..98f56abe0c
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/header-dropdown-menu.jsx
@@ -0,0 +1,109 @@
+import React, { Fragment, createRef } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
+import { ModalPortal } from '@seafile/sf-metadata-ui-component';
+import { isMobile } from '../../../../utils';
+import { isFrozen } from '../../../../utils/column-utils';
+import { gettext } from '../../../../../../utils/constants';
+
+class HeaderDropdownMenu extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ top: 0,
+ left: 0,
+ };
+ this.headerDropDownMenuRef = createRef();
+ }
+
+ toggle = (event) => {
+ event && event.preventDefault();
+ event && event.stopPropagation();
+
+ let { column, height, isMenuShow } = this.props;
+
+ let top = height - 5; // height - container padding - menu margin
+ let left = - (column.width - 30); // column width - container width - padding
+ this.setState({ top, left });
+ let targetDom = event.target;
+ if (isMenuShow && typeof targetDom.className === 'string' && targetDom.className.includes('disabled')) {
+ return;
+ }
+ this.props.toggleHeaderDropDownMenu();
+ };
+
+ hideSubMenu = () => {};
+
+ onDownloadAllFiles = () => {
+ const { column } = this.props;
+ this.props.downloadColumnAllFiles(column);
+ };
+
+ getMenuStyle = () => {
+ if (isFrozen(this.props.column)) {
+ return { transform: 'none' };
+ }
+ let { top, left } = this.state;
+
+ return {
+ top,
+ left,
+ transform: 'none',
+ };
+ };
+
+ renderUpperMenu = () => {
+ let upperMenu = [];
+ return upperMenu;
+ };
+
+ renderDropdownMenu = () => {
+ const menuStyle = this.getMenuStyle();
+
+ return (
+ this.handleHeaderCellClick(column, frozen)}
+ >
+
+ {gettext('No editing permission')}
+
+
+ }
+ {description &&
+ <>
+
+
+
+ {description}
+
+
+ }
+ {this.checkDropdownAvailable() &&
+
+
+
+
+ {gettext(headerIconTooltip)}
+
+
+ {(TABLE_SUPPORT_EDIT_TYPE_MAP[type] && !canEditable) &&
+
+
+ {name}
+
+ this.dropdownDom = ref}>
+ {this.renderUpperMenu().map((item, index) => {
+ return {item} ;
+ })}
+
+ {this.renderDropdownMenu()}
+
+
+ {this.isWindows && this.isWebkit && (
+
+ {
+ this.headerFrozenRef = ref;
+ }}
+ containerWidth={containerWidth}
+ table={table}
+ columns={columns}
+ colOverScanStartIdx={colOverScanStartIdx}
+ colOverScanEndIdx={colOverScanEndIdx}
+ hasSelectedRecord={hasSelectedRecord}
+ isSelectedAll={isSelectedAll}
+ isGroupView={isGroupView}
+ groupOffsetLeft={groupOffsetLeft}
+ lastFrozenColumnKey={lastFrozenColumnKey}
+ resizeColumnWidth={this.resizeColumnWidth}
+ selectNoneRecords={this.selectNone}
+ selectAllRecords={this.selectAllRecords}
+ downloadColumnAllFiles={this.downloadColumnAllFiles}
+ />
+ {this.renderRecordsBody({ containerWidth })}
+
+
+ {gettext('Loaded 50,000 records.')}
+
+ );
+ }
+}
+
+LoadAllTip.propTypes = {
+ clickToLoadMore: PropTypes.func
+};
+
+export default LoadAllTip;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record-cell.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/record-cell.js
new file mode 100644
index 0000000000..821890de82
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record-cell.js
@@ -0,0 +1,204 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { toaster } from '@seafile/sf-metadata-ui-component';
+import { isFunction } from '../../../../_basic';
+import { isNameColumn } from '../../../../utils/column-utils';
+import { TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../constants';
+import { isCellValueChanged } from '../../../../utils/cell-comparer';
+import CellFormatter from '../../../cell-formatter';
+
+class RecordCell extends React.Component {
+
+ static defaultProps = {
+ needBindEvents: true
+ };
+
+ state = {};
+
+ shouldComponentUpdate(nextProps, nextState) {
+ const {
+ record: oldRecord, column, isCellSelected, isLastCell, highlightClassName,
+ height, bgColor,
+ } = this.props;
+ const { record: newRecord, highlightClassName: newHighlightClassName, height: newHeight, column: newColumn, bgColor: newBgColor } = nextProps;
+ // the modification of column is not currently supported, only the modification of cell data is considered
+ const oldValue = oldRecord[column.name] || oldRecord[column.key];
+ const newValue = newRecord[column.name] || newRecord[column.key];
+ const isShouldUpdated = (
+ isCellValueChanged(oldValue, newValue, column.type) ||
+ oldRecord._last_modifier !== newRecord._last_modifier ||
+ isCellSelected !== nextProps.isCellSelected ||
+ isLastCell !== nextProps.isLastCell ||
+ highlightClassName !== newHighlightClassName ||
+ height !== newHeight ||
+ column.left !== newColumn.left ||
+ column.width !== newColumn.width ||
+ bgColor !== newBgColor
+ );
+ return isShouldUpdated;
+ }
+
+ getCellClass = (hasComment) => {
+ const { column, highlightClassName, isLastCell, isLastFrozenCell, isCellSelected } = this.props;
+ const { isFileTipShow } = this.state;
+ const { type } = column;
+ let className = `sf-metadata-result-table-cell sf-metadata-result-table-${type}-cell `;
+ const canEditable = window.sfMetadataContext.canModifyCell(column);
+ className = `${className}${(canEditable || !TABLE_SUPPORT_EDIT_TYPE_MAP[type]) ? '' : 'table-cell-uneditable '}`;
+ if (highlightClassName) {
+ className += `${highlightClassName} `;
+ }
+ if (isLastCell) {
+ className += 'last-cell ';
+ }
+ if (isLastFrozenCell) {
+ className += 'table-last--frozen ';
+ }
+ if (isCellSelected) {
+ className += 'cell-selected ';
+ }
+ if (isFileTipShow) {
+ className += 'draging-file-to-cell ';
+ }
+ if (hasComment) {
+ className += 'row-comment-cell';
+ }
+ return className;
+ };
+
+ onCellClick = (e) => {
+ const { column, groupRecordIndex, recordIndex, cellMetaData } = this.props;
+ const cell = { idx: column.idx, groupRecordIndex, rowIdx: recordIndex };
+
+ // select cell
+ if (isFunction(cellMetaData.onCellClick)) {
+ cellMetaData.onCellClick(cell, e);
+ }
+ };
+
+ onCellDoubleClick = (e) => {
+ const { column, groupRecordIndex, recordIndex, cellMetaData } = this.props;
+ const cell = { idx: column.idx, groupRecordIndex, rowIdx: recordIndex };
+
+ if (isFunction(cellMetaData.onCellDoubleClick)) {
+ cellMetaData.onCellDoubleClick(cell, e);
+ }
+ };
+
+ onCellMouseDown = (e) => {
+ if (e.button === 2) {
+ return;
+ }
+ const { column, groupRecordIndex, recordIndex, cellMetaData } = this.props;
+ const cell = { idx: column.idx, groupRecordIndex, rowIdx: recordIndex };
+
+ if (isFunction(cellMetaData.onCellMouseDown)) {
+ cellMetaData.onCellMouseDown(cell, e);
+ }
+ };
+
+ onCellMouseEnter = (e) => {
+ const { column, groupRecordIndex, recordIndex, cellMetaData } = this.props;
+ const cell = { idx: column.idx, groupRecordIndex, rowIdx: recordIndex };
+ if (isFunction(cellMetaData.onCellMouseEnter)) {
+ const mousePosition = { x: e.clientX, y: e.clientY };
+ cellMetaData.onCellMouseEnter({ ...cell, mousePosition }, e);
+ }
+ };
+
+ onCellMouseMove = (e) => {
+ const { column, groupRecordIndex, recordIndex, cellMetaData } = this.props;
+ const cell = { idx: column.idx, groupRecordIndex, rowIdx: recordIndex };
+ if (isFunction(cellMetaData.onCellMouseMove)) {
+ const mousePosition = { x: e.clientX, y: e.clientY };
+ cellMetaData.onCellMouseMove({ ...cell, mousePosition }, e);
+ }
+ };
+
+ onCellMouseLeave = () => {
+ return;
+ };
+
+ getEvents = () => {
+ return {
+ onClick: this.onCellClick,
+ onDoubleClick: this.onCellDoubleClick,
+ onMouseDown: this.onCellMouseDown,
+ onMouseEnter: this.onCellMouseEnter,
+ onMouseMove: this.onCellMouseMove,
+ onMouseLeave: this.onCellMouseLeave,
+ onDragOver: this.onDragOver
+ };
+ };
+
+ onDragOver = (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ };
+
+ updateParentTips = (isFileTipShow) => {
+ this.setState({ isFileTipShow: isFileTipShow });
+ };
+
+ onCellTipShow = (message) => {
+ toaster.warning(message);
+ };
+
+ render = () => {
+ const { frozen, record, column, needBindEvents, height, bgColor } = this.props;
+ const { key, name, left, width } = column;
+ const readonly = true;
+ const commentCount = isNameColumn(column) && this.getCommentCount();
+ const hasComment = !!commentCount;
+ const className = this.getCellClass(hasComment);
+ const cellStyle = {
+ width,
+ height,
+ };
+ if (!frozen) {
+ cellStyle.left = left;
+ }
+ if (bgColor) {
+ cellStyle['backgroundColor'] = bgColor;
+ }
+
+ let cellValue = record[name] || record[key];
+ const cellEvents = needBindEvents && this.getEvents();
+ const props = {
+ className,
+ style: cellStyle,
+ ...cellEvents,
+ };
+ const cellContent = (
+ {gettext('Click to load more')}
+
+ {cellContent}
+
+ );
+ };
+}
+
+RecordCell.propTypes = {
+ frozen: PropTypes.bool,
+ isCellSelected: PropTypes.bool,
+ isLastCell: PropTypes.bool,
+ isLastFrozenCell: PropTypes.bool,
+ cellMetaData: PropTypes.object,
+ record: PropTypes.object.isRequired,
+ groupRecordIndex: PropTypes.number,
+ recordIndex: PropTypes.number.isRequired,
+ column: PropTypes.object.isRequired,
+ height: PropTypes.number,
+ needBindEvents: PropTypes.bool,
+ modifyRecord: PropTypes.func,
+ lockRecordViaButton: PropTypes.func,
+ modifyRecordViaButton: PropTypes.func,
+ reloadCurrentRecord: PropTypes.func,
+ highlightClassName: PropTypes.string,
+ bgColor: PropTypes.string,
+};
+
+export default RecordCell;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record-footer/index.css b/frontend/src/metadata/metadata-view/components/table/table-main/records/record-footer/index.css
new file mode 100644
index 0000000000..fba0063219
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record-footer/index.css
@@ -0,0 +1,88 @@
+.sf-metadata-result-footer .rows-record {
+ width: 80px;
+ padding-left: 8px;
+}
+
+.load-all-tip {
+ display: flex;
+ align-items: center;
+}
+
+.sf-metadata-result-footer .summaries-pane {
+ position: relative;
+ display: flex;
+ flex: 1 1;
+ overflow: hidden;
+}
+
+.sf-metadata-result-footer .summaries-scroll {
+ position: relative;
+ overflow: hidden;
+}
+
+.sf-metadata-result-footer .summaries-scroll > div {
+ display: inline-flex;
+}
+
+.sf-metadata-result-footer .summary-item,
+.canvas-groups-rows .summary-item {
+ display: flex;
+ justify-content: flex-end;
+ text-align: right;
+ padding: 0 8px;
+ height: 30px;
+}
+
+.sf-metadata-result-footer .summary-item .summary-value,
+.canvas-groups-rows .summary-item .summary-value {
+ display: flex;
+ justify-content: flex-end;
+ max-width: calc(100% - 18px);
+ overflow: hidden;
+}
+
+.sf-metadata-result-footer .summary-value .summary-value-title,
+.canvas-groups-rows .summary-value .summary-value-title {
+ color: #666666;
+ flex: none;
+}
+
+.sf-metadata-result-footer .summary-value .summary-value-text,
+.canvas-groups-rows .summary-value .summary-value-text {
+ max-width: 100%;
+ padding-left: 3px;
+ flex: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.load-all-tip .load-all,
+.sf-metadata-result-footer .load-all {
+ height: 16px;
+ line-height: 16px;
+ color: #666;
+ cursor: pointer;
+ border-bottom: 1px solid #666;
+}
+
+.sf-metadata-result-footer .load-all {
+ margin: auto;
+}
+
+.load-all-tip .load-all:hover,
+.sf-metadata-result-footer .load-all:hover {
+ color: #212529;
+ border-bottom: 1px solid #212529;
+}
+
+.sf-metadata-result-footer .loading-message {
+ display: inline-flex;
+ align-items: center;
+ color: #666;
+}
+
+.sf-metadata-result-footer .loading-message .loading-icon {
+ width: 16px;
+ height: 16px;
+}
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record-footer/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/record-footer/index.js
new file mode 100644
index 0000000000..80d140077e
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record-footer/index.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Loading, toaster } from '@seafile/sf-metadata-ui-component';
+import { Z_INDEX } from '../../../../../_basic';
+import LoadAllTip from '../load-all-tip';
+import RecordMetrics from '../../../../../utils/record-metrics';
+import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL } from '../../../../../constants';
+import { getRecordsFromSelectedRange } from '../../../../../utils/selected-cell-utils';
+import { gettext } from '../../../../../../../utils/constants';
+
+import './index.css';
+
+class RecordsFooter extends React.Component {
+
+ onClick = () => {
+ if (this.props.isLoadingMore) {
+ return;
+ }
+ const loadNumber = this.props.recordsCount < 50000 ? 50000 : 100000;
+ this.props.clickToLoadMore(loadNumber, (hasMore) => {
+ if (hasMore) {
+ toaster.success(
+
+ );
+ }
+}
+
+RecordsFooter.propTypes = {
+ hasMore: PropTypes.bool,
+ isLoadingMore: PropTypes.bool,
+ isGroupView: PropTypes.bool,
+ hasSelectedRecord: PropTypes.bool,
+ recordsCount: PropTypes.number,
+ summaries: PropTypes.object,
+ summaryConfigs: PropTypes.object,
+ columns: PropTypes.array,
+ groupOffsetLeft: PropTypes.number,
+ recordMetrics: PropTypes.object,
+ selectedRange: PropTypes.object,
+ recordGetterById: PropTypes.func,
+ recordGetterByIndex: PropTypes.func,
+ getRecordsSummaries: PropTypes.func,
+ clickToLoadMore: PropTypes.func,
+};
+
+export default RecordsFooter;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.css b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.css
new file mode 100644
index 0000000000..487dc858a4
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.css
@@ -0,0 +1,72 @@
+.sf-metadata-result-table-row .rdg-row-expand-icon {
+ opacity: 0;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 20px;
+ flex-shrink: 0;
+ cursor: pointer;
+}
+
+.sf-metadata-result-table-row:hover .rdg-row-expand-icon {
+ opacity: 1;
+}
+
+.sf-metadata-result-table-row .sf-metadata-result-column-content.actions-checkbox {
+ text-align: center;
+ display: none;
+}
+
+.sf-metadata-result-table-row:hover .sf-metadata-result-column-content.actions-checkbox {
+ display: block;
+}
+
+.sf-metadata-result-table-row:hover .sf-metadata-result-column-content.row-index {
+ display: none;
+}
+
+.sf-metadata-result-table-row.row-selected .sf-metadata-result-column-content.actions-checkbox {
+ display: block !important;
+}
+
+.sf-metadata-result-table-row.row-selected .sf-metadata-result-column-content.row-index {
+ display: none !important;
+}
+
+.sf-metadata-result-table-row .rdg-row-expand-icon:hover {
+ background: #c2f5e9;
+}
+
+.sf-metadata-result-table-row .rdg-row-expand-icon .sf-metadata-icon-open {
+ color: #467fcf !important;
+ fill: #467fcf !important;
+ transform: scale(0.8);
+}
+
+.sf-metadata-result-table-row .cell-jump-link {
+ display: inline-block;
+ font-size: 14px;
+ height: 20px;
+ line-height: 20px;
+ margin-left: 8px;
+ border: 1px solid #eee;
+ padding: 0 2px;
+ color: #666666;
+ border-radius: 2px;
+ background: #fff;
+ cursor: pointer;
+ box-shadow: 0 0 1px;
+}
+
+.cell-highlight {
+ background-color: rgb(239, 199, 151) !important;
+}
+
+.cell-current-highlight {
+ background-color: #f09f3f !important;
+}
+
+.frozen-columns {
+ background-color: #fff;
+}
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js
new file mode 100644
index 0000000000..69850e8160
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js
@@ -0,0 +1,306 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import RecordCell from '../record-cell';
+import ActionsCell from '../actions-cell';
+import { getFrozenColumns } from '../../../../../utils/table-utils';
+import { Z_INDEX } from '../../../../../_basic';
+
+import './index.css';
+
+class Record extends React.Component {
+
+ componentDidMount() {
+ this.checkScroll();
+ }
+
+ shouldComponentUpdate(nextProps) {
+ return (
+ nextProps.isGroupView !== this.props.isGroupView ||
+ nextProps.hasSelectedCell !== this.props.hasSelectedCell ||
+ (nextProps.hasSelectedCell && this.props.selectedPosition.idx !== nextProps.selectedPosition.idx) || // selected cell in same row but different column
+ nextProps.isSelected !== this.props.isSelected ||
+ nextProps.groupRecordIndex !== this.props.groupRecordIndex ||
+ nextProps.index !== this.props.index ||
+ nextProps.isLastRecord !== this.props.isLastRecord ||
+ nextProps.lastFrozenColumnKey !== this.props.lastFrozenColumnKey ||
+ nextProps.columns !== this.props.columns ||
+ nextProps.colOverScanStartIdx !== this.props.colOverScanStartIdx ||
+ nextProps.colOverScanEndIdx !== this.props.colOverScanEndIdx ||
+ nextProps.record !== this.props.record ||
+ nextProps.top !== this.props.top ||
+ nextProps.left !== this.props.left ||
+ nextProps.height !== this.props.height ||
+ nextProps.searchResult !== this.props.searchResult ||
+ nextProps.columnColor !== this.props.columnColor
+ );
+ }
+
+ checkScroll = () => {
+ this.cancelFixFrozenDOMs(this.props.scrollLeft);
+ };
+
+ cancelFixFrozenDOMs = (scrollLeft) => {
+ const { isGroupView } = this.props;
+ const frozenChildrenCount = this.frozenColumns.childElementCount;
+ if (!this.frozenColumns || frozenChildrenCount < 1 || (isGroupView && frozenChildrenCount < 2)) {
+ return;
+ }
+ this.frozenColumns.style.position = 'absolute';
+ this.frozenColumns.style.marginLeft = scrollLeft + 'px';
+ this.frozenColumns.style.marginTop = '0px';
+ };
+
+ onSelectRecord = (e) => {
+ const { groupRecordIndex, index } = this.props;
+ this.props.selectNoneCells();
+ this.props.onSelectRecord({ groupRecordIndex, recordIndex: index }, e);
+ };
+
+ onRowExpand = () => {
+ const { record } = this.props;
+ this.props.onRowExpand(record);
+ };
+
+ isCellSelected = (columnIdx) => {
+ const { hasSelectedCell, selectedPosition } = this.props;
+ if (!selectedPosition) return false;
+ return hasSelectedCell && selectedPosition.idx === columnIdx;
+ };
+
+ isLastCell(columns, columnKey) {
+ return columns[columns.length - 1].key === columnKey;
+ }
+
+ reloadCurrentRecord = () => {
+ this.props.reloadRecords([this.props.record._id]);
+ };
+
+ getFrozenCells = () => {
+ const {
+ columns, lastFrozenColumnKey, groupRecordIndex, index: recordIndex, record,
+ cellMetaData, isGroupView, height, columnColor
+ } = this.props;
+ const frozenColumns = getFrozenColumns(columns);
+ if (frozenColumns.length === 0) return null;
+ const recordId = record._id;
+ return frozenColumns.map((column, index) => {
+ const { key } = column;
+ const isCellHighlight = this.isCellHighlight(key, recordId);
+ const isCurrentCellHighlight = this.isCurrentCellHighlight(key, recordId);
+ const highlightClassName = isCurrentCellHighlight ? 'cell-current-highlight' : isCellHighlight ? 'cell-highlight' : null;
+ const isCellSelected = this.isCellSelected(index);
+ const isLastCell = this.isLastCell(columns, key);
+ const isLastFrozenCell = key === lastFrozenColumnKey;
+ const bgColor = columnColor && columnColor[key];
+ return (
+
+ {this.getRecord()}
+ {!isLoadingMore && hasMore &&
+ {gettext('Load_all')}
+ }
+ {isLoadingMore &&
+
+ {gettext('Loading')}
+
+
+
+ this.summaryItemsRef = ref}>
+
+
+ {summaryItems || ''}
+
+
+ {/* frozen */}
+
+ );
+ }
+}
+
+Record.propTypes = {
+ hasSelectedCell: PropTypes.bool,
+ isGroupView: PropTypes.bool,
+ isSelected: PropTypes.bool,
+ groupRecordIndex: PropTypes.number,
+ index: PropTypes.number.isRequired,
+ isLastRecord: PropTypes.bool,
+ lastFrozenColumnKey: PropTypes.string,
+ cellMetaData: PropTypes.object,
+ selectedPosition: PropTypes.object,
+ record: PropTypes.object.isRequired,
+ columns: PropTypes.array.isRequired,
+ colOverScanStartIdx: PropTypes.number,
+ colOverScanEndIdx: PropTypes.number,
+ scrollLeft: PropTypes.number,
+ top: PropTypes.number,
+ left: PropTypes.number,
+ height: PropTypes.number,
+ selectNoneCells: PropTypes.func,
+ onSelectRecord: PropTypes.func,
+ onRowExpand: PropTypes.func,
+ modifyRecord: PropTypes.func,
+ lockRecordViaButton: PropTypes.func,
+ modifyRecordViaButton: PropTypes.func,
+ reloadRecords: PropTypes.func,
+ searchResult: PropTypes.object,
+ columnColor: PropTypes.object,
+};
+
+export default Record;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
new file mode 100644
index 0000000000..9ef06140a3
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
@@ -0,0 +1,646 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Loading } from '@seafile/sf-metadata-ui-component';
+import { RightScrollbar } from '../../../scrollbar';
+import Record from './record';
+import InteractionMasks from '../../table-masks/interaction-masks';
+import { EVENT_BUS_TYPE, SEQUENCE_COLUMN_WIDTH } from '../../../../constants';
+import { isShiftKeyDown } from '../../../../utils/keyboard-utils';
+import { isColumnSupportDirectEdit, isColumnSupportEdit } from '../../../../utils/column-utils';
+import { isSelectedCellSupportOpenEditor } from '../../../../utils/selected-cell-utils';
+import RecordMetrics from '../../../../utils/record-metrics';
+import { getColumnScrollPosition, getColVisibleStartIdx, getColVisibleEndIdx } from '../../../../utils/records-body-utils';
+
+const ROW_HEIGHT = 33;
+const RENDER_MORE_NUMBER = 10;
+const CONTENT_HEIGHT = window.innerHeight - 174;
+const { max, min, ceil, round } = Math;
+
+class RecordsBody extends Component {
+
+ static defaultProps = {
+ editorPortalTarget: document.body,
+ scrollToRowIndex: 0,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ startRenderIndex: 0,
+ endRenderIndex: this.getInitEndIndex(props),
+ isContextMenuShow: false,
+ activeRecords: [],
+ menuPosition: null,
+ selectedPosition: null,
+ isScrollingRightScrollbar: false,
+ };
+ this.resultContentRef = null;
+ this.resultRef = null;
+ this.recordFrozenRefs = [];
+ this.frozenBtnAddRecordRefs = [];
+ this.rowVisibleStart = 0;
+ this.rowVisibleEnd = this.setRecordVisibleEnd();
+ this.columnVisibleStart = 0;
+ this.columnVisibleEnd = this.setColumnVisibleEnd();
+ this.timer = null;
+ }
+
+ componentDidMount() {
+ this.props.onRef(this);
+ window.sfMetadataBody = this;
+ document.addEventListener('contextmenu', this.handleContextMenu);
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ const { recordsCount, recordIds } = nextProps;
+ if (recordsCount !== this.props.recordsCount || recordIds !== this.props.recordIds) {
+ this.recalculateRenderIndex(recordIds);
+ }
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('contextmenu', this.handleContextMenu);
+
+ this.clearHorizontalScroll();
+ this.clearScrollbarTimer();
+ this.setState = (state, callback) => {
+ return;
+ };
+ }
+
+ getVisibleIndex = () => {
+ return { rowVisibleStartIdx: this.rowVisibleStart, rowVisibleEndIdx: this.rowVisibleEnd };
+ };
+
+ getShownRecords = () => {
+ return this.getShownRecordIds().map((id) => this.props.recordGetterById(id));
+ };
+
+ setRecordVisibleEnd = () => {
+ return max(ceil(CONTENT_HEIGHT / ROW_HEIGHT), 0);
+ };
+
+ setColumnVisibleEnd = () => {
+ const { columns, getScrollLeft, tableContentWidth } = this.props;
+ let columnVisibleEnd = 0;
+ const contentScrollLeft = getScrollLeft();
+ let endColumnWidth = tableContentWidth + contentScrollLeft;
+ for (let i = 0; i < columns.length; i ++) {
+ const { width } = columns[i];
+ endColumnWidth = endColumnWidth - width;
+ if (endColumnWidth < 0) {
+ return columnVisibleEnd = i;
+ }
+ }
+ return columnVisibleEnd;
+ };
+
+ recalculateRenderIndex = (recordIds) => {
+ const { startRenderIndex, endRenderIndex } = this.state;
+ const contentScrollTop = this.resultContentRef.scrollTop;
+ const start = Math.max(0, Math.floor(contentScrollTop / ROW_HEIGHT) - RENDER_MORE_NUMBER);
+ const end = Math.min(Math.ceil((contentScrollTop + this.resultContentRef.offsetHeight) / ROW_HEIGHT) + RENDER_MORE_NUMBER, recordIds.length);
+ if (start !== startRenderIndex) {
+ this.setState({ startRenderIndex: start });
+ }
+ if (end !== endRenderIndex) {
+ this.setState({ endRenderIndex: end });
+ }
+ };
+
+ getInitEndIndex = (props) => {
+ return Math.min(Math.ceil(window.innerHeight / ROW_HEIGHT) + RENDER_MORE_NUMBER, props.recordsCount);
+ };
+
+ getShownRecordIds = () => {
+ const { recordIds } = this.props;
+ const { startRenderIndex, endRenderIndex } = this.state;
+ return recordIds.slice(startRenderIndex, endRenderIndex);
+ };
+
+ getRowTop = (rowIdx) => {
+ return ROW_HEIGHT * rowIdx;
+ };
+
+ getRowHeight = () => {
+ return ROW_HEIGHT;
+ };
+
+ jumpToRow = (scrollToRowIndex) => {
+ const { recordsCount } = this.props;
+ const rowHeight = this.getRowHeight();
+ const height = this.resultContentRef.offsetHeight;
+ const scrollTop = Math.min(scrollToRowIndex * rowHeight, recordsCount * rowHeight - height);
+ this.setScrollTop(scrollTop);
+ };
+
+ scrollToColumn = (idx) => {
+ const { columns, tableContentWidth } = this.props;
+ const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth);
+ if (newScrollLeft !== null) {
+ this.props.setRecordsScrollLeft(newScrollLeft);
+ }
+ this.updateColVisibleIndex(newScrollLeft);
+ };
+
+ updateColVisibleIndex = (scrollLeft) => {
+ const { columns } = this.props;
+ const columnVisibleStart = getColVisibleStartIdx(columns, scrollLeft);
+ const columnVisibleEnd = getColVisibleEndIdx(columns, window.innerWidth, scrollLeft);
+ this.columnVisibleStart = columnVisibleStart;
+ this.columnVisibleEnd = columnVisibleEnd;
+ };
+
+ setScrollTop = (scrollTop) => {
+ this.resultContentRef.scrollTop = scrollTop;
+ };
+
+ setScrollLeft = (scrollLeft) => {
+ const { interactionMask } = this;
+ interactionMask && interactionMask.setScrollLeft(scrollLeft);
+ };
+
+ cancelSetScrollLeft = () => {
+ const { interactionMask } = this;
+ interactionMask && interactionMask.cancelSetScrollLeft();
+ };
+
+ getClientScrollTopOffset = (node) => {
+ const rowHeight = this.getRowHeight();
+ const scrollVariation = node.scrollTop % rowHeight;
+ return scrollVariation > 0 ? rowHeight - scrollVariation : 0;
+ };
+
+ onHitBottomCanvas = () => {
+ const rowHeight = this.getRowHeight();
+ const node = this.resultContentRef;
+ node.scrollTop += rowHeight + this.getClientScrollTopOffset(node);
+ };
+
+ onHitTopCanvas = () => {
+ const rowHeight = this.getRowHeight();
+ const node = this.resultContentRef;
+ node.scrollTop -= (rowHeight - this.getClientScrollTopOffset(node));
+ };
+
+ getScrollTop = () => {
+ return this.resultContentRef ? this.resultContentRef.scrollTop : 0;
+ };
+
+ getRecordBodyHeight = () => {
+ return this.resultContentRef ? this.resultContentRef.offsetHeight : 0;
+ };
+
+ onScroll = () => {
+ const { recordsCount } = this.props;
+ const { startRenderIndex, endRenderIndex } = this.state;
+ const { offsetHeight, scrollTop: contentScrollTop } = this.resultContentRef;
+ // Calculate the start rendering row index, and end rendering row index
+ const start = Math.max(0, Math.floor(contentScrollTop / ROW_HEIGHT) - RENDER_MORE_NUMBER);
+ const end = Math.min(Math.ceil((contentScrollTop + this.resultContentRef.offsetHeight) / ROW_HEIGHT) + RENDER_MORE_NUMBER, recordsCount);
+
+ this.oldScrollTop = contentScrollTop;
+ const renderedRecordsCount = ceil(this.resultContentRef.offsetHeight / ROW_HEIGHT);
+ const newRecordVisibleStart = max(0, round(contentScrollTop / ROW_HEIGHT));
+ const newRecordVisibleEnd = min(newRecordVisibleStart + renderedRecordsCount, recordsCount);
+ this.rowVisibleStart = newRecordVisibleStart;
+ this.rowVisibleEnd = newRecordVisibleEnd;
+
+ this.props.cacheScrollTop(contentScrollTop);
+
+ if (Math.abs(start - startRenderIndex) > 5 || start < 5) {
+ this.setState({ startRenderIndex: start });
+ }
+ if (Math.abs(end - endRenderIndex) > 5 || end > recordsCount - 5) {
+ this.setState({ endRenderIndex: end });
+ }
+ // Scroll to the bottom of the page, load more records
+ if (offsetHeight + contentScrollTop >= this.resultContentRef.scrollHeight) {
+ this.props.scrollToLoadMore();
+ }
+
+ if (!this.isScrollingRightScrollbar) {
+ this.setRightScrollbarScrollTop(this.oldScrollTop);
+ }
+
+ // solve the bug that the scroll bar disappears when scrolling too fast
+ this.clearScrollbarTimer();
+ this.scrollbarTimer = setTimeout(() => {
+ this.setState({ isScrollingRightScrollbar: false });
+ }, 300);
+ };
+
+ onRowExpand = (row) => {
+ this.props.onRowExpand && this.props.onRowExpand(row);
+ };
+
+ onScrollbarScroll = (scrollTop) => {
+ // solve canvas&rightScrollbar circle scroll problem
+ if (this.oldScrollTop === scrollTop) {
+ return;
+ }
+ this.setState({ isScrollingRightScrollbar: true }, () => {
+ this.setScrollTop(scrollTop);
+ });
+ };
+
+ onScrollbarMouseUp = () => {
+ this.setState({ isScrollingRightScrollbar: false });
+ };
+
+ setRightScrollbarScrollTop = (scrollTop) => {
+ this.rightScrollbar && this.rightScrollbar.setScrollTop(scrollTop);
+ };
+
+ onDeleteRecords = () => {
+ this.interactionMask && this.interactionMask.selectNone();
+ this.props.selectNone();
+ this.props.onDeleteRecords(this.state.activeRecords);
+ };
+
+ onInsertRecords = ({ insertRecordsNumber }) => {
+ const activeRecord = this.state.activeRecords[0];
+ const upperRecordId = activeRecord && activeRecord._id;
+ if (!upperRecordId) return;
+ this.props.insertRecords({ upperRecordId, insertRecordsNumber });
+ };
+
+ addBlankRecord = () => {
+ const { recordsCount, recordIds } = this.props;
+ const lastRecordIndex = recordsCount - 1;
+ const lastRecordId = lastRecordIndex > -1 && recordIds[lastRecordIndex];
+ this.props.insertRecords({ upperRecordId: lastRecordId, insertRecordsNumber: 1 });
+ };
+
+ onDuplicateRecord = () => {
+ this.props.duplicateRecord(this.state.activeRecords[0]);
+ };
+
+ onDuplicateRecords = () => {
+ this.props.duplicateRecords(this.state.activeRecords);
+ };
+
+ selectNoneCells = () => {
+ this.interactionMask && this.interactionMask.selectNone();
+ const { selectedPosition } = this.state;
+ if (!selectedPosition || selectedPosition.idx < 0 || selectedPosition.rowIdx < 0) {
+ return;
+ }
+ this.selectNone();
+ };
+
+ selectNone = () => {
+ this.setState({ selectedPosition: { idx: -1, rowIdx: -1 } });
+ };
+
+ selectCell = (cell, openEditor) => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_CELL, cell, openEditor);
+ };
+
+ selectStart = (cellPosition) => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_START, cellPosition);
+ };
+
+ selectUpdate = (cellPosition, isFromKeyboard, callback) => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_UPDATE, cellPosition, isFromKeyboard, callback);
+ };
+
+ selectEnd = () => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_END);
+ };
+
+ onCellClick = (cell, e) => {
+ const { selectedPosition } = this.state;
+ if (isShiftKeyDown(e)) {
+ if (!selectedPosition || selectedPosition.idx === -1) {
+ // need select cell first
+ this.selectCell(cell, false);
+ return;
+ }
+ const isFromKeyboard = true;
+ this.selectUpdate(cell, isFromKeyboard);
+ } else {
+ const { columns } = this.props;
+ const supportOpenEditor = isColumnSupportDirectEdit(cell, columns);
+ const hasOpenPermission = isSelectedCellSupportOpenEditor(cell, columns, false, this.props.recordGetterByIndex);
+ this.selectCell(cell, supportOpenEditor && hasOpenPermission);
+ }
+ this.props.onCellClick(cell);
+ this.setState({ selectedPosition: cell });
+ };
+
+ onCellDoubleClick = (cell, e) => {
+ const { columns } = this.props;
+ const supportOpenEditor = isColumnSupportEdit(cell, columns);
+ const hasOpenPermission = isSelectedCellSupportOpenEditor(cell, columns, false, this.props.recordGetterByIndex);
+ this.selectCell(cell, supportOpenEditor && hasOpenPermission);
+ };
+
+ // onRangeSelectStart
+ onCellMouseDown = (cellPosition, event) => {
+ if (!isShiftKeyDown(event)) {
+ this.selectCell(cellPosition);
+ this.selectStart(cellPosition);
+ window.addEventListener('mouseup', this.onWindowMouseUp);
+ }
+ };
+
+ // onRangeSelectUpdate
+ onCellMouseEnter = (cellPosition) => {
+ this.selectUpdate(cellPosition, false, this.updateViewableArea);
+ };
+
+ onCellMouseMove = (cellPosition) => {
+ this.selectUpdate(cellPosition, false, this.updateViewableArea);
+ };
+
+ onWindowMouseUp = (event) => {
+ window.removeEventListener('mouseup', this.onWindowMouseUp);
+ if (isShiftKeyDown(event)) return;
+ this.selectEnd();
+ this.clearHorizontalScroll();
+ };
+
+ onCellRangeSelectionUpdated = (selectedRange) => {
+ this.props.onCellRangeSelectionUpdated(selectedRange);
+ };
+
+ /**
+ * When updating the selection by moving the mouse, you need to automatically scroll to expand the visible area
+ * @param {object} selectedRange
+ */
+ updateViewableArea = (selectedRange) => {
+ const { mousePosition } = selectedRange.cursorCell;
+ const { x: mouseX, y: mouseY } = mousePosition;
+ const tableHeaderHeight = 50 + 48 + 32;
+ const interval = 100;
+ const step = 8;
+
+ // cursor is at right boundary
+ if (mouseX + interval > window.innerWidth) {
+ this.scrollToRight();
+ } else if (mouseX - interval < SEQUENCE_COLUMN_WIDTH + this.props.frozenColumnsWidth) {
+ // cursor is at left boundary
+ this.scrollToLeft();
+ } else if (mouseY + interval > window.innerHeight - tableHeaderHeight) {
+ // cursor is at bottom boundary
+ const scrollTop = this.getScrollTop();
+ this.resultContentRef.scrollTop = scrollTop + step;
+ this.clearHorizontalScroll();
+ } else if (mouseY - interval < tableHeaderHeight) {
+ // cursor is at top boundary
+ const scrollTop = this.getScrollTop();
+ if (scrollTop - 16 >= 0) {
+ this.resultContentRef.scrollTop = scrollTop - step;
+ }
+ this.clearHorizontalScroll();
+ } else {
+ // cursor is at middle area
+ this.clearHorizontalScroll();
+ }
+ };
+
+ scrollToRight = () => {
+ if (this.timer) return;
+ this.timer = setInterval(() => {
+ const scrollLeft = this.props.getScrollLeft();
+ this.props.setRecordsScrollLeft(scrollLeft + 20);
+ }, 10);
+ };
+
+ scrollToLeft = () => {
+ if (this.timer) return;
+ this.timer = setInterval(() => {
+ const scrollLeft = this.props.getScrollLeft();
+ if (scrollLeft <= 0) {
+ this.clearHorizontalScroll();
+ return;
+ }
+ this.props.setRecordsScrollLeft(scrollLeft - 20);
+ }, 10);
+ };
+
+ clearHorizontalScroll = () => {
+ if (!this.timer) return;
+ clearInterval(this.timer);
+ this.timer = null;
+ };
+
+ clearScrollbarTimer = () => {
+ if (!this.scrollbarTimer) return;
+ clearTimeout(this.scrollbarTimer);
+ this.scrollbarTimer = null;
+ };
+
+ getCellMetaData = () => {
+ if (this.cellMetaData) {
+ return this.cellMetaData;
+ }
+ this.cellMetaData = {
+ onCellClick: this.onCellClick,
+ onCellDoubleClick: this.onCellDoubleClick,
+ onCellMouseDown: this.onCellMouseDown,
+ onCellMouseEnter: this.onCellMouseEnter,
+ onCellMouseMove: this.onCellMouseMove,
+ onDragEnter: this.handleDragEnter,
+ };
+ return this.cellMetaData;
+ };
+
+ handleDragEnter = ({ overRecordIdx, overGroupRecordIndex }) => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.DRAG_ENTER, { overRecordIdx, overGroupRecordIndex });
+ };
+
+ setRightScrollbar = (ref) => {
+ this.rightScrollbar = ref;
+ };
+
+ setInteractionMaskRef = (ref) => {
+ this.interactionMask = ref;
+ };
+
+ setResultRef = (ref) => {
+ this.resultRef = ref;
+ };
+
+ setResultContentRef = (ref) => {
+ this.resultContentRef = ref;
+ };
+
+ renderRecords = () => {
+ this.recordFrozenRefs = [];
+ this.frozenBtnAddRecordRefs = [];
+ const {
+ recordsCount, columns, colOverScanStartIdx, colOverScanEndIdx, lastFrozenColumnKey,
+ recordMetrics, showCellColoring, columnColors
+ } = this.props;
+ const { startRenderIndex, endRenderIndex, selectedPosition } = this.state;
+ const cellMetaData = this.getCellMetaData();
+ const lastRecordIndex = recordsCount - 1;
+ const shownRecordIds = this.getShownRecordIds();
+ const scrollLeft = this.props.getScrollLeft();
+ const rowHeight = this.getRowHeight();
+ let shownRecords = shownRecordIds.map((recordId, index) => {
+ const record = this.props.recordGetterById(recordId);
+ const isSelected = RecordMetrics.isRecordSelected(recordId, recordMetrics);
+ const recordIndex = startRenderIndex + index;
+ const isLastRecord = lastRecordIndex === recordIndex;
+ const hasSelectedCell = this.props.hasSelectedCell({ recordIndex }, selectedPosition);
+ const columnColor = showCellColoring ? columnColors[recordId] : {};
+ return (
+ this.frozenColumns = ref}
+ >
+
+ {/* scroll */}
+ {columnCells}
+
+
+
+ {this.renderRecords()}
+
+ this.groupRows = ref}>
+ {rendererGroups}
+
+ );
+ };
+
+ render() {
+ return (
+
+
+
+ {this.renderGroups()}
+
+
+
+ );
+ }
+}
+
+export default RecordsHeader;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/resize-column-handle.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/resize-column-handle.js
new file mode 100644
index 0000000000..f96a5fc512
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/resize-column-handle.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { debounce } from '../../../../_basic';
+
+class ResizeColumnHandle extends Component {
+
+ componentWillUnmount() {
+ this.cleanUp();
+ }
+
+ cleanUp = () => {
+ window.removeEventListener('mouseup', this.onMouseUp);
+ window.removeEventListener('mousemove', this.onMouseMove);
+ window.removeEventListener('touchend', this.onMouseUp);
+ window.removeEventListener('touchmove', this.onMouseMove);
+ };
+
+ onMouseDown = (e) => {
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+
+ window.addEventListener('mouseup', this.onMouseUp);
+ window.addEventListener('mousemove', this.onMouseMove);
+ window.addEventListener('touchend', this.onMouseUp);
+ window.addEventListener('touchmove', this.onMouseMove);
+ };
+
+ onMouseUp = (e) => {
+ this.cleanUp();
+ };
+
+ onMouseMove = (e) => {
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+
+ debounce(this.props.onDrag(e), 100);
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+ResizeColumnHandle.propTypes = {
+ onDrag: PropTypes.func
+};
+
+export default ResizeColumnHandle;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/select-all.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/select-all.jsx
new file mode 100644
index 0000000000..4ada966cd7
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/select-all.jsx
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../../../../../utils/constants';
+
+class SelectAll extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ isSelectedAll: props.isSelectedAll,
+ };
+ }
+
+ componentDidUpdate(prevProps) {
+ const { isSelectedAll } = this.props;
+ if (isSelectedAll !== prevProps.isSelectedAll) {
+ this.setState({
+ isSelectedAll,
+ });
+ }
+ }
+
+ onToggleSelectAll = (e) => {
+ const { isMobile, hasSelectedRecord } = this.props;
+ const { isSelectedAll } = this.state;
+ if (isMobile) {
+ e.preventDefault();
+ }
+ if (hasSelectedRecord || isSelectedAll) {
+ this.setState({ isSelectedAll: false });
+ this.props.selectNoneRecords();
+ return;
+ }
+ this.setState({ isSelectedAll: true });
+ this.props.selectAllRecords();
+ };
+
+ render() {
+ const { isMobile, hasSelectedRecord } = this.props;
+ const { isSelectedAll } = this.state;
+ const isSelectedParts = hasSelectedRecord && !isSelectedAll;
+ return (
+
+ {/* frozen */}
+
+ {
+ !isMobile && this.props.onRef(ref);
+ }}>
+
+ {/* scroll */}
+ {headerCells}
+
+ {isMobile ?
+ :
+ <>
+ {isSelectedParts ?
+ :
+
+ }
+
+ }
+
+
+ );
+ }
+}
+
+SelectAll.propTypes = {
+ isMobile: PropTypes.bool,
+ hasSelectedRecord: PropTypes.bool,
+ isSelectedAll: PropTypes.bool,
+ selectNoneRecords: PropTypes.func,
+ selectAllRecords: PropTypes.func,
+};
+
+export default SelectAll;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-masks/cell-mask.js b/frontend/src/metadata/metadata-view/components/table/table-masks/cell-mask.js
new file mode 100644
index 0000000000..22a90a0328
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-masks/cell-mask.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+class CellMask extends React.PureComponent {
+
+ componentDidUpdate() {
+ // Scrolling left and right causes the interface to re-render,
+ // and the style of CellMask is reset and needs to be fixed
+ const dom = ReactDOM.findDOMNode(this);
+ if (dom.style.position === 'fixed') {
+ dom.style.transform = 'none';
+ }
+ }
+
+ getMaskStyle = () => {
+ const { width, height, top, left, zIndex } = this.props;
+ // mask border needs to cover cell border, height and width are increased 1, left and top are decreased 1
+ return {
+ height: height - 1,
+ width: width,
+ zIndex,
+ position: 'absolute',
+ pointerEvents: 'none',
+ transform: `translate(${left}px, ${top}px)`,
+ outline: 0
+ };
+ };
+
+ render() {
+ const { width, height, top, left, zIndex, children, innerRef, ...rest } = this.props;
+ const style = this.getMaskStyle();
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+CellMask.propTypes = {
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ top: PropTypes.number.isRequired,
+ left: PropTypes.number.isRequired,
+ zIndex: PropTypes.number.isRequired,
+ children: PropTypes.node,
+ innerRef: PropTypes.func
+};
+
+export default CellMask;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-masks/drag-handler.js b/frontend/src/metadata/metadata-view/components/table/table-masks/drag-handler.js
new file mode 100644
index 0000000000..98ae236eda
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-masks/drag-handler.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function DragHandler({ onDragStart, onDragEnd }) {
+ return (
+
+ );
+}
+
+DragHandler.propTypes = {
+ onDragStart: PropTypes.func.isRequired,
+ onDragEnd: PropTypes.func.isRequired,
+};
+
+export default DragHandler;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-masks/drag-mask.js b/frontend/src/metadata/metadata-view/components/table/table-masks/drag-mask.js
new file mode 100644
index 0000000000..85f4778cfd
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/table/table-masks/drag-mask.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CellMask from './cell-mask';
+
+function DragMask({ draggedRange, getSelectedRangeDimensions, getSelectedDimensions }) {
+ const { overRecordIdx, bottomRight } = draggedRange;
+ const { idx: endColumnIdx, rowIdx: endRowIdx, groupRowIndex: endGroupRowIndex } = bottomRight;
+ if (overRecordIdx !== null && endRowIdx < overRecordIdx) {
+ const className = 'react-grid-cell-dragged-over-down';
+ let dimensions = getSelectedRangeDimensions(draggedRange);
+ for (let currentRowIdx = endRowIdx + 1; currentRowIdx <= overRecordIdx; currentRowIdx++) {
+ const { height } = getSelectedDimensions({ idx: endColumnIdx, rowIdx: currentRowIdx, groupRowIndex: endGroupRowIndex });
+ dimensions.height += height;
+ }
+ return (
+
+
+ );
+};
+
+TableTool.propTypes = {
+ searcherActive: PropTypes.bool,
+ onFiltersChange: PropTypes.func,
+ onSortsChange: PropTypes.func,
+ modifyGroupbys: PropTypes.func,
+ modifyHiddenColumns: PropTypes.func,
+};
+
+export default TableTool;
diff --git a/frontend/src/metadata/metadata-view/constants/TransferTypes.js b/frontend/src/metadata/metadata-view/constants/TransferTypes.js
new file mode 100644
index 0000000000..5d970e8127
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/constants/TransferTypes.js
@@ -0,0 +1,15 @@
+const FRAGMENT = 'application/x-sf-metadata-fragment';
+const HTML = 'text/html';
+const TEXT = 'text/plain';
+const FILES = 'files';
+const DTABLE_FRAGMENT = 'sf-metadata-fragment';
+
+const transferTypes = {
+ FRAGMENT,
+ HTML,
+ TEXT,
+ FILES,
+ DTABLE_FRAGMENT,
+};
+
+export default transferTypes;
diff --git a/frontend/src/metadata/metadata-view/constants/event-bus-type.js b/frontend/src/metadata/metadata-view/constants/event-bus-type.js
new file mode 100644
index 0000000000..ede764d7bf
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/constants/event-bus-type.js
@@ -0,0 +1,28 @@
+export const EVENT_BUS_TYPE = {
+ QUERY_COLLABORATORS: 'query-collaborators',
+ QUERY_COLLABORATOR: 'query-collaborator',
+ UPDATE_TABLE_ROWS: 'update-table-rows',
+
+ // table
+ LOCAL_TABLE_CHANGED: 'local-table-changed',
+ SERVER_TABLE_CHANGED: 'server-table-changed',
+ TABLE_ERROR: 'table-error',
+ OPEN_EDITOR: 'open-editor',
+ CLOSE_EDITOR: 'close-editor',
+ SELECT_CELL: 'select_cell',
+ SELECT_START: 'select_start',
+ SELECT_UPDATE: 'select_update',
+ SELECT_END: 'select_end',
+ SELECT_END_WITH_SHIFT: 'select_end_with_shift',
+ SELECT_NONE: 'select_none',
+ COPY_CELLS: 'copy_cells',
+ PASTE_CELLS: 'paste_cells',
+ SEARCH_CELLS: 'search-cells',
+ CLOSE_SEARCH_CELLS: 'close-search-cells',
+ OPEN_SELECT: 'open-select',
+ UPDATE_LINKED_RECORDS: 'update_linked_records',
+ SELECT_COLUMN: 'select_column',
+ DRAG_ENTER: 'drag_enter',
+ COLLAPSE_ALL_GROUPS: 'collapse_all_groups',
+ EXPAND_ALL_GROUPS: 'expand_all_groups',
+};
diff --git a/frontend/src/metadata/metadata-view/constants/index.js b/frontend/src/metadata/metadata-view/constants/index.js
new file mode 100644
index 0000000000..1ce706c286
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/constants/index.js
@@ -0,0 +1,102 @@
+import { CellType } from '../_basic';
+import { EVENT_BUS_TYPE } from './event-bus-type';
+import TRANSFER_TYPES from './TransferTypes';
+
+export const CELL_NAVIGATION_MODE = {
+ NONE: 'none',
+ CHANGE_ROW: 'changeRow',
+ LOOP_OVER_ROW: 'loopOverRow',
+};
+
+export const SEQUENCE_COLUMN_WIDTH = 80;
+
+export const ROW_HEIGHT = 32;
+
+export const GRID_HEADER_DEFAULT_HEIGHT = 32;
+
+export const GRID_HEADER_DOUBLE_HEIGHT = 56;
+
+export const GROUP_VIEW_OFFSET = 16;
+
+export const GROUP_HEADER_HEIGHT = 48;
+
+export const TABLE_LEFT_MARGIN = 10;
+
+export const TABLE_BORDER_WIDTH = 1;
+
+export const UNABLE_TO_CALCULATE = '--';
+
+export const FROZEN_COLUMN_SHADOW = '2px 0 5px -2px hsla(0,0%,53.3%,.3)';
+
+export const TABLE_NOT_SUPPORT_EDIT_TYPE_MAP = {
+ [CellType.CREATOR]: true,
+ [CellType.LAST_MODIFIER]: true,
+ [CellType.CTIME]: true,
+ [CellType.MTIME]: true,
+};
+
+export const TABLE_SUPPORT_EDIT_TYPE_MAP = {
+ [CellType.TEXT]: true,
+};
+
+export const TABLE_MOBILE_SUPPORT_EDIT_CELL_TYPE_MAP = {
+ [CellType.TEXT]: true,
+};
+
+export const CANVAS_RIGHT_INTERVAL = 240;
+
+export const LEFT_NAV = 280;
+export const ROW_DETAIL_PADDING = 40 * 2;
+export const ROW_DETAIL_MARGIN = 20 * 2;
+export const EDITOR_PADDING = 1.5 * 16; // 1.5: 0.75 * 2
+
+export const COLUMN_RATE_MAX_NUMBER = [
+ { name: 1 },
+ { name: 2 },
+ { name: 3 },
+ { name: 4 },
+ { name: 5 },
+ { name: 6 },
+ { name: 7 },
+ { name: 8 },
+ { name: 9 },
+ { name: 10 },
+];
+
+export const GROUP_ROW_TYPE = {
+ GROUP_CONTAINER: 'group_container',
+ ROW: 'row',
+ BTN_INSERT_ROW: 'btn_insert_row',
+};
+
+export const INSERT_ROW_HEIGHT = 32;
+
+export const CHANGE_HEADER_WIDTH = 'CHANGE_HEADER_WIDTH';
+
+export const NOT_SUPPORT_DRAG_COPY_COLUMN_TYPES = [
+];
+
+export const SUPPORT_PREVIEW_COLUMN_TYPES = [];
+
+export const OVER_SCAN_COLUMNS = 10;
+
+export const DELETED_OPTION_BACKGROUND_COLOR = '#eaeaea';
+
+export const DELETED_OPTION_TIPS = 'deleted_option';
+
+export const SUPPORT_BATCH_DOWNLOAD_TYPES = [];
+
+export const DEFAULT_COLUMNS = [
+ { name: 'Name', type: CellType.TEXT, width: 200, editable: false, key: 'name' },
+ { name: 'Parent_dir', type: CellType.TEXT, width: 200, editable: false, key: 'parent_dir' },
+ { name: 'CTime', type: CellType.CTIME, width: 200, editable: false, key: 'created_time' },
+ { name: 'MTime', type: CellType.MTIME, width: 200, editable: false, key: 'modified_time' },
+ { name: 'Creator', type: CellType.CREATOR, width: 200, editable: false, key: 'creator' },
+ { name: 'Last_modified', type: CellType.LAST_MODIFIER, width: 200, editable: false, key: 'modifier' },
+ { name: 'Is_dir', type: CellType.TEXT, width: 200, editable: false, key: 'is_dir' },
+];
+
+export {
+ EVENT_BUS_TYPE,
+ TRANSFER_TYPES,
+};
diff --git a/frontend/src/metadata/metadata-view/context.js b/frontend/src/metadata/metadata-view/context.js
new file mode 100644
index 0000000000..c1a7fca2bb
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/context.js
@@ -0,0 +1,79 @@
+import metadataAPI from '../api';
+import { UserService, LocalStorage } from './_basic';
+import EventBus from './utils/event-bus';
+
+class Context {
+
+ constructor() {
+ this.settings = {};
+ this.metadataAPI = null;
+ this.localStorage = null;
+ this.userService = null;
+ this.eventBus = null;
+ this.hasInit = false;
+ }
+
+ async init({ otherSettings }) {
+ if (this.hasInit) return;
+
+ // init settings
+ this.settings = otherSettings || {};
+
+ // init metadataAPI
+ const { mediaUrl } = this.settings;
+ this.metadataAPI = metadataAPI;
+
+ // init localStorage
+ const { repoID } = this.settings;
+ this.localStorage = new LocalStorage(`sf-metadata-${repoID}`);
+
+ // init userService
+ this.userService = new UserService({ mediaUrl, api: this.metadataAPI.listUserInfo });
+
+ const eventBus = new EventBus();
+ this.eventBus = eventBus;
+
+ this.hasInit = true;
+ }
+
+ destroy = () => {
+ this.settings = {};
+ this.metadataAPI = null;
+ this.localStorage = null;
+ this.userService = null;
+ this.eventBus = null;
+ this.hasInit = false;
+ };
+
+ getSetting = (key) => {
+ if (this.settings[key] === false) return this.settings[key];
+ return this.settings[key] || '';
+ };
+
+ setSetting = (key, value) => {
+ this.settings[key] = value;
+ };
+
+ // metadata
+ getMetadata = (repoID) => {
+ return this.metadataAPI.getMetadata(repoID);
+ };
+
+ canModifyCell = (column) => {
+ return false;
+ };
+
+ canModifyRow = (row) => {
+ return false;
+ };
+
+ getPermission = () => {
+ return 'rw';
+ };
+
+ getCollaboratorsFromCache = () => {
+ //
+ };
+}
+
+export default Context;
diff --git a/frontend/src/metadata/metadata-view/hooks/collaborators.js b/frontend/src/metadata/metadata-view/hooks/collaborators.js
new file mode 100644
index 0000000000..7ce92d7844
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/hooks/collaborators.js
@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+import React, { useContext, useState, useRef, useCallback } from 'react';
+
+const CollaboratorsContext = React.createContext(null);
+
+export const CollaboratorsProvider = ({
+ collaborators,
+ collaboratorsCache: propsCollaboratorsCache,
+ updateCollaboratorsCache: propsUpdateCollaboratorsCache,
+ children,
+}) => {
+ const collaboratorsCacheRef = useRef(propsCollaboratorsCache || {});
+ const [collaboratorsCache, setCollaboratorsCache] = useState(propsCollaboratorsCache || {});
+
+ const updateCollaboratorsCache = useCallback((user) => {
+ const newCollaboratorsCache = { ...collaboratorsCacheRef.current, [user.email]: user };
+ collaboratorsCacheRef.current = newCollaboratorsCache;
+ setCollaboratorsCache(newCollaboratorsCache);
+ propsUpdateCollaboratorsCache && propsUpdateCollaboratorsCache(user);
+ }, [propsUpdateCollaboratorsCache]);
+
+ return (
+
+
+
+
-
-
-
-
-{% endblock %}
-
-{% block extra_script %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/seahub/urls.py b/seahub/urls.py
index a94cb9cade..23243fa46e 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -204,10 +204,10 @@ from seahub.ocm.settings import OCM_ENDPOINT
from seahub.ai.apis import LibrarySdocIndexes, Search, LibrarySdocIndex, TaskStatus, \
LibraryIndexState, QuestionAnsweringSearchInLibrary, FileDownloadToken
from seahub.wiki2.views import wiki_view
-from seahub.repo_metadata.views import view_metadata
from seahub.api2.endpoints.wiki2 import Wikis2View, Wiki2View, Wiki2ConfigView, Wiki2PagesView, Wiki2PageView
from seahub.api2.endpoints.subscription import SubscriptionView, SubscriptionPlansView, SubscriptionLogsView
from seahub.api2.endpoints.metadata_manage import MetadataRecords, MetadataManage
+from seahub.api2.endpoints.user_list import UserListView
urlpatterns = [
@@ -320,6 +320,9 @@ urlpatterns = [
# user:convert to team account
re_path(r'^api/v2.1/user/convert-to-team/$', UserConvertToTeamView.as_view(), name="api-v2.1-user-convert-to-team"),
+ # user list
+ re_path(r'^api/v2.1/user-list/$', UserListView.as_view(), name='api-v2.1-user-list'),
+
## obtain auth token by login session
re_path(r'^api/v2.1/auth-token-by-session/$', AuthTokenBySession.as_view(), name="api-v2.1-auth-token-by-session"),
@@ -1032,5 +1035,4 @@ if settings.ENABLE_METADATA_MANAGEMENT:
urlpatterns += [
re_path(r'^api/v2.1/repos/(?P| id | -Creator | -Created Time | -Modifier | -Modified Time | -Parent Folder | -Name | -Is Folder | -
|---|---|---|---|---|---|---|---|
| {{ record.id }} | -{{ record.creator }} | -{{ record.file_ctime }} | -{{ record.modifier }} | -{{ record.file_mtime }} | -{{ record.parent_dir }} | -{{ record.name }} | -{{ record.is_dir|yesno:"Yes,No" }} | -