Improve CSV import sub-field selection (#11601)
This PR adds a better UX for selecting sub-fields when importing CSV files. Before : <img width="395" alt="image" src="https://github.com/user-attachments/assets/5a599e7d-ed07-4531-8306-9d70e7cfa37d" /> After : <img width="298" alt="image" src="https://github.com/user-attachments/assets/2be8a1df-d089-4341-970e-6db2b269141e" /> <img width="296" alt="image" src="https://github.com/user-attachments/assets/584285f4-4e71-4abd-9adf-11819cab0dc5" /> - A util `getSubFieldOptionKey` has been made to be able to reference the sub field in the `options` object of the spreadsheet import. - New components have been created : `MatchColumnSelectFieldSelectDropdownContent`, `MatchColumnSelectSubFieldSelectDropdownContent` and `MatchColumnSelectV2` - Extracted the hard-coded option do not import into a constant `DO_NOT_IMPORT_OPTION_KEY` - Passed `availableFieldMetadataItems` to spreadsheet global options so it's available anywhere in the hierarchy of components. --------- Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Lucas Bordeau
@ -17,6 +17,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
|
||||
import { Modal } from '@/ui/layout/modal/components/Modal';
|
||||
|
||||
import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
|
||||
import { UnmatchColumn } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn';
|
||||
import { initialComputedColumnsSelector } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
|
||||
import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
|
||||
@ -116,7 +117,7 @@ export const MatchColumnsStep = <T extends string>({
|
||||
|
||||
const onChange = useCallback(
|
||||
(value: T, columnIndex: number) => {
|
||||
if (value === 'do-not-import') {
|
||||
if (value === DO_NOT_IMPORT_OPTION_KEY) {
|
||||
if (columns[columnIndex].type === SpreadsheetColumnType.ignored) {
|
||||
onRevertIgnore(columnIndex);
|
||||
} else {
|
||||
|
||||
@ -1,130 +0,0 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
|
||||
|
||||
import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions';
|
||||
|
||||
import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
|
||||
import {
|
||||
SpreadsheetMatchedSelectColumn,
|
||||
SpreadsheetMatchedSelectOptionsColumn,
|
||||
} from '@/spreadsheet-import/types/SpreadsheetColumn';
|
||||
import { SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
|
||||
import { SelectInput } from '@/ui/input/components/SelectInput';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Tag, TagColor } from 'twenty-ui/components';
|
||||
import { IconChevronDown } from 'twenty-ui/display';
|
||||
import { SelectOption } from 'twenty-ui/input';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(4)};
|
||||
justify-content: space-between;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledControlContainer = styled.div<{ cursor: string }>`
|
||||
align-items: center;
|
||||
background-color: ${({ theme }) => theme.background.transparent.lighter};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
box-sizing: border-box;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
cursor: ${({ cursor }) => cursor};
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
height: ${({ theme }) => theme.spacing(8)};
|
||||
justify-content: space-between;
|
||||
padding: 0 ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
`;
|
||||
|
||||
const StyledControlLabel = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledIconChevronDown = styled(IconChevronDown)`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
`;
|
||||
|
||||
interface SubMatchingSelectProps<T> {
|
||||
option: SpreadsheetMatchedOptions<T> | Partial<SpreadsheetMatchedOptions<T>>;
|
||||
column:
|
||||
| SpreadsheetMatchedSelectColumn<T>
|
||||
| SpreadsheetMatchedSelectOptionsColumn<T>;
|
||||
onSubChange: (val: T, index: number, option: string) => void;
|
||||
placeholder: string;
|
||||
selectedOption?:
|
||||
| SpreadsheetMatchedOptions<T>
|
||||
| Partial<SpreadsheetMatchedOptions<T>>;
|
||||
}
|
||||
|
||||
export const SubMatchingSelect = <T extends string>({
|
||||
option,
|
||||
column,
|
||||
onSubChange,
|
||||
placeholder,
|
||||
}: SubMatchingSelectProps<T>) => {
|
||||
const { fields } = useSpreadsheetImportInternal<T>();
|
||||
const options = getFieldOptions(fields, column.value) as SelectOption[];
|
||||
const value = options.find((opt) => opt.value === option.value);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const handleSelect = (selectedOption: SelectOption) => {
|
||||
onSubChange(selectedOption.value as T, column.index, option.entry ?? '');
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
|
||||
useEffect(() => {
|
||||
setHotkeyScope(SelectFieldHotkeyScope.SelectField);
|
||||
}, [setHotkeyScope]);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledControlContainer cursor="default">
|
||||
<StyledControlLabel>
|
||||
<StyledLabel>{option.entry}</StyledLabel>
|
||||
</StyledControlLabel>
|
||||
<StyledIconChevronDown
|
||||
size={theme.font.size.md}
|
||||
color={theme.font.color.tertiary}
|
||||
/>
|
||||
</StyledControlContainer>
|
||||
<StyledControlContainer
|
||||
cursor="pointer"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
id="control"
|
||||
>
|
||||
<Tag
|
||||
text={value?.label ?? placeholder}
|
||||
color={value?.color as TagColor}
|
||||
/>
|
||||
<StyledIconChevronDown size={theme.icon.size.md} />
|
||||
{isOpen && (
|
||||
<SelectInput
|
||||
defaultOption={value}
|
||||
options={options}
|
||||
onOptionSelected={handleSelect}
|
||||
onCancel={() => setIsOpen(false)}
|
||||
hotkeyScope={SelectFieldHotkeyScope.SelectField}
|
||||
/>
|
||||
)}
|
||||
</StyledControlContainer>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
@ -1,6 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
|
||||
import { MatchColumnToFieldSelect } from '@/spreadsheet-import/components/MatchColumnToFieldSelect';
|
||||
import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
|
||||
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
|
||||
import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
|
||||
import { SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
|
||||
@ -54,7 +55,7 @@ export const TemplateColumn = <T extends string>({
|
||||
const selectOptions = [
|
||||
{
|
||||
Icon: IconForbid,
|
||||
value: 'do-not-import',
|
||||
value: DO_NOT_IMPORT_OPTION_KEY,
|
||||
label: t`Do not import`,
|
||||
},
|
||||
...fieldOptions,
|
||||
@ -65,12 +66,12 @@ export const TemplateColumn = <T extends string>({
|
||||
);
|
||||
|
||||
const ignoreValue = selectOptions.find(
|
||||
({ value }) => value === 'do-not-import',
|
||||
({ value }) => value === DO_NOT_IMPORT_OPTION_KEY,
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<MatchColumnSelect
|
||||
<MatchColumnToFieldSelect
|
||||
placeholder={t`Select column...`}
|
||||
value={isIgnored ? ignoreValue : selectValue}
|
||||
onChange={(value) => onChange(value?.value as T, column.index)}
|
||||
|
||||
@ -9,11 +9,10 @@ import {
|
||||
} from '@/spreadsheet-import/types';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
|
||||
import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { ImportedStructuredRowMetadata } from '../types';
|
||||
import { AppTooltip } from 'twenty-ui/display';
|
||||
import { Checkbox, CheckboxVariant, Toggle } from 'twenty-ui/input';
|
||||
import { ImportedStructuredRowMetadata } from '../types';
|
||||
|
||||
const StyledHeaderContainer = styled.div`
|
||||
align-items: center;
|
||||
@ -61,6 +60,10 @@ const StyledDefaultContainer = styled.div`
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
const StyledSelectReadonlyValueContianer = styled.div`
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const SELECT_COLUMN_KEY = 'select-row';
|
||||
|
||||
export const generateColumns = <T extends string>(
|
||||
@ -130,26 +133,10 @@ export const generateColumns = <T extends string>(
|
||||
|
||||
switch (column.fieldType.type) {
|
||||
case 'select': {
|
||||
const value = column.fieldType.options.find(
|
||||
(option) => option.value === (row[columnKey] as string),
|
||||
);
|
||||
|
||||
component = (
|
||||
<MatchColumnSelect
|
||||
value={
|
||||
value
|
||||
? ({
|
||||
Icon: undefined,
|
||||
...value,
|
||||
} as const)
|
||||
: value
|
||||
}
|
||||
onChange={(value) => {
|
||||
onRowChange({ ...row, [columnKey]: value?.value }, true);
|
||||
}}
|
||||
options={column.fieldType.options}
|
||||
columnIndex={column.key}
|
||||
/>
|
||||
<StyledSelectReadonlyValueContianer>
|
||||
{row[columnKey]}
|
||||
</StyledSelectReadonlyValueContianer>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user