Sockpuppet Expo

from django.forms import ModelForm
from django.views.generic.edit import FormView

from core.models import NewsletterSubscription
from core.views.mixins import NewsletterSignupMixin


class NewsletterSubscriptionForm(ModelForm):
    class Meta:
        model = NewsletterSubscription
        fields = ['name', 'email']


class NewsletterSignupView(NewsletterSignupMixin, FormView):
    demo_template = '_newsletter_signup.html'
    form_class = NewsletterSubscriptionForm
    subtitle = 'Newsletter Signup'

    def get_context_data(self, *args, **kwargs):
        context = super().get_context_data(*args, **kwargs)
        context['people'] = NewsletterSubscription.objects.all()
        return context


view = NewsletterSignupView.as_view()

from sockpuppet.reflex import Reflex

from core.models import NewsletterSubscription


class SubscriptionReflex(Reflex):
    def add_person(self):
        o = NewsletterSubscription.objects.update_or_create(
            name=self.params['name'],
            email=self.params['email']
        )

    def remove_person(self):
        id = self.element.dataset['id']
        NewsletterSubscription.objects.filter(id=id).delete()

{% load static %}


<h2>Sign up for newsletter!</h2>
<form id="morph-form" data-reflex-root="#morph">
    {{ form }}
    <input type="submit" data-reflex="click->Subscription_Reflex#add_person">
    <div id="morph">
        <h2>Signed:</h2>
        <table>
            <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Remove</th>
            </tr>
            </thead>
            <tbody>
            {% for p in people %}
                <tr>
                    <td>{{ p.name }} </td>
                    <td>{{ p.email }}</td>
                    <td><a href="#" data-reflex="click->Subscription_Reflex#remove_person"
                           data-id="{{ p.id }}">Remove</a></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</form>