Merge pull request #2389 from zetkin/release-241127

241127 Release

Author: richardolsson

package.json

@@ -100,7 +100,7 @@
     "xlsx-js-style": "^1.2.0",
     "yaml": "^1.10.0",
     "zetkin": "~1.3.1",
-    "zod": "^3.20.2"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

src/app/o/[orgId]/embedjoinform/[formData]/page.tsx

@@ -31,6 +31,33 @@ export default async function Page({ params, searchParams }: PageProps) {
         {searchParams.stylesheet && (
           <style>{`@import url(${searchParams.stylesheet})`}</style>
         )}
+        {!searchParams.stylesheet && (
+          <style>{`
+            body {
+              padding: 0.5rem;
+            }
+
+            .zetkin-joinform__field {
+              margin-bottom: 1rem;
+            }
+
+            .zetkin-joinform__field input {
+              width: 100%;
+              max-width: 600px;
+              padding: 0.3rem;
+              font-size: 1.5rem;
+            }
+
+            .zetkin-joinform__submit-button {
+              border-width: 0;
+              font-size: 1.5rem;
+              background-color: black;
+              color: white;
+              padding: 0.5rem 1rem;
+              border-radius: 0.2rem;
+            }
+          `}</style>
+        )}
       </div>
     );
   } catch (err) {

src/core/i18n/globalMessageIds.ts

@@ -6,6 +6,12 @@ export default makeMessages('glob', {
     edit: m('Editing'),
     readonly: m('Read-only'),
   },
+  genderOptions: {
+    f: m('Female'),
+    m: m('Male'),
+    o: m('Other'),
+    unspecified: m('Unspecified'),
+  },
   personFields: {
     alt_phone: m('Alternate Phone Number'),
     city: m('City'),

src/features/canvassAssignments/components/PlaceDialog/pages/CreateHouseholdsPage.tsx

@@ -43,8 +43,8 @@ const CreateHouseholdsPage: FC<Props> = ({
         width: widthPerHousehold * 5,
       };
 
-      const maxHeight = rect.width / widthPerHousehold - 2;
-      const maxWidth = rect.height / heightPerFloor - 1;
+      const maxHeight = rect.height / (heightPerFloor - 1);
+      const maxWidth = rect.width / (widthPerHousehold - 1);
       const scaleX = Math.min(1.0, maxWidth / newNumAptsPerFloor);
       const scaleY = Math.min(1.0, maxHeight / newNumFloors);
       const newScale = Math.min(scaleX, scaleY);

src/features/canvassAssignments/components/PlaceDialog/pages/EditHousehold.tsx

@@ -13,10 +13,11 @@ type Props = {
 
 const EditHousehold: FC<Props> = ({ onClose, onBack, onSave, household }) => {
   const [title, setTitle] = useState(household.title || '');
-  const [floor, setFloor] = useState(household.floor || NaN);
+  const [floor, setFloor] = useState(household.floor ?? NaN);
 
   useEffect(() => {
     setTitle(household.title || '');
+    setFloor(household.floor ?? NaN);
   }, [household]);
 
   const nothingHasBeenEdited =

src/features/events/components/EventTypeAutocomplete.tsx

@@ -1,14 +1,17 @@
 import Fuse from 'fuse.js';
 import { lighten } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
-import { Add, Clear } from '@mui/icons-material';
+import { Add, DeleteOutline } from '@mui/icons-material';
 import { Autocomplete, Box, TextField, Theme, Tooltip } from '@mui/material';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useContext, useEffect, useRef, useState } from 'react';
 
 import messageIds from '../l10n/messageIds';
+import theme from 'theme';
 import useCreateType from '../hooks/useCreateType';
 import { useMessages } from 'core/i18n';
+import useDeleteType from '../hooks/useDeleteType';
 import { ZetkinActivity, ZetkinEvent } from 'utils/types/zetkin';
+import { ZUIConfirmDialogContext } from 'zui/ZUIConfirmDialogProvider';
 
 interface StyleProps {
   showBorder: boolean | undefined;
@@ -74,6 +77,7 @@ const EventTypeAutocomplete: FC<EventTypeAutocompleteProps> = ({
   value,
 }) => {
   const createType = useCreateType(orgId);
+  const deleteType = useDeleteType(orgId);
   const messages = useMessages(messageIds);
   const uncategorizedMsg = messages.type.uncategorized();
   const [createdType, setCreatedType] = useState<string>('');
@@ -83,14 +87,18 @@ const EventTypeAutocomplete: FC<EventTypeAutocompleteProps> = ({
   const spanRef = useRef<HTMLSpanElement>(null);
   const classes = useStyles({ showBorder });
 
+  const { showConfirmDialog } = useContext(ZUIConfirmDialogContext);
+
   useEffect(() => {
     //When a user creates a new type, it is missing an event ID.
     //In here, when the length of the type changes,
     //it searches for the created event and updates event with an ID.
     if (createdType !== '') {
       const newEventType = types.find((item) => item.title === createdType);
-      setText(newEventType!.title);
-      onChangeNewOption(newEventType!.id);
+      setText(newEventType ? newEventType!.title : uncategorizedMsg);
+      if (newEventType) {
+        onChangeNewOption(newEventType!.id);
+      }
     }
   }, [types.length]);
 
@@ -224,17 +232,44 @@ const EventTypeAutocomplete: FC<EventTypeAutocompleteProps> = ({
           return (
             <Box key={option.id}>
               {option.id != 'CREATE' && option.id != 'UNCATEGORIZED' && (
-                <li {...props}>{option.title}</li>
+                <li {...props} style={{ justifyContent: 'space-between' }}>
+                  {option.title}
+                  <DeleteOutline
+                    onClick={(ev) => {
+                      ev.stopPropagation();
+                      showConfirmDialog({
+                        onSubmit: () => {
+                          if (typeof option.id === 'number') {
+                            deleteType(option.id);
+                            //If the current event has the deleted event type,
+                            //set the current event's type to null
+                            if (value && option.id == value.id) {
+                              onChange(null);
+                            }
+                          }
+                        },
+                        warningText: messages.type.deleteMessage({
+                          eventType: option.title,
+                        }),
+                      });
+                    }}
+                    sx={{
+                      '&:hover': {
+                        color: theme.palette.secondary.main,
+                      },
+                      color: theme.palette.secondary.light,
+                      cursor: 'pointer',
+                      transition: 'color 0.3s ease',
+                    }}
+                  />
+                </li>
               )}
               {option.id == 'UNCATEGORIZED' && (
-                <li {...props}>
-                  <Clear />
-                  {uncategorizedMsg}
-                </li>
+                <li {...props}>{uncategorizedMsg}</li>
               )}
               {option.id == 'CREATE' && (
                 <li {...props}>
-                  <Add />
+                  <Add sx={{ marginRight: 1 }} />
                   {messages.type.createType({ type: option.title! })}
                 </li>
               )}

src/features/events/hooks/useDeleteType.ts

@@ -0,0 +1,12 @@
+import { typeDeleted } from '../store';
+import { useApiClient, useAppDispatch } from 'core/hooks';
+
+export default function useDeleteType(orgId: number) {
+  const apiClient = useApiClient();
+  const dispatch = useAppDispatch();
+
+  return async (typeId: number) => {
+    await apiClient.delete(`/api/orgs/${orgId}/activities/${typeId}`);
+    dispatch(typeDeleted(typeId));
+  };
+}

src/features/events/l10n/messageIds.ts

@@ -282,6 +282,9 @@ export default makeMessages('feat.events', {
   tooltipContent: m('Untitled events will display type as title'),
   type: {
     createType: m<{ type: string }>('Create "{type}"'),
+    deleteMessage: m<{ eventType: string }>(
+      'Are you sure you want to delete the "{eventType}" event type for the whole organization?'
+    ),
     tooltip: m('Click to change type'),
     uncategorized: m('Uncategorized'),
   },

src/features/events/store.ts

@@ -541,6 +541,20 @@ const eventsSlice = createSlice({
         remoteItem(data.id, { data: data, isLoading: false }),
       ]);
     },
+    typeDeleted: (state, action: PayloadAction<number>) => {
+      const typeId = action.payload;
+      const typeListItem = state.typeList.items.find(
+        (item) => item.id === typeId
+      );
+
+      if (typeListItem) {
+        typeListItem.deleted = true;
+      }
+
+      state.typeList.items = state.typeList.items.filter(
+        (type) => type.id !== typeId
+      );
+    },
     typeLoad: (state, action: PayloadAction<number>) => {
       const id = action.payload;
       const item = state.typeList.items.find((item) => item.id == id);
@@ -728,6 +742,7 @@ export const {
   statsLoaded,
   typeAdd,
   typeAdded,
+  typeDeleted,
   typeLoad,
   typeLoaded,
   typesLoad,

src/features/files/components/FileLibraryDialog/FilePreview.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import Image from 'next/image';
 import { Box, Button, Typography } from '@mui/material';
 
@@ -14,31 +14,48 @@ type Props = {
 };
 
 const FilePreview: FC<Props> = ({ file, onBack, onSelect }) => {
+  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
+
   return (
     <Box display="flex" flexDirection="column" height="100%">
       <Box height="100%" my={2} overflow="auto">
         <TransparentGridBackground
           interactive={false}
           sx={{
-            height: 'calc(100% - 2em)',
+            height: 'calc(100% - 4em)',
             position: 'relative',
           }}
         >
           <Image
             alt={file.original_name}
             height="800"
+            onLoad={(e) => {
+              if (e.target instanceof HTMLImageElement) {
+                setDimensions({
+                  height: e.target.naturalHeight,
+                  width: e.target.naturalWidth,
+                });
+              }
+            }}
             src={file.url}
             style={{
               height: '100%',
               objectFit: 'contain',
               width: '100%',
             }}
+            unoptimized
             width="800"
           />
         </TransparentGridBackground>
         <Typography color="secondary" mt={1} textAlign="center" variant="body2">
           {file.original_name}
         </Typography>
+        <Typography color="secondary" mt={1} textAlign="center" variant="body2">
+          <Msg
+            id={messageIds.image.dimensions}
+            values={{ height: dimensions.height, width: dimensions.width }}
+          />
+        </Typography>
       </Box>
       <Box display="flex" gap={1} justifyContent="flex-end">
         <Button onClick={() => onBack()} variant="outlined">

src/features/files/components/LibraryImage.tsx

@@ -6,22 +6,27 @@ import { ZetkinFile } from 'utils/types/zetkin';
 
 interface LibraryImageProps {
   imageFile: ZetkinFile;
-  onLoad?: () => void;
-  onLoadingComplete?: () => void;
+  onLoad?: ({ height, width }: { height: number; width: number }) => void;
 }
 
-const LibraryImage: FC<LibraryImageProps> = ({
-  imageFile,
-  onLoad,
-  onLoadingComplete,
-}) => {
+const LibraryImage: FC<LibraryImageProps> = ({ imageFile, onLoad }) => {
   return (
     <TransparentGridBackground>
       <Image
         alt={imageFile.original_name}
         height="400"
-        onLoad={() => onLoad && onLoad()}
-        onLoadingComplete={() => onLoadingComplete && onLoadingComplete()}
+        onLoad={(e) => {
+          if (onLoad) {
+            if (e.target instanceof HTMLImageElement) {
+              onLoad({
+                height: e.target.naturalHeight,
+                width: e.target.naturalWidth,
+              });
+            } else {
+              onLoad({ height: 0, width: 0 });
+            }
+          }
+        }}
         src={imageFile.url}
         style={{
           aspectRatio: '1 / 1',
@@ -30,6 +35,7 @@ const LibraryImage: FC<LibraryImageProps> = ({
           objectFit: 'contain',
           width: '100%',
         }}
+        unoptimized
         width="400"
       />
     </TransparentGridBackground>

src/features/files/components/LibraryImageCard.tsx

@@ -3,6 +3,8 @@ import { FC, useState } from 'react';
 
 import LibraryImage from './LibraryImage';
 import { ZetkinFile } from 'utils/types/zetkin';
+import messageIds from 'features/files/l10n/messageIds';
+import { Msg } from 'core/i18n';
 
 interface LibraryImageCardProps {
   imageFile: ZetkinFile;
@@ -14,6 +16,7 @@ const LibraryImageCard: FC<LibraryImageCardProps> = ({
   onSelectImage,
 }) => {
   const [loading, setLoading] = useState(true);
+  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
 
   return (
     <Box
@@ -24,10 +27,18 @@ const LibraryImageCard: FC<LibraryImageCardProps> = ({
     >
       <LibraryImage
         imageFile={imageFile}
-        onLoad={() => setLoading(true)}
-        onLoadingComplete={() => setLoading(false)}
+        onLoad={(dimensions) => {
+          setLoading(false);
+          setDimensions(dimensions);
+        }}
       />
-      <Box alignItems="center" display="flex" justifyContent="center" mt={1}>
+      <Box
+        alignItems="center"
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        mt={1}
+      >
         {loading && (
           <CircularProgress color="primary" size="1em" sx={{ mr: 1 }} />
         )}
@@ -43,6 +54,21 @@ const LibraryImageCard: FC<LibraryImageCardProps> = ({
         >
           {imageFile.original_name}
         </Typography>
+        <Typography
+          alignSelf="center"
+          color="secondary"
+          component="span"
+          maxWidth="80%"
+          noWrap
+          overflow="hidden"
+          textOverflow="ellipsis"
+          variant="body2"
+        >
+          <Msg
+            id={messageIds.image.dimensions}
+            values={{ height: dimensions.height, width: dimensions.width }}
+          />
+        </Typography>
       </Box>
     </Box>
   );