Draft: Experiment form using React

backend/aml/base_settings.py

@@ -15,6 +15,9 @@
 from corsheaders.defaults import default_headers
 import sentry_sdk
 
+# JWT Settings
+from datetime import timedelta
+
 # Workaround for deprecated ugettext_lazy in django-inline-actions
 import django
 from django.utils.translation import gettext_lazy
@@ -41,6 +44,7 @@
 # Application definition
 
 INSTALLED_APPS = [
+    "rest_framework",
     "admin_interface",
     "modeltranslation",  # Must be before django.contrib.admin
     "django.contrib.admin",
@@ -208,3 +212,13 @@
 MARKUP_SETTINGS = {"markdown": {"safe_mode": False}}
 
 SUBPATH = os.getenv("AML_SUBPATH", "")
+
+# REST framework settings
+REST_FRAMEWORK = {
+    "DEFAULT_AUTHENTICATION_CLASSES": ("rest_framework_simplejwt.authentication.JWTAuthentication",),
+}
+
+SIMPLE_JWT = {
+    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=60),
+    "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
+}

backend/aml/urls.py

@@ -13,11 +13,17 @@
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+
 from django.contrib import admin
 from django.urls import include, path
 from django.conf import settings
 from django.conf.urls.static import static
 
+from rest_framework_simplejwt.views import (
+    TokenObtainPairView,
+    TokenRefreshView,
+)
+
 
 # Admin strings
 admin.site.site_header = "AML Admin"
