diff --git a/frontend/src/components/sf-table/constants/context-menu.js b/frontend/src/components/sf-table/constants/context-menu.js
new file mode 100644
index 0000000000..1a4167b7c2
--- /dev/null
+++ b/frontend/src/components/sf-table/constants/context-menu.js
@@ -0,0 +1,11 @@
+export const OPERATION = {
+ EDIT_TAG: 'edit_tag',
+ SET_SUB_TAGS: 'set_sub_tags',
+ DELETE_TAG: 'delete_tag',
+ DELETE_TAGS: 'delete_tags',
+ NEW_SUB_TAG: 'new_sub_tag',
+ MERGE_TAGS: 'merge_tags',
+ ADD_CHILD_TAGS: 'add_child_tags',
+};
+
+export const POPUP_EDITOR_OPERATION_KEYS = [OPERATION.SET_SUB_TAGS, OPERATION.ADD_CHILD_TAGS];
diff --git a/frontend/src/components/sf-table/editors/editor-container/index.js b/frontend/src/components/sf-table/editors/editor-container/index.js
index 2ea9a65c36..a38c2c191b 100644
--- a/frontend/src/components/sf-table/editors/editor-container/index.js
+++ b/frontend/src/components/sf-table/editors/editor-container/index.js
@@ -5,12 +5,13 @@ import PopupEditorContainer from './popup-editor-container';
import PreviewEditorContainer from './preview-editor-container';
import { checkIsColumnSupportPreview, checkIsPopupColumnEditor } from '../../utils/column';
import { EDITOR_TYPE } from '../../constants/grid';
+import { POPUP_EDITOR_OPERATION_KEYS } from '../../constants/context-menu';
const EditorContainer = (props) => {
- const { column, openEditorMode } = props;
+ const { column, openEditorMode, operation } = props;
if (!column || !isValidElement(column.editor)) return null;
- if (checkIsPopupColumnEditor(column)) {
+ if (checkIsPopupColumnEditor(column) || POPUP_EDITOR_OPERATION_KEYS.includes(operation)) {
return ;
}
if (checkIsColumnSupportPreview(column) && openEditorMode === EDITOR_TYPE.PREVIEWER) {
diff --git a/frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js b/frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js
index 356feb1cab..46d1cfe85b 100644
--- a/frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js
+++ b/frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js
@@ -55,7 +55,7 @@ class PopupEditorContainer extends React.Component {
};
createEditor = () => {
- const { column, record, height, onPressTab, editorPosition, columns, modifyColumnData, readOnly } = this.props;
+ const { column, record, height, onPressTab, editorPosition, columns, modifyColumnData, readOnly, operation } = this.props;
const value = this.getInitialValue();
let editorProps = {
@@ -78,6 +78,7 @@ class PopupEditorContainer extends React.Component {
column,
readOnly,
onPressTab,
+ operation,
};
return (
diff --git a/frontend/src/components/sf-table/masks/interaction-masks/index.js b/frontend/src/components/sf-table/masks/interaction-masks/index.js
index a21e167cbf..24bab2c2a5 100644
--- a/frontend/src/components/sf-table/masks/interaction-masks/index.js
+++ b/frontend/src/components/sf-table/masks/interaction-masks/index.js
@@ -121,8 +121,8 @@ class InteractionMasks extends React.Component {
});
};
- onOpenEditorEvent = (mode) => {
- this.setState({ openEditorMode: mode }, () => {
+ onOpenEditorEvent = (mode, op) => {
+ this.setState({ openEditorMode: mode, selectedOperation: op }, () => {
this.openEditor(null);
});
};
@@ -206,7 +206,6 @@ class InteractionMasks extends React.Component {
const { isEditorEnabled, selectedPosition, openEditorMode } = this.state;
const { columns } = this.props;
const selectedColumn = getSelectedColumn({ selectedPosition, columns });
-
// how to open editors?
// 1. editor is closed
// 2. record-cell is editable or open editor with preview mode
@@ -1031,7 +1030,7 @@ class InteractionMasks extends React.Component {
};
render() {
- const { selectedRange, isEditorEnabled, draggedRange, selectedPosition, firstEditorKeyDown, openEditorMode, editorPosition } = this.state;
+ const { selectedRange, isEditorEnabled, draggedRange, selectedPosition, firstEditorKeyDown, openEditorMode, editorPosition, selectedOperation } = this.state;
const { columns, isGroupView, recordGetterByIndex, scrollTop, getScrollLeft, editorPortalTarget, contextMenu } = this.props;
const isSelectedSingleCell = selectedRangeIsSingleCell(selectedRange);
return (
@@ -1066,6 +1065,7 @@ class InteractionMasks extends React.Component {
onCommit={this.onCommit}
onCommitCancel={this.onCommitCancel}
modifyColumnData={this.props.modifyColumnData}
+ operation={selectedOperation}
{...{
...this.getSelectedDimensions(selectedPosition),
...this.state.editorPosition
diff --git a/frontend/src/tag/views/all-tags/tags-table/context-menu-options.js b/frontend/src/tag/views/all-tags/tags-table/context-menu-options.js
index 57593063bc..799d8bd904 100644
--- a/frontend/src/tag/views/all-tags/tags-table/context-menu-options.js
+++ b/frontend/src/tag/views/all-tags/tags-table/context-menu-options.js
@@ -6,15 +6,7 @@ import { EVENT_BUS_TYPE } from '../../../../components/sf-table/constants/event-
import { PRIVATE_COLUMN_KEY } from '../../../constants';
import { TreeMetrics } from '../../../../components/sf-table/utils/tree-metrics';
import { RecordMetrics } from '../../../../components/sf-table/utils/record-metrics';
-
-const OPERATION = {
- EDIT_TAG: 'edit_tag',
- SET_SUB_TAGS: 'set_sub_tags',
- DELETE_TAG: 'delete_tag',
- DELETE_TAGS: 'delete_tags',
- NEW_SUB_TAG: 'new_sub_tag',
- MERGE_TAGS: 'merge_tags',
-};
+import { OPERATION } from '../../../../components/sf-table/constants/context-menu';
export const createContextMenuOptions = ({
context,
@@ -62,6 +54,10 @@ export const createContextMenuOptions = ({
onMergeTags(option.tagsIds, menuPosition);
break;
}
+ case OPERATION.ADD_CHILD_TAGS: {
+ eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, null, option.value);
+ break;
+ }
default: {
break;
}
@@ -160,13 +156,18 @@ export const createContextMenuOptions = ({
tagsIds: [tag._id],
});
}
-
if (isNameColumn && canAddTag) {
- options.push({
- label: gettext('New child tag'),
- value: OPERATION.NEW_SUB_TAG,
- parentTagId: tag._id,
- });
+ options.push(
+ {
+ label: gettext('New child tag'),
+ value: OPERATION.NEW_SUB_TAG,
+ parentTagId: tag._id,
+ },
+ {
+ label: gettext('Add child tags'),
+ value: OPERATION.ADD_CHILD_TAGS,
+ }
+ );
}
return options;
};
diff --git a/frontend/src/tag/views/all-tags/tags-table/editors/editor-factory.js b/frontend/src/tag/views/all-tags/tags-table/editors/editor-factory.js
index ad96484956..9e98f25b8a 100644
--- a/frontend/src/tag/views/all-tags/tags-table/editors/editor-factory.js
+++ b/frontend/src/tag/views/all-tags/tags-table/editors/editor-factory.js
@@ -7,8 +7,8 @@ import { PRIVATE_COLUMN_KEY } from '../../../../constants';
export const createColumnEditor = ({ column, otherProps }) => {
switch (column.key) {
case PRIVATE_COLUMN_KEY.TAG_NAME: {
- const { updateTag } = otherProps;
- return ;
+ const { updateTag, addTagLinks, deleteTagLinks } = otherProps;
+ return ;
}
case PRIVATE_COLUMN_KEY.PARENT_LINKS: {
const { addTagLinks, deleteTagLinks } = otherProps;
diff --git a/frontend/src/tag/views/all-tags/tags-table/editors/tag-name.js b/frontend/src/tag/views/all-tags/tags-table/editors/tag-name.js
index aaed034b83..3757f140dc 100644
--- a/frontend/src/tag/views/all-tags/tags-table/editors/tag-name.js
+++ b/frontend/src/tag/views/all-tags/tags-table/editors/tag-name.js
@@ -1,10 +1,13 @@
import React, { forwardRef, useCallback, useMemo } from 'react';
import EditTagDialog from '../../../../components/dialog/edit-tag-dialog';
+import ChildTagsEditor from './child-tags';
import { gettext } from '../../../../../utils/constants';
import { getRecordIdFromRecord } from '../../../../../metadata/utils/cell';
import { useTags } from '../../../../hooks';
+import { OPERATION } from '../../../../../components/sf-table/constants/context-menu';
+import { PRIVATE_COLUMN_KEY } from '../../../../constants';
-const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, ...editorProps }, ref) => {
+const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, operation, addTagLinks, deleteTagLinks, column, ...editorProps }, ref) => {
const { tagsData } = useTags();
const tags = useMemo(() => {
@@ -16,6 +19,12 @@ const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, ...editor
updateTag(recordId, updates, { success_callback, fail_callback });
}, [record, updateTag]);
+ if (operation && operation === OPERATION.ADD_CHILD_TAGS) {
+ return (
+
+ );
+ }
+
return (
);