Tor/web 70 edit and delete images in control panel

backend/samfundet/serializers.py

@@ -82,13 +82,50 @@ class Meta:
         fields = '__all__'
 
 
+def _parse_tag_string(tag_string: str | None) -> list[str]:
+    """Parse comma-separated tag string into deduplicated list."""
+    if not tag_string:
+        return []
+    tag_names = [name.strip() for name in tag_string.split(',')]
+    tag_names = [name for name in tag_names if name]
+    seen = set()
+    result = []
+    for name in tag_names:
+        if name not in seen:
+            seen.add(name)
+            result.append(name)
+    return result
+
+
+def _get_or_create_tags(tag_names: list[str]) -> list:
+    """Get or create Tag objects from list of names."""
+    tags = []
+    for name in tag_names:
+        tag = Tag.objects.filter(name=name).first() or Tag.objects.create(name=name)
+        tags.append(tag)
+    return tags
+
+
+def _update_image_file(instance: Image, file: File, validated_data: dict) -> None:
+    """Update the image file on an instance."""
+    try:
+        img = PilImage.open(file)
+        img.verify()
+    except (UnidentifiedImageError, Exception) as e:
+        raise ValidationError(f'Invalid image file: {str(e)}') from e
+    if instance.image:
+        instance.image.delete(save=False)
+    original_name = getattr(file, 'name', None) or validated_data.get('title', instance.title)
+    instance.image = ImageFile(file, original_name)
+
+
 class ImageSerializer(CustomBaseSerializer):
     # Read only tags used in frontend.
     tags = TagSerializer(many=True, read_only=True)
     url = serializers.SerializerMethodField(method_name='get_url', read_only=True)
 
     # Write only fields for posting new images.
-    file = serializers.FileField(write_only=True, required=True)
+    file = serializers.FileField(write_only=True, required=False)
     # Comma separated tag string "tag_a,tag_b" is automatically parsed to list of tag models.
     tag_string = serializers.CharField(write_only=True, allow_blank=True, required=False)
 
@@ -102,53 +139,50 @@ def validate(self, attributes: dict) -> dict:
             raise serializers.ValidationError({'title': 'This field is required.'})
 
         file = attributes.get('file')
-        if not file:
+        # File is required only for create operations (POST), not for updates (PUT/PATCH)
+        # self.instance will be None for creation, and non-None for updates
+        if not file and not self.instance:
             raise serializers.ValidationError({'file': 'An image file is required.'})
 
-        # Validate that the uploaded file is a valid image
-        try:
-            file.seek(0)
-            PilImage.open(file).verify()
-            file.seek(0)
-        except UnidentifiedImageError as error:
-            raise serializers.ValidationError('Invalid image') from error
+        # Validate that the uploaded file is a valid image if one is provided
+        if file:
+            try:
+                file.seek(0)
+                PilImage.open(file).verify()
+                file.seek(0)
+            except UnidentifiedImageError as error:
+                raise serializers.ValidationError('Invalid image') from error
 
         return attributes
 
     def create(self, validated_data: dict) -> Image:
-        """
-        Uses the write_only file field to create new image file.
-        Automatically finds/creates new tags based on comma-separated string.
-        Strips whitespace and drops empty tag names
-        and preserves the original filename when saving the image
-        """
+        """Create new image with file and tags."""
         file = validated_data.pop('file')
         raw_tag_string = validated_data.pop('tag_string', None)
-        if raw_tag_string is not None:
-            # Split on comma, strip whitespace and drop empties
-            tag_names = [name.strip() for name in raw_tag_string.split(',')]
-            tag_names = [name for name in tag_names if name]
-
-            # De-duplicate while preserving order
-            seen: set[str] = set()
-            unique_tag_names = []
-            for name in tag_names:
-                if name not in seen:
-                    seen.add(name)
-                    unique_tag_names.append(name)
-            tags = [Tag.objects.get_or_create(name=name)[0] for name in unique_tag_names]
-        else:
-            tags = []
-        # Preserve original filename if available; fallback to title
+        tag_names = _parse_tag_string(raw_tag_string)
+        tags = _get_or_create_tags(tag_names)
         original_name = getattr(file, 'name', None) or validated_data.get('title')
