Merge branch 'import-configuration/mapping' into import-configuration…

…/prepare-import-op

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

@@ -0,0 +1,75 @@
+import { FC } from 'react';
+import { Box, Divider, Typography } from '@mui/material';
+
+import messageIds from 'features/import/l10n/messageIds';
+import { TagColumn } from 'features/import/utils/types';
+import TagConfigRow from './TagConfigRow';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
+import { ZetkinTag } from 'utils/types/zetkin';
+import { Msg, useMessages } from 'core/i18n';
+
+interface TagConfigProps {
+  uiDataColumn: UIDataColumn & { originalColumn: TagColumn };
+}
+
+const TagConfig: FC<TagConfigProps> = ({ uiDataColumn }) => {
+  const messages = useMessages(messageIds);
+  return (
+    <Box display="flex" flexDirection="column" overflow="hidden" padding={2}>
+      <Typography variant="h5">
+        <Msg id={messageIds.configuration.configure.tags.header} />
+      </Typography>
+      <Box alignItems="center" display="flex" paddingBottom={2} paddingTop={2}>
+        <Box width="50%">
+          <Typography variant="body2">
+            {uiDataColumn.title.toLocaleUpperCase()}
+          </Typography>
+        </Box>
+        <Box width="50%">
+          <Typography variant="body2">
+            {messages.configuration.configure.tags
+              .tagsHeader()
+              .toLocaleUpperCase()}
+          </Typography>
+        </Box>
+      </Box>
+      <Box sx={{ overflowY: 'scroll' }}>
+        {uiDataColumn.uniqueValues.map((uniqueValue, index) => (
+          <>
+            {index != 0 && <Divider sx={{ marginY: 1 }} />}
+            <TagConfigRow
+              assignedTags={uiDataColumn.getAssignedTags(uniqueValue)}
+              numRows={uiDataColumn.numRowsByUniqueValue[uniqueValue]}
+              onAssignTag={(tag: ZetkinTag) =>
+                uiDataColumn.assignTag(tag, uniqueValue)
+              }
+              onUnassignTag={(tag: ZetkinTag) =>
+                uiDataColumn.unAssignTag(tag, uniqueValue)
+              }
+              title={uniqueValue.toString()}
+            />
+          </>
+        ))}
+        {uiDataColumn.numberOfEmptyRows > 0 && (
+          <>
+            <Divider sx={{ marginY: 1 }} />
+            <TagConfigRow
+              assignedTags={uiDataColumn.getAssignedTags(null)}
+              italic
+              numRows={uiDataColumn.numberOfEmptyRows}
+              onAssignTag={(tag: ZetkinTag) =>
+                uiDataColumn.assignTag(tag, null)
+              }
+              onUnassignTag={(tag: ZetkinTag) =>
+                uiDataColumn.unAssignTag(tag, null)
+              }
+              title={messages.configuration.configure.tags.empty()}
+            />
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default TagConfig;

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

@@ -5,14 +5,25 @@ import { Box, Typography } from '@mui/material';
 import messageIds from 'features/import/l10n/messageIds';
 import { Msg } from 'core/i18n';
 import TagManager from 'features/tags/components/TagManager';
+import { ZetkinTag } from 'utils/types/zetkin';
 
 interface TagConfigRowProps {
+  assignedTags: ZetkinTag[];
   italic?: boolean;
   numRows: number;
+  onAssignTag: (tag: ZetkinTag) => void;
+  onUnassignTag: (tag: ZetkinTag) => void;
   title: string;
 }
 
-const TagConfigRow: FC<TagConfigRowProps> = ({ italic, numRows, title }) => {
+const TagConfigRow: FC<TagConfigRowProps> = ({
+  assignedTags,
+  italic,
+  numRows,
+  onAssignTag,
+  onUnassignTag,
+  title,
+}) => {
   return (
     <Box display="flex" flexDirection="column">
       <Box display="flex">
@@ -27,9 +38,9 @@ const TagConfigRow: FC<TagConfigRowProps> = ({ italic, numRows, title }) => {
         </Box>
         <Box width="50%">
           <TagManager
-            assignedTags={[]}
-            onAssignTag={() => null}
-            onUnassignTag={() => null}
+            assignedTags={assignedTags}
+            onAssignTag={(tag) => onAssignTag(tag)}
+            onUnassignTag={(tag) => onUnassignTag(tag)}
           />
         </Box>
       </Box>

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

@@ -1,22 +1,19 @@
 import { CompareArrows } from '@mui/icons-material';
 import { FC } from 'react';
-import { Box, Divider, Typography, useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 
 import messageIds from 'features/import/l10n/messageIds';
-import TagConfigRow from './TagConfigRow';
-import { UIDataColumn } from 'features/import/utils/types';
+import TagConfig from './TagConfig';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
+import { useMessages } from 'core/i18n';
 import ZUIEmptyState from 'zui/ZUIEmptyState';
-import { Msg, useMessages } from 'core/i18n';
+import { ColumnKind, TagColumn } from 'features/import/utils/types';
 
 interface ConfigurationProps {
-  columnIndexBeingConfigured: number | null;
-  uiDataColumns: UIDataColumn[];
+  uiDataColumn: UIDataColumn | null;
 }
 
-const Configuration: FC<ConfigurationProps> = ({
-  columnIndexBeingConfigured,
-  uiDataColumns,
-}) => {
+const Configuration: FC<ConfigurationProps> = ({ uiDataColumn }) => {
   const messages = useMessages(messageIds);
   const theme = useTheme();
 
@@ -27,71 +24,14 @@ const Configuration: FC<ConfigurationProps> = ({
       flexDirection="column"
       height="100%"
     >
-      {columnIndexBeingConfigured && (
-        <Box
-          display="flex"
-          flexDirection="column"
-          overflow="hidden"
-          padding={2}
-        >
-          <Typography variant="h5">
-            <Msg id={messageIds.configuration.configure.tags.header} />
-          </Typography>
-          <Box
-            alignItems="center"
-            display="flex"
-            paddingBottom={2}
-            paddingTop={2}
-          >
-            <Box width="50%">
-              <Typography variant="body2">
-                {uiDataColumns[
-                  columnIndexBeingConfigured
-                ].title.toLocaleUpperCase()}
-              </Typography>
-            </Box>
-            <Box width="50%">
-              <Typography variant="body2">
-                {messages.configuration.configure.tags
-                  .tagsHeader()
-                  .toLocaleUpperCase()}
-              </Typography>
-            </Box>
-          </Box>
-          <Box sx={{ overflowY: 'scroll' }}>
-            {uiDataColumns[columnIndexBeingConfigured].uniqueValues.map(
-              (uniqueValue, index) => (
-                <>
-                  {index != 0 && <Divider sx={{ marginY: 1 }} />}
-                  {'test'}
-                  {/* <TagConfigRow
-                    numRows={
-                      //göra detta i hooken och skicka ut det
-                      uiDataColumn.data.filter((value) => value == uniqueValue)
-                        .length
-                    }
-                    title={uniqueValue as string}
-                  /> */}
-                </>
-              )
-            )}
-            {uiDataColumns[columnIndexBeingConfigured].numberOfEmptyRows >
-              0 && (
-              <>
-                <Divider sx={{ marginY: 1 }} />
-                <TagConfigRow
-                  italic
-                  numRows={
-                    uiDataColumns[columnIndexBeingConfigured].numberOfEmptyRows
-                  }
-                  title={messages.configuration.configure.tags.empty()}
-                />
-              </>
-            )}
-          </Box>
-        </Box>
+      {uiDataColumn && uiDataColumn.originalColumn.kind == ColumnKind.TAG && (
+        <TagConfig
+          uiDataColumn={
+            uiDataColumn as UIDataColumn & { originalColumn: TagColumn }
+          }
+        />
       )}
-      {!columnIndexBeingConfigured && (
+      {!uiDataColumn && (
         <Box alignItems="center" display="flex" justifyContent="center">
           <ZUIEmptyState
             message={messages.configuration.mapping.emptyStateMessage()}

src/features/import/components/Configure/Mapping/MappingRow.tsx

@@ -13,29 +13,43 @@ import {
 } from '@mui/material';
 
 import messageIds from 'features/import/l10n/messageIds';
-import { Column, ColumnKind, UIDataColumn } from 'features/import/utils/types';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
+import { Column, ColumnKind } from 'features/import/utils/types';
 import { Msg, useMessages } from 'core/i18n';
 
 interface MappingRowProps {
   column: UIDataColumn;
+  columnOptions: { label: string; value: string }[];
   isBeingConfigured: boolean;
   onChange: (newColumn: Column) => void;
   onConfigureStart: () => void;
   onDeselectColumn: () => void;
-  options: { label: string; value: string }[];
 }
 
 const MappingRow: FC<MappingRowProps> = ({
   column,
+  columnOptions,
   isBeingConfigured,
   onChange,
   onDeselectColumn,
   onConfigureStart,
-  options,
 }) => {
   const theme = useTheme();
   const messages = useMessages(messageIds);
 
+  const getValue = () => {
+    if (column.originalColumn.kind == ColumnKind.FIELD) {
+      return `field:${column.originalColumn.field}`;
+    }
+
+    if (column.originalColumn.kind != ColumnKind.UNKNOWN) {
+      return column.originalColumn.kind.toString();
+    }
+
+    //Column kind is UNKNOWN, so we want no selected value
+    return '';
+  };
+
   return (
     <Box
       bgcolor={isBeingConfigured ? theme.palette.transparentGrey.light : ''}
@@ -106,20 +120,15 @@ const MappingRow: FC<MappingRowProps> = ({
                   });
                 } else if (event.target.value.startsWith('field')) {
                   onChange({
-                    field: event.target.value.slice(7),
+                    field: event.target.value.slice(6),
                     kind: ColumnKind.FIELD,
                     selected: true,
                   });
                 }
               }}
-              value={
-                column.originalColumn.selected &&
-                column.originalColumn.kind != ColumnKind.UNKNOWN
-                  ? column.originalColumn.kind
-                  : ''
-              }
+              value={getValue()}
             >
-              {options.map((option) => {
+              {columnOptions.map((option) => {
                 return (
                   <MenuItem key={option.value} value={option.value}>
                     {option.label}
@@ -158,22 +167,8 @@ const MappingRow: FC<MappingRowProps> = ({
               }
             />
           )}
-          {/* {column.showMappingResultMessage && (
-            <Msg
-              id={
-                column.originalColumn.kind == ColumnKind.ID_FIELD
-                  ? messageIds.configuration.mapping.finishedMappingIds
-                  : column.originalColumn.kind == ColumnKind.ORGANIZATION
-                  ? messageIds.configuration.mapping
-                      .finishedMappingOrganizations
-                  : messageIds.configuration.mapping.finishedMappingTags
-              }
-              values={{
-                numMappedTo: mappingResults.numMappedTo,
-                numPeople: mappingResults.numRows,
-              }}
-            />
-          )} */}
+          {column.showMappingResultMessage &&
+            column.renderMappingResultsMessage()}
         </Typography>
         {(column.showNeedsConfigMessage || column.showMappingResultMessage) && (
           <Button

src/features/import/components/Configure/Mapping/index.tsx

@@ -3,11 +3,11 @@ import { Box, Divider, Typography } from '@mui/material';
 
 import MappingRow from './MappingRow';
 import messageIds from 'features/import/l10n/messageIds';
-import { UIDataColumn } from 'features/import/utils/types';
-import { updateColumn } from 'features/import/store';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
+import useColumn from 'features/import/hooks/useColumn';
 import useColumnOptions from 'features/import/hooks/useColumnOptions';
+import { useNumericRouteParams } from 'core/hooks';
 import { Msg, useMessages } from 'core/i18n';
-import { useAppDispatch, useNumericRouteParams } from 'core/hooks';
 
 interface MappingProps {
   columns: UIDataColumn[];
@@ -24,8 +24,8 @@ const Mapping: FC<MappingProps> = ({
 }) => {
   const { orgId } = useNumericRouteParams();
   const messages = useMessages(messageIds);
-  const fields = useColumnOptions(orgId);
-  const dispatch = useAppDispatch();
+  const columnOptions = useColumnOptions(orgId);
+  const updateColumn = useColumn();
 
   return (
     <Box
@@ -58,13 +58,11 @@ const Mapping: FC<MappingProps> = ({
               {index == 0 && <Divider />}
               <MappingRow
                 column={column}
+                columnOptions={columnOptions}
                 isBeingConfigured={columnIndexBeingConfigured == index}
-                onChange={(column) => {
-                  dispatch(updateColumn([index, column]));
-                }}
+                onChange={(column) => updateColumn(index, column)}
                 onConfigureStart={() => onConfigureStart(index)}
                 onDeselectColumn={onDeselectColumn}
-                options={fields}
               />
               <Divider />
             </Box>

src/features/import/components/Configure/index.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from 'react';
 import Configuration from './Configuration';
 import Mapping from './Mapping';
 import SheetSettings from './SheetSettings';
-import useUIDataColumns from 'features/import/hooks/useColumns';
+import useUIDataColumns from 'features/import/hooks/useUIDataColumns';
 
 const Configure: FC = () => {
   const [columnIndexBeingConfigured, setColumnIndexBeingConfigured] = useState<
@@ -28,8 +28,11 @@ const Configure: FC = () => {
         </Box>
         <Box display="flex" flexDirection="column" width="50%">
           <Configuration
-            columnIndexBeingConfigured={columnIndexBeingConfigured}
-            uiDataColumns={uiDataColumns}
+            uiDataColumn={
+              columnIndexBeingConfigured
+                ? uiDataColumns[columnIndexBeingConfigured]
+                : null
+            }
           />
         </Box>
       </Box>

src/features/import/hooks/useColumn.ts

@@ -0,0 +1,11 @@
+import { Column } from '../utils/types';
+import { updateColumn } from '../store';
+import { useAppDispatch } from 'core/hooks';
+
+export default function useColumn() {
+  const dispatch = useAppDispatch();
+
+  return (index: number, column: Column) => {
+    dispatch(updateColumn([index, column]));
+  };
+}