-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2292 from zetkin/release-241025
241025 Release
- Loading branch information
Showing
50 changed files
with
1,467 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
src/features/import/components/ImportDialog/Configure/Configuration/EnumConfig.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { FC } from 'react'; | ||
| import { Box, Divider, Typography } from '@mui/material'; | ||
|
|
||
| import messageIds from 'features/import/l10n/messageIds'; | ||
| import { EnumColumn } from 'features/import/utils/types'; | ||
| import { UIDataColumn } from 'features/import/hooks/useUIDataColumn'; | ||
| import { useNumericRouteParams } from 'core/hooks'; | ||
| import { Msg, useMessages } from 'core/i18n'; | ||
| import useCustomFields from 'features/profile/hooks/useCustomFields'; | ||
| import useEnumMapping from 'features/import/hooks/useEnumMapping'; | ||
| import EnumConfigRow from './EnumConfigRow'; | ||
|
|
||
| interface EnumConfigProps { | ||
| uiDataColumn: UIDataColumn<EnumColumn>; | ||
| } | ||
|
|
||
| const EnumConfig: FC<EnumConfigProps> = ({ uiDataColumn }) => { | ||
| const { orgId } = useNumericRouteParams(); | ||
| const messages = useMessages(messageIds); | ||
| const { data: fields } = useCustomFields(orgId); | ||
| const { deselectOption, getSelectedOption, selectOption } = useEnumMapping( | ||
| uiDataColumn.originalColumn, | ||
| uiDataColumn.columnIndex | ||
| ); | ||
|
|
||
| if (!fields || !fields.length) { | ||
| return null; | ||
| } | ||
| const field = fields.find( | ||
| (field) => field.slug === uiDataColumn.originalColumn.field | ||
| ); | ||
| const options = field?.enum_choices; | ||
| if (!options || !options.length) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| overflow="hidden" | ||
| padding={2} | ||
| sx={{ overflowY: 'auto' }} | ||
| > | ||
| <Box alignItems="baseline" display="flex" justifyContent="space-between"> | ||
| <Typography sx={{ paddingBottom: 2 }} variant="h5"> | ||
| <Msg id={messageIds.configuration.configure.enum.header} /> | ||
| </Typography> | ||
| </Box> | ||
|
|
||
| <Box alignItems="center" display="flex" paddingY={2}> | ||
| <Box width="50%"> | ||
| <Typography variant="body2"> | ||
| {uiDataColumn.title.toLocaleUpperCase()} | ||
| </Typography> | ||
| </Box> | ||
| <Box width="50%"> | ||
| <Typography variant="body2">{field.title}</Typography> | ||
| </Box> | ||
| </Box> | ||
| {uiDataColumn.uniqueValues.map((uniqueValue, index) => ( | ||
| <Box key={index}> | ||
| {index != 0 && <Divider sx={{ marginY: 1 }} />} | ||
| <EnumConfigRow | ||
| numRows={uiDataColumn.numRowsByUniqueValue[uniqueValue]} | ||
| onDeselectOption={() => deselectOption(uniqueValue)} | ||
| onSelectOption={(key) => selectOption(key, uniqueValue)} | ||
| options={options} | ||
| selectedOption={getSelectedOption(uniqueValue)} | ||
| title={field.title} | ||
| value={uniqueValue.toString()} | ||
| /> | ||
| </Box> | ||
| ))} | ||
| {uiDataColumn.numberOfEmptyRows > 0 && ( | ||
| <> | ||
| <Divider sx={{ marginY: 1 }} /> | ||
| <EnumConfigRow | ||
| italic | ||
| numRows={uiDataColumn.numberOfEmptyRows} | ||
| onDeselectOption={() => deselectOption(null)} | ||
| onSelectOption={(key) => selectOption(key, null)} | ||
| options={options} | ||
| selectedOption={getSelectedOption(null)} | ||
| title={field.title} | ||
| value={messages.configuration.configure.tags.empty()} | ||
| /> | ||
| </> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default EnumConfig; |
116 changes: 116 additions & 0 deletions
116
src/features/import/components/ImportDialog/Configure/Configuration/EnumConfigRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { ArrowForward, Delete } from '@mui/icons-material'; | ||
| import { | ||
| Box, | ||
| Button, | ||
| FormControl, | ||
| IconButton, | ||
| InputLabel, | ||
| MenuItem, | ||
| Select, | ||
| Typography, | ||
| } from '@mui/material'; | ||
| import { FC, useState } from 'react'; | ||
|
|
||
| import messageIds from 'features/import/l10n/messageIds'; | ||
| import { EnumChoice } from 'utils/types/zetkin'; | ||
| import { Msg } from 'core/i18n'; | ||
|
|
||
| interface EnumConfigRowProps { | ||
| italic?: boolean; | ||
| numRows: number; | ||
| onSelectOption: (key: string) => void; | ||
| onDeselectOption: () => void; | ||
| options: EnumChoice[]; | ||
| selectedOption: string | null; | ||
| value: string; | ||
| title: string; | ||
| } | ||
|
|
||
| const EnumConfigRow: FC<EnumConfigRowProps> = ({ | ||
| italic, | ||
| numRows, | ||
| onSelectOption, | ||
| onDeselectOption, | ||
| options, | ||
| selectedOption, | ||
| value, | ||
| title, | ||
| }) => { | ||
| const [mapping, setMapping] = useState(false); | ||
|
|
||
| const showSelect = mapping || selectedOption; | ||
|
|
||
| return ( | ||
| <Box display="flex" flexDirection="column"> | ||
| <Box display="flex"> | ||
| <Box | ||
| alignItems="flex-start" | ||
| display="flex" | ||
| justifyContent="space-between" | ||
| paddingTop={1} | ||
| width="50%" | ||
| > | ||
| <Box display="flex" sx={{ wordBreak: 'break-all' }} width="100%"> | ||
| <Typography fontStyle={italic ? 'italic' : ''}>{value}</Typography> | ||
| </Box> | ||
| <ArrowForward color="secondary" sx={{ marginRight: 1 }} /> | ||
| </Box> | ||
| <Box | ||
| alignItems="flex-start" | ||
| display="flex" | ||
| paddingRight={1} | ||
| width="50%" | ||
| > | ||
| {!showSelect && ( | ||
| <Button onClick={() => setMapping(true)}> | ||
| <Msg | ||
| id={ | ||
| messageIds.configuration.configure.ids | ||
| .showOrganizationSelectButton | ||
| } | ||
| /> | ||
| </Button> | ||
| )} | ||
| {showSelect && ( | ||
| <> | ||
| <FormControl fullWidth size="small"> | ||
| <InputLabel>{title}</InputLabel> | ||
| <Select | ||
| label={title} | ||
| onChange={(event) => { | ||
| if (typeof event.target.value == 'string') { | ||
| onSelectOption(event.target.value); | ||
| } | ||
| }} | ||
| value={selectedOption || ''} | ||
| > | ||
| {options.map((option) => ( | ||
| <MenuItem key={option.key} value={option.key}> | ||
| {option.label} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| <IconButton | ||
| onClick={() => { | ||
| onDeselectOption(); | ||
| setMapping(false); | ||
| }} | ||
| > | ||
| <Delete color="secondary" /> | ||
| </IconButton> | ||
| </> | ||
| )} | ||
| </Box> | ||
| </Box> | ||
| <Typography color="secondary"> | ||
| <Msg | ||
| id={messageIds.configuration.configure.enum.numberOfRows} | ||
| values={{ numRows }} | ||
| /> | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default EnumConfigRow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
src/features/import/components/ImportDialog/Configure/Preview/EnumPreview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import messageIds from 'features/import/l10n/messageIds'; | ||
| import PreviewGrid from './PreviewGrid'; | ||
| import { useMessages } from 'core/i18n'; | ||
| import { CellData, ColumnKind, Sheet } from 'features/import/utils/types'; | ||
| import useColumn from 'features/import/hooks/useColumn'; | ||
| import { useNumericRouteParams } from 'core/hooks'; | ||
| import useCustomFields from 'features/profile/hooks/useCustomFields'; | ||
|
|
||
| interface EnumPreviewProps { | ||
| currentSheet: Sheet; | ||
| fieldKey: string; | ||
| fields: Record<string, CellData> | undefined; | ||
| } | ||
|
|
||
| const EnumPreview = ({ currentSheet, fieldKey, fields }: EnumPreviewProps) => { | ||
| const { orgId } = useNumericRouteParams(); | ||
| const messages = useMessages(messageIds); | ||
| const { fieldOptions } = useColumn(orgId); | ||
| const customFields = useCustomFields(orgId).data ?? []; | ||
|
|
||
| const hasMapped = currentSheet.columns.some( | ||
| (column) => column.kind === ColumnKind.ENUM && column.mapping.length > 0 | ||
| ); | ||
|
|
||
| let columnHeader = ''; | ||
| fieldOptions.flat().forEach((columnOp) => { | ||
| if (columnOp.value === `enum:${fieldKey}`) { | ||
| columnHeader = columnOp.label; | ||
| } | ||
| }); | ||
|
|
||
| const field = customFields.find((f) => f.slug === fieldKey); | ||
| const enumChoices = field?.enum_choices || []; | ||
|
|
||
| const enumKey = fields?.[fieldKey]; | ||
|
|
||
| const option = enumChoices.find((o) => o.key === enumKey); | ||
|
|
||
| return ( | ||
| <PreviewGrid | ||
| columnHeader={columnHeader} | ||
| emptyLabel={ | ||
| hasMapped && !option ? messages.configuration.preview.noValue() : '' | ||
| } | ||
| rowValue={hasMapped && option ? option.label : null} | ||
| unmappedRow={!hasMapped} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default EnumPreview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.