A little javascript magic shows only the fields defined on the subclassed models

cms/models.py

@@ -41,9 +41,10 @@ class Page(NumberedModel):
 choices = settings.SECTION_TYPES
 class BaseSection(NumberedModel, PolymorphicModel):
     page = models.ForeignKey(Page, verbose_name=_('page'), related_name='sections', on_delete=models.PROTECT)
+    type = models.CharField(_('section type'), max_length=16, default=choices[0][0], choices=choices)
+
     position = models.PositiveIntegerField(_('position'), blank=True)
     title = models.CharField(_('title'), max_length=255, blank=True)
-    type = models.CharField(_('section type'), max_length=16, default=choices[0][0], choices=choices)
     color = models.PositiveIntegerField(_('color'), default=1, choices=settings.SECTION_COLORS)
 
     content = RichTextField(_('content'), blank=True)

cms/templates/cms/edit.html

@@ -59,10 +59,11 @@
 {% block extrabody %}
   <script type="text/javascript" src="/static/admin/js/urlify.js"></script>
   <script>
-    /* My own implementation of Django's prepopulate.js */
-
     var slugfield = document.getElementById('id_slug');
     var titlefield = document.getElementById('id_title');
+    var typefield = document.getElementById('id_type');
+
+    /* My own implementation of Django's prepopulate.js */
 
     if (slugfield && titlefield) {
         var virgin = slugfield.value === '';
@@ -75,5 +76,28 @@
             });
         }
     }
+
+    /* Only show relevant fields */
+
+    if (typefield) {
+        function show_relevant_fields(type) {
+            fields_per_type = {{fields_per_type|safe}};
+
+            for (el of document.querySelectorAll('div.formfield')) {
+                el.style.display = 'none';
+            }
+
+            for (field of fields_per_type[type]) {
+                el = document.getElementById(field);
+                el.style.display = 'block';
+            }
+        }
+
+        typefield.addEventListener('input', function(event) {
+            console.log(typefield.value);
+            show_relevant_fields(typefield.value.toLowerCase());
+        });
+        show_relevant_fields(typefield.value.toLowerCase());
+    }
   </script>
 {% endblock %}

cms/templates/cms/formfield.html

@@ -1,4 +1,4 @@
-<div class="formfield{% if field.errors %} error{% endif %}{% if field.field.required %} required{% endif %}">
+<div class="formfield{% if field.errors %} error{% endif %}{% if field.field.required %} required{% endif %}" id="{{field.name}}">
   <div class="errors">
     {{field.errors}}
   </div>

cms/templates/cms/page.html

@@ -6,7 +6,6 @@
 {% block content %}
   {% for section in sections %}
     <section class="{{section.type}} color{{section.color}}">
-      DIT IS EEN SECTIE MET FIELDS: {{section.fields}}
       {% include 'cms/sections/'|add:section.type|lower|add:'.html' %}
     </section>
   {% endfor %}

cms/views.py

@@ -1,8 +1,11 @@
+import json
+
 from django.conf import settings
 from django.urls import reverse
+from django.views import generic
 from django.shortcuts import redirect
+from django.contrib.contenttypes.models import ContentType
 from django.contrib.auth.mixins import UserPassesTestMixin
-from django.views.generic import DetailView, UpdateView, CreateView
 
 from .models import Page
 from .forms import PageForm, SectionForm
@@ -33,7 +36,7 @@ class MemoryMixin(object):
             request.session['previous_url'] = request.path
         return super().dispatch(request, *args, **kwargs)
 
-class BasePageView(MenuMixin, MemoryMixin, DetailView):
+class BasePageView(MenuMixin, MemoryMixin, generic.DetailView):
     model = Page
     template_name = 'cms/page.html'
 
@@ -56,12 +59,12 @@ class BasePageView(MenuMixin, MemoryMixin, DetailView):
 class PageView(BasePageView):
     pass
 
-class CreatePage(StaffRequiredMixin, MenuMixin, CreateView):
+class CreatePage(StaffRequiredMixin, MenuMixin, generic.CreateView):
     model = Page
     form_class = PageForm
     template_name = 'cms/new.html'
 
-class CreateSection(StaffRequiredMixin, MenuMixin, CreateView):
+class CreateSection(StaffRequiredMixin, MenuMixin, generic.CreateView):
     model = Section
     form_class = SectionForm
     template_name = 'cms/new.html'
@@ -71,9 +74,25 @@ class CreateSection(StaffRequiredMixin, MenuMixin, CreateView):
         form.save()
         return redirect(self.request.session.get('previous_url'))
 
-class BaseUpdateView(StaffRequiredMixin, MenuMixin, UpdateView):
+class BaseUpdateView(StaffRequiredMixin, MenuMixin, generic.UpdateView):
     template_name = 'cms/edit.html'
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        section_types = settings.SECTION_TYPES
+        fields_per_type = {}
+        for model, desc in section_types:
+            ctype = ContentType.objects.get(
+                app_label=Section._meta.app_label,
+                model=model.lower(),
+            )
+            fields_per_type[ctype.model] = ctype.model_class().fields
+
+        context.update({
+            'fields_per_type': json.dumps(fields_per_type),
+        })
+        return context
+
     def form_valid(self, form):
         form.save()
         return redirect(self.request.session.get('previous_url'))

examples/app/models.py

@@ -7,12 +7,11 @@ class Section(BaseSection):
     '''
 
 class TextSection(Section):
-    fields = ['title', 'content']
+    fields = ['type', 'position', 'title', 'content']
     class Meta:
         proxy = True
 
 class ImageSection(Section):
-    fields = ['title', 'image']
+    fields = ['type', 'position', 'title', 'image']
     class Meta:
         proxy = True
-