Implement edit with modal #426

mihalikv · 2022-08-16T14:49:19Z

mihalikv
Aug 16, 2022

Hi,

I am playing around with django-unicorn and I am not sure how to integrate it properly with django ModelForm. Let's say that I want a list of objects with edit button and after a click on the edit button, modal with prefilled form is opened.

I started with a template like this:

{% load unicorn %}

<div>
  <div id="modal-1" class="modal fade" tabindex="-1" aria-labelledby="modal-1-btn" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="text-h3">title</h2>
        </div>
        <div class="modal-body">
          <div>
            {% if form %}
              {{ form.as_p }}
            {% endif %}
          </div>
        </div>
        <div class="modal-footer">
          <button unicorn:click="$validate" class="btn">Validate</button>
        </div>
      </div>
    </div>
  </div>
  <ul>
    {% for purchase in purchases %}
      <li>{{ purchase.purchase_number }}
        <button unicorn:click="set_form('{{ purchase.id }}')" id="modal-1-btn" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#modal-1">
          Edit order
        </button>
      </li>
    {% endfor %}
  </ul>
</div>

and following view:

from django import forms
from django.shortcuts import get_object_or_404
from django_unicorn.components import UnicornView, QuerySetType

from sbcore.purchase.models import Purchase


class PurchaseForm(forms.ModelForm):
    class Meta:
        model = Purchase
        fields = ['purchase_number']


class PurchaseListView(UnicornView):
    purchases: QuerySetType[Purchase] = None
    form_class = PurchaseForm
    form = None

    def mount(self):
        self.purchases = Purchase.objects.all()

    def set_form(self, purchase_id):
        purchase = get_object_or_404(Purchase, pk=purchase_id)
        self.form = self.form_class(purchase)

I am aware of that form.as_p will not work and somehow I need to add unicorn:model to the input fields but first of all, I am not sure how to pre-fill the form with some data.

adamghill · 2022-08-30T01:43:13Z

adamghill
Aug 30, 2022
Maintainer

Sorry, I missed this message from a while ago. There isn't a current way to use the built-in Django form-rendering, so you have to write the HTML manually unfortunately. https://docs.djangoproject.com/en/4.1/topics/forms/#rendering-fields-manually has information around that.

Instead of

{{ form.as_p }}

you could do something like:

<input unicorn:model="form.purchase_number" type="text"></input>

That should take the form in UnicornView and bind the input to form.purchase_number. Let me know if that doesn't work or doesn't make sense -- I can add a sample to my examples if it would be useful.

0 replies

LexxLuey · 2022-11-07T12:33:32Z

LexxLuey
Nov 7, 2022

Hello there.
I tried out the code above because I needed to use a modal to edit data just like @mihalikv but I get an error. Here is my code:

`#memberslist.py
from django_unicorn.components import UnicornView, QuerySetType
from django import forms
from django.shortcuts import get_object_or_404

from pprint import pprint

from members.models import Kid
from core.constants import AGE_GROUP_CLASSES, SEXES, STATES

class EditForm(forms.ModelForm):
class Meta:
model = Kid
fields = ("all")

class MemberslistView(UnicornView):
kids: QuerySetType[Kid] = Kid.objects.none()
first_name: str = ""
last_name: str = ""
middle_name: str = ""
nick_name: str = ""
address: str = ""
join_date: str = "10/05/2018"
dob: str = "10/05/2018"
age_group_classes: list = []
sexes: list = []
states: list = []
selected_age_group_class: int = 4
selected_sex: int = 1
selected_state: int = 37

form_class = EditForm
form = None

class Meta:
    javascript_exclude = (
        "age_group_classes",
        "sexes",
        "states",
    )


def mount(self):
    """On mount, populate the kids property w/ a QuerySet of all kids"""
    self.kids = Kid.objects.all()
    self.age_group_classes = AGE_GROUP_CLASSES
    self.sexes = SEXES
    self.states = STATES
    print(self.kids)

def add_kid(self):
    """Create the new Kid, get new list of all kids, and clear the 'name' property"""
    print()
    Kid.objects.create(
        first_name=self.first_name,
        last_name=self.last_name,
        middle_name=self.middle_name,
        nick_name=self.nick_name,
        address=self.address,
        join_date=self.join_date,
        dob=self.dob,
        age_group_class=self.selected_age_group_class,
        sex=self.selected_sex,
        state_of_origin=self.selected_state,
    )
    self.kids = Kid.objects.all()
    self.first_name = ""
    self.last_name = ""
    self.middle_name = ""
    self.nick_name = ""
    self.address = ""
    self.join_date: str = "10/05/2018"
    self.dob: str = "10/05/2018"
    self.age_group_classes: list = AGE_GROUP_CLASSES
    self.sexes: list = SEXES
    self.states: list = STATES
    self.selected_age_group_class: int = 5
    self.selected_sex: int = 3
    self.selected_state: int = 37

def delete_all(self):
    """Delete all kids and reset 'kids' property"""
    Kid.objects.all().delete()
    self.kids = Kid.objects.none()

def set_form(self, id):
    kid = get_object_or_404(Kid, pk=id)
    self.form = self.form_class(kid)`

`#models.py
from django.db import models
from core.mixins import ModelMixin

class Kid(ModelMixin):
class Sex(models.IntegerChoices):
MALE = 1
FEMALE = 2
UNKNOWN = 3

class AgeGroupClasses(models.IntegerChoices):
    CLIMBERS = 1
    TRAILBLAZERS = 2
    CHAMPIONS = 3
    WORLDCHANGERS = 4
    UNKNOWN = 5

class State(models.IntegerChoices):
    Abia = 1
    Adamawa = 2
    Akwa_Ibom = 3
    Anambra = 4
    Bauchi = 5
    Bayelsa = 6
    Benue = 7
    Borno = 8
    Cross_River = 9
    Delta = 10
    Ebonyi = 11
    Edo = 12
    Ekiti = 13
    Enugu = 14
    Gombe = 15
    Imo = 16
    Jigawa = 17
    Kaduna = 18
    Kano = 19
    Katsina = 20
    Kebbi = 21
    Kogi = 22
    Kwara = 23
    Lagos = 24
    Nasarawa = 25
    Niger = 26
    Ogun = 27
    Ondo = 28
    Osun = 29
    Oyo = 30
    Plateau = 31
    Rivers = 32
    Sokoto = 33
    Taraba = 34
    Yobe = 35
    Zamfara = 36
    FCT = 37
    Unknown = 38


first_name = models.CharField(max_length=200, null=True, blank=True)
last_name = models.CharField(max_length=200, null=True, blank=True)
middle_name = models.CharField(max_length=200, null=True, blank=True)
nick_name = models.CharField(max_length=200, null=True, blank=True)
sex = models.IntegerField(
    choices=Sex.choices, default=Sex.UNKNOWN
)
age_group_class = models.IntegerField(
    choices=AgeGroupClasses.choices, default=AgeGroupClasses.UNKNOWN
)
dob = models.DateField(null=True, blank=True)
join_date = models.DateField(null=True, blank=True)
state_of_origin = models.IntegerField(
    choices=State.choices, default=State.Unknown
)
address = models.CharField(max_length=500, null=True, blank=True)

context_object_name = 'kids'
class Meta:
    verbose_name = "kid"
    verbose_name_plural = "kids"

`