-        image = Image.objects.create(
-            image=ImageFile(file, original_name),
-            **validated_data,
-        )
+        image = Image.objects.create(image=ImageFile(file, original_name), **validated_data)
         image.tags.set(tags)
         image.save()
         return image
 
+    def update(self, instance: Image, validated_data: dict) -> Image:
+        """Update image metadata and optionally the image file."""
+        if 'file' in validated_data:
+            _update_image_file(instance, validated_data.pop('file'), validated_data)
+
+        raw_tag_string = validated_data.pop('tag_string', None)
+        if raw_tag_string is not None:
+            tag_names = _parse_tag_string(raw_tag_string)
+            tags = _get_or_create_tags(tag_names)
+            instance.tags.set(tags)
+
+        for attr, value in validated_data.items():
+            setattr(instance, attr, value)
+        instance.save()
+        return instance
+
     def get_url(self, image: Image) -> str:
         return image.image.url
 

backend/samfundet/view/general_views.py

@@ -48,6 +48,7 @@
     InformationPageSerializer,
     UserGangSectionRoleSerializer,
 )
+from samfundet.models.event import Event
 from samfundet.models.general import (
     Tag,
     Gang,
@@ -110,6 +111,13 @@ class ImageView(ModelViewSet):
     filter_backends = [SearchFilter]
     search_fields = ['title']
 
+    @action(detail=True, methods=['get'])
+    def linked_events(self, request: Request, pk: int | None = None) -> Response:
+        """Get all events that use this image."""
+        image = self.get_object()
+        events = Event.objects.filter(image=image).values('id', 'title_en', 'title_nb', 'start_dt')
+        return Response(data=list(events))
+
 
 # Image tags
 class TagView(ModelViewSet):

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import classNames from 'classnames';
 import { type ReactElement, type ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Button, Form } from '~/Components';
 import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
@@ -33,6 +33,8 @@ import { TextStep } from './steps/TextStep';
 
 export function EventCreatorAdminPage() {
   const { t } = useTranslation();
+  const location = useLocation();
+  const reactNavigate = useNavigate();
   const [event, setEvent] = useState<Partial<EventDto>>();
   const [showSpinner, setShowSpinner] = useState<boolean>(true);
   const { id } = useParams();
@@ -87,6 +89,16 @@ export function EventCreatorAdminPage() {
     }
   }, [id, t]);
 
+  // Handle navigation after successful edit
+  useEffect(() => {
+    if (editEventMutation.isSuccess && id) {
+      const from = location.state?.from;
+      if (from) {
+        reactNavigate(from);
+      }
+    }
+  }, [editEventMutation.isSuccess, id, location.state, reactNavigate]);
+
   // ================================== //
   //          Creation Steps            //
   // ================================== //

frontend/src/PagesAdmin/ImageAdminPage/components/AdminImage/AdminEditImage.module.scss

@@ -0,0 +1,104 @@
+@use 'src/constants' as *;
+
+@use 'src/mixins' as *;
+
+.editContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.imageSection {
+  @include rounded;
+  @include shadow-light;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+}
+
+.uploadSection {
+  @include rounded;
+  @include shadow-light;
+  padding: 2rem;
+
+  h4 {
+    margin: 0 0 1rem 0;
+    font-size: 1.1em;
+  }
+}
+
+.uploadForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.fileInput {
+  padding: 0.5rem;
+  border: 1px solid gray;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.fileName {
+  font-size: 0.9em;
+  color: gray;
+  margin: 0;
+}
+
+.container {
+  padding: 2rem;
+  text-align: center;
+}
+
+.linkedEventsSection {
+  @include rounded;
+  @include shadow-light;
+  padding: 2rem;
+  background-color: #fff3cd;
+  border-left: 4px solid #ffc107;
+
+  h4 {
+    margin: 0 0 1rem 0;
+    font-size: 1.1em;
+    color: #333333;
+  }
+}
+
+.eventsList {
+  margin: 0 0 1rem 0;
+  padding-left: 2rem;
+  list-style-type: disc;
+
+  li {
+    margin-bottom: 0.5rem;
+    color: #555555;
+  }
+}
+
+.eventItem {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0.25rem 0.5rem;
+  margin-left: -0.5rem;
+  border-radius: 3px;
+}
+
+.warningText {
+  margin: 1rem 0 0 0;
+  font-size: 0.95em;
+  color: #855a00;
+  font-style: italic;
+}