diff --git a/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/index.tsx b/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/index.tsx index 84a1d63319..6bba002838 100644 --- a/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/index.tsx +++ b/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/index.tsx @@ -9,10 +9,15 @@ import { Modal, QuickActionButton, } from '@the-deep/deep-ui'; -import { IoChevronForward, IoOpenOutline } from 'react-icons/io5'; +import { + IoChevronForward, + IoOpenOutline, + IoClose, +} from 'react-icons/io5'; import { PartialForm, Error, getErrorObject } from '@togglecorp/toggle-form'; import { useModalState } from '#hooks/stateManagement'; import { sortByOrder } from '#utils/common'; +import { removeUndefinedKeys, removeEmptyObject } from '#utils/unsafeCommon'; import NonFieldError from '#components/NonFieldError'; import { Matrix2dWidget } from '#types/newAnalyticalFramework'; @@ -121,6 +126,19 @@ function Column(props: ColumnProps) { value, ]); + const handleColumnRemove = useCallback((columnKey: string) => { + onSubColumnsChange( + rowId, + subRowId, + columnKey, + undefined, + ); + }, [ + onSubColumnsChange, + rowId, + subRowId, + ]); + return (
)} {!readOnly && !suggestionMode && ( - +
+ + + + +
)} {readOnly && (
@@ -432,7 +461,7 @@ function Matrix2dWidgetInput(props: Props) { columnId: string, newSubColValue: string[] | undefined, ) => { - const newValue = { + const newValue = removeEmptyObject(removeUndefinedKeys({ ...value?.value, [rowId]: { ...value?.value?.[rowId], @@ -441,7 +470,7 @@ function Matrix2dWidgetInput(props: Props) { [columnId]: newSubColValue, }, }, - }; + })); onChange(newValue, name); }, [value, name, onChange], diff --git a/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/styles.css b/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/styles.css index 62b3fbcca4..3b47b90755 100644 --- a/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/styles.css +++ b/app/components/framework/CompactAttributeInput/Matrix2dWidgetInput/styles.css @@ -66,6 +66,20 @@ } } + .sub-column-select-wrapper { + display: flex; + align-items: center; + gap: var(--dui-spacing-extra-small); + + .input { + flex-grow: 1; + } + + .button { + flex-shrink: 0; + } + } + .selected-values { color: var(--dui-color-accent); }