Import configuration

src/features/import/components/Configure/Configuration/IdConfig.tsx

@@ -0,0 +1,135 @@
+import { FC } from 'react';
+import {
+  Alert,
+  Box,
+  Divider,
+  Radio,
+  RadioGroup,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+import { IDFieldColumn } from 'features/import/utils/types';
+import messageIds from 'features/import/l10n/messageIds';
+import { Msg } from 'core/i18n';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
+
+interface IdConfigProps {
+  uiDataColumn: UIDataColumn<IDFieldColumn>;
+}
+
+const IdConfig: FC<IdConfigProps> = ({ uiDataColumn }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      overflow="hidden"
+      padding={2}
+      sx={{ overflowY: 'scroll' }}
+    >
+      <Typography sx={{ paddingBottom: 2 }} variant="h5">
+        <Msg id={messageIds.configuration.configure.ids.header} />
+      </Typography>
+      <Typography sx={{ paddingBottom: 1 }}>
+        <Msg id={messageIds.configuration.configure.ids.configExplanation} />
+      </Typography>
+      <RadioGroup
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: 2,
+          justifyContent: 'space-between',
+          paddingBottom: 1,
+        }}
+      >
+        <Box
+          bgcolor="white"
+          border={1}
+          borderColor={theme.palette.divider}
+          borderRadius={2}
+          flex={1}
+        >
+          <Box alignItems="center" display="flex" padding={1}>
+            <Radio
+              checked={uiDataColumn.originalColumn.idField == 'ext_id'}
+              onChange={(event) => {
+                if (
+                  event.target.value == 'ext_id' ||
+                  event.target.value == 'id'
+                ) {
+                  uiDataColumn.updateIdField(event.target.value);
+                }
+              }}
+              sx={{ paddingRight: 1 }}
+              value="ext_id"
+            />
+            <Typography>
+              <Msg id={messageIds.configuration.configure.ids.externalID} />
+            </Typography>
+          </Box>
+          <Divider />
+          <Box padding={1}>
+            <Typography sx={{ paddingBottom: 1 }}>
+              <Msg id={messageIds.configuration.configure.ids.externalIDFile} />
+            </Typography>
+            <Typography>
+              <Msg
+                id={
+                  messageIds.configuration.configure.ids.externalIDExplanation
+                }
+              />
+            </Typography>
+          </Box>
+        </Box>
+        <Box
+          bgcolor="white"
+          border={1}
+          borderColor={theme.palette.divider}
+          borderRadius={2}
+          flex={1}
+        >
+          <Box alignItems="center" display="flex" padding={1}>
+            <Radio
+              checked={uiDataColumn.originalColumn.idField == 'id'}
+              onChange={(event) => {
+                if (
+                  event.target.value == 'ext_id' ||
+                  (event.target.value == 'id' && !uiDataColumn.wrongIDFormat)
+                ) {
+                  uiDataColumn.updateIdField(event.target.value);
+                }
+              }}
+              sx={{ paddingRight: 1 }}
+              value="id"
+            />
+            <Typography>
+              <Msg id={messageIds.configuration.configure.ids.zetkinID} />
+            </Typography>
+          </Box>
+          <Divider />
+          <Box padding={1}>
+            <Typography sx={{ paddingBottom: 1 }}>
+              <Msg id={messageIds.configuration.configure.ids.zetkinIDFile} />
+            </Typography>
+            <Typography>
+              <Msg
+                id={messageIds.configuration.configure.ids.zetkinIDExplanation}
+              />
+            </Typography>
+          </Box>
+        </Box>
+      </RadioGroup>
+      {uiDataColumn.wrongIDFormat && (
+        <Alert severity="error">
+          <Msg
+            id={messageIds.configuration.configure.ids.wrongIDFormatWarning}
+          />
+        </Alert>
+      )}
+    </Box>
+  );
+};
+
+export default IdConfig;

src/features/import/components/Configure/Configuration/OrgConfig.tsx

