feat: add playlists support to BlockSerializer and BlockForm; impleme…

…nt playlist selection in forms

backend/experiment/serializers.py

@@ -28,6 +28,8 @@ class Meta:
 
 
 class PlaylistSerializer(serializers.ModelSerializer):
+    id = serializers.IntegerField(required=False)
+
     class Meta:
         model = Playlist
         fields = ["id", "name"]
@@ -56,24 +58,42 @@ class Meta:
 
     def create(self, validated_data):
         translated_contents_data = validated_data.pop("translated_contents", [])
+        playlists_data = validated_data.pop("playlists", [])
         block = Block.objects.create(**validated_data)
 
         for content_data in translated_contents_data:
             BlockTranslatedContent.objects.create(block=block, **content_data)
 
+        for playlist_data in playlists_data:
+            playlist = Playlist.objects.get(pk=playlist_data["id"])
+            block.playlists.add(playlist)
+
         return block
 
     def update(self, instance, validated_data):
         translated_contents_data = validated_data.pop("translated_contents", [])
+        playlists_data = validated_data.pop("playlists", [])
 
         for attr, value in validated_data.items():
             setattr(instance, attr, value)
-        instance.save()
 
         BlockTranslatedContent.objects.filter(block=instance).delete()
         for content_data in translated_contents_data:
             BlockTranslatedContent.objects.create(block=instance, **content_data)
 
+        existing_playlist_ids = set()
+        for playlist_data in playlists_data:
+            playlist_id = playlist_data.get("id")
+            if playlist_id:
+                playlist = Playlist.objects.get(pk=playlist_id)
+                instance.playlists.add(playlist)
+                existing_playlist_ids.add(playlist.id)
+
+        # Delete removed playlists
+        instance.playlists.exclude(id__in=existing_playlist_ids).delete()
+
+        instance.save()
+
         return instance
 
 

backend/experiment/templates/form/experiment-form/src/components/BlockForm.tsx

@@ -93,6 +93,30 @@ export const BlockForm: React.FC<BlockFormProps> = ({ block, onChange, onDelete
           {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
           {loading && <p className="text-gray-500 text-sm mt-1">Loading rules...</p>}
         </FormField>
+
+        <FormField label="Playlists">
+          <Select
+            value={block.playlists.map((playlist) => playlist.id)}
+            onChange={(e) => {
+              const selectedPlaylists = Array.from(e.target.selectedOptions, (option) => ({
+                id: parseInt(option.value),
+                name: option.text,
+              }));
+              handleChange('playlists', selectedPlaylists);
+            }}
+            multiple
+            required
+            disabled={playlistsLoading}
+          >
+            {playlists.map((playlist) => (
+              <option key={playlist.id} value={parseInt(playlist.id)}>
+                {playlist.name}
+              </option>
+            ))}
+          </Select>
+          {playlistsError && <p className="text-red-500 text-sm mt-1">{playlistsError}</p>}
+          {playlistsLoading && <p className="text-gray-500 text-sm mt-1">Loading playlists...</p>}
+        </FormField>
       </div>
 
       <BlockTranslatedContentForms

backend/experiment/templates/form/experiment-form/src/components/PhasesForm.tsx

@@ -110,6 +110,8 @@ export const PhasesForm: React.FC<PhasesFormProps> = ({ phases, onChange }) => {
         rounds: 10,
         bonus_points: 0,
         rules: '',
+        translated_contents: [],
+        playlists: [],
       };
 
       // use splice to insert new block at position

backend/experiment/templates/form/experiment-form/src/types/types.ts

@@ -15,6 +15,11 @@ export interface BlockTranslatedContent {
   description: string;
 }
 
+export interface BlockPlaylist {
+  id: string;
+  name: string;
+}
+
 export interface Block {
   id?: number;
   index: number;
@@ -23,7 +28,8 @@ export interface Block {
   bonus_points: number;
   rules: string;
   phase?: number;  // Make phase optional
-  translated_contents: BlockTranslatedContent[];  // Changed from translated_content
+  translated_contents: BlockTranslatedContent[];
+  playlists: BlockPlaylist[];
 }
 
 export interface Phase {