Map tags to values.

zetkin · Nov 20, 2023 · b35161b · b35161b
1 parent 1fc7872
commit b35161b
Show file tree

Hide file tree

Showing 8 changed files with 240 additions and 96 deletions.
diff --git a/src/features/import/components/Configure/Configuration/TagConfig.tsx b/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;
diff --git a/src/features/import/components/Configure/Configuration/TagConfigRow.tsx b/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>

diff --git a/src/features/import/components/Configure/Configuration/index.tsx b/src/features/import/components/Configure/Configuration/index.tsx
@@ -1,12 +1,13 @@
 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/hooks/useColumns';
+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 {
   uiDataColumn: UIDataColumn | null;
@@ -23,58 +24,12 @@ const Configuration: FC<ConfigurationProps> = ({ uiDataColumn }) => {
       flexDirection="column"
       height="100%"
     >
-      {uiDataColumn && (
-        <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 }} />}
-                {'test'}
-                <TagConfigRow
-                  numRows={uiDataColumn.numRowsByUniqueValue[uniqueValue]}
-                  title={uniqueValue.toString()}
-                />
-              </>
-            ))}
-            {uiDataColumn.numberOfEmptyRows > 0 && (
-              <>
-                <Divider sx={{ marginY: 1 }} />
-                <TagConfigRow
-                  italic
-                  numRows={uiDataColumn.numberOfEmptyRows}
-                  title={messages.configuration.configure.tags.empty()}
-                />
-              </>
-            )}
-          </Box>
-        </Box>
+      {uiDataColumn && uiDataColumn.originalColumn.kind == ColumnKind.TAG && (
+        <TagConfig
+          uiDataColumn={
+            uiDataColumn as UIDataColumn & { originalColumn: TagColumn }
+          }
+        />
       )}
       {!uiDataColumn && (
         <Box alignItems="center" display="flex" justifyContent="center">

diff --git a/src/features/import/components/Configure/Mapping/MappingRow.tsx b/src/features/import/components/Configure/Mapping/MappingRow.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mui/material';
 
 import messageIds from 'features/import/l10n/messageIds';
-import { UIDataColumn } from 'features/import/hooks/useColumns';
+import { UIDataColumn } from 'features/import/hooks/useUIDataColumns';
 import { Column, ColumnKind } from 'features/import/utils/types';
 import { Msg, useMessages } from 'core/i18n';
 
@@ -167,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

diff --git a/src/features/import/components/Configure/Mapping/index.tsx b/src/features/import/components/Configure/Mapping/index.tsx
@@ -3,7 +3,7 @@ import { Box, Divider, Typography } from '@mui/material';
 
 import MappingRow from './MappingRow';
 import messageIds from 'features/import/l10n/messageIds';
-import { UIDataColumn } from 'features/import/hooks/useColumns';
+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';

diff --git a/src/features/import/components/Configure/index.tsx b/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<