@@ -0,0 +1,79 @@
+import { FC } from 'react';
+import { Box, Divider, Typography } from '@mui/material';
+
+import messageIds from 'features/import/l10n/messageIds';
+import { OrgColumn } from 'features/import/utils/types';
+import OrgConfigRow from './OrgConfigRow';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
+import useOrganizations from 'features/organizations/hooks/useOrganizations';
+import { Msg, useMessages } from 'core/i18n';
+
+interface OrgConfigProps {
+  uiDataColumn: UIDataColumn<OrgColumn>;
+}
+
+const OrgConfig: FC<OrgConfigProps> = ({ uiDataColumn }) => {
+  const messages = useMessages(messageIds);
+  const organizations = useOrganizations();
+
+  if (!organizations.data) {
+    return null;
+  }
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      overflow="hidden"
+      padding={2}
+      sx={{ overflowY: 'scroll' }}
+    >
+      <Typography sx={{ paddingBottom: 2 }} variant="h5">
+        <Msg id={messageIds.configuration.configure.orgs.header} />
+      </Typography>
+      <Box alignItems="center" display="flex" paddingY={2}>
+        <Box width="50%">
+          <Typography variant="body2">
+            {messages.configuration.configure.orgs.status().toLocaleUpperCase()}
+          </Typography>
+        </Box>
+        <Box width="50%">
+          <Typography variant="body2">
+            {messages.configuration.configure.orgs
+              .organizations()
+              .toLocaleUpperCase()}
+          </Typography>
+        </Box>
+      </Box>
+      {uiDataColumn.uniqueValues.map((uniqueValue, index) => (
+        <>
+          {index != 0 && <Divider sx={{ marginY: 1 }} />}
+          <OrgConfigRow
+            numRows={uiDataColumn.numRowsByUniqueValue[uniqueValue]}
+            onDeselectOrg={() => uiDataColumn.deselectOrg(uniqueValue)}
+            onSelectOrg={(orgId) => uiDataColumn.selectOrg(orgId, uniqueValue)}
+            orgs={organizations.data || []}
+            selectedOrgId={uiDataColumn.getSelectedOrgId(uniqueValue)}
+            title={uniqueValue.toString()}
+          />
+        </>
+      ))}
+      {uiDataColumn.numberOfEmptyRows > 0 && (
+        <>
+          <Divider sx={{ marginY: 1 }} />
+          <OrgConfigRow
+            italic
+            numRows={uiDataColumn.numberOfEmptyRows}
+            onDeselectOrg={() => uiDataColumn.deselectOrg(null)}
+            onSelectOrg={(orgId) => uiDataColumn.selectOrg(orgId, null)}
+            orgs={organizations.data || []}
+            selectedOrgId={uiDataColumn.getSelectedOrgId(null)}
+            title={messages.configuration.configure.tags.empty()}
+          />
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default OrgConfig;

src/features/import/components/Configure/Configuration/OrgConfigRow.tsx

@@ -0,0 +1,106 @@
+import { FC } from 'react';
+import { ArrowForward, Delete } from '@mui/icons-material';
+import {
+  Box,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+import messageIds from 'features/import/l10n/messageIds';
+import { ZetkinOrganization } from 'utils/types/zetkin';
+import { Msg, useMessages } from 'core/i18n';
+
+interface OrgConfigRowProps {
+  italic?: boolean;
+  numRows: number;
+  onSelectOrg: (orgId: number) => void;
+  onDeselectOrg: () => void;
+  orgs: Pick<ZetkinOrganization, 'id' | 'title'>[];
+  selectedOrgId: number | null;
+  title: string;
+}
+
+const OrgConfigRow: FC<OrgConfigRowProps> = ({
+  italic,
+  numRows,
+  onSelectOrg,
+  onDeselectOrg,
+  orgs,
+  selectedOrgId,
+  title,
+}) => {
+  const theme = useTheme();
+  const messages = useMessages(messageIds);
+  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' : ''}>{title}</Typography>
+          </Box>
+          <ArrowForward color="secondary" sx={{ marginRight: 1 }} />
+        </Box>
+        <Box
+          alignItems="flex-start"
+          display="flex"
+          paddingRight={1}
+          width="50%"
+        >
+          <FormControl fullWidth size="small">
+            <InputLabel>
+              <Msg id={messageIds.configuration.configure.orgs.organizations} />
+            </InputLabel>
+            <Select
+              label={messages.configuration.configure.orgs.organizations()}
+              onChange={(event) => {
+                if (typeof event.target.value == 'number') {
+                  onSelectOrg(event.target.value);
+                }
+              }}
+              value={selectedOrgId || ''}
+            >
+              {orgs.map((org) => (
+                <MenuItem key={org.id} value={org.id}>
+                  {org.title}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <IconButton
+            disabled={!selectedOrgId}
+            onClick={() => {
+              if (selectedOrgId) {
+                onDeselectOrg();
+              }
+            }}
+          >
+            <Delete
+              sx={{
+                color: selectedOrgId ? 'secondary' : theme.palette.grey[400],
+              }}
+            />
+          </IconButton>
+        </Box>
+      </Box>
+      <Typography color="secondary">
+        <Msg
+          id={messageIds.configuration.configure.tags.numberOfRows}
+          values={{ numRows }}
+        />
+      </Typography>
+    </Box>
+  );
+};
+
+export default OrgConfigRow;