fixup! Add forms for adding recipes and versions

Add ingredients to version

recipes/forms.py

@@ -1,4 +1,4 @@
-from django.forms import ModelForm, BooleanField, ValidationError
+from django.forms import ModelForm, ValidationError, formset_factory
 from .models import Recipe, Version, Ingredient
 
 class VersionForm(ModelForm):
@@ -15,4 +15,9 @@ class VersionForm(ModelForm):
 			raise ValidationError('A recipe version with this slug already exists.')
 		return slug
 
-# use_author_user = BooleanField(initial=True)
+class IngredientForm(ModelForm):
+	class Meta:
+		model = Ingredient
+		fields = ['text']
+
+IngredientFormSet = formset_factory(IngredientForm, extra=1)

recipes/templates/add-version.html

@@ -1,11 +1,40 @@
 {% extends "base_main.html" %}
 {% block title %}{{ recipe.title }}{% endblock %}
 {% block main %}
-<form action="" method="post">
+<form action="" method="post" id="add-version-form">
 	{%csrf_token %}
 	<table>
-		{{ form.as_table }}
+		{{ version_form.as_table }}
 	</table>
+	{{ ingredients_formset.management_form }}
+	{% for ingredient_form in ingredients_formset %}
+		{{ ingredient_form.as_div }}
+	{% endfor %}
+	<button id="add-ingredient" type="button">Add Ingredient</button>
 	<input type="submit" value="Submit">
 </form>
+
+<script>
+	let firstIngredientDiv = document.querySelector("input[id^=id_ingredient][id$=text]").parentElement;
+	let addIngredientButton = document.querySelector("#add-ingredient");
+	let form = document.querySelector("#add-version-form");
+	let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");
+
+	addIngredientButton.addEventListener('click', addIngredient);
+
+	function addIngredient(e) {
+		let nextIngredientIndex = document.querySelectorAll("input[id^=id_ingredient][id$=text]").length
+		e.preventDefault();
+
+		let newIngredientDiv = firstIngredientDiv.cloneNode(true);
+		let formRegex = new RegExp('ingredient-(\\d){1}-', 'g');
+
+		newIngredientDiv.innerHTML = newIngredientDiv.innerHTML.replace(formRegex, `ingredient-${nextIngredientIndex}-`);
+
+		form.insertBefore(newIngredientDiv, addIngredientButton);
+		totalIngredientFormsInput.setAttribute('value', `${nextIngredientIndex + 1}`);
+	}
+
+</script>
+
 {% endblock %}

recipes/views.py

@@ -1,6 +1,6 @@
 from django.shortcuts import render, get_object_or_404
 from .models import Recipe, Version
-from .forms import VersionForm
+from .forms import VersionForm, IngredientFormSet
 from django.contrib.auth.decorators import login_required, permission_required
 from django.urls import reverse
 from django.http.response import HttpResponseRedirect
@@ -36,23 +36,34 @@ def recipe(request, slug):
 	else:
 		return render(request, 'recipe.html', context={'recipe': recipe, 'versions': versions})
 
+VERSION_FORM_PREFIX = 'version'
+INGREDIENTS_FORMSET_PREFIX = 'ingredient'
+
 @login_required
 @permission_required('recipes.add_recipe')
 def add_version(request, slug_recipe):
 	recipe = Recipe.objects.get(slug=slug_recipe)
 
 	if request.method == 'POST':
-		form = VersionForm(request.POST)
+		version_form = VersionForm(request.POST, prefix=VERSION_FORM_PREFIX)
-		form.recipe_id = recipe.id # type: ignore
+		ingredients_formset = IngredientFormSet(request.POST, prefix=INGREDIENTS_FORMSET_PREFIX)
+		version_form.recipe_id = recipe.id # type: ignore
 
-		if form.is_valid():
+		if version_form.is_valid() and ingredients_formset.is_valid():
-			version = form.save(commit=False)
+			version = version_form.save(commit=False)
 			version.author_user = request.user
 			version.recipe = recipe
 			version.save()
+
+			for ingredient_form in ingredients_formset:
+				ingredient = ingredient_form.save(commit=False)
+				ingredient.version = version
+				ingredient.save()
+
 			return HttpResponseRedirect(reverse('version', kwargs={'slug_recipe': version.recipe.slug, 'slug_version': version.slug}))
 
 	else:
-		form = VersionForm()
+		version_form = VersionForm(prefix=VERSION_FORM_PREFIX)
+		ingredients_formset = IngredientFormSet(prefix=INGREDIENTS_FORMSET_PREFIX)
 
-	return render(request, 'add-version.html', {'form': form})
+	return render(request, 'add-version.html', {'version_form': version_form, 'ingredients_formset': ingredients_formset})

templates/base.html

@@ -5,6 +5,12 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<style>
+		body {
+			max-width: 80ch;
+			margin: 0 auto;
+		}
+	</style>
 	{% load static %}
 	{% block head %}{% endblock %}
 	<title>{% block title %}Barn{% endblock %}</title>