@@ -26,31 +32,32 @@
 
 # Urls patterns
 urlpatterns = [
-    path('experiment/', include('experiment.urls')),
-    path('question/', include('question.urls')),
-    path('participant/', include('participant.urls')),
-    path('result/', include('result.urls')),
-    path('section/', include('section.urls')),
-    path('session/', include('session.urls')),
-    path('theme/', include('theme.urls')),
-    path('admin_interface/', include('admin_interface.urls')),
-    path('admin/', admin.site.urls),
-
+    path("experiment/", include("experiment.urls")),
+    path("question/", include("question.urls")),
+    path("participant/", include("participant.urls")),
+    path("result/", include("result.urls")),
+    path("section/", include("section.urls")),
+    path("session/", include("session.urls")),
+    path("theme/", include("theme.urls")),
+    path("admin_interface/", include("admin_interface.urls")),
+    path("admin/", admin.site.urls),
+    path("api/token/", TokenObtainPairView.as_view(), name="token_obtain_pair"),
+    path("api/token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
     # Sentry debug (uncomment to test Sentry)
     # path('sentry-debug/', lambda request: 1 / 0),
-
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 #   ^ The static helper function only works in debug mode
 # (https://docs.djangoproject.com/en/3.0/howto/static-files/)
 
 
 # Prefix all URLS with /server if AML_SUBPATH is set
 if settings.SUBPATH:
-    urlpatterns = [path('server/', include(urlpatterns))]
+    urlpatterns = [path("server/", include(urlpatterns))]
 
 # Debug toolbar
 if settings.DEBUG and not settings.TESTING:
     import debug_toolbar
+
     urlpatterns += [
         path("__debug__/", include(debug_toolbar.urls)),
     ]

backend/experiment/serializers.py

@@ -3,14 +3,197 @@
 
 from django_markup.markup import formatter
 from django.utils.translation import activate, get_language
+from rest_framework import serializers
 
 from experiment.actions.consent import Consent
 from image.serializers import serialize_image
 from participant.models import Participant
 from result.models import Result
 from session.models import Session
 from theme.serializers import serialize_theme
-from .models import Block, Experiment, Phase, SocialMediaConfig
+from .models import Block, Experiment, Phase, SocialMediaConfig, ExperimentTranslatedContent, BlockTranslatedContent
+from section.models import Playlist
+
+
+class ExperimentTranslatedContentSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ExperimentTranslatedContent
+        fields = ["id", "index", "language", "name", "description", "about_content", "social_media_message"]
+
+
+class BlockTranslatedContentSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = BlockTranslatedContent
+        fields = ["language", "name", "description"]
+
+
+class PlaylistSerializer(serializers.ModelSerializer):
+    id = serializers.IntegerField(required=False)
+
+    class Meta:
+        model = Playlist
+        fields = ["id", "name"]
+
+
+class BlockSerializer(serializers.ModelSerializer):
+    id = serializers.IntegerField(required=False)
+    translated_contents = BlockTranslatedContentSerializer(many=True, required=False, read_only=False)
+    playlists = PlaylistSerializer(many=True, required=False)
+
+    class Meta:
+        model = Block
+        fields = [
+            "id",
+            "index",
+            "slug",
+            "rounds",
+            "bonus_points",
+            "rules",
+            "translated_contents",
+            "playlists",  # many to many field
+        ]
+        extra_kwargs = {
+            "slug": {"validators": []},
+        }
+
+    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)
+
+        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
+
+
+class PhaseSerializer(serializers.ModelSerializer):
+    blocks = BlockSerializer(many=True, required=False)
+
+    class Meta:
+        model = Phase
+        fields = ["id", "index", "dashboard", "randomize", "blocks"]
+
+
+class ExperimentSerializer(serializers.ModelSerializer):
+    translated_content = ExperimentTranslatedContentSerializer(many=True, required=False)
+    phases = PhaseSerializer(many=True, required=False)
+
+    class Meta:
+        model = Experiment
+        fields = ["id", "slug", "active", "translated_content", "phases"]
+
+    def create(self, validated_data):
+        translated_content_data = validated_data.pop("translated_content", [])
+        phases_data = validated_data.pop("phases", [])
+        experiment = Experiment.objects.create(**validated_data)
+
+        for content_data in translated_content_data:
+            ExperimentTranslatedContent.objects.create(experiment=experiment, **content_data)
+
+        for phase_data in phases_data:
+            blocks_data = phase_data.pop("blocks", [])
+            phase = Phase.objects.create(experiment=experiment, **phase_data)
+
+            for block_data in blocks_data:
+                Block.objects.create(phase=phase, **block_data)
+
+        return experiment
+
+    def update(self, instance, validated_data):
+        translated_content_data = validated_data.pop("translated_content", [])
+        phases_data = validated_data.pop("phases", [])
+
+        # Update experiment fields
+        instance.slug = validated_data.get("slug", instance.slug)
+        instance.active = validated_data.get("active", instance.active)
+        instance.save()
+
+        # Update translated content
+        if translated_content_data is not None:
+            existing_content_ids = set()
+
+            # Update or create translated content
+            for content_data in translated_content_data:
+                content_id = content_data.get("id")
+                if content_id:
+                    content, _ = ExperimentTranslatedContent.objects.update_or_create(
+                        id=content_id, experiment=instance, defaults=content_data
+                    )
+                else:
+                    content = ExperimentTranslatedContent.objects.create(experiment=instance, **content_data)
+                existing_content_ids.add(content.id)
+
+            # Delete removed content
+            instance.translated_content.exclude(id__in=existing_content_ids).delete()
+
+        # Update phases
+        if phases_data is not None:
+            existing_phase_ids = set()
+
+            # Update or create phases
+            for phase_data in phases_data:
+                blocks_data = phase_data.pop("blocks", [])
+                phase_id = phase_data.get("id")
+
+                if phase_id:
+                    phase, _ = Phase.objects.update_or_create(id=phase_id, experiment=instance, defaults=phase_data)
+                else:
+                    phase = Phase.objects.create(experiment=instance, **phase_data)
+                existing_phase_ids.add(phase.id)
+
+                # Handle blocks for this phase
+                existing_block_ids = set()
+
+                for block_data in blocks_data:
+                    block_id = block_data.get("id")
+
+                    if block_id:
+                        block_instance = Block.objects.get(pk=block_id)
+                        block_serializer = BlockSerializer(block_instance, data=block_data, partial=True)
+                    else:
+                        block_serializer = BlockSerializer(data=block_data, partial=True)
+                    block_serializer.is_valid(raise_exception=True)
+                    block = block_serializer.save(phase=phase)
+                    existing_block_ids.add(block.id)
+
+                # Delete removed blocks
+                phase.blocks.exclude(id__in=existing_block_ids).delete()
+
+            # Delete removed phases
+            instance.phases.exclude(id__in=existing_phase_ids).delete()
+
+        return instance
 
 
 def serialize_actions(actions):

backend/experiment/templates/form/experiment-form/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

backend/experiment/templates/form/experiment-form/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

backend/experiment/templates/form/experiment-form/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list